01. 什么是自定义指令
vue里面有很多内置的指令,比如v-if、v-show,这些指令基本能满足觉得大多数业务场景,但是在一些特殊功能时,我们仍需要对底层dom进行操作,这是就需要自定义指令。
02. 自定义指令的钩子函数
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次初始化设置。
- inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind:只调用一次,指令与元素解绑时调用。
03. vue-cli如何新增自定义指令?
- 创建局部指令
var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
directives: {
// 指令名称
dir1: {
inserted(el) {
// 指令中第一个参数是当前使用指令的DOM
console.log(el);
console.log(arguments);
// 对DOM进行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})
- 全局指令
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
- 指令的使用
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
04. vue如何自定义一个过滤器
过滤器使用:
- 语法:
{{表达式 | 过滤器}}
<div id="app">
<input type="text" v-model="msg" />
{{msg| capitalize }}
</div>
自定义私有过滤器
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
自定义全局过滤器
- 接收两个参数:过滤器ID和过滤器函数。
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})