目录
自定义指令
钩子函数参数
使用
什么时候用
在Vue体系下创建一个自定义指令
使用自定义指令及示例要求
全局注册一个自定义指令
自定义指令
全局创建vue自定义指令
Vue.directive("demo", {
// 只调用一次，指令第一次绑定到元素时调用。
// 在这里可以进行一次性的初始化设置。
bind: function(el, binding, vnode) {},
// 被绑定元素插入父节点时调用
// (仅保证父节点存在，但不一定已被插入文档中)。
inserted: function(el, binding, vnode) {},
// 所在组件的VNode 更新时调用，
// 但是可能发生在其子VNode更新之前。
// 指令的值可以发生了改变，也可能没有，
// 但是可以通过比较更新前后的值来忽略不必要的模板更新
update: function(el, binding, vnode, oldVnode) {},
// 指令所在组件的VNode及其子VNode全部更新后调用。
componentUpdate: function(el, binding, vnode, oldVnode) {},
// 只调用一次，指令与元素解绑时调用。
unbind: function(el, binding, vnode) {}
});- bind中el.parentNode为null
- inserted中可以通过el.parentNode访问当前节点的父节点
- 可以比较oldVnode和vnode之间的差异来判断模板是否需要更新，以减少不必要的模板更新，从而一定程度提高组件性能。
钩子函数参数
function(
// 指令所绑定的元素，可以用来直接操作DOM
el,
// binding一个对象，包含以下属性
{
// 指令名，不包括v-前缀。
name，
// 指令的绑定值，例如：v-my-directive="1 + 1"中，
// 绑定值为 2。
value,
// 指令绑定的前一个值,
// 仅在update和componentUpdated钩子中可用。
oldValue,
// 字符串形式的指令表达式。
// 例如 v-my-directive="1 + 1"中，表达式为"1 + 1"。
expression,
// 传给指令的参数， 可选。
// 例如 v-my-directive:foo 中，参数为"foo"。
arg,
// 一个包含修饰符的对象。
// 例如：v-my-directive.foo.bar 中,
// 修饰符对象为{ foo: true, bar: true }。
modifiers
},
// Vue 编译生成的虚拟节点
vnode,
// 上一个虚拟节点，仅在update和componentUpdated 钩子中可用。
oldVnode
)除了el之外，其他参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。
使用
什么时候用
当我们的methods中存在操作DOM/BOM的逻辑的时候，就该思考是否可以抽象成一个自定义指令。
在Vue体系下创建一个自定义指令
使用自定义指令及示例要求
<template>
<!-- 1. v-resize 指令， 监听浏览器窗口大小改变的时候， 通过监听函数 onResize 响应-->
<!-- <div v-resize="onResize">window width is： {{ length }}</div> -->
<!-- 2. 可通过 direction，控制监听页面高度 或者 宽度的变化 -->
<div v-resize:[direction].quiet="onResize">window Height is： {{ length }}</div>
<!-- 3. 可通过 修饰符 .quiet 来控制是否在 指令初始化的时候 响应onResize函数 -->
<!-- <div v-resize.quiet="onResize">window width is： {{ length }}</div> -->
<!-- <div v-resize="onResize">window width is： {{ length }}</div> -->
</template>
<script>
export default {
data() {
return {
direction: "vertical",
length: 0
};
},
methods: {
onResize(length) {
this.length = length;
}
}
};
</script>全局注册一个自定义指令
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
Vue.directive("resize", {
inserted(el, binding) {
// 取出回调函数
const callback = binding.value;
const direction = binding.arg;// 横纵类型的参数
const modifiers = binding.modifiers;// true初始化不执行，false初始化执行
const result = () => { // vertical 高，other 宽
return direction === "vertical" ? window.innerHeight : window.innerWidth;
};
// 要执行的回调函数
const onResize = () => callback(result());
// 监听浏览器事件
window.addEventListener("resize", onResize);
if (!modifiers || !modifiers.quiet) {
onResize();
}
// 数据共享一下
el._onResize = onResize;
},
unbind(el) {
if (!el._onResize) return;
// 存在数据，删除监听，删除共享数据
window.removeEventListener("resize", el._onResize);
// 删除
delete el._onResize;
}
});
new Vue({
render: h => h(App)
}).$mount("#app");
