一,前言
目前对前期目录进行了简单的梳理,周末会找时间调一下顺序,
顺便再补充一下遗漏的知识点,让过度更加平缓一些,
例如前面没有说计算属性,但目前的列表渲染就要用到了...囧
在对目录梳理的过程中,发现一些知识点合并起来写效果会更好,
在只是覆盖度不降低的前提下,还可以精简一些篇幅,达到更好的效果
v-for列表渲染指令分为列表渲染和列表的过滤与排序两部分,分两篇写:
这一篇是第一部分,主要介绍:
v-for的使用,
v-for遍历数组和对象,
v-for迭代整数,
v-for中key的使用,
顺便将数组更新这部分知识点合并到v-for中
二,v-for列表渲染指令
实际开发中经常需要遍历数组或枚举一个对象的键值进行显示
Vue.js提供了列表渲染指令v-for(需结合in使用)
同时列表渲染也支持of代替in作为分隔符,这样更接近与js语法
三,v-for遍历数组
以一个Demo演示v-for如何遍历数组:
<div id="app">
<h2>v-for遍历数组</h2>
<ul>
<li v-for="(book, index) in books" :key="index">
序号 : {{index}}, 书名 : {{book.name}}, 价格 : {{book.price}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
books: [
{name: 'Vue.js', price:50},
{name: 'Javascript', price:30},
{name: 'Css', price:40},
{name: 'Html', price:60}
]
}
})
</script>运行效果:
使用v-for对books数组对象进行遍历,输出数组中每个对象的属性值
v-for表达式在对数组进行遍历时,支持一个可选参数作为当前项的索引:
v-for="(book, index) in books"
使用:key="index",使用key使元素不被复用,且为key绑定index索引值,确保唯一
注意: 索引的获取不要使用$index,Vue2.x已将此语法废弃
以上是v-for最近本是使用,在实际项目中可能还会涉及到对列表行项目的操作,如:增删改等
四,v-for遍历对象
v-for不仅能对数组进行遍历输出,还能将对象的键值进行遍历
以一个Demo演示v-for如何遍历对象:
<div id="app">
<h2>v-for遍历对象</h2>
<ul>
<li v-for="(item, key, index) in books[1]" :key="index">
序号 : {{index}} --- 键 : {{key}}=>值 : {{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
books: [
{name: 'Vue.js', price:50},
{name: 'Javascript', price:30},
{name: 'Css', price:40},
{name: 'Html', price:60}
]
}
})
</script>运行结果:
选取数组中的一个对象,使用v-for对其进行键值遍历
v-for表达式在对对象进行遍历时,支持两个可选参数分别是键名和索引:
v-for="(item, key, index) in books[1]"
使用:key="index",使用key使元素不被复用,且为key绑定index索引值,确保唯一
五,v-for迭代整数
<div id="app">
<h2>v-for迭代整数</h2>
<span v-for="n in 10">{{n}}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app'
})
</script>迭代整数很简单:
从1开始到最大值(目标值),以上Demo从1开始到目标值10
注意:
关于v-for迭代整数这里,记得有书上说Vue1.x和2.x不一样,1.x的迭代是从0开始
此例在Vue1.x中的输出为0-9共计10条数据
六,Vue的数组更新
在实际项目中有时需要对列表行项目进行一些操作,如:增删改等
在介绍对列表进行操作之前,先要弄清楚Vue下数组的更新问题
Vue的核心是数据与视图的双向绑定
当修改数组时,Vue会检测到数据变化,所以使用v-for渲染的视图也会随变化立即更新
这是因为Vue包含了一组观察数据变异的方法,Vue官网也有介绍:
变异方法其实是Vue对原生方法的重写和增强,对其添加了更新视图的功能
有变异方法,就有非变异方法:
Vue并不是对所有数组操作都进行了重写增强
变异方法会改变原始数据,而非变异方法不会改变原始数组:
filter(),concat()和slice()虽然不会改变原始数组,但总会返回一个新的数组
由于Vue在检测到数据变化时,并不是直接重新渲染整个列表,而是最大化地复用DOM元素
这导致替换的数组中,含有相同元素的项不会被重新渲染,
因此可以放心大胆的使用新数组替换旧数组,而不必担心性能问题
需要注意的是,以下导致的数组变化Vue不能检测到,也不会触发视图更新
1)通过索引直接设置的项,如:vm.books[2]={};
2)修改数组的长度,如:vm.books.length=1;
解决问题1:
方法1:使用Vue内置的set方法:
Vue.set(vm.books, 3, {
name:"AngularJs",
price:"35"
});
如果在webpack使用组件化默认不导入Vue,可使用$set方法,非webpack下可以使用$set方法
方法2:
vm.books.splice(3, 1, {
name:"AngularJs",
price:"35"
});
解决问题2:
vm.books.splice(1);
这两个问题都可以使用splice()方法解决,它能做不只如此,
splice()是一个非常强大的方法,能够完成数组增删改操作,API如下:
七,对列表进行操作
在有了对Vue的数组更新的了解后,再来看如何对列表进行操作
以下这个Demo在v-for遍历数组的基础上,实现了对列表行羡慕的添加,删除和更新功能
<div id="app">
<h2>v-for遍历数组</h2>
<ul>
<li v-for="(book, index) in books" :key="index">
序号 : {{index}}, 书名 : {{book.name}}, 价格 : {{book.price}}
--<button @click="deleteBook(index)">删除</button>
--<button @click="updateBook(index, {name:'AngularJs', price:35})">
更新
</button>
</li>
</ul>
<button @click="addBook({name:'ReactJs', price:45})">添加一条数据</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
books: [
{name: 'Vue.js', price:50},
{name: 'Javascript', price:30},
{name: 'Css', price:40},
{name: 'Html', price:60}
]
},
methods: {
// 删除指定行项目
deleteBook (index) {
// Vue中splice()是一个变异(重写)方法,实现了以下两个功能
// 1. 调用原生的数组的对应方法
// 2. 更新界面
this.books.splice(index, 1)
},
// 更新指定行项目为新对象
updateBook (index, newBook) {
// 这种写法vue会监听到数据变化,更不会更新视图
// this.books[index] = newBook
this.books.splice(index, 1, newBook)
},
// 添加一个新的行项目
addBook (newBook) {
this.books.push(newBook)
}
}
})
</script>运行结果:
此时对第二条数据进行删除,触发视图更新:
再对第二条数据进行更新,触发视图更新:
最后向列表中添加一条数据,触发视图更新:
有了Vue的数组更新基础,对于列表操作的理解就简单多了
在对行项目的更新中,不能使用this.books[index]=newBook的方式
同时我们也看到了splice()方法的强大,可以实现增删改数组的操作
八,结尾
关于列表渲染的使用就到这里
下一篇介绍列表的过滤与排序