Vue自定义指令
首先我们知道vue中有很多内置指令,比如说 v-text,v-bind, v-if,v-for等等,但是怎样定义一个自定义的指令呢?什么是自定义指令,我们知道 v-if 指令是用于条件性地渲染一块内容,那此时我想定义一个指令,让某个数变大10倍,我把这个指令叫叫做v-big,v-big=“n”, 当n等于1的时候页面显示10,当n等于2的时候页面显示20,我们怎么用指令做到呢?注意: 自定义指令是
前言
首先我们知道vue中有很多内置指令,比如说 v-text,v-bind, v-if,v-for等等,但是怎样定义一个自定义的指令呢?
什么是自定义指令,我们知道 v-if 指令是用于条件性地渲染一块内容,那此时我想定义一个指令,让某个数变大10倍,我把这个指令叫叫做v-big,v-big=“n”, 当n等于1的时候页面显示10,当n等于2的时候页面显示20,我们怎么用指令做到呢?
注意: 自定义指令是要我们对普通 DOM 元素进行底层操作的。
1、简单的自定义指令示例(自定义指令是个函数)
需求:定义v-big指令,和v-text功能类似,但会把绑定的值放大10倍;
定义新指令,用 directives 配置项:
运行结果:
我们可以看出,当自定义指令是个函数时,接受两个参数,第一个参数是绑定当前指令的真实DOM元素,第二个参数是个对象,表示当前指令的详细信息。
2、较为复杂的自定义指令(自定义指令是个对象)
需求:定义一个 v-fbind 指令,和 v-bind 功能类似,但可以让其绑定的input框自动获取焦点。
(不要给input加 autofocus 属性,我们要自己实现)
踩坑注意:
<input v-fbind:value="n" />
// 定义指令
directives: {
fbind(el, obj) {
el.value = obj.value;
el.focus();
},
},
理论上我们上述写法是没有问题的,但是运行却发现input框却没有自动获取焦点,这是为什么呢?
因为fbind指令在两种情况下会被调用:
- 第一是在指令与元素成功绑定时(一上来);
- 第二是指令所在的模版被重新解析时;
vue做事分好几步,我们写的代码要经过vue的编译和解析,当指令与元素成功绑定时只是意味着两者在内存里面建立了关系,但此时input这个dom元素还没有被放入到页面中,这个时候调用 el.foucus() 当然是不奏效的。所以我们应该在vue把input元素放入页面以后再去调用focus函数才可以。
我们把fbind指令写成一个对象:
当指令是个对象时,里面有三个函数,分别在不同的时机会被自动调用执行,函数名字不可更改。
当指令写成函数时,相当于写了bind函数和update函数。
3、全局自定义指令
上面所说的都是在组件里定义自定义指令,当我们想全局使用时:
Vue.directive('fbind', {
bind: function(el, obj) {
....
},
})
更多推荐
所有评论(0)