自定义指令
1、定义全局指令
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
el.focus()
}
})
2、定义私有指令
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
使用:
<input v-focus>
函数简写
在很多时候,你可能想在 bind
和 update
时触发相同行为,而不关心其它的钩子。比如这样写:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
指令的钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 -
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind
:只调用一次,指令与元素解绑时调用。
钩子函数的参数
所有的指令钩子函数都会被传入一下参数:
el
:指令所绑定的元素,可以用来直接操作 DOM。binding
:一个对象,包含以下 property:name
:指令名。value
:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。expression
:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。arg
:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
vnode
:Vue 编译生成的虚拟节点。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
看下例:
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'binding.name: ' + s(binding.name) + '<br>' +
'binding.value: ' + s(binding.value) + '<br>' +
'binding.expression: ' + s(binding.expression) + '<br>' +
'binding.arg: ' + s(binding.arg) + '<br>' +
'binding.modifiers: ' + s(binding.modifiers) + '<br>'
}
})
new Vue({
el: '#hook-arguments-example',
data: {
message: 'hello!'
}
})
# 结果
binding.name: "demo"
binding.value: "hello!"
binding.expression: "message"
binding.arg: "foo"
binding.modifiers: {"a":true,"b":true}
抽取全局指令
1、将全局指令单独放在一个文件 directives.js
下
// 1、对象写法
export const test = {
inserted: function (el, binding, vnode, oldVnode) {
console.log(el, binding, vnode, oldVnode)
},
bind: function(el, binding, vnode, oldVnode) {
el.style.color = 'red'
},
update: function (el, binding, vnode, oldVnode) {
console.log(el, binding, vnode, oldVnode)
}
}
// 2、函数简写
export const focus = (el, binding, vnode, oldVnode) => {
console.log('focus', el)
el.focus()
}
2、在 main.js
中注册:
import * as directives from './directives/index'
Object.keys(directives).forEach(key => {
Vue.directive(key, directives[key])
})
防抖与节流指令
/**
* 防抖
* eg: <view v-debounce:click.wait.stop="getData">查询</view>
*/
export const debounce = {
bind: function (el, binding) {
let timer = null; // 定时器
let implement = true; //
if (binding.value && binding.arg) {
el.addEventListener(binding.arg, (e) => {
// 阻止事件冒泡修饰符
if (binding.modifiers && binding.modifiers.stop) {
e.stopPropagation();
}
timer && clearTimeout(timer);
if(binding.modifiers && binding.modifiers.wait) { // 1. 先等待后执行
timer = setTimeout(() => {
binding.value();
}, 650);
} else { // 2. 先执行后等待
implement && binding.value();
implement = false;
timer = setTimeout(() => {
implement = true;
}, 650);
}
})
}
}
};
/**
* 节流
* eg: <input v-throttle:input.wait="getData" />
*/
export const throttle = {
bind: function (el, binding) {
let timer = null;
let implement = true;
if (binding.value && binding.arg) {
el.addEventListener(binding.arg, (e) => {
// 阻止事件冒泡修饰符
if (binding.modifiers && binding.modifiers.stop) {
e.stopPropagation();
}
if (binding.modifiers && binding.modifiers.wait) { // 1. 先等待后执行
if(!timer) {
timer = setTimeout(() => {
binding.value();
clearTimeout(timer); // 内存回收
timer = null;
}, 650);
}
} else { // 2. 先执行后等待
implement && binding.value();
implement = false;
if(!timer) {
timer = setTimeout(() => {
implement = true;
clearTimeout(timer); // 内存回收
timer = null;
}, 650);
}
}
})
}
}
};