添加深度监视案例

3 years ago · 3f8d0bf19f
parent 5b450a3f80
commit 3f8d0bf19f
3 changed files with 138 additions and 0 deletions
--- a/09_监视属性/1.天气案例.html
+++ b/09_监视属性/1.天气案例.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>1.天气案例</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h3>今天天气很{{showInfo}}</h3>
+    <button @click="changeWeather">切换天气</button>
+</div>
+<script>
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            'isHot': true,
+        },
+        computed: {
+            showInfo() {
+                return this.isHot ? '炎热' : '凉爽'
+            }
+
+        },
+        methods:{
+            changeWeather() {
+                this.isHot = !this.isHot
+            }
+        }
+    })
+</script>
+</body>
+</html>
--- a/09_监视属性/2.天气案例_监视属性.html
+++ b/09_监视属性/2.天气案例_监视属性.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>2.天气案例_监视属性</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h3>今天天气很{{showInfo}}</h3>
+    <button @click="changeWeather">切换天气</button>
+</div>
+<script>
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            'isHot': true,
+        },
+        computed: {
+            showInfo() {
+                return this.isHot ? '炎热' : '凉爽'
+            }
+
+        },
+        methods: {
+            changeWeather() {
+                this.isHot = !this.isHot
+            }
+        },
+        // watch: {
+        //     isHot: {
+        //         immediate: true,
+        //         handler(newValue,oldValue){
+        //             console.log('isHot 被修改', newValue, oldValue)
+        //         }
+        //     }
+        // }
+    })
+    vm.$watch('isHot', {
+        immediate: true,
+        handler(newValue, oldValue){
+            console.log('isHot 被修改了', newValue, oldValue)
+        }
+    })
+</script>
+</body>
+</html>
--- a/09_监视属性/3.天气案例_深度监视.html
+++ b/09_监视属性/3.天气案例_深度监视.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>2.天气案例_监视属性</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h3>今天天气很{{showInfo}}</h3>
+    <button @click="changeWeather">切换天气</button>
+    <hr/>
+    <h3>a的值是:{{number.a}}</h3>
+    <button @click="number.a++">点我a+1</button>
+</div>
+<script>
+    Vue.config.productionTip = false
+    const vm = new Vue({
+        el: "#root",
+        data: {
+            'isHot': true,
+            number: {
+                a: 1,
+                b: 1,
+            }
+        },
+        computed: {
+            showInfo() {
+                return this.isHot ? '炎热' : '凉爽'
+            }
+
+        },
+        methods: {
+            changeWeather() {
+                this.isHot = !this.isHot
+            }
+        },
+        watch: {
+            isHot: {
+                immediate: true,
+                handler(newValue, oldValue) {
+                    console.log('isHot 被修改', newValue, oldValue)
+                }
+            },
+            'number': {
+                deep: true,  // 深度监视开关
+                handler() {
+                    console.log('number被改变！ ', this.number.a)
+                }
+            }
+        }
+    })
+
+</script>
+</body>
+</html>