1 неделя назад · 8cd9ab358b
--- a/9_Vue/10_watch.html
+++ b/9_Vue/10_watch.html
@@ -0,0 +1,67 @@
 
															+<!DOCTYPE html>
														
 
															+<html lang="en">
														
 
															+<head>
														
 
															+    <meta charset="UTF-8">
														
 
															+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
														
 
															+    <title>Document</title>
														
 
															+    <script src="./js/vue.js"></script>
														
 
															+</head>
														
 
															+<body>
														
 
															+    <div id="app">
														
 
															+        <h1>{{num}}</h1>
														
 
															+        <!-- 如果事件处理函数内只有一行代码 那么可以直接写在事件后边 不用定义事件处理函数 -->
														
 
															+        <button type="button" @click="num++">增加</button>
														
 
															+        <div>
														
 
															+            <p>姓名{{obj.name}}</p>
														
 
															+            <p>年龄{{obj.age}}</p>
														
 
															+        </div>
														
 
															+        <button type="button" @click="obj.age++">年龄增加</button>
														
 
															+        
														
 
															+    </div>
														
 
															+    <script>
														
 
															+        new Vue({
														
 
															+            el: '#app',
														
 
															+            data:{
														
 
															+                num: 0,
														
 
															+                obj:{
														
 
															+                    name:'张三',
														
 
															+                    age:18
														
 
															+                }
														
 
															+            },
														
 
															+            // watch监听属性值的变化
														
 
															+            watch:{
														
 
															+                // 把需要监听的属性值写在watch对象中 以函数的形式
														
 
															+                // 函数的参数是新值和旧值 （修改之后值，修改之前值）
														
 
															+                num(newVal,oldVal){
														
 
															+                    console.log(newVal,oldVal);
														
 
															+                    if(newVal>10){
														
 
															+                        // this.num=10;
														
 
															+                        console.log('num不能大于10');
														
 
															+                    }
														
 
															+                },
														
 
															+                // 如果监听的是一个对象属性变化 那么需要使用deep:true来监听对象的属性值的变化
														
 
															+                // obj(newVal,oldVal){
														
 
															+                //     console.log(newVal,oldVal);
														
 
															+                // }
														
 
															+                // 方法一
														
 
															+                // 改为对象的形式
														
 
															+                // 可以监听对象中所有属性的变化
														
 
															+                // 数组监听同样需要使用deep:true来监听数组的值的变化
														
 
															+                // obj:{
														
 
															+                //     // 监听对象的属性值变化
														
 
															+                //     handler(newVal,oldVal){
														
 
															+                //         console.log(newVal,oldVal);
														
 
															+                //     },
														
 
															+                //     // 监听对象的属性值变化
														
 
															+                //     deep:true
														
 
															+                // }
														
 
															+                // 方法二
														
 
															+                // 只能监听对象中具体某一个属性的变化
														
 
															+                "obj.age":(newVal,oldVal)=>{
														
 
															+                    console.log(newVal,oldVal);
														
 
															+                }
														
 
															+            }
														
 
															+        })
														
 
															+    </script>
														
 
															+</body>
														
 
															+</html>
														
--- a/9_Vue/9_计算属性.html
+++ b/9_Vue/9_计算属性.html
@@ -0,0 +1,40 @@
 
															+<!DOCTYPE html>
														
 
															+<html lang="en">
														
 
															+<head>
														
 
															+    <meta charset="UTF-8">
														
 
															+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
														
 
															+    <title>Document</title>
														
 
															+    <script src="./js/vue.js"></script>
														
 
															+</head>
														
 
															+<body>
														
 
															+    <div id="app">
														
 
															+        <input type="text" v-model.number="a">
														
 
															+        +
														
 
															+        <input type="text" v-model.number="b">
														
 
															+        = 
														
 
															+        <span>{{c}}</span>
														
 
															+    </div>
														
 
															+    <script>
														
 
															+        // new Vue 实例化 Vue 实例
														
 
															+        new Vue({
														
 
															+            // 挂载元素
														
 
															+            el: '#app',
														
 
															+            // data 放置数据 所有需要展示在页面中的数据
														
 
															+            data: {
														
 
															+                a: 20,
														
 
															+                b: 20,
														
 
															+                // c: 30
														
 
															+            },
														
 
															+            // computed计算属性 类似于data中的属性值 可以直接在页面中{{}}进行展示
														
 
															+            computed:{
														
 
															+                c(){
														
 
															+                    // 其实计算属性就是一个函数 函数内可以写任意逻辑代码
														
 
															+                    // 虽然计算属性形式是一个函数但是不需要调用，只要相关联的属性值发生变化计算属性就会自动执行
														
 
															+                    // 计算属性最终的结果就是 return值
														
 
															+                    return this.a + this.b
														
 
															+                }
														
 
															+            }
														
 
															+        })
														
 
															+    </script>
														
 
															+</body>
														
 
															+</html>