姓：
名：
全名：{{fullName}}
监视属性案例
要求：单击
切换天气按钮，天气在凉爽和炎热之间切换
简单实现
天气案例今天天气很{{info}}
<button @click="changeWeather">切换天气
监视属性
监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
天气案例_监视属性(2).通过vm.$watch监视
今天天气很{{info}}
<button @click="changeWeather">切换天气
深度监视
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
天气案例_深度监视(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
今天天气很{{info}}
<button @click="changeWeather">切换天气
a的值是:{{numbers.a}}
<button @click="numbers.a++">点我让a+1
b的值是:{{numbers.b}}
<button @click="numbers.b++">点我让b+1
<button @click="numbers = {a:666,b:888}">彻底替换掉numbers
{{numbers.c.d.e}}
监视属性简写
天气案例_监视属性_简写今天天气很{{info}}
<button @click="changeWeather">切换天气
watch实现
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
姓名案例_watch实现这样this的指向才是vm 或 组件实例对象。
姓：
名：
全名：{{fullName}}
绑定样式
绑定样式：
1. class样式
写法:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
:style="{fontSize: xxx}“其中xxx是动态值。
绑定样式 .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px solid red;; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border: 4px dashed rgb(2, 197, 2); background-color: gray; } .normal{ background-color: skyblue; } .atguigu1{ background-color: yellowgreen; } .atguigu2{ font-size: 30px; text-shadow:2px 2px 10px red; } .atguigu3{ border-radius: 20px; }:style=”[a,b]"其中a、b是样式对象。
