From 1ab1b77f960bcbee3807dfbb8c8da836ca354de0 Mon Sep 17 00:00:00 2001
From: zlhong <1774305002@qq.com>
Date: Wed, 26 May 2021 17:31:18 +0800
Subject: [PATCH] =?UTF-8?q?Vue=E7=AC=94=E8=AE=B0=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...21-05-25(Vue\345\237\272\347\241\2001).md" |  98 +++++++++++++
 ...21-05-26(Vue\345\237\272\347\241\2002).md" | 132 ++++++++++++++++++
 2 files changed, 230 insertions(+)
 create mode 100644 "\345\274\240\346\236\227\347\272\242/2021-05-25(Vue\345\237\272\347\241\2001).md"
 create mode 100644 "\345\274\240\346\236\227\347\272\242/2021-05-26(Vue\345\237\272\347\241\2002).md"

diff --git "a/\345\274\240\346\236\227\347\272\242/2021-05-25(Vue\345\237\272\347\241\2001).md" "b/\345\274\240\346\236\227\347\272\242/2021-05-25(Vue\345\237\272\347\241\2001).md"
new file mode 100644
index 0000000..f7a8b81
--- /dev/null
+++ "b/\345\274\240\346\236\227\347\272\242/2021-05-25(Vue\345\237\272\347\241\2001).md"
@@ -0,0 +1,98 @@
+<!-- 开发环境版本，包含了有帮助的命令行警告 -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+<!-- 生产环境版本，优化了尺寸和速度 -->
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+
+## 声明式渲染
+
+Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
+
+```
+<div id="app">
+  {{ msg }}
+</div>
+
+```
+
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+    msg: '111'
+  }
+})
+```
+现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。
+
+打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.msg 的值，你将看到上例相应地更新。
+
+
+### 绑定元素 attribute：
+
+
+```
+<span v-bind:title="app">
+    酱酱酱
+</span>
+<span title="111111">
+    2222222
+</span>
+```
+```
+let app=new Vue({
+            el:'#top',
+            data(){
+                return {
+                    seen:false,
+                    app:'啦啦啦'
+                }
+            }
+        })
+```
+
+鼠标悬停几秒钟查看此处动态绑定的提示信息！
+
+
+### 条件与循环
+
+```
+<div id="app">
+  <p v-if="seen">现在你看到我了</p>
+</div>
+```
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+    seen: true
+  }
+})
+```
+继续在控制台输入 app.seen = false，之前显示的消息将消失。
+
+这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
+
+还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
+```
+<div id="app">
+  <ol>
+    <li v-for="todo in todos">
+      {{ todo.text }}
+    </li>
+  </ol>
+</div>
+```
+```
+var app = new Vue({
+  el: '#app',
+  data: {
+    todos: [
+      { text: '学习 JavaScript' },
+      { text: '学习 Vue' },
+      { text: '整个项目' }
+    ]
+  }
+})
+```
+在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
\ No newline at end of file
diff --git "a/\345\274\240\346\236\227\347\272\242/2021-05-26(Vue\345\237\272\347\241\2002).md" "b/\345\274\240\346\236\227\347\272\242/2021-05-26(Vue\345\237\272\347\241\2002).md"
new file mode 100644
index 0000000..a3391c0
--- /dev/null
+++ "b/\345\274\240\346\236\227\347\272\242/2021-05-26(Vue\345\237\272\347\241\2002).md"
@@ -0,0 +1,132 @@
+### 条件与循环
+
+```
+    <div id="app">
+        <span v-if="bea" title="那就111">
+            111
+        </span>
+        <span v-else title="那就222">
+            这222
+        </span>
+
+        <h1 v-show="need">3333333</h1>
+    </div>
+
+    let app=new Vue({
+        el:'#app',
+        data(){
+            return {
+                bea:true,
+                need:true
+            }
+        }
+    })
+```
+在控制台中输入app.bea=false，页面将显示'v-else'中内容
+```
+    <div id="app">
+        <ul>
+            <li v-for="item in toDos">{{item.taskName}}</li>
+        </ul>
+    </div>
+
+    let app=new Vue({
+        el:'#app',
+        data(){
+            return {
+                toDos:[{
+                    taskName:'aaa'
+                },
+                {
+                    taskName:'bbb'
+                },
+                {
+                    taskName:'ccc'
+                },
+                {
+                    taskName:'ddd'
+                }
+                ]
+                
+            }
+        }
+    })
+```
+在控制台里，输入 app.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
+
+
+```
+    <div id="app">
+        <form action="">
+            <table>
+                <tr>
+                    <td><label for="">用户名：</label></td>
+                    <td><input type="text" v-model="formData.username"></td>
+                </tr>
+                <tr>
+                    <td><label for="">密码：</label></td>
+                    <td><input type="text" v-model="formData.password"></td>
+                </tr>
+            </table>
+        </form>
+        <label for="">{{str}}</label>
+    </div>
+
+    let app = new Vue({
+        el: '#app',
+        data() {
+            return {
+                formData:{
+                    username:'',
+                    password:''
+                }
+
+            }
+        },
+        computed:{
+            str:function(){
+                return `账号：${this.formData.username},密码是：${this.formData.password}`
+            }
+        }
+    })
+```
+### 组件化应用构建
+
+
+```
+    <div id="app">
+        <ul>
+            <todo-item v-for="item in toDos" v-bind:i="item"></todo-item>
+        </ul>
+    </div>
+```
+```
+    <script>
+    Vue.component('todo-item', {
+        props: ['i'],
+        template:`<li>{{i.taskName}}</li>`
+    })
+
+    let app = new Vue({
+        el: '#app',
+        data() {
+            return {
+                toDos: [{
+                    taskName: 'aaa'
+                },
+                {
+                    taskName: 'bbb'
+                },
+                {
+                    taskName: 'ccc'
+                },
+                {
+                    taskName: 'ddd'
+                }
+                ]
+
+            }
+        }
+    })
+</script>
+```
\ No newline at end of file
-- 
Gitee