Vue 如何自定义 全局指令 "Vue.directive()" 和 局部指令 "directives: {}" 详解

自定义全局指令

• 语法：

  Vue.directive ('Directive_Name',{Hook_Function:callback(el,binding)})

  第一个参为指令名称，自定义指令时不需要加 v- 前缀，调用时必须要加 v-
第二个参数为配置项，是一个对象，里面主要包含一些和自定义指令执行相关的函数，通过对象中的函数可以在特定的阶段执行相关的操作。

  • Directive_Name 自定义指令的名称（不需要加 “v-”，约定全小写）；使用指令时必须要加 v-。
  • Hook_Function 钩子函数
    • bind 当指令绑定到元素上时，就会执行该函数，执行一次；此时元素还未插入到 DOM 中去。
      • 一般执行样式相关的操作。
    • inserted 被绑定元素插入父节点时会调用该函数，执行一次。
      • 一般执行 JS 行为相关的操作。
    • update 当 vnode 更新时执行该函数，可能执行多次。
  • el 用来绑定指令的元素，是一个原生 DOM 对象。
  • binding 记录自定义指令信息的对象，包含许多属性，例如：
    • name 指令名，没有 v- 前缀。
    • value 指令的绑定值（表达式计算完成后的值）。
    • expression 指令绑定值的字符串形式（原样）。

  示例，实现文本框自动聚焦：

  HTML:

  <div id="app">
      <input type="text" name="" v-focus>
  </div>
  

  JS:

  Vue.directive('focus',{
      // bind(){} 当指令绑定到元素上时，就会执行该函数，执行一次。元素还未插入到 dom 中去，此时调用 focus() 方法无效（focus 是 原生js 的方法），所以必须在元素插入dom 之后才能调用该方法
      /*bind(el) {
           el.focus()               
        },*/
      // 有效
      inserted(el) {
          el.focus()
      },
      updated(el) {
  
      }
  })
  
  new Vue({
      el: "#app",
      data: {
          msg: '自定义指令'
      },
      methods: {
  
      } 
  })
  

  示例，设置字体颜色：

  HTML:

  <div id="app">
      <h1 v-color = "'skyblue'">自定义指令，修改字体颜色</h1>
  </div>
  

  JS:

  // 自定义全局字体颜色指令
  Vue.directive('color', {
      bind(el, binding) {
          el.style.color = binding.value  
      }
  })
  new Vue({
      el: "#app",
      data: {
          msg: '自定义全局指令'
      },
      methods: {
  
      } 
  })
  

自定义局部指令

定义方式：

• 在 Vue 实例中的 directives 属性中设置私有指令。
• new Vue({ directives: {} })

示例：

HTML:

<div id="app">
    <h1 v-fontSize = "'20px'">自定义私有指令，修改字体大小</h1>
</div>

JS:

new Vue({
    el: "#app",
    data: {'定义私有指令'},
    directives: {
        'fontSize': {
            bind(el, binding) {
                el.style.fontSize = paseInt(binding.value) + 'px'
            }
        }
    }
})

指令简写

简写的指令会写入 bind 和 update 钩子函数中。

私有指令简写方式：

'Directive_Name': callback(el, binding)

全局指令简写方式：

Vue.directive('Directive_Name', callback(el, binding))