Vue自定义指令和Vue生命周期

一. 自定义指令

自定义指令总结:

    1. 定义语法:

        (1).局部指令

        new Vue({

            directives:{指令名,配置对象}

        })

        或者

        new Vue({

            directives(指令名,回调函数){}

        })

        (2).全局指令

        Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

    2. 配置对象中常用的3个回调:

        (1).bind:指令与元素成功绑定时调用

        (2).inserted:指令所在元素被插入页面是调用

        (3).update:指令所在模板结构被重新解析时调用

    3. 备注

        (1).指令定义时不加v-,但使用时要加v-

        (2).指令名如果是多个单词,要使用"-"连接的命名方式,不要用小驼峰命名

二. vue生命周期

生命周期:

    1. 又名:生命周期回调函数,生命周期函数,生命周期钩子

    2. 生命周期是什么:Vue在关键时刻帮我们调用的一些特殊名称功能的函数.

    3. 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的

    4. 生命周期函数中的this指向是vm或组件实例对象

常用的生命周期钩子:

    1. mounted:发送ajax请求,启动定时器,绑定自定义事件,订阅消息等[初始化操作]

    2. beforeDestroy;清除定时器,绑定自定义事件,取消订阅消息等[收尾].

关于销毁Vue实例:

    1. 销毁后借助Vue开发者工具看不到任何信息

    2. 销毁后自定义事件会失效,但原生DOM事件依然有效

    3. 一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程

new Vue({
            el: '#myApp',
            beforeCreate() {
                console.log("beforeCreate:数据监测和数据代理创建之前,将要创建");
            },
            created() {
                console.log("created:数据监测和数据代理创建完毕,创建完毕");
            },
            beforeMount() {
                console.log("beforeMount:将要挂载");
            },
            mounted() {
                console.log("mounted:挂载完毕");
            },
            beforeUpdate() {
                console.log("beforeUpdate:数据将要更新");
            },
            updated() {
                console.log("updated:数据更新完毕");  
            },
            beforeDestroy() {
                console.log('beforeDestroy:vm将要销毁');
            },
            destroyed() {
                console.log('destroyed:vm销毁完毕');
            },
        })