想要知道如何去Vue自定义指令,首先要明白一个点就是Vue的内置指令如何来的(怎么实现的),举个例子:内置指令v-show,指令名字是叫v-show,指令背后是通过操作DOM元素display去实现的。所以现在我们要自定义一个指令,首先要有一个指令名,还需要通过去操作DOM元素来实现。
需求1:定义一个v-word指令,和v-text功能类似,但会把绑定的数值放大10倍。
- 自定义属性需要用到directives配置项
- 配置项的值可以是一个对象
- 对象可以写成一个函数方法word: function() {}(简写为word() {})
- 方法里面是通过接收到的参数来操作DOM元素
- 方法里面的两个参数分别是:第一个参数是真实DOM元素,第二个参数是一个对象(对象里面包含表达式、指令的名字、value值等)
根据需求1,我们可以通过以下代码实现v-word指令
HTML结构代码:
<div class="root">
<h1 v-text="n"></h1>
<h1 v-word="n"></h1>
</div>
script结构代码:
<script>
Vue.config.productionTip = false
new Vue({
el: '.root',
data: {
n: '10'
},
directives: {
word(element, binding) {
element.innerText = binding.value * 10
}
}
})
</script>
最后的输出效果:
需求2:定义一个v-fbind指令,和v-bind功能类似,但可以让其绑定的input元素默认获取焦点。
- 自定义属性需要用到directives配置项
- 配置项的值可以是一个对象
- 对象可以写多个函数方法,里面的函数方法会在特定的事件去调用,例如:fbind: {函数名(){},函数名(){},函数名(){}}
- 常用的函数方法有三个:bind(){},inserted(){},update(){}(注意:名字不能写错)
- 方法分别在哪些时候调用:bind:指令与元素成功绑定时调用;inserted:指令所在元素被插入页面时调用;update:指令所在模板结构被重新解析时调用
根据需求2,我们可以通过以下代码实现v-fbind指令
HTML结构代码:
<input type="text" v-bind:value="n">
<input type="text" v-fbind:value="n">
script结构代码:
<script>
Vue.config.productionTip = false
new Vue({
el: '.root',
data: {
n: '10'
},
directives: {
fbind: {
inserted(element, binding) {
element.focus()
}
}
}
})
</script>
最后的输出效果:
注意:
- 指令定义时不加v-,但使用时要加v-
-
指令名如果是多个单词,比如:要使用kebab-case命名方式,不要用camelCase命名
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/6246.html