美文网首页
vue自定义指令

vue自定义指令

作者: G_石头 | 来源:发表于2018-07-04 22:06 被阅读0次

    除了内置的指令外,Vue 也允许注册自定义指令。

    vue用Vue.directive(id,definition)方法注册一个全局自定义指令,它接受两个参数,指令ID和定义对象。也可以用directives注册一个局部自定义指令。

    // 注册一个全局自定义指令 `v-my-directive`
    Vue.directive('my-directive', {
      // 钩子函数    当指令第一次绑定到 DOM 中时……
      bind: function (el) {
    
      }
    })
    // 注册一个局部自定义指令
    directives: {
      my-directive: {
        bind: function (el) {
          
        }
      }
    }
    

    一个指令定义对象可以提供如下几个钩子函数:

    • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    • inserted:被绑定元素插入父节点时调用 。

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

    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    • unbind:只调用一次,指令与元素解绑时调用。

    钩子函数的参数:

    • el:指令所绑定的元素,可以用来直接操作 DOM 。
    • vm : 拥有该指令的上下文。
    • binding:一个对象,包含以下属性:
      • name:指令名,不包括 v- 前缀。
      • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
      • oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
      • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
      • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
      • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
    • vnode:Vue 编译生成的虚拟节点。 点击VNode API 了解更多。
    • oldVnode:上一个虚拟节点,在 updatecomponentUpdated 钩子中可用
    <div id="demo" v-demo-directive="LightSlateGray : msg"></div>
    
        Vue.directive('demoDirective', {
            bind: function () {
                this.el.style.color = '#fff'
                this.el.style.backgroundColor = this.arg
            },
            update: function (value) {
                this.el.innerHTML =
                        'name - '       + this.name + '<br>' +
                        'raw - '        + this.raw + '<br>' +
                        'expression - ' + this.expression + '<br>' +
                        'argument - '   + this.arg + '<br>' +
                        'value - '      + value
            }
        });
        var demo = new Vue({
            el: '#demo',
            data: {
                msg: 'hello!'
            }
        })
    

    如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法的 JavaScript 表达式。

    <div v-demo="{ color: 'white', text: 'hello!' }"></div>
    Vue.directive('demo', function (el, binding) {
      console.log(binding.value.color) // => "white"
      console.log(binding.value.text)  // => "hello!"
    })
    

    高级选项

    • deep
      如果你希望在一个对象上使用自定义指令,并且当对象内部嵌套的属性发生变化时也能够触发指令的 update 函数,那么你就要在指令的定义中传入 deep: true。
       <div id="demo" v-my-directive="obj"></div>
        Vue.directive('my-directive', {
          deep: true,
          update: function (obj) {
            // 当 obj 内部嵌套的属性变化时也会调用此函数
          }
        })
    let demoVM = new Vue({
         el:"#demo",
         data:{
            a:{b:{c:2}}
         }
    })
    
    • twoway
      如果你的指令想向 Vue 实例写回数据,你需要传入 twoWay: true 。该选项允许在指令中使用 this.set(value)。
    Vue.directive('example', {
      twoWay: true,
      bind: function () {
        this.handler = function () {
          // 把数据写回 vm
          // 如果指令这样绑定 v-example="a.b.c",
          // 这里将会给 `vm.a.b.c` 赋值
          this.set(this.el.value)
        }.bind(this)
        this.el.addEventListener('input', this.handler)
      },
      unbind: function () {
        this.el.removeEventListener('input', this.handler)
      }
    })
    let demo = new Vue({
         el:"#demo",
         data:{
            a:{b:{c:2}}
         }
    })
    

    相关文章

      网友评论

          本文标题:vue自定义指令

          本文链接:https://www.haomeiwen.com/subject/etvyuftx.html