本文主要为大家介绍Vue自定义说明，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
Vue自定义指令自定义指令钩子函数输出相关属性应用实例总结
Vue自定义指令
自定义指令
注册一个全局指令v-focus，它的作用是在页面加载时获取元素的焦点。
！文档类型html
超文本标记语言
头
meta charset='utf-8 '
标题/标题
脚本src='./js/vue.js'/script
/头
身体
div id='应用程序'
输入v-fo
/div
脚本
//注册自定义指令
Vue.directive('fo '，{
插入：函数(el){
//焦点元素
焦点()
}
})
新Vue({
埃尔：' #app '
})
/脚本
/body
/html
直接在输入框中打开界面光标。
钩子函数
definition函数提供了几个钩子函数(可选)。
Bind:只调用一次。指令在第一次绑定到元素时被调用。您可以使用这个钩子函数来定义一个在绑定过程中执行一次的初始化操作。
Inserted:当绑定元素插入父节点时调用(父节点存在时可以调用，但不一定要存在于文档中)。
Update:当绑定元素所在的模板更新时调用，不管绑定值是否更改。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
Updated:当绑定元素的模板完成一个更新周期时调用。
Unbind:仅在指令从元素解除绑定时调用一次。
钩子函数的参数主要有以下几项
El:指令绑定的元素可以用来直接操作DOM。
绑定：包含以下属性的对象
名称：指令名，不包括v前缀。
Value:指令的绑定值，例如v-my v-my-directive="1 1 1 "，value的值为2。
OldValue:指令绑定的前一个值，该值仅在update和componentUpdated挂钩中可用，不管该值是否更改。
表达式：绑定值的表达式或变量名，例如v-my v-my-directive="1 1 1 "，表达式的值为' 1 1 '。
Arg:传递给指令的参数，如v-my v-my-directive:foo，arg的值为‘foo’。
Modifiers:包含修饰符的对象，如v-my-directive . foo . bar。modifier对象修饰符的值为{foo: true，bar: true}。
vnode:Vue编译生成的虚拟节点。
OldVnode:前一个虚拟节点，它只在update和componentUpdated挂钩中可用。
输出相关属性
！文档类型html
超文本标记语言
头
meta charset='utf-8 '
标题/标题
脚本src='./js/vue.js'/script
/头
身体
div id='app' v-hh:a.b.c='mess '
/div
脚本
Vue.directive('hh '，{
bind: function(el，binding，vnode){
var s=JSON.stringify
El . innerhtml=' name:' s(binding . name)' br '
值：' s(binding.value) 'br '
表达式：' s(binding.expression) 'br '
参数：“s(binding . arg)”br”
修饰符：' s(binding.modifiers) 'br '
vnode keys:' Object.keys(vnode)。联接('，')
}
})
新Vue({
埃尔：' #app '，
数据：{
乱七八糟：“abc”
}
})
/脚本
/body
/html
运用例子
！文档类型html
超文本标记语言
头
meta charset='utf-8 '
标题/标题
脚本src='./js/vue.js'/script
/头
身体
div id='应用程序'
div v-hh='{text:'123 '，c:'blue'}'/div
/div
脚本
Vue.directive('hh '，function(el，binding){
El . innerhtml=binding . value . text
el.style.color=binding.value.c
})
新Vue({
埃尔：' #app '
})
/脚本
/body
/html
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。