目录
侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时，执行某段代码
watch配置项
监视属性变化时需要使用watch配置项，可以监视多个属性，监视哪个属性，就把哪个属性的名字拿过来即可
可以监视Vue的原有属性
可以监视计算属性
开启深度监视
(1) 监视多级结构中某个属性的变化，写法是：'a.b.c' : {}。无法直接监视对象深层次属性，如a.b，b属性压根不存在，如果监视的属性具有多级结构，一定要添加单引号：'a.b'
(2) 监视多级结构中所有属性的变化，可以通过添加深度监视来完成：deep : true，默认是不开启深度监视的。
后期添加监听
调用API：vm.$watch('number1', {})
watch的写法
javascript
watch: {
//简写
num(new1, old) {
console.log(new1);
console.log(old);
}
},
watch: {
//完整写法
a: {
handler(n, o) {
console.log("发生变化了");
},
deep: true,
// 初始化就执行handler函数
immediate: true,
},
}写法主要分两种，一种是函数的写法，一种是方法的写法
函数方式就直接定义处理函数，但在遇到需要配置deep和immediate(初次执行)时就需要写完整写法，写成方法格式（包含handler和配置选项）
watch和computed选择
computed和watch都能够完成的，优先选择computed。
如果要开启异步任务，只能选择watch。因为computed依靠return。watch不需要依赖return。
class与style绑定
绑定字符串
javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Class绑定之字符串形式</title>
<script src="./js/vue.js"></script>
<style>
.static {
border: 1px solid black;
background-color: aquamarine;
}
.big {
width: 200px;
height: 200px;
}
.small {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 需求：div有静态样式：static，大小是动态的 ，点击按钮，更换应用不同的样式-->
<div id="app">
<h1>{{msg}}</h1>
<!-- 静态写法 有基本样式，有大小 -->
<div class="small static">{{msg}}</div>
<hr />
<!-- 动态写法：动静都有 static是静态样式，大小是指定的-->
<div class="static" :class="c1">{{msg}}</div>
<button @click="c1='big'">变大</button>
<button @click="c1='small'">变小</button>
<!-- 适用场景：如果确定动态绑定的样式个数只有1个，但是名字不确定。 -->
</div>
<script>
const vm = new Vue({
el: "#app",
data() {
return {
msg: "Class绑定之字符串形式",
c1: "small",
};
},
});
</script>
</body>
</html>绑定数组
javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Class绑定之数组形式</title>
<script src="./js/vue.js"></script>
<style>
.static {
border: 1px solid black;
width: 100px;
height: 100px;
}
.active {
background-color: green;
}
.text-danger {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 静态写法 -->
<div>{{msg}}</div>
<br />
<!-- 动态写法：动静结合 -->
<!-- 写法一、直接类名，此时的类名必须要在css中被注册使用 -->
<div class="static" :class="['active','text-danger']">{{msg}}</div>
<br />
<!-- 写法二、数组中放变量名 -->
<div class="static" :class="[c1,c2]">{{msg}}</div>
<br />
<!-- 写法三、直接定义数组 -->
<div class="static" :class="styles">{{msg}}</div>
<!-- 适用场景：当样式的个数不确定，并且样式的名字也不确定的时候，可以采用数组形式。 -->
</div>
<script>
const vm = new Vue({
el: "#app",
data() {
return {
msg: "Class绑定之数组形式",
c1: "active",
c2: "text-danger",
styles: ["active", "text-danger"],
};
},
});
</script>
</body>
</html>绑定对象
javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Class绑定之对象形式</title>
<script src="./js/vue.js"></script>
<style>
.static {
border: 1px solid black;
width: 100px;
height: 100px;
}
.active {
background-color: green;
}
.text-danger {
color: red;
}
</style>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 动态写法：动静结合 -->
<!-- 写法一、可以直接跟对象变量名 -->
<div class="static" :class="{active:true,'text-danger':false}">
{{msg}}
</div>
<br />
<!-- 写法二、可以跟对象的完整写法 -->
<div class="static" :class="classObj">{{msg}}</div>
<!-- 对象形式的适用场景：样式的个数是固定的，样式的名字也是固定的，但是需要动态的决定样式用还是不用。 -->
</div>
<script>
const vm = new Vue({
el: "#app",
data() {
return {
msg: "Class绑定之对象形式",
classObj: {
// 该对象中属性的名字必须和css中样式名一致。
active: false,
"text-danger": true,
},
};
},
});
</script>
</body>
</html>
与style绑定
javascript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Style绑定</title>
<script src="./js/vue.js"></script>
<style>
.static {
border: 1px solid black;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!--需求： 动态添加背景色 -->
<div id="app">
<h1>{{msg}}</h1>
<!-- 静态写法 -->
<div class="static" style="background-color: green">静态写法</div>
<br />
<!-- 动态写法：字符串形式 -->
<div class="static" :style="c1">动态写法：字符串形式</div>
<br />
<!-- 动态写法：对象形式 -->
<div class="static" :style="{backgroundColor:'green',color:'#fff'}">
动态写法1：对象形式
</div>
<br />
<div class="static" :style="styleObj">动态写法2：对象形式</div>
<br />
<!-- 动态写法：数组形式 -->
<div class="static" :style='[{ backgroundColor: "green"},{color: "#fff" },{fontSize:"30px"}]'>动态写法：数组形式</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data() {
return {
msg: "Style绑定",
c1: "background-color: green",
styleObj: { backgroundColor: "green", color: "#fff" },
};
},
});
</script>
</body>
</html>