From 99f62bbe7738224e8858ba06eca1674e5b9dc84e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=B6=A6=E5=B1=B1?= <1968965292@qq.com>
Date: Thu, 31 Mar 2022 09:15:30 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A42022-3-29=E5=88=B02022-3-?=
 =?UTF-8?q?30=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2022-3-29vue/index.html"                  | 56 +++++++++++++++
 .../2022-3-30vue/index.html"                  | 69 +++++++++++++++++++
 2 files changed, 125 insertions(+)
 create mode 100644 "\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
 create mode 100644 "\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
new file mode 100644
index 0000000..aef3409
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="vue.js"></script>
+    <title>vue练习el与data</title>
+</head>
+<body>
+    <!-- 写一个vue的页面，把 el，与data的元素都写写，有兴趣的可以看看源码 -->
+    <div id="lai">
+        {{message}}<br>
+        {{hong}}
+    </div>
+    <p>
+        {{hong}}
+    </p>
+
+    <div id="lai2">
+        {{message}}
+    </div>
+</body>
+<script>
+    let vm = new Vue({
+        el:"#lai",
+        data:{
+            message:'hello vue',
+            hong:'虹霖'
+        }
+    });
+    let vc = new Vue({
+        el:"p",
+        data:{
+            hong:'p标签的虹'
+        }
+    })
+    let vm2 = new Vue({
+        el:'#lai2',
+        data:{
+            message:"honglin123"
+        }
+
+    })
+    console.log(vm.$el);
+
+    console.log(vm.message);
+    console.log(vm.hong);
+    console.log(vc.hong);
+    console.log(vc.$data.hong);
+
+    vm.$watch('message',function(newValue,oldValue){
+        console.log(newValue,oldValue);
+    })
+    vm.$watch('message');
+</script>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
new file mode 100644
index 0000000..fda361b
--- /dev/null
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-30vue/index.html"
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>模板语法</title>
+    <!-- <script src="vue.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<body>
+    <div id="app">
+        <div>{{text}}+第一段文字</div>
+        <div v-text="text">+使用v-text,显示不了<li>这是li,也显示不了</li></div>
+        
+        <div>{{html}}</div>
+        <div v-html="html">使用v-html</div>
+        <!-- v-bind:绑定属性 -->
+        <div id="demo"></div>
+        <div v-bind:id="'1_'+id+'_5'">控制台查看v-bind:id</div>
+        <!-- 自定义属性 -->
+        <div v-bind:attr_id="attrid"></div>
+        <div v-bind:class="class1">class</div>
+        
+        <button v-bind:disabled="isButtonDisabled">false状态的按钮</button>
+        <button v-bind:disabled="isButtonDisabled2">ture状态的按钮</button>
+        <div>{{num+'+num后续的输出'}}</div>
+        <div>{{ok?'输出ok':'输出不ok'}}</div>
+        <div>{{val.trim()}}</div>
+        <div>{{echo(val)}}</div>
+        <div v-if="result">if显示?????</div>
+        <div v-else="result">else显示!!!</div>
+        <div v-show="result">show的显示???</div>
+        <div v-on:click="click">点击</div>
+        <div v-on:click="click2()">点击2</div>
+    </div>
+    
+</body>
+<script>
+    let data = {
+        text:'使用外部data写入的一段文本',
+        html:'<span style="color:red">我是html元素</span>',
+        id:'demo2',
+        attrid:100,
+        class1:'cl1',
+        isButtonDisabled:false,
+        isButtonDisabled2:true,
+        num:1000,
+        ok:false,
+        val:'  前面有空格，后面也有空格     ',
+        result:false,
+        click2:function(){
+            alert('虹霖')
+        }
+    }
+    let vue = new Vue({
+        el:"#app",
+        data:data,
+        methods:{
+            echo:function(a){
+                let b = '虹色'+a+'零零零';
+                return b;
+            },
+            click:function(){
+                alert('click')
+            }
+        }
+    })
+</script>
+</html>
\ No newline at end of file
-- 
Gitee


From eabd5567796d1f6afaff38633d703c205a2f5600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=B6=A6=E5=B1=B1?= <1968965292@qq.com>
Date: Thu, 31 Mar 2022 09:37:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2022-3-29vue/index.html"                             | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git "a/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html" "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
index aef3409..4c65186 100644
--- "a/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
+++ "b/\351\273\204\346\266\246\345\261\261/2022-3-29vue/index.html"
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="vue.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
     <title>vue练习el与data</title>
 </head>
 <body>
@@ -47,10 +47,9 @@
     console.log(vm.hong);
     console.log(vc.hong);
     console.log(vc.$data.hong);
-
+    // $watch方法，Chorem控制台输入 vm.message = '修改后message的值';
     vm.$watch('message',function(newValue,oldValue){
-        console.log(newValue,oldValue);
-    })
-    vm.$watch('message');
+        console.log(newValue,oldValue)
+    });
 </script>
 </html>
\ No newline at end of file
-- 
Gitee

