前端知识点总结——VUE

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);