脚本宝典收集整理的这篇文章主要介绍了vue2.0自定义指令,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1、什么是指令?
指令通常以"v-"作为前缀, 以方便Vue知道你在使用一种特殊的标记。
除了 Vue 核心携带着的一些默认指令(v-model 和 v-show)之外,
Vue 还允许你注册自己的自定义指令。某些情况下,还是需要对普通元素进行一些底层 DOM 访问,
这也是自定义指令仍然有其使用场景之处。
2、全局指令:
当页面加载时,元素将获取焦点,事实上,在访问页面时,如果你还没有点击任何地方,上面的输入框现在应该处于获取焦点的状态。现在让我们构建指令以完成此效果:
<template>
<div class="parent">
<input v-focus>
</div>
</template>
import Vue from 'vue'
import cnChildren from './children'
// 注册一个名为 `v-focus` 的全局自定义指令
Vue.directive('focus', {
// 当绑定的元素插入到 DOM 时调用此函数……
inserted: function (el) {
// 元素调用 focus 获取焦点
el.focus()
}
});
如果你想要注册一个局部指令,也可以通过设置组件的 directives 选项:
directives: {
focus: {
// 指令定义对象
inserted: function (el) {
el.focus()
}
}
}
我们有几个可用的钩子:
每个钩子可以选择一些参数。
binding:一个对象,包含以下属性:
1、name:指令的名称,不包括 v- 前缀。
2、value:向指令传入的值。例如,在 v-my-directive="1 + 1" 中,传入的值是 2。
3、oldValue:之前的值,只在 update 和 componentUpdated 钩子函数中可用。无论值是否发生变化,都可以使用。
4、expression:指令绑定的表达式(expression),以字符串格式。例如,在 v-my-directive="1 + 1" 中,表达式是 "1 + 1"。
5、arg:向指令传入的参数,如果有的话。例如,在 v-my-directive:foo 中,参数是 "foo"。
6、modifiers:一个对象,包含修饰符,如果有的话。例如,在 v-my-directive.foo.bar 中,修饰符是 { foo: true, bar: true }。
除了 el 之外的其他参数,都应该是只读的,并且永远不要去修改它们。
3、自定义指令示例
如果指令需要多个值,你还可以向指令传入 JavaScript 对象字面量(object literal)。记住,指令能够接收所有有效的 JavaScript 表达式。
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
以上是脚本宝典为你收集整理的vue2.0自定义指令全部内容,希望文章能够帮你解决vue2.0自定义指令所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。