lovecoding
/
W250913


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!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>{{arr}}</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]
            },
            methods:{
                change(){
                    this.num++;
                    // this.arr.push(5);
                    // this.arr[1] = "hello";
                    // this.arr = ["a","b","c"];
                }
            },
            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变化了");
                // }
            }
        })
    </script>
</body>
</html>