vue创建自定义指令-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

vue创建自定义指令

作用：操作dom

使用场景：对纯 DOM 元素进行底层操作，比如：文本框获得焦点

自定义指令分为：全局自定义指令、局部自定义指令

全局指令

示例：
功能：完成输入框的获取焦点操作
<div id="app">
    <!-- 使用 自定义指令，在自定义指令的前面添加 v- 前缀 -->
    <input type="text" v-model="msg" v-if="isShow" v-focus:foo="123 + 1">
</div>


<script>
    // 创建全局指令
    // 第一个参数：表示指令的名称，不带 v- 前缀
    // 第二个参数：表示一个配置对象，对象中是指令的 钩子函数
    /* Vue.directive('focus', {
      // inserted 在元素被插入到页面中的时候调用
      inserted: function (el) {
        // el 表示当前元素, 是一个DOM对象
        el.focus()
      }
    }) */


    Vue.directive('focus', {
      // 指令的钩子函数--第一次绑定元素时调用
      bind(el) {
        console.warn('指令的钩子函数：bind');
        console.log(el);
        // el.focus()
      },
      
      // inserted 在元素被插入到页面中的时候调用---vm实例的钩子函数
      inserted: function (el, binding) {
        console.warn('指令的钩子函数：inserted');
        
        // binding是一个对象，包括指令的所有信息
        console.log(binding);

        // 其中foo是指令参数--可以打印看看
        console.log(binding.arg);
        
        // el 表示当前元素, 是一个DOM对象
        el.focus()
      },
      
      // 指令的钩子函数，只调用一次，指令与元素解绑时调用（即当标签被删除时）。
      unbind() {
        // 当指令所在的元素，从页面中移除的时候，unbind钩子函数会被执行
        console.warn('指令的钩子函数：unbind');
      }
    })

    var vm = new Vue({
      el: '#app',
      data: {
        msg: '',
        isShow: true
      }
    })
  </script>

局部指令

用法和全局指令一样，只是在vm实例内部定义，只能被这一个实例使用，而全局只能可以被多个实例使用。

示例：
功能：完成输入框的获取焦点操作
<div id="app">
    <!-- 使用 自定义指令，在自定义指令的前面添加 v- 前缀 -->
    <input type="text" v-model="msg" v-if="isShow" v-focus:foo="123 + 1">
</div>

<script>
  // 实现的功能一样 
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '',
        isShow: true
      },
      directives:{
        focus:{
          // 创建局部指令
          // inserted 在元素被插入到页面中的时候调用---vm实例的钩子函数
          inserted: function (el, binding) {
            console.warn('指令的钩子函数：inserted');

            // binding是一个对象，包括指令的所有信息
            console.log(binding);

            // 其中foo是指令参数--可以打印看看
            console.log(binding.arg);

            // el 表示当前元素, 是一个DOM对象
            el.focus()
  		  })
        }
      }
    })
  </script>

详解自定义指令钩子函数

链接地址：https://cn.vuejs.org/v2/guide/custom-directive.html

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用 (父节点存在即可调用，不必存在于 document 中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
unbind：只调用一次，指令与元素解绑时调用。
接下来我们来看一下钩子函数的参数 (包括 el，binding，vnode，oldVnode)。

钩子函数参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：name：指令名，不包括 v- 前缀。value：指令的绑定值，例如：v-my-directive="1 + 1", value 的值是 2。oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression：绑定值的字符串形式。例如 v-my-directive="1 + 1" ，expression 的值是 "1 + 1"。arg：传给指令的参数。例如 v-my-directive:foo，arg 的值是 "foo"。modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

简写模式

大多数情况下，我们可能想在 bind 和 update 钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

转载于:https://my.oschina.net/shuaihong/blog/1553320