第七章：vue2中创建自定义指令

一、指令的认识

之前介绍过vue中内置指令,当内置指令不能满足我们的需求的时候就要自己创建指令

二、指令的方式与使用

• 1、创建局部指令

  var app = new Vue({
      el: '#app',
      data: {
  
      },
      // 创建指令(可以多个)
      directives: {
          // 指令名称
          mydir1: {
              inserted(el) {
                  // 指令中第一个参数是当前使用指令的DOM
                  console.log(el);
                  console.log(arguments);
                  // 对DOM进行操作
                  el.style.width = '100px';
                  el.style.height = '100px';
                  el.style.background = '#f00';
              }
          }
      }
  })

• 2、全局指令

  Vue.directive('mydir2', {
      inserted(el) {
          console.log(el);
      }
  })

• 3、指令的使用

  <div id="app">
      <div v-mydir1></div>
      <div v-mydir2></div>
  </div>

三、指令中常见的钩子函数

钩子函数	描素
bind	只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted	被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
update	被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
componentUpdated	被绑定元素所在模板完成一次更新周期时调用
unbind	只调用一次，指令与元素解绑时使用

四、关于自定义指令参数的说明

• 1、第一个参数表示当前的DOM节点

• 2、第二个参数是一个对象

  

五、带属性值的指令

• 1、创建指令

  var mydir2 = Vue.directive('mydir2', {
      inserted(el, binding) {
          // 带属性值的指令,值是在第二个参数中
          el.innerHTML = binding.value;
      }
  });

• 2、使用指令

  <div v-mydir2="'hello word'"></div>

• 3、指令中传递一个对象

  Vue.directive('mydir3', {
      inserted(el, binding) {
          const {
              width,
              height,
              background
          } = binding.value;
          el.style.width = width;
          el.style.height = height;
          el.style.background = background;
      }
  })

  <div v-mydir3="{width:'100px',height:'100px',background:'#f00'}"></div>

• 4、指令中传递数据

  <div v-mydir4="[1,2,3]"></div>