Vue的自定义指令

在Vue框架中，它的一大特点就是指令。框架中为我们提供了很多基础指令，但是有些需求官方提供的指令无法办到，即官方允许我们自己定义指令。

写法：v-指令名     

规定：指令都以v-开头，后跟我们自己取的指令名，注意我们取得指令名不能是官方已经声明过的

如何定义指令？

新学习一个属性directives,在里面定义我们指令的功能，写法：

directives:{
    指令名:{ 
        inserted(el,option){
        //处理程序允许我们操作页面
        }    
    }
}

这里的inserted是钩子函数，其第一个参数el为指令所在的那个元素节点，第二个option是传入的实参对象，就是v-指令名=""，引号中的变量的值。

这样创建的一个指令是局部指令，在当前new Vue()对象所关联的标签内部使用。

我们也可以定义一个全局的自定义指令，写法：

Vue.directive("指令名", {
  // 当绑定元素插入到 DOM 中。
  inserted(el) {
    // 处理程序
  }
})

指令定义函数提供了几个钩子函数（可选）

【bind】

　　只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

【inserted】

　　被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

【update】

　　所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。

【componentUpdated】

　　所在组件的 VNode 及其孩子的 VNode 全部更新时调用。

【unbind】

　　只调用一次， 指令与元素解绑时调用。

注意区别：

bind与inserted：bind时父节点为null，inserted时父节点存在；

update与componentUpdated：update是数据更新前，componentUpdated是数据更新后。

钩子函数参数

第一个参数：指令所绑定的元素，可以用来直接操作 DOM。

第二个参数（可选）：一个对象，包含指令名称及该指令所绑定的表达式信息。

第三个参数（可选）：Vue 编译生成的虚拟节点。

第四个参数（可选）：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

动手敲一敲，写一个修改字体大小的指令

 <div id="box">
        <div v-size="fs">{{msg}}div>
    div>
    <script>
        new Vue({
            el: "#box",
            data: {
                msg:"基尼太没",
                fs:"30px"
            },
            directives: {
                size:{
                    inserted(el,option){
                        console.log(option);
                        el.style.fontSize=option.value
                    }
                }
            }
        })
    script>

效果：

 

补充：nextTick()函数，类似于window.onload()，在这个函数内传入的回调函数，是在组件加载完了才会执行。

学习了生命周期函数以后  会有一个问题:我们在写业务时  总是会考虑一个事情: 现在正在写的业务代码能否操作vm.所以我们需要一个工具  就是让我们写的代码 无论在哪里写  都希望它是组件加载完了以后才运行

例如：在beforecreat(){}，vm对象还没创建完成时都可以在这个函数通过nextTick()操作vm对象

代码说明：

 <div id="box">
        {{msg}}
    div>
    <script>
        new Vue({
            el:"#box",
            data:{
                msg:"666"
            },
            beforeCreate() {
                this.$nextTick(()=>{
                    this.msg=777
                })
            },
            
 
        })
    script>

 这时页面打印的不是666，而是777