在Vue框架中,它的一大特点就是指令。框架中为我们提供了很多基础指令,但是有些需求官方提供的指令无法办到,即官方允许我们自己定义指令。
写法:v-指令名
规定:指令都以v-开头,后跟我们自己取的指令名,注意我们取得指令名不能是官方已经声明过的
如何定义指令?
新学习一个属性directives,在里面定义我们指令的功能,写法:
directives:{
指令名:{
inserted(el,option){
//处理程序允许我们操作页面
}
}
}
这里的inserted是钩子函数,其第一个参数el为指令所在的那个元素节点,第二个option是传入的实参对象,就是v-指令名="",引号中的变量的值。
这样创建的一个指令是局部指令,在当前new Vue()对象所关联的标签内部使用。
我们也可以定义一个全局的自定义指令,写法:
Vue.directive("指令名", {
// 当绑定元素插入到 DOM 中。
inserted(el) {
// 处理程序
}
})
指令定义函数提供了几个钩子函数(可选)
【bind】
只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
【inserted】
被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
【update】
所在组件的 VNode 更新时调用,但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。
【componentUpdated】
所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
【unbind】
只调用一次, 指令与元素解绑时调用。
注意区别:
bind与inserted:bind时父节点为null,inserted时父节点存在;
update与componentUpdated:update是数据更新前,componentUpdated是数据更新后。
钩子函数参数
第一个参数:指令所绑定的元素,可以用来直接操作 DOM。
第二个参数(可选):一个对象,包含指令名称及该指令所绑定的表达式信息。
第三个参数(可选):Vue 编译生成的虚拟节点。
第四个参数(可选):上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
动手敲一敲,写一个修改字体大小的指令
<div id="box">
<div v-size="fs">{{msg}}</div>
</div>
<script>
new Vue({
el: "#box",
data: {
msg:"基尼太没",
fs:"30px"
},
directives: {
size:{
inserted(el,option){
console.log(option);
el.style.fontSize=option.value
}
}
}
})
</script>
效果:
补充:nextTick()函数,类似于window.onload(),在这个函数内传入的回调函数,是在组件加载完了才会执行。
学习了生命周期函数以后 会有一个问题:我们在写业务时 总是会考虑一个事情: 现在正在写的业务代码能否操作vm.所以我们需要一个工具 就是让我们写的代码 无论在哪里写 都希望它是组件加载完了以后才运行
例如:在beforecreat(){},vm对象还没创建完成时都可以在这个函数通过nextTick()操作vm对象
代码说明:
<div id="box">
{{msg}}
</div>
<script>
new Vue({
el:"#box",
data:{
msg:"666"
},
beforeCreate() {
this.$nextTick(()=>{
this.msg=777
})
},
})
</script>
这时页面打印的不是666,而是777