vue关于自定义指令

• 私有自定义指令（在与data()同级结构中进行配置）

// 私有自定义指令的节点
  directives: {
    // 定义名为color的指令，指向一个配置对象
    color: {
      // 当指令第一次被绑到元素上的时候，会立即触发bind函数,只会调用一次
      // 形参中的el表示当前指令所绑定到的那个dom对象
      bind(el,blinding) {
        el.style.color = blinding.value;
      },
      // 每次dom更新时调用
      update(el,blinding) {
        el.style.color = blinding.value;
      },
    }
  },

还可以写成函数的简写形式

  directives: {
    color(el,blinding) {
      el.style.color = blinding.value;
    }
  }

• 全局自定义指令（在main.js文件中进行配置，配置后，所有页面均可使用该指令）

Vue.directive('color', {
  bind(el,blinding) {
    el.style.color = blinding.value;
  },
  // 每次dom更新时调用
  update(el,blinding) {
    el.style.color = blinding.value;
  },
})

全局指令也可以写成函数的简写形式

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