VUE第四天

watch
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWea">切换天气</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {// data 的所有属性都会成功 vm 对象的属性, 而模板页面中可以直接访问 
            isHot: true,
        },
        computed: {
            info() {
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWea() {
                this.isHot = !this.isHot
            }
        },
        watch: {
            isHot: {    //此处应该是'isHot' 去掉''是简写
                immediate: true,//初始化时让handler调用一下
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue)
                }
            }
        },
    }) 
</script>

监视num对象中的a的变化
watch: {
            isHot: {
                // immediate: true,//初始化时让handler调用一下
                handler(newValue, oldValue) {
                    console.log('isHot被修改了', newValue, oldValue)
                }
            },
            //监视多级结构中某个属性的变化
            'num.a': {
                handler() {
                    console.log('a被改变了');
                }
            }
        }
深度监视
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注:
(1).vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
num: {
            deep: true,
            handler() {
                console.log('a被改变了');
            }
        }
   //简写
            isHot(newValue, oldValue) {
                console.log('isHot被修改了', newValue, oldValue);
            }

computed和lwatch之间的区别:
    1.computed能完成的功能，watch都可以完成。
    2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
  两个重要的小原则;
    1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
    2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。

绑定样式:
1.class样式
写法:class=" xxx" xxx可以是字符串、对象、数组。
    字符串写法适用于:类名不确定，要动态获取。
    对象写法适用于:要绑定多个样式,个数不确定，名字也不确定。
    数组写法适用于:要绑定多个样式，个数确定，名字也确定,但不确定用不用。
2. style样式
    :style="{fontSize: xxx}"其中xxx是动态值。
    : style="[a,b]"其中a、b是样式对象。

条件渲染:
1.v-if
写法:
    (1).v-if="表达式”
    (2).v-else-if="表达式”
    (3).v-else="表达式"
适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
2.v-show
写法: v-show="表达式"
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
template与v-if可以一起使用