和阿牛一起冲Vue
文章目录
- 和阿牛一起冲Vue
- 前言
- 三种方法切换天气
- 代码演示
- 监视属性
- 监视的两种写法
- 深度监视
前言
青春，因为奋斗与奉献更美丽。
三种方法切换天气
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气案例</title>
</head>
<body>
<div id="root">
<!-- <h1>今天天气很{{watch? '炎热':'凉爽'}}</h1> -->
<h1>今天天气很{{info}}</h1>
<button @click="fun">切换天气</button>
</div>
</body>
<script src='vue.js'></script>
<script>.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: 'jack',
watch: true,
},
methods: {
fun() {
// console.log(this.watch);
if (this.watch == false) {
this.watch = true
} else {
this.watch = false
}
}
},
computed: {
info() {
return this.watch ? '炎热' : '凉爽'
}
}
});</script>
</html>
或者有更加关于menthods精简的写法
<h1>今天天气很{{watch? '炎热':'凉爽'}}</h1>
: {
fun() {
return this.watch = !this.watch;
}
},监视属性
监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
监视的两种写法
- (1).new Vue时传入watch配置
- (2).通过vm.$watch监视
vm.$watch('watch',{
// ,计算属性也可以检测，初始化时，让handler调用一下
immediate: true,
// 当我们的watch发生改变时会调用一个监控方法
handler(newValue, oldValue) {
console.log('watch被修改了', newValue, oldValue);
},
})
简写：
// 简写
watch(newValue, oldValue) {
console.log('watch被修改了', newValue, oldValue);
}
//或者
vm.$watch('watch',function(newValue, oldValue)
{
console.log('watch被修改了', newValue, oldValue);
}
)
new Vue时传入watch配置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气案例</title>
</head>
<body>
<div id="root">
<!-- <h1>今天天气很{{watch? '炎热':'凉爽'}}</h1> -->
<h1>今天天气很{{info}}</h1>
<!-- <h1>今天天气很{{watch}}</h1> -->
<button @click="fun">切换天气</button>
</div>
</body>
<script src='vue.js'></script>
<script>.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name: 'jack',
watch: true,
},
methods: {
fun() {
return this.watch = !this.watch;
}
},
computed: {
info() {
return this.watch ? '炎热' : '凉爽'
}
},
watch: {
watch: {
// ,计算属性也可以检测，初始化时，让handler调用一下
immediate: true,
// 当我们的watch发生改变时会调用一个监控方法
handler(newValue, oldValue) {
console.log('watch被修改了', newValue, oldValue);
},
}
}
});
vm.$watch('watch',{
// ,计算属性也可以检测，初始化时，让handler调用一下
immediate: true,
// 当我们的watch发生改变时会调用一个监控方法
handler(newValue, oldValue) {
console.log('watch被修改了', newValue, oldValue);
},
})</script>
</html>
深度监视
: {
deep: true,//深度
handler() {
console.log('numbres变化le');
}
},
}深度监视：
- (1).Vue中的watch默认不监测对象内部值的改变（一层）。
- (2).配置deep:true可以监测对象内部值改变（多层）。
备注：
- (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
- (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气案例</title>
</head>
<body>
<div id="root">
<!-- <h1>今天天气很{{watch? '炎热':'凉爽'}}</h1> -->
<h1>今天天气很{{info}}</h1>
<!-- <h1>今天天气很{{watch}}</h1> -->
<button @click="fun">切换天气</button>
<hr />
<h3>{{Numbers.a}}</h3>
<button @click="Numbers.a++">点我就自增a</button>
<hr />
<h3>{{Numbers.b}}</h3>
<button @click="Numbers.b++">点我就自增b</button>
</div>
</body>
<script src='vue.js'></script>
<script>.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name: 'jack',
watch: true,
Numbers: {
a: 1,
b: 1
}
},
methods: {
fun() {
return this.watch = !this.watch;
}
},
computed: {
info() {
return this.watch ? '炎热' : '凉爽'
}
},
watch: {
watch: {
// ,计算属性也可以检测，初始化时，让handler调用一下
// immediate: true,
// 当我们的watch发生改变时会调用一个监控方法
handler(newValue, oldValue) {
console.log('watch被修改了', newValue, oldValue);
},
},
//监视单个对象的属性值
'Numbers.a': {
handler() {
console.log('a自己增加了');
}
},
// 整个对象的所有属性的深度监视
Numbers: {
deep: true,
handler() {
console.log('numbres变化le');
}
},
}
});</script>
</html>
