初学vue-04

1.天气案例

实现输入一个关于一个天气的语句，通过按按钮来改变语句的显示

 

 body代码

<span>天气修改案例：天气{{infor}} </span>
			<br>
			<button @click="changeWeather">修改天气</button>

jsp代码

	const vm=new Vue({
				el:'#root',
				data:{
					weather:true
				},
				methods:{
					changeWeather(){
						this.weather=!this.weather
					}
				},
				computed:{
					infor(){
						return this.weather ? '炎热' : '寒冷'
					}
					
					}
			
			})

2.监视属性

表现为天气每改变一次，就显示输出一次

 jsp监视属性

watch:{
					weather:{
						handler(newValue,oldValue){
						console.log('wearher',newValue,oldValue)
						}
					}
				}

3.深度监视

访问对象内部的元素

watch默认deep为FALSE，当deep为true是，开始深度监视

data中的属性：

data:{
					name:"朱李闯",
					url:"https://www.bilibili.com/video/BV1Zy4y1K7SH?p=7",
					insert:{
						name:"zlcccc"
					},
					firstname:"朱",
					lastname:"李闯",
					weather:true
				},

watch中的代码：

'insert.name':{
						handler(){
							deep=true
							console.log("name被修改了")
						}
					}

4.监视简写

主要为watch中的代码：

watch:{
					weather(newValue,oldValue){
						console.log('wearher',newValue,oldValue)
						},
					'insert.name'(){
							deep=true
							console.log("name被修改了")
					}
					}