Vue中如何自定义指令
Vue自定义指令语法
需求1.自定设置输入框为红色
需求2.自定获取输入框焦点
需求1；解决方案
<body>
<div id='app'>
自动设置输入框颜色<input type="text" v-color="color">
</div>
<script src='js/vue.js'></script>
<script>
//引入vue实例对象
const vm = new Vue({
el: '#app',
data: {
color: 'red'
},
directives: {
color: function (element, binding) {
element.style.outlineColor = binding.value;
}
}
})
</script>
</body>
color函数中参数的意思：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-color=“color” 中，绑定值为 “red”。
- expression：字符串形式的指令表达式。
需求2：解决方法
此时就变得有一点点复杂，不可以用第一种方法去解决。
//无效
directives: {
focus: function (element, binding) {
element.focus()
}
}
引出另一个问题：自定义指令函数什么时候被调用？
- 当自定义指令与元素成功绑定的时候
- 指令所在的模板被重新解析时
解答：当指令和元素成功绑定时，的确调用函数了，但是此时指令绑定的元素还没有插入到DOM页面中，所以element.focus()当然也就无效了。随即，也就引出了指令钩子函数的概念。
指令钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用。
- update：指令所在的模板被重新解析时
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用。
所以这里我们需要使用使用inserted这个钩子函数，在input这个元素被插入到父节点时,调用elemnet.focus()方法。
代码应该这样编写：
使用函数和对象形式自定义指令有啥区别？
大家也看出来了，需求1使用的是函数的形式，需求2使用的是对象的形式。
扫一扫
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
