关于Vue中如何自定义指令(简写形式)
1.自定义指令的作用在实际项目开发过程中,除了vue自身提供的一些固定指令,如v-if,v-show,v-model等除外,我们可能根据项目的需求来自己注册一些自定义的指令,更好的提高开发和工作效率。2.自定义指令的两种方式自定义指令有全局注册和局部注册两种方式,3.一个自定义指令的案例(局部注册)先看需求:定义一个v-big指令,要求和v-text功能类似,但会把绑定的数值放大10倍<bo
·
1.自定义指令的作用
在实际项目开发过程中,除了vue自身提供的一些固定指令,如v-if,v-show,v-model等除外,我们可能根据项目的需求来自己注册一些自定义的指令,更好的提高开发和工作效率。
2.自定义指令注册的两种方式
- 自定义指令有全局注册和局部注册两种方式,
3.一个自定义指令的案例(局部注册)
先看需求:定义一个v-big指令,要求和v-text功能类似,但会把绑定的数值放大10倍
<body>
<div id="app">
<h3 v-big="n">{{n}}</h3>
<button @click="n++">点我n++</button>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
n: 1,
};
},
//局部定义自定义指令
directives: {
//自定义了一个v-big的自定义指令
big(Element, binding) {
//Element为h3节点,binding.value为传入的值n
Element.innerText = binding.value * 10;
},
},
});
</script>
</body>
- 执行结果如下:
关于上面代码的几个疑问:
1.directives是什么?
directives是vue为我们提供的一个自定义指令的对象,类似于methods,watch,
2.自定义指令名称写什么?
我们定义的指令名称为v-big,即下面就用big来创建函数
3.big函数传入的参数是什么?
第一个参数为当前绑定自定义指令的dom节点,第二个参数为一个对象:
我们只要关注他的value值即可,他的value值就是自定义指令传入的值n
4.big函数什么时候被调用:
当vue模板被重新解析时就会调用big函数
4.全局注册实现小案例
<body>
<div id="app">
<h3 v-big="n">{{n}}</h3>
<button @click="n++">点我n++</button>
</div>
<script>
//全局注册了一个v-big的自定义指令
Vue.directive('big',(Element,binding)=>{
Element.innerText = binding.value * 10;
})
new Vue({
el: "#app",
data() {
return {
n: 1,
};
},
});
</script>
</body>
运行截图和上面一样,就不演示了。
- 注意全局注册为directive而不是directives,没有s。
更多推荐
已为社区贡献1条内容
所有评论(0)