vue自定义指令 directive小结

自定义指令
1、 无参数指令

v-line指令demo

//使用v-line指令
<div><div v-line>商店</div></div>

//定义v-line指令
Vue.directive("line", function (el) {
  el.innerHTML = el.innerHTML + " ------------ ";
  el.style.color = "blue";
});

1. 使用Vue.directive 来自定义
2. 第一个参数就是 指令名称 ‘line’ 必须与指令名称一致
3. el 表示当前的html dom对象
4. 在方法体内就可以通过 innerHTML style.color 等方式操控当前元素了

2、有参数指令

//指令使用
  <div>
      <p>封装指令，封装loading指令demo</p>
      <div v-loading="isloading">{{ loadingData }}</div>
      <div><el-button @click="update">更新</el-button></div>
    </div>

//指令定义
    Vue.directive("loading", {
  //两个参数：第一个loading和指令保持一致 第二个：是一个对象
  update(el, binding, vnode) {
    console.log(el, binding, vnode); //update三参数：el: 指令所绑定的元素，可以用来直接操作 DOM 。binding：
    if (binding.value == true) {
      const div = document.createElement("div");
      div.innerText = "加载中";
      div.setAttribute("id", "loading");
      div.style.position = "fixed";
      div.style.left = 0;
      div.style.top = 0;
      div.style.height = "100%";
      div.style.width = "100%";
      div.style.justifyContent = "center";
      div.style.alignItems = "center";
      div.style.color = "white";
      div.style.background = "rgba(0,0,0,.7)";
      document.body.append(div);
    } else {
      document.body.removeChild(document.getElementById("loading"));
    }
  },
});

1、directive钩子函数：又叫做回调函数，或者事件响应函数。 指的是，一个指令在创建过程中，经历不同生命周期的时候，vue.js
框架调用的函数。 指令定义函数提供了几个钩子函数（可选）：

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

2、钩子函数参数 钩子函数的参数有：
（1） el: 指令所绑定的元素，可以用来直接操作 DOM 。
（2）binding: 一个对象，包含以下属性：
a、 name: 指令名，不包括 v- 前缀。
b、 value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value
的值是 2。
c、 oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
d、expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” ，expression 的值是 “1 + 1”。
e、 arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是
“foo”。
f、modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象
modifiers 的值是 { foo: true, bar: true }。
（3） vnode: Vue 编译生成的虚拟节点。
（4）oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

el参数事例：

binding参数实例：

vnode参数实例：