75-局部自定义指令——bind和update方法
这里通过directives指令实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>75-局部自定义指令——bind和update方法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
p{
width: 100px;
height: 100px;
background-color: #fcf;
}
</style>
</head>
<body>
<div id='app'>
<button @click="isShow=!isShow">按钮</button>
<p v-myshow="isShow"></p>
</div>
<script>
new Vue({
el:'#app',
data:{
isShow:false
},
// directives是指令的意思。
directives:{
myshow:{
// 钩子函数特点: 一定时机下自动执行,不需要调用;钩子函数一般会有几个函数在一起.
bind(el,binding){
// 什么时候执行这里的代码?
// 在v-myshow指令绑定到p标签身上的时候,执行这里的代码,只执行1次. 页面一刷新就绑定上去了
// el 是这个被绑定的元素
// binding 是一个此次绑定的一些信息的对象
// binding.value 有用, 获取到isShow的值
// 需求:页面一刷新,让盒子根据isShow的值,来进行显示或者隐藏
console.log("bind", el, binding);
// el.style.display = isShow的值 ? "block" : "none"
el.style.display = binding.value?"block":"none"
},
update(el,binding){
// 什么时候执行这里的代码?
// 被绑定上的标签的子节点发生变化的时候,执行这里的代码
// v-myshow是p的子节点,所以,只要v-myshow的值发生变化,就会执行这里的代码
// 点击之后,重新根据isShow的值做显示或者隐藏
el.style.display = binding.value ? "block" : "none"
}
}
}
})
</script>
</body>
</html>
