vue之自定义指令

1、自定义指令的作用

　　除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

参考文档：https://cn.vuejs.org/v2/guide/custom-directive.html

2、注册自定义指令

（1）注册全局自定义指令

  Vue.directive("指令名称", {
      inserted: function (el, binding) {
        // el 代表使用了此指令的那个 DOM 元素
        // binding 可获取使用了此指令的绑定值 等
 
        //逻辑代码
 
      }
    }
  );

（2）注册局部指令

directives:{
      "指令名称":{
        inserted:function (el,binging) {
          //逻辑代码
        }
      }
    }

注意：

• 注册时，指令名称前不要带 v-，因为内部处理会自动加上v-。
• 指令名称中间不要有大写字母，开头可以出现大写字母

（3）使用自定义指令

• 引用指令时，指令名前面加上 v-
• 直接在元素上在使用即可 ：v-指令名='表达式'

3、案例演示

　　当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

（1）全局指令实现

<div id="app">
    自动获取焦点：<input type="text" v-auto-focus>
</div>
 
<script>
    //全局指令
  Vue.directive("auto-focus", {
      inserted: function (el, binding) {
        // el 代表使用了此指令的那个 DOM 元素
        // binding 可获取使用了此指令的绑定值 等
        el.focus()
 
      }
    }
  );

（2）局部指令实现

<div id="app">
    自动获取焦点：<input type="text" v-focus>
</div>
 
<script>
  new Vue({
    el: "#app",
    data: {},
    //只在当前Vue实例中生效
    directives:{
      "focus":{
        inserted:function (el,binging) {
          //逻辑代码
          el.focus()
        }
      }
    }
  })
 
</script>

4、钩子函数

在上面使用了钩子函数inserted，实际上还有其它常用的钩子函数：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
 
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
 
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

常用钩子函数的参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。

• binding：一个对象，包含以下属性：
  　　name：指令名，不包括 v- 前缀。
  　　value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

实例：

<div id="app">
 
    <p v-get-values="msg"></p> //data中声明
 
</div>
 
<script>
 
  Vue.directive("get-values", {
 
    //样式不需要元素插入到DOM中，类似于link中的css引入一样
 
      bind: function (el) {
        el.style.color = "green"
      },
 
    inserted: function (el, binding) {
      // el 代表使用了此指令的 DOM 元素
      // binding 获取使用了此指令的绑定值
      el.innerHTML = binding.value
 
    }
  });