vue自定义指令的钩子函数,vue directive自定义指令
本文主要介绍了vue自定义指令指令及其常用的钩子函数，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
自定义指令和常见钩子函数的描述钩子函数vue全局定义钩子函数中的本地定义(vue-cli)参数vue自定义指令选项指令选项定义指令
自定义指令directives及常用钩子函数
说明
除了核心功能的默认内置指令(v-model和v-show)，Vue还允许注册自定义指令。
用在哪里：在某些情况下，你仍然需要对普通的DOM元素进行低级操作，然后你会使用自定义指令。
钩子函数
Inserted:当绑定元素插入到父节点时调用(只存在父节点，但不一定插入到文档中)。Bind:仅在指令第一次绑定到元素时调用一次。可以在这里执行一次性初始化。Update:当组件的VNode更新时调用，但它可能发生在其子VNode更新之前。指令的值可能已更改，也可能未更改。但是您可以通过比较更新前后的值来忽略不必要的模板更新。ComponentUpdated:在指令所在组件的VNode及其子VNode都更新后调用。Unbind:仅在指令从元素解除绑定时调用一次。
vue 全局定义
使用：span v指令名称welcome /span或v指令名称=传递的参数
定义：Vue.directive(指令名，{指令钩子：函数function})
div id=root
span v-红色欢迎
/div
脚本类型=文本/javascript
Vue.directive(red ，{ //定义
插入：function(el){ //hook函数
El . style . background= red ；
}
});
var vm=new Vue({
埃尔： #根
数据：{
},
})
/脚本
局部定义（vue-cli）
使用：div v-指令名=传递参数/div //传递参数可以根据功能需求进行操作。
定义：指令{指令名：{钩子函数：函数function}}
模板
你好
div v-test=name/div
/div
/模板
脚本
导出默认值{
data () {
返回{
姓名：用户名，
}
},
指令：{ //自定义指令
测试：{
插入：function (el，binding) {//e是一个绑定元素，可以dom操作。
Console.log(binding) //具有许多属性的对象(如下)
},
bind: function (el，binding，vnode) {
el.innerHTML=binding.value
}
}
},
方法：{
.
}
}
/脚本
钩子函数里面的参数
El:指令绑定的元素可以用来直接操作DOM。绑定：包含以下属性的对象：名称：指令名称，不包括v前缀。
Value:指令的绑定值，例如在v-my-directive="1 1 "中，绑定值为2。
OldValue:指令绑定的前一个值，仅在update和componentUpdated挂钩中可用。无论值是否改变都可用。
表达式：字符串形式的指令表达式。例如，在v-my-directive="1 1 "中，表达式为" 1 1 "。
Arg:传递给指令的参数，可选。例如，在v-my-directive:foo中，参数是“foo”。
修改器：包含修改器的对象。例如：在v-my-directive.foo.bar中，修饰符对象是{foo: true，bar: true}。
vnode:Vue编译生成的虚拟节点。OldVnode:前一个虚拟节点，它只在update和componentUpdated挂钩中可用。
vue自定义指令 directives选项
directives选项中定义 指令
使用时添加v前缀
全局注册
app.directive(xxx ，{})
支持动态指令参数
v-xx:[abc]=xxx
指令函数可以接受所有合法的JavaScript表达式。
如果只需要在挂载和更新的时候触发该方法
可以缩写为简单的回调函数。
参数说明
第一个参数是绑定元素。
第二个参数是传递的对象。
当应用于组件时，对应于参数的值。值的等号。arg绑定不同于非prop的属性，指令不会通过v-bind=$attrs 传入另一个元素。
当应用于具有多个节点的组件时，该指令将被忽略并引发警告。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。