（vue基础试炼_03）使用vue.js实现TodoList
接上一篇：（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818
| 指令 | 作用 |
|---|---|
| v-for | 循环数据 |
| v-on | 绑定事件 |
| v-model | 数据的双向绑定 |
文章目录
- 一、需求说明
- ① 案例文档
- ② 基础代码
- ③ 基础效果图
- 二、v-for指令学习
- ① 使用`v-for`指令 循环显示列表内容
- ② 使用`v-for`指令 基础效果图
- ③ `v-for` 解说
- 三、v-on指令学习
- 四、v-model指令学习
- ① v-model作用
- ② v-model预测
- ③ 页面验证v-model
- ④ 获取input的内容
- ⑤ 如何从methods中获取data中的inputValue
- 五、获取内容添加内容
- ①思考
- ② 代码说明
- ③ 效果图
- ④场景分析
- ⑤ 清空输入框内容
- ⑥ 浏览器验证
- 六、TodoList总结
一、需求说明
① 案例文档
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>
③ 基础效果图
二、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>② 使用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中的键值对里面
那当点击提交时，被绑定的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
（vue基础试炼_03）使用vue.js实现TodoList相关推荐
- （vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令 说明 v-bin ...
- （vue基础试炼_08）Vue模板语法
文章目录 一.插值表达式 二.v-text 中不是字符串而是js表达式 三.v-html 四.js表达式,可以和字符串拼接 五.源码链接 一.插值表达式 <!DOCTYPE html> & ...
- （vue基础试炼_07）Vue实例生命周期函数
文章目录 一.生命周期图示 二.常见的生命周期函数 三.生命周期函数执行场景 四.测试代码 五.项目开源地址 一.生命周期图示 二.常见的生命周期函数 常见的生命周期函数 执行的时间 beforeCr ...
- （vue基础试炼_02）使用vue.js实现隔2秒显示不同内容
接上一篇:(vue基础试炼_01)使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156 文章目录 ...
- （vue基础试炼_01）使用vue.js 快速入门hello world
文章目录 一.需求案例 二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法 三.案例vue简述? 四.案例趣味延伸 五.表达值作用及嘱咐语 一. ...
- （vue基础试炼_05）简单组件之间的传值
接上一篇:(vue基础试炼_04)使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256 文章目录 一.上篇回顾 ① 代 ...
- Vue基础篇六：Vue使用JSX进行动态渲染
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- vue 基础 —— html版的 Vue 入门基础
文章目录 1.Vue两大特性 2.vue指令 2.1.内容渲染指令 (1)`v-text` (2)`{{ }}` :插值表达式 (3)`v-html` 2.2.属性绑定指令 使用 Javascript ...
- 【Vue基础】前端工程化Vue项目
一.创建Vue项目步骤 1.新建一个文件夹,起名为vue_project01 2.在该文件夹中打开cmd,输入指令vue ui,打开图形化界面 3.此时跳转到网页,根据以下步骤配置vue项目 1)项目 ...
最新文章
- java 班级号_Java 学校班级回忆录网站管理系统
- PHP jQuery Ajax 无刷新表单提交实例
- CSS3定位和浮动详解
- CPU的主频，总线频率和L2缓存对电脑的性能有哪些影响
- C#将WebBowser控件替换为Chrome内核
- java名 java_Java Syncrhonisers
- 用Java Servlets代替CGI
- Janusec WAF网关安装体验
- 每日算法系列【LeetCode 685】冗余连接 II
- linux 文件句柄 sock,tcp socket文件句柄泄漏
- 1gb.ru php,美国免费空间0fees.net月流量10GB和50Webs空间500MB可绑域名_免费静态空间 | 微站中国|MicroHost...
- 1:500城镇地形图测绘已正式启动
- Basic Blocks
- VMware安装Android虚拟机
- 氨氮吹脱法脱与php有关系吗,吹脱法处理氨氮废水
- html正方形符号,HTML特殊字符显示
- 为什么IT厂商争着向云计算厂商转型？
- 《听读书怪才解读24部名人传记》笔记
- plc实验报告流程图_plc实训总结范文
- 电脑蓝屏原因？及其解决办法