Vue自定义指令详解
作者：Nanchen_42
这篇文章主要介绍了Vue自定义指令详解,需要的朋友可以参考下
除了一些Vue中自带的核心指令（v-model以及v-show）以外，Vue也可以自定义注册指令
就可以使用directives选项来注册指令
下面将用全局和局部的方式使用v-focus，来实现页面加载时自动获得焦点的功能
这里只用到了inserted和el参数即可实现
第一种全局写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<p>页面载入时，input元素自动获取焦点：</p>
<input type="text" v-focus>
</div>
<script>
Vue.directive('focus', {
inserted(el) {
el.focus()
}
});
const app = new Vue({
el:"#app",
})
</script>
</body>
</html>第二种局部写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>局部写法</title>
</head>
<body>
<div id="app">
<p>页面载入时，input元素自动获取焦点：</p>
<input type="text" v-focus>
</div>
<script>
const app = new Vue({
el:"#app",
methods:{
},
// 注意：这里加s，在全局写法中无需加s
directives:{
focus:{
inserted(el){
el.focus();
}
}
}
})
</script>
</body>
</html>
指令定义函数提供了几个钩子函数（可选）：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。
钩子函数的参数有：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding: 一个对象，包含以下属性：
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值， 例如：
v-my-directive="1 + 1", value 的值是2。 - oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的表达式或变量名。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 传给指令的参数。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一个包含修饰符的对象。 例如：
v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。
了解自定义指令的相关参数，这里是说能用到的，看下面代码
效果如下图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>了解自定义指令的相关参数</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app" v-num:hello.a.b="message">
</div>
<script type="text/javascript">
Vue.directive('num',{
bind(el,binding){
var s= JSON.stringify;
el.innerHTML =
'name:' + s(binding.name)+'<br>'+
'value' + s(binding.value) + '<br>' +
"expression"+s(binding.expression) +'<br>'+
"arg"+ s(binding.arg)+'<br>'+
'modifiers'+s(binding.modifiers)+'<br>'
}
})
const vm = new Vue({
el:'#app',
data(){
return{
message:'你好'
}
},
})
</script>
</body>
</html> 
一般binging里面这五种方法会被用到
无需其他钩子函数的简化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app" v-num="{color:'gray',text:'NanChen'}">
<!-- 我这里只想设置message的值的颜色就可以不用到钩子函数，直接进行简写 -->
</div>
<script type="text/javascript">
Vue.directive('num',function(el,binging){
console.log(el);
console.log(binging.value);
// 把获取到的文字给el并显示出来
el.innerHTML = binging.value.text
// 把获取到的颜色传给el样式
el.style.backgroundColor = binging.value.color
})
const vm = new Vue({
el:'#app',
})
</script>
</body>
</html>效果如下：
当然也可以写多个自定义指令：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- 自定义指令中如果是对象则使用value来显示值，如果是变量那就使用expression -->
<div id="app" v-num="{color:'gray',text:'NanChen'}" v-num2="message">
<!-- 我这里只想设置message的值的颜色就可以不用到钩子函数，直接进行简写 -->
</div>
<script type="text/javascript">
Vue.directive('num',function(el,binging){
console.log(el);
console.log(binging.value);
// 把获取到的文字给el并显示出来
el.innerHTML = binging.value.text
// 把获取到的颜色传给el样式
el.style.backgroundColor = binging.value.color
})
const vm = new Vue({
el:'#app',
methods:{
message:'欢迎光临！'
},
directives:{
num2:{
inserted:function(el,binging){
console.log(el);
console.log(binging.expression);
el.innerHTML = binging.expression
}
}
}
})
</script>
</body>
</html>效果：（这里前面的el.innerHTML会被覆盖）
以上就是Vue自定义指令详解的详细内容，更多关于Vue自定义指令的资料请关注脚本之家其它相关文章！