VUE2.0全套demo讲解 基础2（列表渲染）

在基础1发布之后，我真心发现，根据

api

进一步分析，再结合工作中的实际

demo

给大家讲解之后，大清早就收获了平均一分种一个喜欢，这使我很欣慰，自己的努力没有白费，我决心称热打铁马上出击，打造基础2，在基础上的部分我将给大家讲解

列表渲染
v-for指令

，在我自己认为这个是基础篇的核心，为什么我要放在第二部分讲呢，因为我有很多demo例子都会基于v-for指令去讲，这也是我们工作的核心，从后台拿数据，再渲染数据，如果有对基础1因为

v-for

指令看的不是很透彻的话，请看完这篇再回头看看基础1，还是那句话，支持我创作的请给一个大大的喜欢https://juejin.im/post/58d5dc9b44d90400686aacb4

赞

v-for 列表渲染

v-for array 数组渲染

我们用

v-for

指令根据一组数组的选项列表进行渲染。 

v-for

指令需要以

item
in items

形式的特殊语法， 

items

 是源数据数组并且 

item

 是数组元素迭代的别名。

应用场景：

通常情况下，进入一个活动要展示出所有参加活动的人员，里面有姓名，年龄，报名时间等等，就先举这三个列子，那后台肯定会返回一个

arraylist

数组集合，集合中每个元素肯定是一个对象，那我们如何去把这个数组集合高效率，合理的渲染到页面上，,再拿到用户

id

去到下一个页面查询

memberDetail

祥情，用过jq的同学肯定知识很烦繁，一般肯定是用

arttemplate

这种模板引擎

<template>
<div>
<ul>
<li v-for="(item,index) in memberList" @click="memberDetail(index)">
<span>{{item.custName}}</span>
<span>{{item.age}}</span>
<span>{{item.joinTime}}</span>
</li>
</ul>
</div>
</template>

<script>
export default {
created () {
//就当看作是ajax在初始化进入的时候从后台获取的用户列表数据
this.memberList = [
{custName : "ziksang1",age:20,joinTime : "2014-01-02",custId:1},
{custName : "ziksang2",age:21,joinTime : "2014-01-03",custId:2},
{custName : "ziksang3",age:22,joinTime : "2014-01-04",custId:3},
{custName : "ziksang4",age:23,joinTime : "2014-01-05",custId:4},
]
},
data () {
return {
memberList : []
}
},
methods : {
memberDetail (index) {
sessionStorage.custId = this.memberList[index].custId
}
}
}
</script>

我觉得这个demo太常用了，逐行分析

1.如果在

template模板

里面用到了数据必须先在

data选项里先声明赋值

，我们先给

memberList

给予一个[]数组

2.在

created函数

里我们就当作模拟从后台拿到的数据，然后

赋值给data选项里

的

memberList

，此时

memberList

就有后台拿到的值了

3.

(item,index) in memberList

是vue自己封装的一个语法结构

一.

item

代表集合中的每一个元素，此时每一个元素就是一个对象

二.

index

代表集合每一个元素的下标

三.

memberList

是所要循环的数组

4.为什么我们要把 

(item,index) in memberList

放在每一个循环dom上，那就是li标签 只有在li循环体节点上和循环体所有子节点上拿到

item这个对象里面的所有属性

5.

@click="memberDetail(index)"

 这里用了一个点击方法，我们把

index作为了方法的参数

，目的是什么，这个index代表每一个循环出来dom的下标，通过点击，我们可以拿到对应的用户id可以说拿到每一个用户的任意值，然后在methods我们进行操作，我们可以能过

sessonStorage

来存放，用来过度到下一个用户祥情页，来获取所有用户详情，我们可以打开谷歌浏览器，当我们用鼠标点击的时候，可以发现

sessionStorage里的变化

整个流程是无论是开发任意中型项目必备的

2.template v-for

如同 v-if 模板，你也可以用带有 v-for 的 

<template>

 标签来渲染多个元素块，循环块区域

应用场景 ：

当我们循环渲染时，我们如果有多个欠套不合理的关系下，一般情况下肯定是在最外层套一个div元素，这个我认为显的不是很清楚，我们用template来代替渲染，不但能省去很dom节点，而且也能解决欠套不合理的情况

<template>
<div>
<template v-for="item in list">
<p>{{item.content}}</p>
<img :src="item.img" alt="">
<p class="divider"></p>
</template>
</div>
</template>

<script>
export default {
data () {
return {
list : [
{content : 'ziksang',img :'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1301074775,1382810875&fm=80&w=179&h=119&img.JPEG'},
{content : 'ziksang2',img :'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1312092207,1376369244&fm=80&w=179&h=119&img.JPEG'}
]
}
}
}
</script>
<style>
body,html{
width:100%;
height:100%
}
.divider{
width:100%;
height:1px;
background:black;
}
</style>

如果我们不想多创节点，又不想让p元素做为根节点，我们就可以用template来做渲染，在chorme开发者工具上，也能证实，最外层的的template会自动消失，不会创造出多余的节点。

3. v-for Object 对象渲染

你也可以用 v-for 通过一个对象的属性来迭代。

应用场景 ：

就像第一个列子如果到了详情页，我们要展示一个用户详情，如果后端都给你排好序了，如何正确的方便展示出来，用最快，最便捷的方法那就是v-for 迭代对象，一般情况下展示一个用户详情，后台肯定返回一个用户对象给你

<template>
<table>
<template>
<tr>
<td v-for="(value,key,index) in memberDetail">{{key}}</td>
</tr>
<tr>
<td v-for="(value,key,index) in memberDetail">{{value}}</td>
</tr>
</template>
</table>
</template>

<script>
export default {
created () {
//比方说我们这里拿到前面的custId传给后台拿到用户数据
this.memberDetail = {
name : 'ziksang',
age : 20,
address : "xxx省xxxx市",
tel : "15921898427"
}
},
data () {
return {
memberDetail : {}
}
}
}
</script>
<style>
body,html{
width:100%;
height:100%
}
.divider{
width:100%;
height:1px;
background:black;
}
</style>

1.

(value,key) in memberDetail

value

代表属性值

key

 代表属性,

index

代表每个dom节点的下标索引

两者都是一一对应的，通过第一个例子讲解，我相信这个例子很简单了

4. v-for 整数迭代

这个看看demo就可以了，我几乎没用过

<div>
<span v-for="n in 10">{{ n }}</span>
</div>

4. v-for 和 组件

在自定义组件里，你可以像任何普通元素一样用 v-for 。

应用场景 ：

比方拿掘金来说，每个用户展现的文章列表中，每个用户的文章可以做成一个统一组件，通过父组件来进行数据的传递，循环出所有人的文章，就形成了文章列表，而且可以在热门，最新，或者专栏里面复用，只需要通过数据传递，是一种相当好的模式

在components文件夹里创一个myArticle文件

<template>
<div>
<p>{{artList.name}}</p>
<p>{{artList.startTime}}</p>
<p>{{artList.content}}</p>
<p>{{artList.good}}</p>
</div>
</template>

<script>
export default {
props : ['artList']
}
</script>

用props选项

来接收父组件传入的数据，渲染组件

App.vue文件

<template>
<div>
<my-article v-for='item in artList' :art-list='item'></my-article>
</div>
</template>

<script>
import myArticle from "./components/myArticle.vue"
export default {
components : {
myArticle
},
created () {
//比方说我们是从后台拿到的文章集合
this.artList = [
{name : 'ziksang1' , startTime : '1小时前' , content:'aaaaaaaaa',good : 1},
{name : 'ziksang2' , startTime : '2小时前' , content:'bbbbbbbbb',good : 2},
{name : 'ziksang3' , startTime : '3小时前' , content:'ccccccccc',good : 3},
{name : 'ziksang4' , startTime : '4小时前' , content:'ddddddddd',good : 4}
]
},
data () {
return {
artList : []
}
}
}
</script>

这个需要逐行分析

1.首先们引入组件

2.

v-for

来循环组件

3.把每个文章的数据用 

:art-list='item'传给myArticle组件

如我们进行下拉加载和上拉刷新的话，只要把取到的数据再次从新赋给子组件就可以了，而且我们还可以在各个页面来重复复用这个组件，减少开发工作量

4. 数组更新检测

1.数组变异

说的通俗一点，实是就是我们用

Array.prototype

里提供的原型方法里我们能直接改掉data选项里的数据，触发了视图更新，那就是叫数组变异方法

官方给大家列了只有那些方法能触发视图更新

1.push()

2.pop()

3.shift()

4.unshift()

5.splice()

6.sort()

7.reverse()

应用场景，我们比方说我们是绝境的后台控制者，我们无聊看那个文章不爽，我们对文章进行操作，这个只是我瞎说玩玩的场景，就是用情景去模拟用法的场景

App.vue文件

<template>
<div>
<my-article v-for='item in artList' :art-list='item'></my-article>
<button @click='push'>添加文章</button>
<button @click='pop'>尾部去除一篇文章</button>
<button @click='unshift'>在头部加入一条数据</button>
<button @click='shift'>在头部去除一条数据</button>
<button @click='reverse'>把所有数据进行反转</button>
<button @click='clear'>清除所有数据</button>
</div>
</template>

<script>
import myArticle from "./components/myArticle.vue"
export default {
components : {
myArticle
},
created () {
//比方说我们这里拿到前面的custId传给后台拿到用户数据
this.artList = [
{name : 'ziksang1' , startTime : '1小时前' , content:'aaaaaaaaa',good : 1},
{name : 'ziksang2' , startTime : '2小时前' , content:'bbbbbbbbb',good : 2},
{name : 'ziksang3' , startTime : '3小时前' , content:'ccccccccc',good : 3},
{name : 'ziksang4' , startTime : '4小时前' , content:'ddddddddd',good : 4}
]
},
data () {
return {
artList : []
}
},
methods : {
push () {
this.artList.push({
name : 'ziksang5' ,
startTime : '5小时前' ,
content:'eeeeeeeeee',
good : 5})
},
pop () {
this.artList.pop()
},
shift () {
this.artList.shift()
},
unshift () {
this.artList.unshift({
name : 'ziksang3',
age : 40
})
},
reverse () {
this.artList.reverse()
},
clear () {
this.artList = []
}
}
}
</script>

我们发现我们点这些按钮的时候，myArticle的视图同时跟着改变，这就是我们需要的效果就是变异方法根本的意思，能通

过Array.prototype

里的原形方法改变data选项artList数组触发视图改变的方法就是变异方法

2.数组非变异

no-mutation methods(非变异方法)，不能通过Array.prototype里的原形方法改变data选项artList数组触发视图改变的方法就是非变异方法，其余的方法都是操作后，形成一个返回值，所有操作只是返回了一个新数组，而不会触发视图更新

有

1.filter(), 2.concat(), 3.slice(), 4.map()

<template>
<div>
<ul>
<li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
</ul>
<button @click="filter">数组进行取余过滤</button>
<button @click="concat">数组进行合并</button>
<button @click="map">数组印射</button>
<button @click="slice">返回截取后的数组</button>
</div>
</template>

<script>

export default {
data () {
return {
list : [ 1, 2, 3, 4],
list2 : [ 7, 8, 9, 0 ]
}
},
methods : {
filter () {
this.list = this.list.filter((item)=>{
return item % 2
})
},
concat () {
//以上两种方法都可以
//1.第一种是es6的解构操作符
//2.第二种是传统的数组合并
this.list = [...this.list,...this.list2]
//this.list = this.list.concat(this.list2)
},
map () {
this.list = this.list.map(item =>{
return `${item} map`
})
},
slice () {
this.list = this.list.slice(2)
}
}
}

</script>

那我们最终目的还是要通过方法来改变视图更新，怎么办，很简单，只要把形成的返回值再从新赋值给data选项里的数组就可以了，看api文档说起来很高深的样子，但根本原理就是

Array.prototye

原型上方法导的鬼，我相信大家肯定很清楚了，上面我还在代码中对...解构新特性给大家演示了一个例子

4. 注意示项

官方提示：

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：

vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：

vm.items.length = newLength

在

<template>
<div>
<ul>
<li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
</ul>
<button @click="change3">改变数组第2个值,改成0</button>
<button @click="change4">改变数组第2个值,改成5</button>
</div>
</template>

<script>
import Vue from 'vue'
export default {
data () {
return {
list : [ 1, 2, 3, 4],
list2 : [ 7, 8, 9, 0 ]
}
},
methods : {
//通过下标来改变整个数组里的值也是行不通的
changeList () {
this.list[2] = 3
},
//通过数组长度改变改个数组里的值是行不通的
changeList2 () {
this.length = 1
},
//第一我们可以通过，vue.set实列方法来改变，但我们要在开头再引一入下vue包
// 1 第一个值代表需要改变的数组
// 2 第二个代表改变那一项
// 3 第三个代表改成什么值
//样式语法 Vue.set(example1.items, indexOfItem, newValue)
change3 () {
Vue.set(this.list,1,0)
},
//通过 Array.prototype.splice 数组原型上的方法来改变整个数组的长度或者内容
//这个方法大家肯定常用，我就不细说了
change4 () {
this.list.splice(1,1,5)
}
}
}

</script>

这里因为操作问题我就在代码中直接写了注释，更加能让大家清楚的了解，如何通过那些方法改变数组的长度，改变下标的某一个元素

5. 显示过滤/排序效果

对于我的理解我就定义他叫副本过滤，在不改动data选项原数组的同时，对新数组进行改变，同时也不创造出多余的数据值，那我们这里就要用到一个基础3所要讲的计算属性

应用场景 ：

我在这里做了一个小demo当原数组里面随机改变值的同时，副本基于原数组的创建出一个副本数组跟着过滤的不同而改变

有两个视图：

1.第一个视图，我们点击按纽改变1-10的随机数

2.第二个视图，随着随机数的改变来判断是否为偶数是偶数的则过滤出来

<template>
<div>
<ul>
<li v-for = " (item,index) in list" v-text='`${item} - ${index} `'></li>
</ul>
<ul>
<li v-for = " (item,index) in filter" v-text='`${item} - ${index} `'></li>
</ul>
<button @click="randomList">随机重置数组的值</button>
</div>
</template>

<script>
export default {
data () {
return {
list : [ 1, 2, 3, 4]
}
},
//检测计算 随着原数组用随机数改变的同时，来筛选出不同的过滤结果，筛选结果是原数组的里面为偶数的值拼成一个新数组
//1.我们还可以用methods方法，但是不能一直监控
computed : {
filter () {
return this.list.filter((item)=>{
return item % 2
})
}
},
methods : {
//这里就是随着改变data原数组里的值
randomList () {
this.list = this.list.map(item => {
return item+Math.round(Math.random()*9+1)
})
}
}
}

</script>

随着我们点击按钮的同时，两个视图同时更新，本质上就是在data选项里过滤出一个新数组，同时这个新数组不会影响到data选项里的数组，这个就叫做副本过滤，通过自己的想像可以做出很多不同的demo例子

讲到这个里所有v-for 列表渲染已经讲的我个人认为非常透彻了，如果你动手去把这些代码贴进

vue-cli

中理解一下，再动手自己敲两个demo，我想你的项目开发速度绝对能提升一倍，最后别望了点赞哦，还是那句话我的更新速度，取决于你们对我的认可，谢谢

掘金史上最详细VUE2.0全套demo讲解（基础篇3） ==> 计算属性