From 198ed5d27eb646f587e829d3d16d856dbfe2b1bc Mon Sep 17 00:00:00 2001
From: 1 <1>
Date: Wed, 30 Mar 2022 11:21:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BD=9C=E4=B8=9A20220330=5F?=
 =?UTF-8?q?vue=5F=E6=A8=A1=E6=9D=BF=E8=AF=AD=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../threeKingdom.html"                        |   0
 .../index.html"                               | 116 ++++++++++++++++++
 2 files changed, 116 insertions(+)
 rename "\350\222\213\345\256\207\350\266\205/20220329_el\346\214\202\350\275\275\347\202\271+data\345\261\236\346\200\247/threeKingdom.html" => "\350\222\213\345\256\207\350\266\205/20220329_vue_el\346\214\202\350\275\275\347\202\271+data\345\261\236\346\200\247/threeKingdom.html" (100%)
 create mode 100644 "\350\222\213\345\256\207\350\266\205/20220330_vue_\346\250\241\346\235\277\350\257\255\345\235\227/index.html"
diff --git "a/\350\222\213\345\256\207\350\266\205/20220329_el\346\214\202\350\275\275\347\202\271+data\345\261\236\346\200\247/threeKingdom.html" "b/\350\222\213\345\256\207\350\266\205/20220329_vue_el\346\214\202\350\275\275\347\202\271+data\345\261\236\346\200\247/threeKingdom.html"
similarity index 100%
rename from "\350\222\213\345\256\207\350\266\205/20220329_el\346\214\202\350\275\275\347\202\271+data\345\261\236\346\200\247/threeKingdom.html"
rename to "\350\222\213\345\256\207\350\266\205/20220329_vue_el\346\214\202\350\275\275\347\202\271+data\345\261\236\346\200\247/threeKingdom.html"
diff --git "a/\350\222\213\345\256\207\350\266\205/20220330_vue_\346\250\241\346\235\277\350\257\255\345\235\227/index.html" "b/\350\222\213\345\256\207\350\266\205/20220330_vue_\346\250\241\346\235\277\350\257\255\345\235\227/index.html"
new file mode 100644
index 0000000..5f4da50
--- /dev/null
+++ "b/\350\222\213\345\256\207\350\266\205/20220330_vue_\346\250\241\346\235\277\350\257\255\345\235\227/index.html"
@@ -0,0 +1,116 @@
+<!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="https://cdn.jsdelivr.net/npm/vue@2"></script>
+    <title>vue模板语块</title>
+</head>
+
+<body>
+    <h1>课堂总结</h1>
+    <div id="app1">
+        <h2>v-text:</h2>
+        <div>Hello,{{text}}</div>
+        <div v-text="text">你好,</div>
+        <div v-text="html"></div>
+        <p><b>总结：v-text的内容会覆盖原html标签内的文本，此外,v-text的内容含有html标签，会将标签一并输出</b></p>
+        <hr>
+        <h2>v-html:</h2>
+        <div v-html="html">11</div>
+        <div v-html="html2">11</div>
+        <p><b>总结：v-html的内容会覆盖原html标签内的文本，此外,v-html相当于innerHTML,标签的样式也会一并输出</b></p>
+    </div>
+    <hr>
+    <div id="app2">
+        <h2>v-bind:</h2>
+        <p>自定义额外id参数:</p>
+        <div v-bind:id="'0_'+id+'_1'">原id为：{{id}}, <b> 打开F12,此时quq的id为id="0_quq_1"</b></div>
+        <p>同理,也可自定义额外class参数:</p>
+        <div v-bind:class="class1"><b> 打开F12,此时这个标签加上了class="class1"</b></div>
+        <p>给一个a绑定href属性：</p>
+        <a v-bind:href="url">百度</a>
+        <p>显示/不显示</p>
+        <div v-bind:disabled="disabled">div是否还显示 //无效......</div>
+        <button v-bind:disabled="disabled">按钮</button> //disabled的值为true,则按钮变灰
+    </div>
+    <hr>
+    <app id="app3">
+        <p>trim()方法去空格：</p>
+        <div>{{message.trim()}}</div>
+        <div>{{echo(message)}} //echo，F12查看代码有前后空格，将message的值输出了</div>
+    </app>
+    <hr>
+    <div id="app4">
+        <p>条件渲染 v-if/v-else-if/v-else:</p>
+        <div v-if="result">if显示</div>
+        <!-- <div v-else-if="result">else if 1显示</div> -->
+        <div v-else="result">else 显示</div>
+        <p><b>result 的值：为false就显示else,为true显示if的值</b></p>
+
+        <p>v-show:</p>
+        <div v-show="result1">
+            此处v-show为true,
+            而当v-show为false时，仅仅是将元素的display属性设置为none而已。
+        </div>
+    </div>
+    <hr>
+    <div id="app5">
+        <div v-on:click="click">div点击我</div>
+        <button @click="click">button点击我</button>
+    </div>
+</body>
+<script>
+    let app1 = new Vue({
+        el: "#app1",
+        data: {
+            text: "Vue",
+            html: "<h2>Hello,Vue</h2>",
+            html2: '<span style="color:red">Hello Vue</span>'
+        }
+    })
+
+    let app2 = new Vue({
+        el: "#app2",
+        data: {
+            id: "quq",
+            url: "http://www.baidu.com",
+            class1: '111',
+            disabled: true,
+        }
+    })
+
+    let app3 = new Vue({
+        el: "#app3",
+        data: {
+            message: "        我的前后都有空格       ",
+        },
+        methods: {
+            echo: function (a) {
+                let b = a;
+                return b;
+            }
+        }
+    })
+
+    let app4 = new Vue({
+        el: "#app4",
+        data: {
+            result: false,
+            result1: true
+        }
+    })
+
+    let app5 = new Vue({
+        el: "#app5",
+        methods: {
+        click:function() {
+            alert("click");
+        }
+        }
+    })
+</script>
+
+</html>
\ No newline at end of file
-- 
Gitee

