Vue自定义指令详解
更新时间：2021年11月15日 15:48:33 作者：小旺不正经
这篇文章主要为大家介绍了Vue自定义指令，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
Vue自定义指令
自定义指令
注册一个全局指令v-focus，该指令的功能是在页面加载时元素获得焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input v-fo>
</div>
<script>
// 注册自定义指令
Vue.directive('fo',{
inserted:function(el){
// 聚焦元素
el.focus()
}
})
new Vue({
el: '#app'
})
</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}。vnode：Vue编译生成的虚拟节点。oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
输出相关属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app" v-hh:a.b.c="mess">
</div>
<script>
Vue.directive('hh',{
bind: function(el,binding,vnode){
var s = JSON.stringify
el.innerHTML = 'name:'+s(binding.name)+'<br>'+
'value:'+s(binding.value)+'<br>'+
'expression:'+s(binding.expression)+'<br>'+
'argument:'+s(binding.arg)+'<br>'+
'modifiers:'+s(binding.modifiers)+'<br>'+
'vnode keys:'+Object.keys(vnode).join(',')
}
})
new Vue({
el:'#app',
data:{
mess:'abc'
}
})
</script>
</body>
</html>
运用例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-hh="{text:'123',c:'blue'}"></div>
</div>
<script>
Vue.directive('hh',function(el,binding){
el.innerHTML=binding.value.text
el.style.color=binding.value.c
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！
相关文章
Ant Design of Vue select框获取key和name的问题
这篇文章主要介绍了Ant Design of Vue select框获取key和name的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue从后端获取到文件的 url 地址及前端根据 url 地址下载文件的实现思路
这篇文章主要介绍了vue 中从后端获取到文件的 url 地址及前端根据 url 地址下载文件,项目用的是 vben admin 框架,用的是 vue3 + TS,后端返回的是文件的 url 地址,对vue后端获取 url 地址的相关知识感兴趣的朋友一起看看吧2024-02-02
Plotly.js是一个功能强大的JavaScript库,用于创建交互式数据可视化,它支持各种图表类型,包括散点图、折线图和直方图,在Vue.js应用程序中,Plotly.js可用于创建动态且引人入胜的数据可视化,本文介绍了使用Plotly.js在Vue中创建交互式散点图,需要的朋友可以参考下2024-07-07
vuex是一个专门为vue.js设计的状态管理模式，并且也可以使用devtools进行调试。2017-05-05
这篇文章主要介绍了使用Vue 3和Element-plus搭建前端项目的过程,包括项目搭建、Element-plus安装和引入、axios安装、sass使用、app.vue配置、组件创新、路由配置以及使用辅助插件来提高开发效率,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了使用vue控制元素显示隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue关于Element UI中的文本域换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue引入静态js文件的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vue生命周期，文章通过结合案例更加的通俗易懂,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了uni-app 常用API，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
最新评论