From 130502e5e16bed349b77a369845c9c58e9b819d2 Mon Sep 17 00:00:00 2001
From: szq <129>
Date: Wed, 26 May 2021 17:42:22 +0800
Subject: [PATCH] =?UTF-8?q?Vue=E7=9A=84=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...3\345\274\217\346\241\206\346\236\266).md" | 83 +++++++++++++++++++
 ...0\346\210\267\350\276\223\345\205\245).md" | 64 ++++++++++++++
 2 files changed, 147 insertions(+)
 create mode 100644 "\346\226\275\345\277\227\345\274\272/2021-5-25(Vue\346\270\220\350\277\233\345\274\217\346\241\206\346\236\266).md"
 create mode 100644 "\346\226\275\345\277\227\345\274\272/2021-5-26(Vue\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245).md"

diff --git "a/\346\226\275\345\277\227\345\274\272/2021-5-25(Vue\346\270\220\350\277\233\345\274\217\346\241\206\346\236\266).md" "b/\346\226\275\345\277\227\345\274\272/2021-5-25(Vue\346\270\220\350\277\233\345\274\217\346\241\206\346\236\266).md"
new file mode 100644
index 0000000..d86c043
--- /dev/null
+++ "b/\346\226\275\345\277\227\345\274\272/2021-5-25(Vue\346\270\220\350\277\233\345\274\217\346\241\206\346\236\266).md"
@@ -0,0 +1,83 @@
+# Vue.js是什么
+1. Vue是一套用于构建用户界面的渐进式框架，它与其它大型框架不同的是，Vue是自底向上的逐层应用，它的核心只关注视图层
+# 声明式渲染 
+1. 在vscode中创建一个.html文件,通过如下方式来引入Vue，要写在 script 前面
+```
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+```
+2. Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
+```
+    <div id="app">
+        {{msg}}
+    </div>
+
+    <script>
+        var app=new Vue({
+            el:'#app',
+            data:{
+                msg:'我柿你爹'
+            }
+        })
+    </script>
+```
+3. 绑定元素 attribute
+```
+<div id="app-2">
+        <span v-bind:title="message">
+            客官过来看看嘛~
+        </span>
+    </div>
+
+    <script>
+        var app2 = new Vue({
+            el: '#app-2',
+            data: {
+                message: '页面加载于 ' + new Date().toLocaleString()
+            }
+        })
+    </script>
+```
+ V-bind attribute被称为指令，带有V-的表示它在Vue里是个特殊的attribute，这个元素节点的title和Vue实例msg保持一致
+# 条件与循环
+1. 控制切换一个元素
+```
+    <div id="app-3">
+        <p v-if="seen">你~看到我了~</p>
+    </div>
+    
+    <script>
+        var app3 = new Vue({
+            el: '#app-3',
+            data: {
+                seen: true
+            }
+        })
+    </script>
+```
+ 在控制台输入 app3.seen = false，之前显示的消息就消失了
+2. Vue还有很多指令，每个都有特殊的功能，例如 V-for 指令可以绑定数组渲染一个项目列表
+```
+    <div id="app-4">
+        <ol>
+            <li v-for="todo in todos">              //xx in xxs
+                {{ todo.text }}                     //xx.abcd
+            </li>
+        </ol>
+    </div>
+    
+    <script>
+        var app4 = new Vue({
+            el: '#app-4',
+            data: {
+                todos: [                            //xxs
+                    { text: '学习 JavaScript' },    //abcd:'asdfewsdf'
+                    { text: '学习 Vue' },
+                    { text: '整个牛项目' }
+                ]
+            }
+        })
+    </script>
+```
+ 在控制台里，输入 app4.todos.push({ text: '新项目' })，发在列表最后添加一个新项目
\ No newline at end of file
diff --git "a/\346\226\275\345\277\227\345\274\272/2021-5-26(Vue\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245).md" "b/\346\226\275\345\277\227\345\274\272/2021-5-26(Vue\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245).md"
new file mode 100644
index 0000000..d8d9a64
--- /dev/null
+++ "b/\346\226\275\345\277\227\345\274\272/2021-5-26(Vue\345\244\204\347\220\206\347\224\250\346\210\267\350\276\223\345\205\245).md"
@@ -0,0 +1,64 @@
+# 处理用户输入
+1. 让用户和你进行交互，可以用 v-on 指令添加一个事件监听器
+```
+<div id="app-5">
+        <p>{{ message }}</p>
+        <button v-on:click="reverseMessage">两级反转</button>
+    </div>
+
+    <script>
+        var app5 = new Vue({
+            el: '#app-5',
+            data: {
+                message: 'PomPomPurin'
+            },
+            methods: {
+                reverseMessage: function () {
+                    this.message = this.message.split('').reverse().join('')
+                }
+            }
+        })
+    </script>
+```
+2. Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
+```
+    <div id="app-6">
+        <p>{{ message }}</p>
+        <input v-model="message">
+    </div>
+    <script>
+        var app6 = new Vue({
+            el: '#app-6',
+            data: {
+                message: 'PomPomPurin'
+            }
+        })
+    </script>
+```
+# 组件化应用构建
+1. 组件系统是Vue的重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用
+```
+    <div id="app-7">
+        <ol>
+            <todo-item v-for="item in Pom" v-bind:todo="item"></todo-item>  //v-bind:todo="item"里的item要和前面的v-for="item in Pom"里的item要一样
+        </ol>
+    </div>
+
+    <script>
+        Vue.component('todo-item', {                                        //这里的todo-item是引用上面的标签
+            props: ['todo'],                                                //这里的todo和下面todo.text里的todo要和上面v-bind:todo里的todo要一样
+            template: '<li>{{ todo.text }}</li>'
+        })
+
+        var app7 = new Vue({
+            el: '#app-7',
+            data: {
+                Pom: [
+                    { text: '芝士' },
+                    { text: '奶酪' },
+                    { text: '布丁狗' }
+                ]
+            }
+        })
+    </script>
+```
-- 
Gitee