From 3dafd1bada0cd93e419db3e8684a136a63eeee83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=8B=87?= <1361162012@qq.com>
Date: Thu, 27 May 2021 16:47:44 +0800
Subject: [PATCH] =?UTF-8?q?vue=E5=88=9D=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2020-05-25\345\210\235\350\257\206vue.md" |  40 ++++++
 ...66\345\214\226\346\236\204\345\273\272.md" | 121 ++++++++++++++++++
 2 files changed, 161 insertions(+)
 create mode 100644 "\346\235\250\345\213\207/2020-05-25\345\210\235\350\257\206vue.md"
 create mode 100644 "\346\235\250\345\213\207/2020-05-26\347\273\204\344\273\266\345\214\226\346\236\204\345\273\272.md"

diff --git "a/\346\235\250\345\213\207/2020-05-25\345\210\235\350\257\206vue.md" "b/\346\235\250\345\213\207/2020-05-25\345\210\235\350\257\206vue.md"
new file mode 100644
index 0000000..3fda284
--- /dev/null
+++ "b/\346\235\250\345\213\207/2020-05-25\345\210\235\350\257\206vue.md"
@@ -0,0 +1,40 @@
+# 初识vue
+1. vue.js是什么
+vue是一套构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
+2. 安装vue
+CDN
++ 对于制作原型或学习，你可以这样使用最新版本：
+```
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+```
++ 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
+```
+<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+```
+3. Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
+```
+    <div id="app">
+        <span v-bind:title="msg">
+             {{look}}
+        </span>
+        <span v-bind:title="message">
+             {{here}}
+        </span>
+        <p v-if="seen">你愁啥？瞅的到吗？</p>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app=new Vue({
+            el:'#app',
+            data(){
+                return{
+                    msg:'小鸡小鸡',
+                    look:'看看不？'，
+                    here:'小鸭小鸭',
+                    message:'页面加载于 ' + new Date().toLocaleString(),
+                    seen:true
+                }
+            }
+        })
+    </script>
+```
diff --git "a/\346\235\250\345\213\207/2020-05-26\347\273\204\344\273\266\345\214\226\346\236\204\345\273\272.md" "b/\346\235\250\345\213\207/2020-05-26\347\273\204\344\273\266\345\214\226\346\236\204\345\273\272.md"
new file mode 100644
index 0000000..c3e5897
--- /dev/null
+++ "b/\346\235\250\345\213\207/2020-05-26\347\273\204\344\273\266\345\214\226\346\236\204\345\273\272.md"
@@ -0,0 +1,121 @@
+# 条件与循环
+1. 可以通过v-if，v-else来对条件进行判断，如果为true则执行v-if，反之则执行v-else
+```
+ <div id="app">
+        <span v-if="coolboy" title="是不是帅气男孩">
+            你是一个大帅逼
+        </span>
+        <span v-else="coolboy" title="不是诶">
+            你是一个大傻逼
+        </span>
+    </div>
+    <script>
+    let app = new Vue({
+        el: "#app",
+        data() {
+            return {
+                coolboy: true
+            }
+        }
+    })
+</script>
+```
++ 注意：修改coolboy来修改获得的文本，不会删除原本的占位标签，内存还是占用原本的大小
+
+2. 可以通过v-for来对一个数组的数据循环操作
+
+```
+    <div id="lis">
+        <ol>
+            <li v-for="todo in todos">
+                {{todo.text}}
+            </li>
+        </ol>
+    </div>
+    <script>
+    let lis = new Vue({
+        el: "#lis",
+        data: {
+            todos: [{
+                text: '小红'
+            }, {
+                text: '小橙'
+            }, {
+                text: '小黄'
+            }, {
+                text: '小绿'
+            }]
+        }
+    })
+</script>
+```
+
+# 处理用户输入
+1. v-model可以用来实现表单和应用状态的双向绑定
+```
+<div id="forms">
+        <form action="">
+            <tr>
+                <td>
+                    <label for="">用户名:</label>
+                </td>
+                <td>
+                    <input type="text" v-model="username">
+                    <p>{{username}}</p>
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label for="">密码：</label>
+                </td>
+                <td>
+                    <input type="text" v-model="password">
+                    <p>{{password}}</p>
+                </td>
+            </tr>
+
+        </form>
+    </div>
+    <script>
+    let forms = new Vue({
+        el: "#forms",
+        data() {
+            return {
+                username: '销售',
+                password: "不知道"
+            }
+        }
+    })
+</script>
+```
++ 在网页修改input的时候也会让p中所访问的username自动变化，实现二者双向绑定
+
+# 组件化应用构建
+1. 可以在vue中注册一个组件
+```
+    Vue.component('todo-item', {
+        props: ['item'],
+        template: '<li>{{item.taskName}}</li>'
+    });
+        let arrs = new Vue({
+        el: "#arr",
+        data() {
+            return {
+                toDos: [{
+                    taskName: '小一'
+                }, {
+                    taskName: '小二'
+                }]
+            }
+        }
+    })
+```
+2. 然后再html中进行使用
+```
+    <div id="arr">
+        <ul>
+            <todo-item v-for="item in toDos" v-bind:item="item"></todo-item>
+        </ul>
+    </div>
+```
+
-- 
Gitee