lovecoding
/
W250913


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{num}}</div>
        <div>{{obj.c.x}}</div>
        <input type="text" v-model.number="num">
        <button @click="change">按钮</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                num:0,
                arr:[1,2,3,4],
                obj:{
                    a:1,
                    b:2,
                    c:{
                        x:100,
                        y:200
                    }
                }
            },
            methods:{
                change(){
                    this.num++;
                    // this.arr.push(5);
                    // this.arr[1] = "hello";
                    // this.arr = ["a","b","c"];
                    // this.$set(this.arr[2],0,"hello");
                    this.obj.c.x = 1000;
                }
            },
            watch:{
                // 监听data中某个属性变化 监听谁就以谁为方法名
                // 只要num变化了，就会调用num方法
                // 方法中会有两个参数，分别是新值和旧值
                num(newVal,oldVal){
                    console.log(newVal,oldVal);
                },
                // watch 默认只能监听基本数据类型 
                // 如果要监听数组或对象变化，需要设置deep:true
                // arr:{
                //     // 监听数组或对象变化时，会调用handler方法
                //     handler(){
                //         console.log("arr变化了");
                //     },
                //     // 开启deep监听后，会监听数组或对象中的所有属性
                //     deep:true
                // }
                // arr(){
                //     console.log("arr变化了");
                // }
                // obj(newVal,oldVal){
                //     console.log(newVal,oldVal);
                // }
                obj:{
                    handler(){
                        console.log("obj变化了");
                    },
                    deep:true
                }
            }
        })
    </script>
</body>
</html>