四川省工程建设信息网站,南京好的网站设计公司,文档做网站,wordpress 作品集网站接上一篇#xff1a;#xff08;vue基础试炼_02#xff09;使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用v-for循环数据v-on绑定事件v-model数据的双向绑定文章目录一、需求说明① 案例文档② 基础代码③ 基础效果图二、… 接上一篇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 langen
headmeta charsetUTF-8title使用vue.js 实现TodoList/title
/head
body
div idappinput typetextbutton提交/buttonulli第一课的内容/lili第二课的内容/li/ul
/div
/body
/html③ 基础效果图 二、v-for指令学习
指令作用v-for数据循环
① 使用v-for指令 循环显示列表内容
!DOCTYPE html
html langen
headmeta charsetUTF-8title使用vue.js 快速入门hello world/title!--引入vue.js库--script srcvue.js/script
/headbody
!--vue接管的div--
div idappinput typetextbutton提交/buttonulli v-foritem in list{{item}}/li/ul
/divscript/*创建了一个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循环的listitem循环的每一项都是一个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.inputValuedata中的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
