前端Vue2-Day51

自定义指令：

函数式/对象式：

// 函数式
directives: {
                // 指令与元素成功绑定时执行。
                // 指令所在模板被重新解析时也执行，
                big(element, binding) {
                    element.innerText = binding.value * 10
                }
            }

// 对象式
directives: {
                fbind: {
                    // 指令与元素成功绑定时执行(初始化时)
                    bind(element, binding) {
                        element.value = binding.value
                    },
                    // 指令所在元素被插入页面时调用
                    inserted(element) {
                        element.focus()
                    },
                    // 指令所在模板被重新解析时
                    update(element, binding) {
                        element.value = binding.value
                        element.focus()
                    }
                }
            }

全局自定义指令：Vue.directive(指令名，回调函数) 或 Vue.directive(指令名，配置对象)

 

配置对象中常用的三个回调函数：

• bind：指令与元素成功绑定后调用(初始化)
• inserted：指令所在元素被插入页面时调用
• update：指令所在模板结构重新解析时调用

故函数式自定义相当于配置对象的bind函数和update函数的合体形式。

指令定义时不加v-，使用时加。若指令名指定多个单词，要用短横杠链接法命名。

 

mounted属性函数(生命周期函数)：在Vue完成模板解析并把初始的真实DOM放入页面后(挂载完毕)执行mounted函数：类似于onload

生命周期：Vue在关键时刻调用的一些特殊名称的函数

① 又名：生命周期回调函数、生命周期钩子、生命周期函数。

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

③ 生命周期函数内的this执行是Vue或实例对象。

vm.$destroy()：完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。

大多数场景不会使用该方法。

 

VM生命周期总结：

将要创建：调用beforeCreate

创建完毕：调用created

将要挂载：调用beforeMount

挂载完毕：调用mounted：一般在此进行初始化操作：发送Ajax请求、启动定时器、绑定自定义事件、订阅消息等。

将要更新：调用beforeUpdate

更新完毕：调用updated

将要销毁：调用beforeDestroy：一般在此进行收尾工作：清除定时器、解绑事件、取消订阅消息等。

销毁完毕：调用destroyed

 

销毁Vue实例：① 销毁后自定义事件失效、原生DOM事件仍存在。② 一般不会在beforeDestroy中操作数据，即使改变数据也不会触发更新流程。