一、v-model
原理
- 数据双向绑定
<input type="text" id="username" />
<div>
显示:
<span class="uName"></span>
</div>
<script>
let obj = {}
Object.defineProperty(obj, 'username', {
get: function () {
console.log('取值')
},
set: function (val) {
console.log('设置值')
document.getElementById('uName').innerText = val
},
})
document.getElementById('username').addEventListener('keyup', function () {
obj.username = event.target.value
})
</script>
二、data()
为什么是函数
- 是一个闭包函数,每一个组件都有自己的私有作用域,确保各组件数据不会相互干扰
- 纯对象 => 干扰
data(){
return {
message:"vue",
tel:""
}
}
三、v-if
和 v-show
v-if
<button v-if="val == '1'">btn1</button>
<button v-if="val == '2'">btn2</button>
<script>
data(){
return{
val:'2'
}
}
</script>
v-show
<button @click="changeShow">改变type</button>
<script>
data(){
return{
type:false
}
},
method:{
changeShow(){
this.type = !this.type
}
}
</script>
四、computer
和watch
区别
(一)、computer
- 计算属性,计算出一个结果,函数值改变了就会重新计算
- 初始化的时候会自动计算一次
- 读取数据缓存
const num = ref(1)
const num2 = computed(()=>{
return num.value + 10
})
(二)、watch
- 监控某个数据,被监控的数据更改,则watch执行
- 初始化的时候不会自动执行一次
const num3 = ref("未成年")
wacth(num3,(newVal, oldVal)=>{
if(newVal >= 18){
num3.value = "已成年"
}
},{
immediate:true
})