最近看了点halo博客项目的源码,发现由于不是前后端分离,代码平添许多复杂性,自己想添加功能或者修改前端样式,都不太方便。就想着把项目改成前后端分离。
由于之前学过点Vue,现在就再拿起来了。
Vue笔记
- VueComponent.prototype.__proto__= Vue.prototype。
- Vue是特殊的VueComponent,类似于面向对象的继承。
- 一个子组件对应一个VueComponent对象实例。
- DOM中的非普通属性(v-bind或者:),会被绑定到VueComponent对象上(即props传递)。
- 数据在哪个组件中定义,就到哪个组件中修改
一些细节
-
data写成函数,返回完全独立的对象,不被共用,每个VueComponent实例拥有独立的一份。
-
computed,从data数据经处理而来,有缓存机制。
-
v-model实际含义如下
<input v-model="searchText">
相当于
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >
-
事件处理及常用修饰符(stop、once、prevent、passive、capture、self)等。
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
-
Vue对数据的监视默认浅层,对于数组或对象内部元素属性的修改,无法监视。
-
watch默认浅层监视,深层监视设置deep为true。
-
生命周期
Vue组件生命周期 -
模板解析
有些 HTML 元素,诸如<ul>
、<ol>
、<table>
和<select>
,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如<li>
、<tr>
和<option>
,只能出现在其它某些特定的元素内部。使用is属性可以解决<table> <tr is="blog-post-row"></tr> </table>
-
关于filter
-
组件内部定义
filters:{ function(value, a,b ){ return value.slice(a, b) } }
-
全局注册
Vue.filter('filter-name', function(){})
-
-
关于mixin
mixin可以用于组件之间公共的、复用的配置,像VueOption一样定义,使用方法类似filter,全局与局部。
-
关于插件
插件在Vue启动之前进行前置工作,如配置全局过滤器、全局mixin等。
/*插件中注册过滤器*/ export default { install(Vue) { Vue.filter('mySlice', slice); } } /*插件中添加mixin*/ export default { install(Vue, a, b, c) { Vue.mixin(mixin); console.log("参数是", a, b, c); } } /*插件中修改原型对象*/ export default { install(Vue, a) { console.log(Vue); Vue.prototype.sayHello = function () { alert(a); } } }
父子通信的方法总结
父组件传递给子组件
- props
props由父组件传自子组件,子组件中,可以像data中数据一样使用,但不建议修改,只读取
当组件返回单个根节点时,非 prop 的 attribute 将自动添加到根节点的 attribute 中,同样的规则适用于事件监听器。
当返回的不是根节点时(Vue3),使用v-bind:$attrs指定attribute接受
delCompeleted: {
type: Function,
required: true,
},
todoItems: {
type: Item,
required: true,
},
todoItemCount: {
type: Number,
required: true,
}
子组件传递给父组件
- 父组件传递函数给子组件,在子组件中调用。
可以理解为在子组件中,this.parent.targetFunction() - 子组件emit事件。
子组件中,this.$emit('event-name', arg0, arg1)
父组件中@event-name="eventHandler" - 使用ref
子组件中,this.$emit('event-name', arg0, arg1)
this.$refs.child.$on('event-name', this.eventHandler) - 全局事件总线$bus
任意组件间通信new Vue({ render: h => h(App), beforeCreate() { /*安装全局事件总线*/ Vue.prototype.$bus = this; } }).$mount('#app'); /* 事件处理组件 */ beforeMount() { this.$bus.$on("show-name", (name) => alert(name)); }, beforeDestroy() { this.$bus.off('show-name'); } /* emit事件的组件 */ this.$bus.$emit('show-name', this.name);
- 消息订阅发布
pubsub-js库,工作模式类似事件总线
Q.E.D.