Vue--自定义指令

什么是自定义指令？        

        在Vue中，Vue官方提供了一些常用的指令：v-text 、v-for、v-if、v-show、v-model 等常用的指令

        这些指令能满足日常的开发，但是一些特殊的场景，就需要用到了自定义指令。

        自定义指令是Vue提供的一种扩展方式，允许在你自定义内置的指令功能。通过自定义指令，可以创建自己的指令，这些指令可以在元素上去使用，并且可以定义它们的行为。

自定义指令的分类

        分为两种

        私有自定义指令

        全局自定义指令

私有自定义指令

        简单来讲，就是在组件内去创建一个只有在组件内才能使用的指令

那么如何去声明呢？

        这个就需要在 directives 节点下去声明私有自定义指令

代码如下：

// 私有自定义指令放在 deactivated 节点下
directives: {
    // 定义 big 自定义指令 
    // 后面写配置对象
    big(el, binding, vnode, oldVnode) {
        console.log(el, binding, vnode, oldVnode)
        el.innerText = binding.value * 10
  }
}

接收的四个钩子函数分别为：

• el：指令所绑定的元素，是真实 DOM节点，可以通过该元素来操作 DOM
• binding：一个对象，里面包括很多属性，但是基本上只关注 value 属性，因为这是 指令绑定的值
• vnode：Vue 编译生成的虚拟节点
• oldVnode：Vue 编译生成的上一个虚拟节点(仅在 update 和  componentUpdated 使用) 
   

我们也可以得知：

        可以写成函数式也可以写成对象式

        注册的自定义指令是并不需要返回值的，而是通过直接操作 DOM 元素，来更改页面展示

        一旦自定义指令绑定的数据发生了变化，那么自定义指令就会被调用

全局自定义指令

        通过 Vue.directive（）方法在 main.js 文件内去定义全局自定义指令

代码如下：

// 函数式的全局自定义指令
Vue.directive('big', (el, binding) => {
  el.value = binding.value
})

// 对象式的全局自定义指令
Vue.directive('big', {
    bind(el, binding) {
      el.value = binding.value
    },
    inserted(el, binding) {
      el.focus()
    },
    update(el, binding) {
      el.value = binding.value
    }
  }
)

接收两个参数：

第一个是字符串形式的指令名称

第二个是指令处理方式( 可以是函数式，也可以是对象式，具体就是把局部的处理函数或处理对象完整粘贴过来就行)