零基础入门Vue之影分身之术——列表渲染&渲染原理浅析
听我说
从 条件渲染 那一篇，我学习到了如何用Vue对dom节点根据条件显示
但单单有条件还不够啊，有时候数据是一大坨一大坨的数据，如果Vue不提供咱要么使用“v-html” 要么就没办法实现
v-html又感觉太low了，Vue提供了另外的指令更好的实现，那便是：列表渲染
列表渲染：v-for
简单的列表渲染可以使用v-for来完成，而Vue提供了两种采用形式的列表渲染
列表渲染之数组
假设我有一个数组，然后我希望数组里面的数据，通过展示在ul的一个一个li里面，并且要求数组更新的同时li会自动的增减
假设data如下
//假设下面是Vue的配置对象
{
data:{
msgList:[
{
name:"张三",
age:19,
sex:"男"
},
{
name:"李四",
age:22,
sex:"男"
},
{
name:"王五",
age:20,
sex:"女"
},
{
name:"陈真",
age:30,
sex:"男"
},
]
}
}
那么dom节点可以这么写，达到渲染的效果
<!--假设这是根节点的内容-->
<ul>
<li v-for="item of msgList">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
此时，ul里面的li渲染出的个数等同于msgList的个数，同时item表示当前li的数组元素
可以用JavaScript的for-of循环来理解，这里用v-for="item in msgList"也是一样的效果
item都是表示msgList的成员
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="item of msgList">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
msgList:[{
name:"张三",
age:19,
sex:"男"
},
{
name:"李四",
age:22,
sex:"男"
},
{
name:"王五",
age:20,
sex:"女"
},
{
name:"陈真",
age:30,
sex:"男"
}]
}
})
</script>
</html>
列表渲染之对象
Vue还允许配置为对象这种可遍历的变量来使用v-for
如果配置为对象的话，那么会拿到两个参数，一个是key一个是value（先拿到value在拿到key）
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="(value,key) of msgObj">
{{key}} - {{value}}
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
msgObj:{
name:"陈真",
age:30,
sex:"男"
}
}
})
</script>
</html>
当然也可以写一个参数，只接受value
<div id="root">
<ul>
<li v-for="value of msgObj">
{{value}}
</li>
</ul>
</div>
完全写法
无论是对象还是数组，列表渲染都会给当前值索引，所以对于数组的话就可以写成两个参数，显示value后是索引
<ul>
<li v-for="(item,index) of msgList">
{{index}}、{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
如何使对象的话就这么写
<ul>
<li v-for="(value,key,index) of msgObj">
{{index}}、{{key}} = {{value}}
</li>
</ul>
key的应用&渲染原理浅析
为了不避免出错，无论是react还是vue使用v-for，原则上都应该配置唯一标识作为key
当出现要对数据修改时，未配置唯一标识key可能会出现bug
因此对于需要用上v-for的节点请配置上数据唯一标识作为key
详细解释请参照：维护状态
浅析出错原因
Vue在监控到数据改变时，并不会如我们所想的一样马上渲染dom
而是会先渲染虚拟dom，然后通过特定算法或者说特定规则去渲染实际dom
渲染规则如下：
- 当遇到v-for时，首先寻找数据老的虚拟dom和新的虚拟dom的唯一标识进行对比（以li为例）
- 在li节点中，如果有一样的部分那么照搬老的dom，不重新渲染，直接搬运反之根据新的虚拟dom重新渲染
- 如果li中这个节点在旧虚拟dom不存在，那么久会按照新的虚拟dom重新渲染
不放图片说不清楚，放图片说一大堆，搬出尚硅谷的视频吧：零基础入门Vue之key的作用和原理
key的具体用法
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
对于 Vue中的key 的用法也很简单，他是为了标识v-for每个循环元素的唯一性，所以key也应该是唯一的
写法如下
<dom v-for="item in list" :key="item.id"></dom>
此时，当前dom与数据唯一的id互相绑定，这样如果dom更新了，新旧虚拟dom就能一一对应的去对比
就不会出现元素紊乱，并且渲染效率低下的问题
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="item of msgList" :key="item.id">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
msgList:[{
id:1,
name:"张三",
age:19,
sex:"男"
},
{
id:2,
name:"李四",
age:22,
sex:"男"
},
{
id:3,
name:"王五",
age:20,
sex:"女"
},
{
id:4,
name:"陈真",
age:30,
sex:"男"
}]
}
})
</script>
</html>
注：切忌把索引作为key，因为只要不是往末尾插入数据或者删除数据的方式来修改数据，都会造成index失去唯一标识的作用
The End
本片完~
零基础入门Vue之影分身之术——列表渲染&渲染原理浅析的更多相关文章
- 零基础入门学习Python（12）--列表：一个打了激素的数组(3)
前言 这节课我们继续谈一下Python列表一些知识 知识点 Python常用操作符 比较操作符 >>> list1 = [123] >>> list2 = [234 ...
- 零基础入门学习Python（11）--列表：一个打了激素的数组(2)
前言 上节课我们介绍一个打了激素的数组,叫做列表.列表我们比作一个大仓库,你所能够具现化的东西,都可以往里面扔,它包罗万象.另外还介绍了三个往列表添加元素的方法,分别是: append(),exten ...
- 零基础入门学习Python（10）--列表：一个打了激素的数组
前言 有时候我们需要把一些东西暂时保存起来,因为他们有着一些直接或间接的联系,我们需要把它们放在某个组或者集合中,未来可能用得上. 很多接触过编程的朋友都知道,都接触过数组这个概念,那么数组这个概念事 ...
- 零基础入门 实战mpvue2.0多端小程序框架
第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...
- 零基础入门 Java 后端开发，有哪些值得看的视频?
目前网络上充满了大量的 Java 视频教程,然而内容却鱼龙混杂,为了防止小伙伴们踩坑,一枫结合自己的学习经验,向大家推荐一些不错的学习资源. 作为一名非科班转码选手,可以说,我是在哔哩哔哩上的研究生! ...
- 从零基础入门JavaScript（1）
从零基础入门JavaScript(1) 1.1 Javascript的简史 1995年的时候 由网景公司开发的,当时的名字叫livescript 为了推广自己的livescript,搭了j ...
- 函数:我的地盘听我的 - 零基础入门学习Python019
函数:我的地盘听我的 让编程改变世界 Change the world by program 函数与过程 在小甲鱼另一个实践性超强的编程视频教学<零基础入门学习Delphi>中,我们谈到了 ...
- Cloudera Manager、CDH零基础入门、线路指导 http://www.aboutyun.com/thread-9219-1-1.html (出处: about云开发)
Cloudera Manager.CDH零基础入门.线路指导http://www.aboutyun.com/thread-9219-1-1.html(出处: about云开发) 问题导读:1.什么是c ...
- 【JAVA零基础入门系列】Day2 Java集成开发环境IDEA
开发环境搭建好之后,还需要一个集成开发环境也就是IDE来进行编程.这里推荐的IDE是IDEA,那个老掉牙的Eclipse还是先放一边吧,(手动滑稽). IDEA的下载地址:http://www.jet ...
- 【JAVA零基础入门系列】Day4 变量与常量
这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量. 那么什么是变量?对于初学者而言,可以将变量理解为盒子,这些盒子可以用来存放数据,不同类型的数据需要放在对应类型的盒子里. ...
随机推荐
- sprint-boot 存储图片的base64
需求:将前端上传的图片转换成base64码发送到后端存储到数据库中(oracle或者mysql) 问题:当图片大小比较大(大概是超过1M)后端接收到的数据就会有错误. 解决方法: sprint-bo ...
- C#读取FX5U线圈（modbusTCP）
第一步:导入所需的类库 第二步:包含命名空间 第三步:实例化modbus类 ModbusTcpNet busTcpClient = null; busTcpClient = new ModbusTcp ...
- token原理分析
- P1004-DP【绿】
这道题很有趣,暴搜的时间复杂度太过于凶残O(K*(2^n)^2)(K的意思是大常数),不过作为提高组T4,这道题数据范围太小了,感觉哪怕是离谱的暴搜也能过. 再加上一时半会没想好多项式时间复杂度的正解 ...
- shell脚本(1)-shell介绍
一.shell介绍 1.什么是shell shell是c语法编写的,是用户和liunx内核沟通的桥梁,即是命令语法,也是解释性编程语言. 内核处理的都是二进制,而用户处理的都是高级语法,系统开发人员可 ...
- Jensen 不等式证明
Jensen 不等式定义 若 \(f(x)\) 为区间 \(I\) 上的下凸函数,则对于任意 \(x_{i} \in I\) 和满足 \(\displaystyle\sum_{i=1}^{n} \la ...
- 微信小程序——如何获取url中的数据
如何获取url中的数据 这里举个例子! 当我们需要编辑一个可以点击的图片超链接 这时候结构是这个样子的 首先最外层有一个视图层view 在view中添加超链接标签<navigator> & ...
- C++ 关键字 new
new new 是C++ 中的关键字,有两个含义 new 表达式 作为运算符的函数名,也就是 operator new new 表达式 提供一个特定的内存分配格式,返回在存储空间上构造的对象或对象数组 ...
- [转帖]Web技术（七）：如何使用并实现MQTT 消息订阅-发布模型？
文章目录 一.什么是发布-订阅消息模型? 二.订阅-发布消息模型有哪些应用? 2.1 应用于IP 物联网络中的消息传递 2.2 应用于操作系统进程间的消息传递 2.3 应用于MESH 自组网中的消息传 ...
- [转帖]Linux中的inode到底是什么
https://www.jianshu.com/p/6aa4d7ef17de inode 是什么? 要了解 Linux 操作系统上的 inode 前,我们先来说说 Linux操作系统上的文件.对于 L ...