From 7a397e45aa23a4d03166a47368678a7a7b77817f Mon Sep 17 00:00:00 2001
From: YH <2543387770@qq.com>
Date: Wed, 26 May 2021 17:40:19 +0800
Subject: [PATCH] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...52\347\216\257\347\273\204\344\273\266.md" | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 "\351\273\204\345\256\207\347\205\214/5.26 Vue\346\235\241\344\273\266\345\276\252\347\216\257\347\273\204\344\273\266.md"

diff --git "a/\351\273\204\345\256\207\347\205\214/5.26 Vue\346\235\241\344\273\266\345\276\252\347\216\257\347\273\204\344\273\266.md" "b/\351\273\204\345\256\207\347\205\214/5.26 Vue\346\235\241\344\273\266\345\276\252\347\216\257\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..e7c2196
--- /dev/null
+++ "b/\351\273\204\345\256\207\347\205\214/5.26 Vue\346\235\241\344\273\266\345\276\252\347\216\257\347\273\204\344\273\266.md"	
@@ -0,0 +1,139 @@
+# Vue初试
+
+## 条件判断
+可以通过v-if和v-else进行判断语句
+```
+<!-- 前端代码 -->
+<div id="app">
+    <span v-if="show">
+        {{str1}}
+    </span>
+    <span v-else>
+        {{str2}}
+    </span>
+</div>
+```
+
+```
+//后端代码
+let app = new Vue({
+    el: "#app",
+    data:{
+        show:true,
+        str1:"正确咯,欢迎来到一个新的世界。。。",
+        str2:"错误了，你的世界发生的错乱。。。"
+    }
+})
+```
+
+## 循环
+通过v-for可以进行一些简单的循环
+```
+<!-- 前端代码 -->
+<div id="app">
+    <ul>
+        <li v-for="stu in students">{{stu.id}}{{stu.Name}}</li>
+    </ul>
+</div>
+```
+
+```
+// 后端代码
+let app = new Vue({
+    el: "#app",
+    data:{
+        students: [
+                {
+                    id: 1,
+                    Name: "凌白"
+                },
+                {
+                    id: 2,
+                    Name: "小白"
+                },
+                {
+                    id: 3,
+                    Name: "吴白"
+                }
+            ]
+        }
+})
+```
+
+## 双向绑定
+v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
+```
+<!-- 前端代码 -->
+<div id="app">
+    <form>
+        <table>
+            <tr>
+                <td><label>名字：</label></td>
+                <td><input type="text" v-model = "formData.name" ></td>
+            </tr>
+            <tr>
+                <td><label>年龄：</label></td>
+                <td><input type="text" v-model="formData.age"></td>
+            </tr>
+        </table>
+    </form>
+    <label>{{str}}</label>
+</div>
+```
+
+```
+// 后端代码
+let app = new Vue({
+    el: "#app",
+    data: {        
+        formData: {
+            name: "",
+            age: ""
+        },
+    },
+
+    computed: {
+        str: function () {
+            return `名字：${this.formData.name}  年龄：${this.formData.age}`
+        }
+    }
+})
+```
+
+## 组件
+
+```
+<!-- 前端代码 -->
+<div id="app">
+    <ul>
+        <show-item v-for="res in show" v-bind:x="res"></show-item>
+    </ul>
+</div>
+```
+
+```
+// 后端代码
+Vue.component("show-item", {
+        props:["x"],
+        template:`<li>{{x.str}}</li>`
+    });
+let app = new Vue({
+    el: "#app",
+    data: {
+        show: [
+            {
+                str: "今天天气针不戳。。。"
+            },
+            {
+                str: "那确实。。。"
+            },
+            {
+                str: "今天天气不赖啊。。。"
+            },
+            {
+                str: "花有重开日。。。"
+            }
+        ]
+    }
+})
+```
\ No newline at end of file
-- 
Gitee