备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

列表渲染 Vue2.0与Vue1.0的区别

2017-11-15 1348
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

v-for：  v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。


基本用法：

1
2
3
4
5
< div  id = "app" >
     < ul >
         < li  v-for = "item in arr" >`item`</ li >
     </ ul >
</ div >
1
2
3
4
5
6
new  Vue({
     el: '#app' ,
     data:{
         arr:[ 'apple' , 'banana' , 'cherry' , 'durain' ]
     }
})

wKiom1gA_3XhsxMlAAADmLe6VCw209.png

这种写法类似Javascript种的关联数组，key 和 value，item就相当于数组的value。那数组的下标是否也能打出来呢？

1
2
3
4
5
< div  id = "app" >
     < ul >
         < li  v-for = "item in arr" >{{$index}} `item`</ li >
     </ ul >
</ div >

wKioL1gA_9eD9GHJAAAD-5GfTos987.png

同理，如果是对于一个对象呢？

1
2
3
4
5
< div  id = "app" >
     < ul >
         < li  v-for = "item in obj" >{{$index}} {{$key}} `item`</ li >
     </ ul >
</ div >
1
2
3
4
5
6
new  Vue({
     el: '#app' ,
     data:{
         obj:{ 'a' : 'apple' , 'b' : 'banana' , 'c' : 'cherry' }
     }
})

wKioL1gBAnLx98X-AAADPjrnLxA588.png

一样可以取到对应的下标，key值和value值


那如果在页面上有一个按钮，点击一下就添加一个列表项出来怎么实现呢？

1
2
3
4
5
6
7
< div  id = "app" >
     < button  @ click = "add" >添加</ button >
     < button  @ click = "delete" >删除</ button >
     < ul >
         < li  v-for = "item in arr" >{{$index}} `item`</ li >
     </ ul >
</ div >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
new  Vue({
     el: '#app' ,
     data:{
         arr:[ 'apple' , 'banana' , 'cherry' , 'durain' ]
     },
     methods:{
         add: function (){
             this .arr.push( 'watermelon' )
         },
         delete : function (){
             this .arr.splice(0,1)
         }
     }
})

点击添加按钮的时候，在数组的末尾添加一个子项；点击删除按钮的时候，把数组的第一项删掉

wKiom1gBAYqxvToEAAAJ1-vx1a0338.png wKiom1gBAZbgekElAAAHv-s5IBI715.png

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。


在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< ul  id = "app" >
     < li  v-for = "(item,index) in items"  class = "item-{{$index}}" >{{$index}}-`parentMsg` `item`.`msg`</ li >
</ ul >
 
< script  src = "resources/js/vue.js" ></ script >
< script >
new Vue({
     el:'#app',
     data:{
         parentMsg:'滴滴',
         items:[
             {msg:'顺风车'},
             {msg:'专车'},
             {msg:'特斯拉'}
         ]
     }
})
</ script >

wKiom1gtE1Kg7Dt_AABjtDdOq8w739.png


Vue.js 1.0.17及以后版本支持of分隔符，更接近 JavaScript 遍历器的语法： 

1
< div  v-for = "item of items" ></ div >


Template v-for

如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< ul  id = "app" >
     < template  v-for = "item in items" >
         < li >`item`.`msg`</ li >
     </ template >
</ ul >
 
< script  src = "resources/js/vue.js" ></ script >
< script >
     new Vue({
         el:'#app',
         data:{
             parentMsg:'滴滴',
             items:[
                 {msg:'顺风车'},
                 {msg:'专车'},
                 {msg:'特斯拉'}
             ]
         }
     })
</ script >

wKiom1gtFj-jpit7AABRHMMPREs268.png


对象迭代 v-for

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< ul  id = "app" >
     < li  v-for = "value in object" >`value`</ li >
</ ul >
 
< script  src = "resources/js/vue.js" ></ script >
< script >
new Vue({
     el:'#app',
     data:{
         object:{
             uname:'Roger Wu',
             uage:26,
             country:'China'
         }
     }
})
</ script >

wKioL1gtF9qR3nv_AABU_H-PrD4475.png

也可以提供第二个参数，键值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul id= "app" >
     <li v- for = "(key,value) in object" >`key`: `value`</li>
</ul>
 
<script src= "resources/js/vue.js" ></script>
<script>
new  Vue({
     el: '#app' ,
     data:{
         object:{
             uname: 'Roger Wu' ,
             uage:26,
             country: 'China'
         }
     }
})
</script>

wKioL1gtGK7gFeLmAABFkHceDmQ194.png


也可以提供第三个参数，索引值：

1
2
3
< ul  id = "app" >
     < li  v-for = "(index,key,value) in object" >{{$index}}-`key`: `value`</ li >
</ ul >


在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。


整数迭代 v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。

1
2
3
4
5
6
7
8
9
10
< div  id = "demo" >
     < span  v-for = "n in 10" >`n`</ span >
</ div >
 
< script  src = "resources/js/vue.js" ></ script >
< script >
var vm2 = new Vue({
    el:'#demo'
})
</ script >

wKiom1gtHBiwcexbAAAB5g9dyB0611.png


Vue1.0版本

重复数据的渲染 track-by

前面所有的例子中，同一个数组中都没有重复内容，那如果数组中出现重复内容的话，是否还能正常渲染呢？


代码示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< div  id = "app" >
     < button  @ click = "add" >添加</ button >
     < ul >
         < li  v-for = "item in items" >`item`</ li >
     </ ul >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/1.0.26/vue.js" ></ script >
< script >
     var vm =new Vue({
         el:'#app',
         data:{
             items:['Tom','Marry','Jim']
         },
         methods:{
             add:function(){
                 return this.items.push('Roger')
             }
         }
     })
</ script >


点击按钮时，往数组中添加一个新的元素，这个一点问题也没有。问题是，页面渲染出新的元素‘Roger’以后，你再点这个按钮，控制台报错了。

wKiom1g2ZgPgsTNKAABKAR7Ad8M714.png


数组中发现了重复元素，如果想要添加重复元素的话，可以使用 track-by="$index/uid" (可以是索引，也可以是数据库中的id 值)


修改示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< div  id = "app" >
     < button  @ click = "add" >添加</ button >
     < ul >
         < li  v-for = "item in items"  track-by = "$index" >`item`</ li >
     </ ul >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/1.0.26/vue.js" ></ script >
< script >
     var vm =new Vue({
         el:'#app',
         data:{
             items:['Tom','Marry','Jim']
         },
         methods:{
             add:function(){
                 return this.items.push('Roger')
             }
         }
     })
</ script >


再来看效果，完美解决

wKioL1g2ZwiDkVNVAAA4ZmylbnQ659.png


Vue 2.0版本

相比Vue 1.0 版本，Vue2.0 在列表渲染方面主要有以下几个改变：


1、允许数组重复元素

还是上面的例子，我们引入一个Vue2.0 的js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< div  id = "app" >
     < button  @ click = "add" >添加</ button >
     < ul >
         < li  v-for = "item in items" >`item`</ li >
     </ ul >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/2.0.8/vue.js" ></ script >
< script >
     var vm =new Vue({
         el:'#app',
         data:{
             items:['Tom','Marry','Jim']
         },
         methods:{
             add:function(){
                 return this.items.push('Roger')
             }
         }
     })
</ script >


没有 track-by，把vue文件换成了2.0版本，效果可见下图，随意添加重复元素

wKiom1g3mYaRarO2AABb6mNurXY476.png



2、去掉了一些隐式变量 $index, $key

如果想要获取数组或对象元素的下标可以用  v-for="(val,index) in array"


先看Vue1.0版本的代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< div  id = "app" >
     < ul >
         < li  v-for = "item in items" >{{$index}}-`item`</ li >
     </ ul >
</ div >
 
<!--Vue1.0-->
< script  src = "//cdn.bootcss.com/vue/1.0.18/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             items:['Apple','Hua Wei','Oppo','Vivo']
         }
     })
</ script >


使用 $index 来获取数组下标，一点问题也没有：

wKiom1g3m0PjBljLAABfqpw87pQ019.png



再看Vue2.0版本的代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< div  id = "app" >
     < ul >
         < li  v-for = "item in items" >{{$index}}-`item`</ li >
     </ ul >
</ div >
 
<!--Vue2.0-->
< script  src = "//cdn.bootcss.com/vue/2.0.8/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             items:['Apple','Hua Wei','Oppo','Vivo']
         }
     })
</ script >


报错了，说 $index在 实例中没有定义

wKiom1g3m4-AR1o9AABAkWpRVP0503.png


我们刚才已经指出了 1.0版本 和 2.0版本的区别，现在不妨试一试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< div  id = "app" >
     < ul >
         < li  v-for = "(item,index) in items" >`index`-`item`</ li >
     </ ul >
</ div >
 
<!--Vue2.0-->
< script  src = "//cdn.bootcss.com/vue/2.0.8/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             items:['Apple','Hua Wei','Oppo','Vivo']
         }
     })
</ script >


查看效果，完美解决

wKioL1g3nDLBM7eJAABXWU_WOxI527.png



再来看一个关于 $key的例子

Vue1.0版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< div  id = "app" >
     < ul >
         < li  v-for = "value in items" >{{$key}} - `value`</ li >
     </ ul >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/1.0.26/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             items:{
                 name:'Roger',
                 age:26,
                 gender:'male'
             }
         }
     })
</ script >

wKioL1g3oP_DCSdYAABR3i52pb0458.png


Vue2.0版本

使用 $key：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< div  id = "app" >
     < ul >
         < li  v-for = "value in items" >{{$key}} - `value`</ li >
     </ ul >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/2.0.8/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             items:{
                 name:'Roger',
                 age:26,
                 gender:'male'
             }
         }
     })
</ script >


报错了，$key 未定义

wKiom1g3oX6RhbnfAABVnSYy0oE859.png


使用 v-for="(item,key) in items"：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< div  id = "app" >
     < ul >
         < li  v-for = "(value,key) in items" >`key` - `value`</ li >
     </ ul >
</ div >
 
< script  src = "//cdn.bootcss.com/vue/2.0.8/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             items:{
                 name:'Roger',
                 age:26,
                 gender:'male'
             }
         }
     })
</ script >


页面渲染截图：

wKiom1g3oeihVoLrAABNGpOBxUg554.png


3、track-by="$index/uid" 变成 <li v-for="(val,index) in list" :key="index">

在Vue1.0 中，track-by 除了可以让数组添加重复元素以外，还有很大一个作用就是提升循环的性能

在Vue2.0中，数组重复元素已经不是问题了，性能提升这块还是有必要的


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< div  id = "app" >
     < ul >
         < li  v-for = "(item,index) in items"  :key = "index" >`index`-`item`</ li >
     </ ul >
</ div >
 
<!--Vue2.0-->
< script  src = "//cdn.bootcss.com/vue/2.0.8/vue.js" ></ script >
< script >
     var vm = new Vue({
         el:'#app',
         data:{
             items:['Apple','Hua Wei','Oppo','Vivo']
         }
     })
</ script >
本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1862092
文章标签：
CDN
JavaScript
索引
前端开发
关键词：
VUE.js区别
VUE.js列表渲染
技术小牛人
目录
相关文章
众所周知
|
1月前
|
缓存 JavaScript API
在vue中，computed 和 watch 的区别和运用的场景？
在vue中，computed 和 watch 的区别和运用的场景？
众所周知
14 0
龙大吉
|
1月前
|
缓存 JavaScript
解释 Vue 的计算属性和监视属性的区别。
解释 Vue 的计算属性和监视属性的区别。
龙大吉
32 6
龙大吉
|
1月前
|
JavaScript
在vue中，v-show 与 v-if 有什么区别？
在vue中，v-show 与 v-if 有什么区别？
龙大吉
23 4
小老头头头头
|
8天前
|
JavaScript 前端开发 API
vue与jqyery的区别
vue与jqyery的区别
小老头头头头
7 1
小周sir
|
9天前
|
JavaScript 算法 前端开发
vue3和vue2的区别都有哪些
【4月更文挑战第15天】Vue3与Vue2在响应式系统（Proxy vs. Object.defineProperty）、组件模块化（Composition API vs. Options API）、数据变化检测（Reactive API vs. $watch）、虚拟DOM算法（基于迭代 vs. 基于递归）及Tree-Shaking支持上存在显著差异。Vue3的改进带来了更好的性能和灵活性，适合追求新技术的项目。Vue2则因其成熟稳定，适合维护大型项目。选择版本需根据项目需求、团队情况和技术追求来决定。
小周sir
13 0
小吴吴吴呀
|
19天前
|
缓存 JavaScript
vue中的计算属性和侦听属性的区别
vue中的计算属性和侦听属性的区别
小吴吴吴呀
9 0
小吴吴吴呀
|
19天前
|
存储 JavaScript 算法
Vue2 和Vue3 有什么区别
Vue2 和Vue3 有什么区别
小吴吴吴呀
22 0
破浪前进
|
19天前
|
JavaScript 前端开发 API
vue中的ref/reactive区别及原理
vue中的ref/reactive区别及原理
破浪前进
18 0
天玄TX
|
25天前
|
缓存 JavaScript
Vue 中的 computed 和 watch 的区别
Vue 中的 computed 和 watch 的区别
天玄TX
16 0
蒾酒
|
1月前
|
JavaScript 前端开发
vue.js中v-show,v-if的区别，以及使用场景
vue.js中v-show,v-if的区别，以及使用场景
蒾酒
21 0