自定义指令——对象式

directives

directives:{
    fbind:{//此处为自定义指令名称
        //指令与元素成功绑定时执行
        bind(element,binding){

        },
        //指令所在元素被插入页面时执行
        inserted(element,binding){
            
        },
        //指令所在的模板被重新解析时执行
        update(element,binding){

        }
    }
}

完整写法展示：

'big-number':function(element,binding){
    
}

定义全局指令时：

Vue.directive('fbind',{
    //指令与元素成功绑定时执行
    bind(){

    },
    //指令所在元素被插入页面时执行
    inserted(){

    },
    //指令所在的模板被重新解析时执行
    update(){

    }
})

自定义指令中的this都是指向window的

生命周期


//在数据监测和数据代理创建之前
beforeCreate(){
    
}
//在数据监测和数据代理创建之后
created(){
    
}
//在虚拟DOM转为真实DOM之前执行
beforeMount(){
    
}
//Vue完成模板的解析并把真实的DOM元素放入页面后调用mounted
//重要的钩子，常在其中 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
mounted(){

}
//在数据更新后，但页面未渲染前执行
beforeUpdate(){

}
//数据是新的页面也是新的
updated(){
    
}
//此时vm中的所有：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。
//重要的钩子
beforeDestroy(){
    
}
destroyed(){
    
}

销毁流程

完全销毁一个实例。清理它与其他实例的链接，解绑它的全部指令及事件监听器（自定义事件）

this.$destroy()

进入销毁流程后，所有对数据的修改都不会再更新页面。

4对生命周期函数