自定义指令
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";
});
- 使用Vue.directive 来自定义
- 第一个参数就是 指令名称 ‘line’ 必须与指令名称一致
- el 表示当前的html dom对象
- 在方法体内就可以通过 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参数实例: