学习v-for和v-model指令,实现ToDo List

51a36313 · Bobby · fa517e69 · 51a36313 · 51a36313 · 51a36313
7 changed file
--- a/2.字符串反转和内容隐藏.md
+++ b/2.字符串反转和内容隐藏.md
@@ -73,7 +73,7 @@
 **在method中获取data()中的数据时需要使用this关键字**来指定使用的是当前VUE实例中的数据！

 **总结**：
-通过对上面这个例子的学习，需要了解**事件绑定**, Vue面向数据编程的**双向绑定**，Vue示例中methods字段的作用，以及在methods字段中定义函数如何获得data函数中的数据；
+通过对上面这个例子的学习，需要了解**事件绑定**, Vue指令`v-on`和`v-if`，Vue面向数据编程的**双向绑定**，Vue示例中methods字段的作用，以及在methods字段中定义函数如何获得data函数中的数据；

 ## 内容隐藏
 实现功能：当点击隐藏按钮时隐藏内容，同时将按钮的文字从隐藏变为显示；当点击显示按钮时，展示默认的文本，效果见下图：

--- a/3.列表展示和实现TODO列表.md
+++ b/3.列表展示和实现TODO列表.md
+# 列表展示和实现TODO列表
+本次DEMO希望通过根据列表的展示学习`v-for`指令，并通过`v-model`指令进一步理解Vue的双向数据绑定。
+
+## 列表展示
+一般的在HTLM中若想展示一个列表，可以按照下面的代码实现：
+```HTML
+<ul>
+    <li>Apple</li>
+    <li>Google</li>
+    <li>Facebook</li>
+</ul>
+```
+但是在Vue中可以使用`v-for`指令,将数组中的内容渲染成一个列表
+```HTML
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+
+<script>
+    // 3. 创建VUE的实例
+    Vue.createApp({
+        // 3.1定义需要展示的数据
+        data(){
+            return{
+
+                list:["Apple","Google","FaceBook"]
+            }
+        },
+        // 3.3视图模板，定义显示内容和事件绑定
+        template:`
+        <ul>
+            <li v-for="(item,index) of list">{{index}} - {{item}}</li>
+        </ul>
+        `
+
+    }).mount('#root');
+</script>
+```
+注意其中的`v-for`指令，该指令会遍历绑定的数组list(这里既不需要加`this`进行指定，也不需要`{{}}`),并<u>将数组中的每个元素绑定赋值给item,将当前元素的位序赋值给index</u>,效果如下图：
+![list_show](./images/list_show.png)
+
+## ToDo List
+下面来实现通过文本输入框动态增加数组元素，且当每增加一个元素清空输入框中的内容。效果如下：
+![todo_list](./images/todo_list.gif)
+实现代码如下：
+```HTML
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToDo</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+
+<script>
+    // 3. 创建VUE的实例
+    Vue.createApp({
+        // 3.1定义需要展示的数据
+        data(){
+            return{
+                // 定义需要列表中展示的内容数组
+                list:[], // 默认是一个空数字，展示空列表
+                newItemContent:''
+            }
+        },
+        methods:{
+            addTodoItem(){
+                // 增加一个代办事项
+                this.list.push(this.newItemContent);
+                // 将输入框清空
+                this.newItemContent='';
+            }
+        },
+        // 3.3视图模板，定义显示内容和事件绑定
+        template:`
+        <ul>
+            <input v-model="newItemContent"/>
+            <button v-on:click="addTodoItem">增加</button>
+            <li v-for="(item,index) of list">{{index}} - {{item}}</li>
+        </ul>
+        `
+
+    }).mount('#root');
+
+</script>
+</html>
+```
+可以看到在输入框中使用了`v-model`指令，<u>该指令可以数据框的内容实时同步到绑定变量中</u>，为了演示这一效果使用`v-model`执行将数据跟变量绑定后，将变量显示出来。实现如下：
+![v-model_test.gif](./images/v-model_test.gif)
+```HTMl
+<body>
+    <div id="root"></div>
+</body>
+
+<script>
+    Vue.createApp({
+        data(){
+            return{
+                newItemContent:''
+            }
+        },
+        template:`
+        <ul>
+            <input v-model="newItemContent"/>
+            <p> 绑定变量newItemContent的内容：{{newItemContent}}</p>
+        </ul>
+        `
+
+    }).mount('#root');
+</script>
+```
--- a/code/DEMO.html
+++ b/code/DEMO.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToDo</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+
+<script>
+    Vue.createApp({
+        data(){
+            return{
+                newItemContent:''
+            }
+        },
+        template:`
+        <ul>
+            <input v-model="newItemContent"/>
+            <p> 绑定变量newItemContent的内容：{{newItemContent}}</p>
+        </ul>
+        `
+
+    }).mount('#root'); 
+
+</script>
+</html>
--- a/code/TODO.html
+++ b/code/TODO.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ToDo</title>
+    <!--1.通过CDN加速引入VUE-->
+    <script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <!--2.设置DIV的ID为root -->
+    <div id="root"></div>
+</body>
+
+<script>
+    // 3. 创建VUE的实例
+    Vue.createApp({
+        // 3.1定义需要展示的数据
+        data(){
+            return{
+                // 定义需要列表中展示的内容数组
+                list:[], // 默认是一个空数字，展示空列表
+                newItemContent:''
+            }
+        },
+        methods:{
+            addTodoItem(){
+                // 增加一个代办事项
+                this.list.push(this.newItemContent);
+                // 将输入框清空
+                this.newItemContent='';
+            }
+        },
+        // 3.3视图模板，定义显示内容和事件绑定
+        template:`
+        <ul>
+            <input v-model="newItemContent"/>
+            <button v-on:click="addTodoItem">增加</button>
+            <li v-for="(item,index) of list">{{index}} - {{item}}</li>
+        </ul>
+        `
+
+    }).mount('#root'); 
+
+</script>
+</html>
--- a/images/list_show.png
+++ b/images/list_show.png
--- a/images/todo_list.gif
+++ b/images/todo_list.gif
--- a/images/v-model_test.gif
+++ b/images/v-model_test.gif