From 2dc445a37459e19f378842a749272c73b9fb9044 Mon Sep 17 00:00:00 2001
From: yb <1728066681@qq.com>
Date: Wed, 26 May 2021 17:37:56 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E4=BA=8C=E6=AC=A1=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Vue - 2021.05.25.md | 107 ++++++++++++++++++++++++++++++++++++++++++++
 Vue - 2021.05.26.md | 103 ++++++++++++++++++++++++++++++++++++++++++
 Vue/index.html      |  89 ++++++++++++++++++++++++++++++++++++
 3 files changed, 299 insertions(+)
 create mode 100644 Vue - 2021.05.25.md
 create mode 100644 Vue - 2021.05.26.md
 create mode 100644 Vue/index.html

diff --git a/Vue - 2021.05.25.md b/Vue - 2021.05.25.md
new file mode 100644
index 0000000..4446d74
--- /dev/null
+++ b/Vue - 2021.05.25.md	
@@ -0,0 +1,107 @@
+## Vue.js 第一节课
+
++ Vue 类似于View 构建用户界面的渐进式框架
+
++ Vue可以自底想上逐层应用，Vue 的核心库只关注视图层
+
+## 声明式渲染
+
+```
+<div id="vue_det">
+        <h1>{{site}}</h1>
+        <h1>{{url}}</h1>
+        <h1>{{alexa}}</h1>
+        <h1>{{name}}</h1>
+        <h1>{{details()}}</h1>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script type="text/javascript">
+        var vm = new Vue({
+            el: '#vue_det',
+            data: {
+                site: "觉醒年代",
+                url: "军师联盟",
+                alexa: "张永新",
+                name:"我们去莫高窟"
+            },
+            methods: {
+                details: function () {
+                    return this.name + " 学的不仅是技术，更是梦想！";
+                }
+            }
+        })
+    </script>
+```
+
++ 这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
+
++ 接下来我们看看如何定义数据对象。
+
++ data 用于定义属性，实例中有三个属性分别为：site、url、alexa、name。
+
++ methods 用于定义的函数，可以通过 return 来返回函数值。
+
++ {{ }} 用于输出对象属性和函数返回值。
+
+结果：----------------
+![](./node/2021-05-25_104756.png)
+
+```
+    <div id="top">
+        <h1>
+            <span v-bind:title="msg">
+                可以呀 小孩子
+            </span>
+        </h1>
+
+        <p></p>
+
+        <h1>
+            <span title="是不错">
+                发动机
+            </span>
+        </h1>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        let app = new Vue({
+            el:'#top',
+            data(){
+                return{
+                    msg:"电视广告"
+                }
+            }
+        });
+        console.log(top);
+    </script>
+
+```
+```
+鼠标停几秒呀，查看此处动态绑定的信息
+```
+
+注意：v-bind attribute 被称为指令，指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
+
+## 条件与循环
+```
+<div id="app-4">
+        <ol>
+            <li v-for="todo in todos">
+                {{ todo.text }}
+            </li>
+        </ol>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script>
+        var app4 = new Vue({
+            el: '#app-4',
+            data: {
+                todos: [
+                    { text: '学习 JavaScript' },
+                    { text: '学习 Vue' },
+                    { text: '整个牛项目' }
+                ]
+            }
+        })
+    </script>
+```
\ No newline at end of file
diff --git a/Vue - 2021.05.26.md b/Vue - 2021.05.26.md
new file mode 100644
index 0000000..428c137
--- /dev/null
+++ b/Vue - 2021.05.26.md	
@@ -0,0 +1,103 @@
+## Vue.js 第二节课
+
+## 条件循环
+
++ 循环使用 v-for 指令。
+
++ v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
+
++ v-for 可以绑定数据到数组来渲染一个列表：
+
+```
+    <div>
+        <ul>
+            <li v-for="item in toDos">{{item.taskName}}</li>
+        </ul>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        let app = new Vue({
+            el: "#app",
+            data() {
+                return {
+                    beautiful: true,
+                    need: true,
+                    formData: {
+                        username: "",
+                        password: ""
+                    },
+                    toDos: [
+                        {
+                            id:1,
+                            taskName: '跟照片差别有点大呀?'
+                        }, {
+                            id:2,
+                            taskName: '我很丑吗？我很丑吗？'
+                        }, {
+                            id:3,
+                            taskName: '那我走？那我走？'
+                        }, {
+                            id:4,
+                            taskName: '哎！！！！'
+                        },
+                    ]
+                }
+            },
+        })
+    </script>
+```
+
+## 处理用户输入
+
++ v-on 指令添加一个事件监听器
+
++  v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
+```
+<form>
+            <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>
+```
+```
+<script>
+        let app = new Vue({
+            el: "#app",
+            data() {
+                return {
+                    beautiful: true,
+                    need: true,
+                    formData: {
+                        username: "",
+                        password: ""
+                    },
+                    toDos: [
+                        {
+                            taskName: '跟照片差别有点大呀?'
+                        }, {
+                            taskName: '我很丑吗？我很丑吗？'
+                        }, {
+                            taskName: '那我走？那我走？'
+                        }, {
+                            taskName: '哎！！！！'
+                        },
+                    ]
+                }
+            },
+            computed: {
+                str: function () {
+                    return `gg:${this.formData.username}hh:${this.formData.password}`
+                }
+            }
+        })
+    </script>
+```
diff --git a/Vue/index.html b/Vue/index.html
new file mode 100644
index 0000000..11ed837
--- /dev/null
+++ b/Vue/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="app">
+        <!-- <span v-if="beautiful" title="黄总很丑吗？">
+            那我走
+        </span> -->
+
+        <!-- <ul>
+            <li v-for="item in toDos">{{item.taskName}}</li>
+        </ul> -->
+
+        <form>
+            <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>
+
+        <table>
+            <todo-item v-for="item in toDos" v-bind:ch=item></todo-item>
+        </table>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+    <script>
+        Vue.component('todo-item', {
+            props: ['ch'],
+            template: `
+            <tr>
+                <td>{{ch.id}}</td>
+                <td>{{ch.taskName}}</td>
+            </tr>
+            `
+        })
+
+        let app = new Vue({
+            el: "#app",
+            data() {
+                return {
+                    beautiful: true,
+                    need: true,
+                    formData: {
+                        username: "",
+                        password: ""
+                    },
+                    toDos: [
+                        {
+                            id:1,
+                            taskName: '跟照片差别有点大呀?'
+                        }, {
+                            id:2,
+                            taskName: '我很丑吗？我很丑吗？'
+                        }, {
+                            id:3,
+                            taskName: '那我走？那我走？'
+                        }, {
+                            id:4,
+                            taskName: '哎！！！！'
+                        },
+                    ]
+                }
+            },
+            computed: {
+                str: function () {
+                    return `gg:${this.formData.username}hh:${this.formData.password}`
+                }
+            }
+        })
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee