今天是2022年6月21日,是我学习vue的第四天
监视属性
watch
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWea">切换天气</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {// data 的所有属性都会成功 vm 对象的属性, 而模板页面中可以直接访问
isHot: true,
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWea() {
this.isHot = !this.isHot
}
},
watch: {
isHot: { //此处应该是'isHot' 去掉''是简写
immediate: true,//初始化时让handler调用一下
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
}
},
})
</script>
深度监视
监视num对象中的a的变化
watch: {
isHot: {
// immediate: true,//初始化时让handler调用一下
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
},
//监视多级结构中某个属性的变化
'num.a': {
handler() {
console.log('a被改变了');
}
}
}
深度监视
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注:
(1).vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
num: {
deep: true,
handler() {
console.log('a被改变了');
}
}
//简写
isHot(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
}
watch与computed的区别
computed和lwatch之间的区别:
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
两个重要的小原则;
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。
绑定class和style样式
绑定样式:
1.class样式
写法:class=" xxx" xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定，要动态获取。
对象写法适用于:要绑定多个样式,个数不确定，名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定,但不确定用不用。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
: style="[a,b]"其中a、b是样式对象。
条件渲染
条件渲染:
1.v-if
写法:
(1).v-if="表达式”
(2).v-else-if="表达式”
(3).v-else="表达式"
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
2.v-show
写法: v-show="表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
template与v-if可以一起使用
