Vue自定义指令详解
更新时间：2022年12月24日 14:48:49 作者：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自定义指令的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了探索Vue高阶组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了如何基于Vue3自定义实现简单的图片翻转预览功能,文中的示例代码讲解详细,具有一定的学习价值,有需要的小伙伴可以参考一下2023-10-10
Electron主进程(Main Process)与渲染进程(Renderer Process)通信详解
这篇文章主要介绍了Electron主进程(Main Process)与渲染进程(Renderer Process)通信,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了深入剖析vite到底是快还是慢原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
Vue开发模式是一种基于Vue.js框架的开发方式,它可以帮助开发者更高效地构建和维护复杂的Web应用程序,下面这篇文章主要给大家介绍了关于vue关闭开发模式提示的简单解决办法,需要的朋友可以参考下2024-04-04
本文主要介绍了vue实现GitHub的第三方授权，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要为大家介绍了Vue基础popover弹出框编写及bug问题分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要给大家介绍了关于vue3 Props的用法(父传子)的相关资料,在Vue3中Props用于组件间数据传递,允许类型检查和默认值设置,文中将用法介绍的非常详细,需要的朋友可以参考下2024-10-10
最近接了个小活,其中甲方要求把vue项目打包成exe安装在windows上,其中有也会出现一些小问题和优化,特此记录,这篇文章主要给大家介绍了关于将vue项目打包成电脑端应用.exe的完整步骤,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vuex入门到上手教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论