vue 指令的使用

指令的定义

通过全局API的定义

    Vue.directive

定义指令的多种方式

• 简单定义

  Vue.directive('test', function(el, binding, vnode) {
    // el 是当前元素
    el.style="color:" + binding.value;
    console.log(binding);
    // binding 是一个指令中的对象
    // binding.name
    // binding.expression
    // binding.value 自定义指令的值
    // binding.name
  })

• 定义带有钩子函数的指令

// 复杂的设置指令的方法，指令的生命周期
  Vue.directive('test2', {
    bind() {
      // bind只执行一次，在初始化时执行
      console.log('bind')
    },
    inserted() {
      // 被绑定元素插入父节点时即可调用
      console.log('inserted')
    },
    update() {
      // 被绑定元素模板更新时调用
      console.log('update')
    },
    componentUpdated() {
      // 被绑定元素所在模板更新时调用
      console.log('componentUpdated');
    },
    unbind() {
      // 只调用一次，即在指令与元素解绑时调用
      console.log('unbind');
    }
  });

完整例子演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
  <div id="app">
    <div v-test="color">{{msg}}</div>
    <div>{{num}}</div>
    <div><button @click="add">Add</button></div>
    <h3 v-test2="color" @click="unbind">test{{num}}</h3>
  </div>
</body>
</html>
<script>
  // 第一种定义指令的方法: 简单设置一个指令
  Vue.directive('test', function(el, binding, vnode) {
    // el 是当前元素
    el.style="color:" + binding.value;
    console.log(binding);
    // binding 是一个指令中的对象
    // binding.name
    // binding.expression
    // binding.value 自定义指令的值
    // binding.name
  })

  // 复杂的设置指令的方法，指令的生命周期
  Vue.directive('test2', {
    bind() {
      // bind只执行一次，在初始化时执行
      console.log('bind')
    },
    inserted() {
      // 被绑定元素插入父节点时即可调用
      console.log('inserted')
    },
    update() {
      // 被绑定元素模板更新时调用
      console.log('update')
    },
    componentUpdated() {
      // 被绑定元素所在模板更新时调用
      console.log('componentUpdated');
    },
    unbind() {
      // 只调用一次，即在指令与元素解绑时调用
      console.log('unbind');
    }
  });

  var app = new Vue({
    el: '#app',
    data: {
      msg: 'Hello',
      color: 'pink',
      num: 6
    },
    methods: {
      add() {
        this.num ++;
      },
      unbind() {
        app.$destroy(); // 此处会销毁全部指令
      }
    }
  })
</script>