前端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或实例对象。