1.自定义指令
1、创建和使用
Vue.directive('change',{
bind:function(el,bindings){
//首次调用
},
update:function(el,bindings){
//只要是有数据变化,都会调用
},
unbind:function(){
//解绑
}
})
<any v-change="count"></any>
2.过滤器
过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理,变成我们想要的数据
过滤器的本质 就是一个带有参数带有返回值的方法
Vue1. 支持内置的过滤器,但是Vue2. 就不再内置过滤器,但是支持自定义过滤器。
1、过滤器的创建和使用
1.创建
Vue.filter(
'myFilter',
function(myInput){
//myInput是在调用过滤器时,管道前表达式执行的结果
//针对myInput,按照业务需求做处理
//返回
return '处理后的结果'
})
2.使用
<any>{{expression | myFilter}}</any>
2、如何在调用过滤器时,完成参数的发送和接受
1.发送
<any>{{expression | myFilter(参数1,参数2)}}</any>
2.接受
Vue.filter('myFilter',function(myInput,参数1,参数2){
return '处理后的结果'
})
3.生命周期
四个阶段:
create 准备工作 (数据的初始化。。。)
mount 挂载前后针对元素进行操作
update 数据发生变化,
destroy 清理工作 (关闭定时器、集合清空..)
beforeCreate/created
beforeMount/mounted
beforeUpdate/updated
beforeDestroy/destroyed
4.组件间通信
1、父与子通信 (props down)
1.发送
<son myName='zhangsan'>
</son>
2.接受
到son组件:
Vue.component('son',{
props:['myName'],
template:`
<p>{{myName}}</p>
`
})
2、子与父通信 (events up)
1.绑定
methods:{
handleEvent:function(msg){}
}
<son @customEvent="handleEvent"></son>
2.触发
子组件内部:
this.$emit(‘customEvent’,100);
3、ref(reference 引用/参考 外号)
帮助在父组件中 得到子组件中的数据、方法。
1.指定ref属性
<son ref="mySon"></son>
2.根据ref得到子组件实例
this.$refs.mySon
4、$parent
this.$parent得到父组件的实例
5、兄弟组件通信
1.var bus = new Vue();
2.接收方
bus.$on('eventName',function(msg){})
3.发送方
bus.$emit('eventName',123);