【2】Vue - 内置指令-生命周期

1.内置指令

（1）v-text：

        ①作用：向其所在节点中渲染文本内容

        ②与插值语法的区别：v-text会替换掉节点中的内容，插值语法则不会

（2）v-html：

        ①作用：向指定节点中渲染包含html结构的内容

        ②与插值语法的区别：v-html会替换掉节点中所有的内容，插值语法不会

识别html结构

        ③html存在安全性的问题（cookie）

（3）v-cloak:（没有值）

        ①本质是一个特殊属性，Vue实例创建完毕并接管容器后，就会删掉v-cloak属性

        ②使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

 [v-cloak]{
            display: none;
        }

（4）v-once： （没有值）

        ①v-once所在节点在第一次动态渲染后，就视为静态渲染（就渲染一次）

        ②以后数据的改变都不会引起v-once所在结构的更新，可以用于优化性能

（5）v-pre：（没有值）

        ①跳过其所在节点的编译过程

        ②使用：添加在没有使用插值语法、指令语法的节点，可以加快编译

（6）自定义指令

        ①局部指令

directives: {
                big(element, binding) {
                    element.innerText = binding.value * 10
                },
              
                fbind: {
                   
                    'bind': function (element, binding) {
                        element.value = binding.value
                    },
                    inserted(element, binding) {
                        element.focus()
                    },
                    update(element, binding) {
                        element.value = binding.value
                    }

                }

        ②全局指令

        Vue.directive（指令名，配置对象）或 Vue.directive（指令名，回调函数）

 Vue.directive('big', function (element, binding) {        
            element.innerText = binding.value * 10
        })
 Vue.directive('fbind', {
            'bind': function (element, binding) {
                element.value = binding.value
            },
            inserted(element, binding) {
                element.focus()
            },
            update(element, binding) {
                element.value = binding.value
                element.focus()
            }
        })

配置对象中常用的3个回调：

        ①.bind:指令与元素成功绑定时回调

        ②.inserted:指令所在元素被插入页面时调用

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

命名规范：

        ①指令定义时不加v-，使用时要加v-

        ②指令名如果是多个单词，要使用kebab-case 多个单词之间用-连接的命名方式 

2.生命周期

（1）别名：生命周期回调函数、生命周期钩子、生命周期

（2）是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数

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

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

  mounted() {
                setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0) thi.opacity = 1
                }, 16)
            },

（5）常用的生命周期钩子

        ①mounted：发送ajax请求，启动定时器，绑定自定义事件，订阅消息等【初始化操作】

        ②beforeDestory：清除定时器、解绑自定义事件、取消订阅消失等【收尾工作】

关于销毁Vue实例：

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

        ②销毁后自定义事件会失效，但原生DOM事件依然有效

        ③一般不会在beforeDestroy操作数据，因为即便操作数据，也不会在触发更新流程

     // ① 无法通过vm访问到data中的数据、methods里的方法
            // 创建的是 数据监测 和 数据代理 （创建前）
            beforeCreate() {
                console.log('创建前')
            },
            // 可以通过vm访问到data中的数据、methods里配置的方法
            created() {
                console.log('创建完成');
            },
           
     // ② 此阶段Vue开始解析模板，生成虚拟DOM，但页面还不能显示解析好的内容 （未编译DOM结构）
            beforeMount() {
                console.log('挂载前')
            },
            // 将虚拟DOM转换为真实DOM插入页面中 对DOM的操作都是有效的
            mounted() {
                console.log('挂载完毕')
            },

     // ③ 更新流程
            // 此时数据是新的 ，但页面仍然是旧的数据 （页面尚未和数据保持同步）
            beforeUpdate() {
                console.log('即将更新前')
            },
            // 数据是新的，页面中的数据也是新的 （页面和数据保持了同步）
            updated() {
                console.log('更新完成')
            },

    //  ④ 销毁流程 （收尾的事）
            //  销毁之前（vm中所有的还是处于可用状态）
            // 关闭定时器、取消订阅消息、解绑自定义事件
            beforeDestroy() {
                console.log('销毁之前')
                console.log(this.n)
            },
            // 销毁完成
            destroyed() {
                console.log('销毁完成')
            },