一、双向绑定
1、数据劫持原理
<button id="btn">点击切换text的值</button>
let obj = {}
var num = 10
Object.defineProperty(obj, 'text', {
get() {
return num
},
set(val) {
num = val
}
})
btn.onclick = function () {
obj.text = 50
console.log(obj.text);
}
console.log(obj.text);
2、对象属性的配置
let obj = {}
Object.defineProperty(obj, 'msg', {
value: '你好世界',
writable: true,
configurable: true,
enumerable: true,
})
console.log(obj.msg);
obj.msg = 'hello'
console.log(obj.msg);
console.log(Object.keys(obj));
delete obj.msg
console.log(obj.msg);
二、自定义指令的使用
1、全局自定义指令
.box {width: 100px;height: 100px;background: aqua;}
<div id="app">
<button @click="flag=!flag">显示/隐藏</button>
<div class="box" v-myshow="flag"></div>
</div>
Vue.directive('myshow', {
inserted(e, type) {
e.style.display = type.value ? 'block' : 'none'
},
update(e, type) {
e.style.display = type.value ? 'block' : 'none'
}
})
new Vue({
el: "#app",
data: {
flag: true
},
})
2、局部自定义指令
.box { width: 100px; height: 100px;background: aqua; }
<div id="app">
<button @click="flag=!flag">显示/隐藏</button>
<div class="box" v-myshow="flag"></div>
</div>
new Vue({
el: "#app",
data: {
flag: true
},
directives: {
myshow: {
inserted(e, binding) {
e.style.display = binding.value ? 'block' : 'none'
},
update(e, binding) {
e.style.display = binding.value ? 'block' : 'none'
}
}
}
})
3、自动聚焦案例
input{
width: 1000px;
height: 500px;
font-size: 350px;
padding: 10px 250px;
border: none;
border-radius: 500px;
}
input:focus{
outline:2px solid red;
}
<div id="app">
<input type="text" v-focus>
</div>
new Vue({
el: "#app",
data: {
},
directives: {
focus: {
inserted(e) {
e.focus()
},
}
}
})