接上一篇：（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818
| 指令 | 作用 |
|---|---|
| v-for | 循环数据 |
| v-on | 绑定事件 |
| v-model | 数据的双向绑定 |
一、需求说明
① 案例文档
1. 在页面上有一个输入框和提交按钮
2. 当在输入框中输入内容，点击提交按钮时，内容会显示在下面的列表中
3. 当点击提交按钮时，输入框中的内容要清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用vue.js 实现TodoList</title>
</head>
<body>
<div id="app">
<input type="text">
<button>提交</button>
<ul>
<li>第一课的内容</li>
<li>第二课的内容</li>
</ul>
</div>
</body>
</html>
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
③ 基础效果图
二、v-for指令学习
| 指令 | 作用 |
|---|---|
| v-for | 数据循环 |
① 使用v-for指令 循环显示列表内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用vue.js 快速入门hello world</title>
<!--引入vue.js库-->
<script src="vue.js"></script>
</head>
<body>
<!--vue接管的div-->
<div id="app">
<input type="text">
<button>提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
/*创建了一个vue实例*/
var app = new Vue({
el: '#app',
data: {
list: ['第一课的内容', '第二课的内容']
}
});
</script>
</body>
</html>
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
② 使用v-for指令 基础效果图
③ v-for 解说
借助v-for指令循环list数据，利用item来循环，循环的每一项都放到一个item里面，然后，利用插值表达式，将item渲染出来
| 标签指令 | 说明 |
|---|---|
| v-for | 循环数据 |
| list | 循环的list |
| item | 循环的每一项都是一个item，简言之，循环的每一项内容都放到item中 |
| {{item}} | 利用插值表达式获取每一个item的内容，在页面渲染显示 |
三、v-on指令学习
| 指令 | 作用 |
|---|---|
| v-on | 事件绑定 |
当在输入框中输入内容，点击提交按钮时，内容会显示在下面的列表中
思路分析
1. 刚进入页面应该是没有数据的
2. 在点击提交时，要先该发生点什么，需要绑定一个事件，在实践中书写逻辑
3. 在vue中绑定事件用v-on v-on:click="事件名称"
4. 定义的事件方法函数要定义在Vue实例的methods中的键值对里面
- 4
那当点击提交时，被绑定的handleBtnClick事件方法 去哪找呢？
这个div属于vue接管的区域，因此，当触发handleBtnClic事件时，vue就会到vue实例中的methods中去找handleBtnClick这个方法，找到之后就会执行。
四、v-model指令学习
① v-model作用
| 指令 | 作用 |
|---|---|
| v-model | 双向绑定 |
② v-model预测
v-model指的是数据的双向绑定，也就是当input框中的内容发生变化的时候，vue实例中的data里面的inputValue也会发生变化；同样当vue实例中的data里面的inputValue这个变量发生变化时，页面也会跟着发生变化。
③ 页面验证v-model
在页面中开启F12找到控制台Console，在控制台中输出inputValue看看默认是什么？
可以借助全局的app变量来实现
很明显默认是空字符串
当在输入框中输入内容，再到控制台，在此执行上一次命令，看效果
很明显，现在的inputValue得值和输入框中一样。可以概括为，当输入框中的值发生变化时，vue实例中的data里面的inputValue的值也会发生变化；那咱们反过来试一下，修改vue实例中的data里面的inputValue的值的数据，验证页面输入框中的值是否跟着变化？
经验证，也会发上变化。
④ 获取input的内容
当点击提交时，怎样获取到input输入框中的内容呢？
使用v-model模板指令获取input输入框中内容，但是，需要双向绑定才可以。
把input中的inputValue值和data中的inputValue值做双向绑定。
⑤ 如何从methods中获取data中的inputValue
既然input中的inputValue值和data中的inputValue值做双向绑定。那么data中的inputValue的值其实就是input框中的inputValue的值，那在methods的handleBtnClick方法中，如何获取data数据配置项中的inputValue的值呢 ？
通过this.inputValue即可，当使用this.inputValue时，vue会自动的到数据配置项data中找inputValue
测试一下
一开始input矿中的值默认是空的，点击提交，弹框空的
当我们在输入框中，写内容时，再次测试
测试和预期一样
五、获取内容添加内容
①思考
ul里面有多少个li，是由data(数据配置项)中的list决定的。我们每一次提交，只需要将每次提交的数据放到list的数组中就可以了，当数据发生变化时，是不是页面也会跟这变呢？
② 代码说明
| 说明 | |
|---|---|
| this.list | 相当于data中的list 数组 |
| this.list.push | 意味着王list数组中添加内容 |
| this.inputValue | data中的inputValue 的值 |
③ 效果图
④场景分析
每一次提交的时候，我们可以获取到每一次inout中的那内容，然后把获取的内容添加到list的数组中，当数据发生变化，页面就会跟着发生变化了。
⑤ 清空输入框内容
在输入框中输入内容，点击提交，提交到data里面的list数组中，但是，发现输入框中我们输入的内容依然存在，那又该如何清空呢？
我们知道this.inputValue = input中的inputValue，我们是不是只需要改变data数据配置项中的inputValue 的值，就可以修改input框中的inputValue 的值，因为当数据法身变化是，页面也会法身变化，对吧！既然这样，那我们当点击提交按钮，提交完成后，把this.inputValue的值设置为空，不就可以了。
⑥ 浏览器验证
依次输入123，点击提交
从上图我们可以知道和我们预测的一致。
六、TodoList总结
整合TodoList编码中，没有出现对dom的操作语句，取而代之，我们都在操作数据，列表中的内容我们放在list的数组中，input框中的内容我们放到inputValue中，当我们做一些操作的时候，触发点击事件之后，并不是改变dom，而是去改变数据；数据变了，页面自动的也会发生改变，这种形式，就是我们在写vue编码时天天都要用到的模式MVVM设计模式。
下一篇：（vue基础试炼_04）使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256
