vue: 自定义指令

内置指令v-html、v-on。 v-是值这是特殊的vue的指令，html是值增加html元素，on是值绑定事件。

自定义指令:

官方文档: https://cn.vuejs.org/v2/guide/custom-directive.html

Vue.directive()定义全局指令

在入口文件main.js中

第一个参数: 定义指令名字

第二个参数: 是对象形式的配置项，有5个钩子函数

第一个钩子函数: bind(){}当绑定指令的时候出发

第一个钩子函数中的第1个参数: el dom元素

第一个钩子函数中的第2个参数: binding 接收参数(只读属性)

第一个钩子函数中的第3个参数: vnode 虚拟dom(只读属性)

第二个钩子函数: update(){}当数据更新时候会触发该函数

第二个钩子函数中的第1个参数: el dom元素

第二个钩子函数中的第2个参数: binding 接收参数(只读属性)

第二个钩子函数中的第3个参数: vnode 现在的虚拟dom(只读属性)

第二个钩子函数中的第4个参数: oldvnode 以前的虚拟dom(只读属性)

第三个钩子函数: inserted(){}当dom插入的时候才会调用

跟一个钩子函数一样，同样三个参数。绑定和插入的区别，绑定是在template模板中写的时候的状态，插入是编译完插入真实html中的时候

第四个钩子函数: componentUpdated(){}当数据更新完成的时候会触发该函数

跟二个钩子函数一样，同样四个参数。

第五个钩子函数: unbind(){}解绑的时候触发该函数

跟一个钩子函数一样，同样三个参数。

        // 是入口文件main.js
Vue.directive('highlight', {
  // 5个钩子函数
  bind(el, binding, vnode) {
 
  },
  update(el, binding, vnode, oldvnode) {
    // 当p标签更新了就会触发该函数
  },
  inserted(el, binding, vnode) {
    // 插入的时候调用该函数 编译完之后插入
  },
  componentUpdated(el, binding, vnode, oldvnode) {
    // 完成更新触发该函数
  },
  unbind(el, binding, vnode) {
    // 解绑的时候触发该函数
  }
})

      

小结: 平时主要用bind和update即可，若有其他需求，可自行添加。

需求1: 写一个v-highlight操作dom改变p标签的样式

在App.vue的template写一个p标签，加上自定义属性。

        <p v-highlight>我的标签里使用了自定义指令</p>
      

自定义指令的基础用法:

        Vue.directive('highlight', {
 bind(el) {
 el.style.backgroundColor = 'red'
  },
})

      

成功。

小结: 指令本质就是操作DOM节点

需求2: 使自定义指令可以传参值

        <p v-highlight="'green'">我是自定义p</p>
      

注意: 需要是一个字符串

传进来的值会全部放在bind钩子函数的第二个参数binding中。

        Vue.directive('highlight', {
 bind(el, binding) {
 el.style.backgroundColor = binding.value
  },
})

      

成功

需求3: 可以传参数比如v-on:click、v-on:key等

        <p v-highlight:color="'gray'">我是自定义p</p>
      

我们在bind钩子函数中打印console.log(binding)参数。发现color在arg这样一项中

进行判断有没有这个color，然后可以做一些逻辑操作

        Vue.directive('highlight', {
    bind(el, binding) {
        console.log(binding)
        if(binding.arg == 'color') {
            el.style.color = binding.value
            // 有color就使用传过来的值作为颜色
        }else{
            el.style.backgroundColor = binding.value
            // 没有就把传过来的值作为背景颜色
    }
  },
})

      

修饰符

        <p v-highlight.delay ="'green'">我是自定义p</p>
      

需求4: 看能修饰符delay在不在，再就延迟3s执行

delay也在binding中，我们再打印一下。

在modifiers这里，并且是个对象。

我们判断一下它的存在:

        Vue.directive('highlight', {
    bind(el, binding) {
        var delay = 0
        if (binding.modifiers['delay']) {
            delay = 3000
        }
        setTimeout(() => {
            if (binding.arg == 'color') {
            el.style.color = binding.value
        } else {
            el.style.backgroundColor = binding.value
        }
    }, delay)
  },
})

      

3s后出来，成功。如果没有.delay直接出来了

这样也可以写。3s后字体颜色变绿

        <p v-highlight:color.delay ="'green'">我是自定义p</p>
      

布局自定义指令

在App.vue中

        <template>
  <div class="container">
    <div class="row">
      <div class="col-xs12 col-sm-8 col-sm-offset-2 col-md-6">
        <p v-local-highlight:color.delay.blink="'green'">局部指令的p</p>
        <!-- 闪烁的交替背景颜色 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    // 局部指令的定义
    'local-highlight': {
      bind(el, binding) {
        var delay = 0
        if(binding.modifiers['delay']) {
          delay = 3000
        }
        if(binding.modifiers["blink"]) {
          var firstColor = binding.value
          var secondColor = 'blue'
          var currentColor
          setTimeout(() => {
            setInterval(() => {
              currentColor === secondColor ? currentColor = firstColor : currentColor = secondColor
              if(binding.arg == 'color') {
                el.style.color = currentColor
              }else{
                el.style.backgroundColor = currentColor
              }
            }, 1000)
          }, delay)
        }else{
          setTimeout(() => {
          if(binding.arg == 'color') {
            el.style.color = binding.value
          }else{
            el.style.backgroundColor = binding.value
          }
        }, delay)
        }
        setTimeout(() => {
          if(binding.arg == 'color') {
            el.style.color = binding.value
          }else{
            el.style.backgroundColor = binding.value
          }
        }, delay)
      }
    }
  },
  methods: {
    alert() {
      alert(111)
    }
  }
}
</script>

<style>

</style>

      

可以的使用的。

我们也可以传对象。

        <p v-local-highlight:color.delay.blink="{firstColr:'green', secondColor:'red'}">局部指令的p</p>
      

再下面修改一下binding.value.firstColor或者binding.value.seconedColor就可以了。