vue文件局部使用自定义指令,vue常用自定义指令
本文主要介绍了vue的全局自定义命令和局部自定义命令的使用，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
局部自定义指令(仅用于组件中的元素)定义全局自定义指令的挂钩函数。自定义指令钩子函数的参数示例。除了默认的核心指令(v-model和v-show)，Vue还允许注册自定义指令。
局部自定义指令(只针对组件内的元素)
父组件app.vue
模板
div id=应用程序
测试api/测试API
/div
/模板
脚本
从导入testApi。/components/testApi.vue
导出默认值{
data (){
返回{
}
},
观察：{
},
方法：{
},
组件：{
testApi
}
}
/脚本
风格
/风格
组件testApi.vue
模板
差异
！-让输入元素在页面打开时获得焦点-
输入类型= text v-自动对焦
/div
/模板
脚本
导出默认值{
指令：{
//自定义指令的名称
自动对焦：{
//Hook函数，在绑定元素插入父节点时调用(父节点存在时可以调用，但不一定要存在于文档中)。
已插入(el){
焦点()
console . log( inserted )；
},
//只调用一次。指令在第一次绑定到元素时被调用。使用这个钩子函数，您可以定义一个在绑定期间执行一次的初始化操作。
bind(){
console . log( bind )；
},
//当其组件的VNode更新时调用，但可能发生在其子组件的VNode更新之前。
//指令的值可能已更改，也可能未更改。但是您可以通过比较更新前后的值来忽略不必要的模板更新。
update(){
console.log(“更新”)；
},
//当其组件的VNode和其子组件的VNode都更新时调用。
componentUpdated(){
console . log( component updated )；
},
//当指令从元素解除绑定时，只调用一次。
unbind(){
console . log( unbind )；
}
}
},
data () {
返回{
}
},
道具：[]，
方法：{
},
已创建(){
},
已安装(){
},
组件：{
}
}
/脚本
样式范围
/风格
效果图：
定义全局自定义指令
在任何页面的任何输入中添加v-autoFcs。
Vue.directive(autoFcs ，{
//Hook函数，在绑定元素插入父节点时调用(父节点存在时可以调用，但不一定要存在于文档中)。
已插入(el){
焦点()
console . log( inserted )；
},
//只调用一次。指令在第一次绑定到元素时被调用。使用这个钩子函数，您可以定义一个在绑定期间执行一次的初始化操作。
bind(){
console . log( bind )；
},
//当其组件的VNode更新时调用，但可能发生在其子组件的VNode更新之前。
//指令的值可能已更改，也可能未更改。但是您可以通过比较更新前后的值来忽略不必要的模板更新。
update(){
console.log(“更新”)；
},
//当其组件的VNode和其子组件的VNode都更新时调用。
componentUpdated(){
console . log( component updated )；
},
//当指令从元素解除绑定时，只调用一次。
unbind(){
console . log( unbind )；
}
})
效果图：
自定义指令的钩子函数
钩子函数
指令定义函数提供了几个钩子函数 (可选)：
Bind:只调用一次，指令第一次绑定到元素时调用。使用这个钩子函数，您可以定义一个在绑定期间执行一次的初始化操作。Inserted:当绑定元素插入父节点时调用(父节点存在时可以调用，但不一定要存在于文档中)。Update:当组件的VNode更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能已更改，也可能未更改。但是，通过比较更新前后的值，可以忽略不必要的模板更新(详细的钩子函数参数见下文)。ComponentUpdated:当组件的VNode及其孩子的 VNode全部更新时调用。Unbind:仅在指令从元素解除绑定时调用一次。接下来我们来看看hook函数的参数(包括el，binding，vnode，oldVnode)。
自定义指令钩子函数的参数
钩子函数参数
钩子函数被赋予了以下参数：
El:指令绑定的元素可以用来直接操作DOM。绑定：包含以下属性的对象：名称：指令名称，不包括v前缀。Value:指令的绑定值，例如：v-my-directive="1 1 "，value的值为2。OldValue:指令绑定的前一个值，仅在update和componentUpdated挂钩中可用。无论值是否改变都可用。表达式：绑定值的字符串形式。比如v-my-directive="1 1 "而expression的值是 1 1 。Arg:传递给指令的参数。比如v-my-directive:foo，arg的值就是‘foo’。修改器：包含修改器的对象。例如：v-my-directive.foo.bar，modifier对象modifiers的值为{foo: true，bar: true}。Vnode:Vue编译生成的虚拟节点，更多细节请参考VNode API。OldVnode:前一个虚拟节点，它只在update和componentUpdated挂钩中可用。
例子
div id= hook-arguments-example v-demo:foo . a . b= message /div
Vue.directive(demo ，{
bind: function (el，binding，vnode) {
var s=JSON.stringify
el.innerHTML=
名称： 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({
El:“# hook-arguments-example”，
数据：{
信息：“你好！”
}
})
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。