第八节:实战前必须掌握的10个指令(下)
上一节我们学了5个重要的指令: v-text 、 v-html 、 v-show 、 v-if 、 v-else
传送门:《 实战前必须掌握的10个指令(上) 》
这一节,我们继续学习剩下的5个指令。话不多说,撸起来!
6. v-for 指令
有时候,我们的data中的存放的数据不是个简单的数字或者字符串,而是数组Array类型,这个时候,我们要把数组的元素展示在视图上,就需要用到vue提供的 v-for 指令,来实现列表的渲染。
我们看看它的用法:
<div id="app"> <div v-for="item in list">{{item}}</div> </div> <script> let app = new Vue({ el:"#app", data:{ list:['Tom','John','Lisa'] } }); </script>
首先,我们的data中包含数组list,数组包含三个元素:“Tom”,“John”,“Lisa”,我们通过 v-for 指令把它渲染出来,其中item表示数组中的每个元素。我们看看渲染结果:
(效果图)
我们看到,我们解析渲染出三个div,其中包含的值分别是数组中的元素,表示我们解析渲染成功。
什么,怎么拿到索引?拿到每个元素的索引也很简单,我们稍微改动一下代码,把html部分的代码修改为:
<div id="app"> <div v-for="(item,index) in list"> {{index}}.{{item}} </div> </div>
在循环解析的过程中,我们不但要拿到list数组的每个元素item,我们还获取每个元素的索引,写法如上,循环的时候加上(index,item)。
我们来看效果图:
(效果图)
我们看到,索引分别是0,1,2都被成功地渲染出来了。这就是用 v-for 指令来渲染列表的用法。比起以前手动更新dom列表,简直就是方便得不要不要的。
提醒:v-for指令除了可以迭代数组,还可以迭代对象和整数。
7. v-bind 指令
在第六节我们也提过 v-bind 指令的作用和用法,它用于动态绑定DOM元素的属性,比较常见的比如:<a>标签的href属性,<img/>标签的src属性。
<div id="app"> <a v-bind:href="link">hello官网</a> </div> <script> let app = new Vue({ el:"#app", data:{ link:"http://hello.com" } }); </script>
用 v-bind 指令来修饰href属性,表明它的值是一个动态的值,对应的则是data中的link的值:http://hello.com.
来吧,看看渲染效果:
(效果图)
<a>标签的href的值成功地解析渲染成:http://hello.com。
第六节也说过, v-bind 指令可以简写成一个冒号“:”,也就是以下两种写法是等价的。
<a v-bind:href="link">hello官网</a> <!--等价于--> <a :href="link">hello官网</a>
它们的解析渲染效果是一样一样的。
8. v-on 指令
v-on 指令相当于绑定事件的监听器,绑定的事件触发了,可以指定事件的处理函数,记性好的同学应该记得我们在第四节介绍methods选项的时候,有用到 v-on 指令。(估计你也不记得了),这里我们还是配合methods来演示:
<div id="app"> <button v-on:click="say">点击</button> </div> <script> let app = new Vue({ el:"#app", methods:{ say(){ console.log('hello'); } } }); </script>
methods选项的用法不再展开讲解,还不理解的同学可以翻看第四节《定义一个vue实例常用的4个选项》
回到这个例子,我们通过 v-on 指令修饰click点击事件,指定事件响应后的处理函数为methods中的say( )方法,我们渲染看看效果:
(gif图,加载需要点时间)
点击按钮,可以成功触发click事件,并且调用say( ),一切都在我们的预期之中。
此外,如果你想给处理程序say( )传参数,也是可以的,用法跟普通的方法一致。
<div id="app"> <button v-on:click="say('Tom')"> 点击 </button> </div> <script> let app = new Vue({ el:"#app", methods:{ say(name){ console.log('hello,'+name); } } }); </script>
我们再上一个案例的基础上稍微修改代码,say(name)接受一个参数name,并把name打印出来,在调用的时候传如实参“Tom”。再看看效果,是不是在我们的预期之内:
(gif图,加载需要点时间)
“hello,Tom”被打印出来了,一切尽在掌握之中,感觉真好。
9. v-model 指令
这是一个最重要最常用的指令,一般用在表单输入,它帮助我们轻易地实现表单控件和数据的双向绑定,相对以前的手动更新DOM,简直就是开发者的福音,迫不及待地来看看它的用法:
<div id="app"> <input v-model="msg" type="text"> <p>你输入:{{ msg }}</p> </div> <script> let app = new Vue({ el:"#app", data:{ msg:'' } }); </script>
只要给input控件添加 v-model 指令,并指定关联的数据msg,我们就可以轻松把把用户输入的内容绑定在msg上。我们把msg的内容显示出来,看是不是跟用户输入的内容是同步更新的:
(gif图,加载需要点时间)
是不是比你手动更新DOM爽多了,是不是感受到了vue的MVVM带来的快感?
10. v-once 指令
最后,我们再来讲解一下v-once指令,它的特点是只渲染一次,后面元素中的数据再更新变化,都不会重新渲染。
我们再上面的案例代码中稍做修改,仔细看改了哪里:
<div id="app"> <input v-model="msg" type="text"> <p v-once>你输入:{{ msg }}</p> </div> <script> let app = new Vue({ el:"#app", data:{ msg:'hello,公众号的同学们' } }); </script>
修改1:<p>标签增加了 v-once 指令;
修改2:msg的初始值不再是空字符串。我们来看看效果:
(gif图,加载需要点时间)
由于msg有了初始值,第一次渲染的时候,input控件和<p>标签都有了内容,由于<p>标签我们添加了 v-once 指令,所以,后期我们更新msg的值的时候,<p>标签的内容不会发生改变,也是符合我们的预期。
本节小结
学完本节,你应该掌握了 v-for 、 v-bind 、 v-on 、 v-model 、 v-once 这5个指令的用法,加上第七节的5个指令,可以满足你在开发中的需求了。
扩展阅读
1.《ECMAScript 6 系列》原创教程
2.《实战前必须掌握的10个指令(上)》
第八节:实战前必须掌握的10个指令(下)相关推荐
- 第七节:实战前必须掌握的10个指令(上)
最近发现更新得越快,后台的收到的催更消息就越多,这个号只有我一个人在写教程,写的速度难免跟不上大家阅读的速度,我尽量多抽时间来写教程,喂饱你们! 这一节我们来学习并掌握在实战用一定会用到的10个指令, ...
- html5--6-68 实战前的准备工作:了解HTML5大纲算法
html5--6-68 实战前的准备工作:了解HTML5大纲算法 学习要点 了解HTML5大纲算法 在html5中有一个很重要的概念,叫做HTML5大纲算法(HTML5 Outliner),它的用途为 ...
- 【Java从0到架构师】项目实战 - 前后端分离、后端校验、Swagger、全局异常处理
项目实战 - 前后端分离.后端校验.Swagger Layui 同源策略 SpringMVC 实现 CORS 后端校验 - hibernate-validator 方法的 Model 参数校验 方法的 ...
- 女孩做妻子前应知道的10件事
女孩做妻子前应知道的10件事 一段时间的甜蜜恋爱期过后,你和心爱的他终于要踏上期盼已久的红地毯.你发誓一定要做个最幸福的小女人,要成一个永远让丈夫着迷的好妻子.从一个女孩的身份转变为一个妻子的身份前, ...
- 7-7 斐波那契(Fibonacci)数列前20项 (10 分)
7-7 斐波那契(Fibonacci)数列前20项 (10 分) 输出斐波那契(Fibonacci)数列(1,1,2,3,5,8,13--)的前20项 链接 输出格式: 每个数输出占8列. 输出样例: ...
- java 多线程缓存_[Java教程]【JAVA并发编程实战】12、使用condition实现多线程下的有界缓存先进先出队列...
[Java教程][JAVA并发编程实战]12.使用condition实现多线程下的有界缓存先进先出队列 0 2016-11-29 17:00:10 package cn.study.concurren ...
- 2017-2018-1 20155222 《信息安全系统设计基础》第10周 Linux下的IPC机制
2017-2018-1 20155222 <信息安全系统设计基础>第10周 Linux下的IPC机制 IPC机制 在linux下的多个进程间的通信机制叫做IPC(Inter-Process ...
- linux notepad 安装教程,Ubuntu 15.04/14.10/14.04下安装和卸载Notepad++(notepadqq)
Ubuntu下的Notepad++也就是notepadqq,比较适合刚从Windows平台转移到Linux平台的用户使用,如果你一直在Windows下使用的是nodepad++,那么推荐你在Linux ...
- Mac 10.11系统下cocoaPods安装注意事项
本文读者需具备的知识:cocoaPods相关概念及常用命令. 今天初次使用cocoaPods(下面我就称其为可可豆好了),为其在OS X 10.11系统下的安装折腾了半天,衰x10^n... 先反省一 ...
最新文章
- mysql filde_备份一个约250G的mysql实例【xtrabackup备份方案对比】
- atitit. 文件上传带进度条 atiUP 设计 java c# php
- 解决项目中.a文件的冲突
- eclipse中设置python的版本
- Windows登录类型知多少?
- db2数据库还原找不到文件_DB2 还原数据库
- ACM ICPC 2011-2012 Northeastern European Regional Contest(NEERC)G GCD Guessing Game
- 解读最新的 Xamarin 更新
- python runtimeeeror_Python3基础 raise 产生RuntimeError 异常
- Linux中usr目录
- JSP还有必要学吗 这篇文章告诉你
- wifi连接上不能上网 手机WiFi连接上不能上网的解决办法
- ghost服务器系统镜像文件,带RAID服务器能GHOST备份吗?
- 浅析Tier和Layer的区别
- 江苏大学linux实验报告,正弦波振荡电路实验报告.doc
- 菜鸟的mongoDB学习---(二)MongoDB 数据库,对象,集合
- 模拟新浪微博随便看看界面布局
- 智商黑洞(门萨Mensa测试)6
- 两天价网站背后重重迷雾:做个网站究竟要多少钱
- 《花雕学AI》23:中文调教ChatGPT的秘诀:体验测试与通用案例,解锁无限有趣玩法!
热门文章
- 互联网日报 | 小米跻身千亿美金俱乐部;企业微信活跃用户数达1.3亿;蔚来即将发布旗下首款轿车...
- 中国互联网企业综合实力研究报告(2020)
- php文件管理 打包,Thinkphp6如何利用ZipArchive打包下载文件
- yii2通过url访问类中的方法_行为型设计模式 访问者模式
- 【C语言】使用指针得到数组的最后一个数
- Jenkins Pipline语法
- MongoDB数据库备份恢复与导入导出
- 【云栖大会】与马云一起开启“飞天·进化”之旅
- 【云栖大会】用爱成就彼此 距云栖大会还有10天
- 寂寞的hasLayout