From 4b705f79cd028a25cf3bc21bff79ac9e645fde5f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 26 May 2021 17:39:12 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../5-25.md"                                  |  62 +++++++++
 .../5-26.md"                                  | 121 ++++++++++++++++++
 2 files changed, 183 insertions(+)
 create mode 100644 "\347\253\240\350\266\205\347\276\244/5-25.md"
 create mode 100644 "\347\253\240\350\266\205\347\276\244/5-26.md"

diff --git "a/\347\253\240\350\266\205\347\276\244/5-25.md" "b/\347\253\240\350\266\205\347\276\244/5-25.md"
new file mode 100644
index 0000000..dbd618a
--- /dev/null
+++ "b/\347\253\240\350\266\205\347\276\244/5-25.md"
@@ -0,0 +1,62 @@
+Vue 第一节课
+1. 用户设计的渐进式框架 尤雨溪
+
+
+Div
+```
+ <div id="app">
+        <!-- 鼠标悬停几秒钟查看此处动态绑定的提示信息！ -->
+        <!-- 指令前面加v的是Vue提供的特殊指令 如将title attribute 和 Vue 实例的 message property 保持一致”。 -->
+        <span v-bind:title="message">
+            这里有点东西哦
+        </span>
+    </div>
+
+    <!-- 在网页F12Console中可以直接修改Vue中的值 可以直接预览修改的效果但是要一直保持要去修改后端代码 -->
+    <div id="seeing">
+        <p v-if="see">
+            你能看到我波
+        </p>
+    </div>
+
+
+
+    <!-- ol有序像 1. 2. ul无序全是小圆点 -->
+
+    <div id="AllList">
+        <ol>
+            <li v-for="todo in todos">{{todo.text}}</li>
+        </ol>
+    </div>
+
+```
+
+Script
+```
+<script>
+
+    var app = new Vue({
+        el: '#app',
+        data: {
+            message: '页面加载于 ' + new Date().toLocaleString()
+        }
+    })
+
+    var seeing = new Vue({
+        el: '#seeing',
+        data: {
+            see: true
+        }
+    })
+
+    var showList = new Vue({
+        el: '#AllList',
+        data: {
+            todos: [
+                { text: "学习App" },
+                { text: "学习Node.js" },
+                { text: "学习Js" }
+            ]
+        }
+    })
+```
diff --git "a/\347\253\240\350\266\205\347\276\244/5-26.md" "b/\347\253\240\350\266\205\347\276\244/5-26.md"
new file mode 100644
index 0000000..fa58153
--- /dev/null
+++ "b/\347\253\240\350\266\205\347\276\244/5-26.md"
@@ -0,0 +1,121 @@
+Vue.js 第二次课
+
+1. 条件与循环
+```
+  <div id="app">
+  //span 是一个鼠标悬浮在内容上显示内容的一个标签 title 是悬浮内容也可以给他一个变量名称取data中给他进行其它操作
+        <span v-if="apple" title="你怎么看">
+            元芳
+        </span>
+
+        <span v-else="apple"  title="错误">
+            不然就会
+        </span>
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+<script>
+    let app=new Vue({
+        el:"#app",
+        data:{
+            apple:true
+        }
+    })
+</script>
+```
+
+2. 处理用户输入
+
+```
+  <form>
+            <table>
+                <tr>
+                    <td><label>用户名:</label></td>
+                    <td><input type="text" v-model="fromData.username"></td>
+                </tr>
+                <tr>
+                    <td><label>密码:</label></td>
+                    <td><input type="text" v-model="fromData.password"></td>
+
+                </tr>
+            </table>
+        </form>
+     
+        <label for="">{{str}}</label>
+
+
+
+<script>
+    let app=new Vue({
+        el:"#app",
+        data:{
+            todos:[
+                {text:"今天是个好日子"},
+                {text:"步步高点读机妈妈再也不用担心我的学习了"},
+                {text:"天天神卷是个好东西呢"},
+                     ],
+            fromData:{
+                username:"",
+                password:""
+                    },
+             },
+            computed:{
+                str:function(){
+                    return `你的用户名是:${this.fromData.username}，你的密码是:${this.fromData.password}`
+                 }
+        }
+
+    })
+</script>
+
+
+```
+
+3. 组件化应用构建
+
+```
+
+  <div id="app">
+  <table>
+      <todo-list v-for="item in todos" v-bind:x="item">
+
+      </todo-list>
+  </table>
+        </div>
+
+
+
+
+<script>
+    Vue.component('todo-list',{
+            props:['x'],
+            template:`
+            <tr>
+            <td>{{x.text}}</td>
+            </tr>
+            `        
+    })
+
+    let app=new Vue({
+        el:"#app",
+        data:{
+            todos:[
+                {text:"今天是个好日子"},
+                {text:"步步高点读机妈妈再也不用担心我的学习了"},
+                {text:"天天神卷是个好东西呢"},
+                     ],
+            fromData:{
+                username:"",
+                password:""
+                    },
+             },
+            computed:{
+                str:function(){
+                    return `你的用户名是:${this.fromData.username}，你的密码是:${this.fromData.password}`
+                 }
+        }
+
+    })
+</script>
+```
\ No newline at end of file
-- 
Gitee


From cb7593f27912e43784b5b8bc12e92eee7f50c0a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=94=E5=9F=8E=E3=80=81?= <2220645271@qq.com>
Date: Thu, 27 May 2021 15:33:03 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../5-26.md"                                  | 50 ++++++++-----------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git "a/\347\253\240\350\266\205\347\276\244/5-26.md" "b/\347\253\240\350\266\205\347\276\244/5-26.md"
index fa58153..9778759 100644
--- "a/\347\253\240\350\266\205\347\276\244/5-26.md"
+++ "b/\347\253\240\350\266\205\347\276\244/5-26.md"
@@ -72,50 +72,42 @@ Vue.js 第二次课
 
 ```
 
-3. 组件化应用构建
+3. 组件化应用构建  创建Vue.component('组件名称',{props:['绑定的属性的名称'],template:`样式`})
 
 ```
 
   <div id="app">
-  <table>
-      <todo-list v-for="item in todos" v-bind:x="item">
-
-      </todo-list>
-  </table>
-        </div>
-
-
+        <ol>
+        //在创建好的组件中遍历创建的数组 在定义一个绑定名称来获取item的属性 即绑定名称=item 类似遍历传入值给变量只是替换了原有名称为定义的绑定名称
+        <todo-list v-for="item in todos" v-bind:attitude="item" v-bind:key="item.id"></todo-list>
+        </ol>
+    </div>
 
 
 <script>
     Vue.component('todo-list',{
-            props:['x'],
-            template:`
-            <tr>
-            <td>{{x.text}}</td>
-            </tr>
-            `        
-    })
-
-    let app=new Vue({
+        props:['attitude'],
+        template:`
+        <li>{{attitude.text}}</li>
+      `
+    }     
+    )
+
+    var app=new Vue({
         el:"#app",
         data:{
-            todos:[
-                {text:"今天是个好日子"},
-                {text:"步步高点读机妈妈再也不用担心我的学习了"},
-                {text:"天天神卷是个好东西呢"},
-                     ],
-            fromData:{
+           todos:[{id:0,text:'键盘有点硬'},
+           {id:1,text:"慢慢的去适应吧"},
+           {id:2,text:"你觉得今天会下雨咩"}],
+        },  fromData:{
                 username:"",
                 password:""
-                    },
-             },
+                    },             
             computed:{
                 str:function(){
                     return `你的用户名是:${this.fromData.username}，你的密码是:${this.fromData.password}`
                  }
-        }
-
-    })
+                }
+    })                
 </script>
 ```
\ No newline at end of file
-- 
Gitee