vue自定义指令
1.Vue自定义指令
除了核心功能默认内置的指令 (
v-model和v-show等)，Vue允许我们注册自定义指令用于元素上。当我们需要对普通 DOM 元素进行底层操作时，就可以用到用到自定义指令。
2. 钩子函数：
配置对象中包含一下几个钩子函数(均为可选值):
钩子函数 描述
- bind： 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted(常用)： 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update： 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated： 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind： 只调用一次，指令与元素解绑时调用。
3. 钩子函数参数：
指令钩子函数会被传入以下参数：
-
el：指令所绑定的元素，可以用来直接操作 DOM。
-
binding：一个对象，包含以下 property：
-
name：指令名，不包括 v- 前缀。
-
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 钩子中可用。
4.全局注册
全局注册自定义指令是将我们的自定义指令挂载到vue实例上的，在项目中都可以使用。
- 全局指令注册方法为：Vue.directive(dName, options) 传入两个参数
- 分别是
指令名和配置对象 - 创建完之后，我们就可以使用 v-指令名 的方式加在元素上，以使自定义指令生效
4.1使 input 进入获取焦点
import Vue from 'vue'
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
- 使用
<input v-focus />
5.局部注册
用法与 全局 注册是一样的， 只是写法稍有不同
进行局部注册时， 我们的组件中可以接收一个directives选项，
其中，键为指令名 值为配置对象
- 注册
export default{
data(){
return { ... }
},
directives:{
focus:{
inserted: function (el) {
//element-ui中 el-input外层是div, 里面包裹的才是input, 因此用在 el-input上的话，要让el-input里的子元素聚焦
//增加判断可以使我们的v-focus通用性更强
el.tagName == 'INPUT' ? el.focus() : el.children[0].focus
}
}
}
}
- 使用
<input v-focus></input>
6.项目用到的自定义指令
6.1 防抖函数：
点击按钮过快可能多次请求接口，用自定义指令做全局的函数防抖
- 在main.js中 全局注册一个自定义指令：
/**防抖函数
* @el ：指令所绑定的元素，可以用来直接操作 DOM。
* @binding :绑定的事件或者值
*/
Vue.directive('debounce', {
inserted(el, binding) {
let timer = null
el.addEventListener('click', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value();
timer = null;
}, 500)
})
}
})
- 使用
<button v-debounce="send">发送</button>
6.2节流函数
触发高频事件后，n秒内函数函数只会执行一次。
应用场景： search搜索联想，用户在不断输入值时
- 在main.js中 全局注册一个自定义指令
/**节流函数
* @el ：指令所绑定的元素，可以用来直接操作 DOM。
* @binding :绑定的事件或者值
*/
Vue.directive('throttle', {
inserted(el, binding) {
let timer = null
el.addEventListener('change', () => {
if (!timer) {
timer = setTimeout(() => {
clearTimeout(timer)
binding.value();
timer = null;
}, 100)
}
})
}
})
- 使用
<input v-throttle="changeSearch" />
