Vue--自定义指令（钩子、参数）

vue本身定义的指令：

-- v-xxx，都是以v-开头（如v-on，v-bind，v-if，v-for.....)，写在标签上。

自定义指令directive：

-- v-xxx，都是以v-开头，写在标签上。

-- 全局自定义指令: 在所有的vue实例都可以使用；

-- 局部自定义指令: 在当前的vue实例可以使用；

例：自定义 自动获取焦点指令v-focus

Vue.directive("focus", {
      bind() {    // 第一次绑定到元素时调用
        console.log("绑定到元素");
      },
      inserted() {   // 被绑定元素插入父节点时调用
        console.log("被绑定元素插入父节点");
      },
      update() {     // vue实例更新的时候调用
        console.log("vue实例更新");
      },
    });

给标签设置该指令：

<input type="text" v-focus v-if="flag" v-model="word" />

参数详解：

bind(el, binding) {
   // 第一个参数el: 绑定指令的那个标签的dom节点
    console.log(el);
    // 第二个参数binding: 是一个对象，记录了所有和指令有关的内容
    console.log(binding);
}，
inserted(el) {
   el.focus();
},
update() {
   console.log("vue实例更新");
}

局部自定义指令：

let vm1 = new Vue({
  el: "#app",
  directives: {
  // 只能用于当前实例，其他实例不能使用
  pos: function (el, binding) {
  el.style[binding.arg] = binding.expression + "px";
  console.log(this);
  },
 },
});