一、监视属性
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstName"/><br>
<input type="text" v-model="lastName"/><br>
<input type="text" v-model="object.a.b.c"/><br>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstName:'张',
lastName:'三',
object:{
a:{
b:{
c:11
}
}
}
},
watch:{
firstName:{
immediate:true,
handler(newVal,oldVal){
console.log("firstName 被修改了",newVal,oldVal)
}
},
lastName:{
immediate:true,
handler(newVal,oldVal){
console.log("lastName 被修改了",newVal,oldVal)
}
},
object:{
immediate:true,
deep:true,
handler(newVal,oldVal){
console.log("object 被修改了",newVal,oldVal)
}
},
'object.a.b.c':{
immediate:true,
handler(newVal,oldVal){
console.log("object.a.b.c 被修改了",newVal,oldVal)
}
}
}
})
</script>
</html>监视属性watch:
- 当被监视的属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进行监视!!
监视的两种写法:
- new Vue时传入watch配置
通过vm.$watch监视
vm.$watch ('firstName',function(newVal,oldVal){ console.log("firstName 被修改了",newVal,oldVal) })
深度监视:
- vue中的watch默认不监测对象内部值的改变(一层)
- 配置deep:true可以监测对象内部值改变(多层)。
备注:
1. Vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以!
2. 使用watch时根据数据的具体结构，决定是否采用深度监视。
二、监视属性和计算属性对比
computed和watch之间的区别:
- computed能完成的功能，watch都可以完成
- watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作，
两个重要的小原则:
- 所被vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
- 所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成头函数这样this的指向才是vm 或 组件实例对象。
官网实例
三、绑定class样式
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
.happy{
background-image: linear-gradient(#e66465, #9198e5);
}
.sad{
background-image: linear-gradient(green, black);
}
.normal{
background-color: linear-gradient(blue, white);
}
.basic{
height: 100px;
width: 300px;
margin: 100px;
text-align: center;
color: white;
font-size: 28px;
border: 1px solid red;
background-color: gray;
}
</style>
<body>
<div id="app">
<div class="basic" :class="mod" @click="change">
{{modStr}}<br/>
点击更换心情
</div>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
mod:"happy",
modStr:"开心"
},
methods: {
change(){
console.log('我被点击了')
const arr=["happy","sad","normal"];
const arrStr=["开心","伤心","普通"];
const a = Math.floor(Math.random()*3);
console.log(a);
this.mod = arr[a];
this.modStr = arrStr[a];
}
},
}
)
function randomNum(minNum,maxNum){
switch(arguments.length){
case 1:
return parseInt(Math.random()*minNum+1,10);
break;
case 2:
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
break;
default:
return 0;
break;
}
}
</script>
</html>四、绑定style样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
.normal{
background-color: linear-gradient(blue, white);
}
.basic{
height: 100px;
width: 300px;
margin: 100px;
text-align: center;
color: white;
font-size: 28px;
border: 1px solid red;
background-color: gray;
}
</style>
<body>
<div id="app">
<div class="basic normal" :style="{fontSize: fsize+'px'}">
我的心情
</div> <br/>
<div class="basic normal" :style="styleObj">
我的心情2
</div> <br/>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
fsize : 40 ,
styleObj:{
fontSize: 40,
color: 'red',
backgroundColor: 'blue'
}
},
methods: {
},
}
)
</script>
</html>绑定样式总结：
class样式
- 写法: class="xxx"xxx可以是字符串、对象、数组。
- 字符串写法适用于:类名不确定，要动态获取。
- 对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
- 数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
style样式
- :style="{fontsize:xxx}"其中xxx是动态值。
- :style="[a,b]"其中a、b是样式对象。