vue.js实战学习——内置指令（二）

注：此内容摘抄自：梁灏的《Vue.js实战》

注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。

5.列表渲染指令 v-for

当需要将一个数组遍历或每句一个对象循环显示时，就会用到列表渲染指令v-for。它的表达式需要结合in来使用，类似item in items 的形式。

<div class="app7">
    <ul>
        <li v-for="book in books">{{book.name}}</li>
    </ul>
</div>

var app7=new Vue({
    el:'.app7',
    data:{
        books:[
            {name:'《Vue.js实战》'},
            {name:'《JavaScript语言精粹》'},
            {name:'《JavaScript高级程序设计》'}
        ]
    }
});

v-for的表达式支持一个可选参数作为房前项的索引。

<div class="app8">
    <ul>
        <li v-for="(book,index) of books">{{index}}-{{book.name}}</li>
    </ul>
</div>

与v-if 一样，v-for 也可以用在内置标签<template>上，将多个元素进行渲染：

<div class="app9">
    <ul>
        <template v-for="book in books">
            <li>书名：{{book.name}}</li>
            <li>作者：{{book.author}}</li>
        </template>
    </ul>
    <span v-for="(value,key,index) in user">{{index}}-{{key}}-{{value}}</span>
    <span v-for="n in 10">{{n}}</span>
</div>

var app9=new Vue({
    el:'.app9',
    data:{
        books:[
            {name:'《Vue.js实战》',author:'梁灏'},
            {name:'《JavaScript语言精粹》',author:'Douglas Crockford'},
            {name:'《JavaScript高级程序设计》',author:'Nicholas C.Zakas'}
        ],
        user:{
            name:'Nancy',
            gender:'女',
            age:24
        }
    }
});

除了数组外，对象的属性也是可以遍历的，如上的user；还可以迭代整数，如上的n。

遍历对象属性时，有两个可选参数，分别是键名和索引。

<li v-for="(value,key,index) in user">
{{index}} - {{key}}:{{value}}
</li>

 

6.数组更新

Vue 的核心是数据与视图的双向绑定，当我们修改数组时，Vue 会检测到数据变化，所以用v-for 渲染的视图也会立即更新。Vue 包含了一组观察数组变异的方法，使用他们改变数组也会触发视图更新：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

我们将上面的实例的数据books添加一项：

//push只能加一个
app9.books.push({
    name:'CSS揭秘',
    author:'[希] Lea Verou'
});

使用以上方法会改变被这些方法调用的原始数组，有些方法不会改变原数组，如：

• filter()
• concat()
• slice()

它们返回的是一个新数组，在使用这些非变异方法时，可以用新数组来替换原数组。

app9.books=app9.books.filter(function(item){
    return item.name.match(/JavaScript/);
});

 Vue在检测到数组变化是，并不是直接重新渲染整个列表，而是最大化的复用DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆的用新书需来替换六数组，不用担心性能问题。

需要注意的是，以下变动的数组中，Vue是不能检测到的，也不会触发视图更新：

• 通过索引直接设置项，比如 app.books[3]={...}
• 修改数组长度，比如app.books.length=1

解决第一个问题可以用两种方式实现同样的效果。第一种是使用Vue内置的set方法：

Vue.set(app.books,3,{
name:'《Vue.js实战》',author:'梁灏'
})

如果实在webpack中使用组件化的方式，默认是没有导入Vue的，可以使用$set:

this.$set(app.books,3,{
name:'《Vue.js实战》',author:'梁灏'
})
//这里的this指向的是当前组件实例，即app。在非webpack模式下也可以用$set方法，例如：app.$set(...)

另一种方法：

app.books.splice(3,1,{name:'《Vue.js实战》',author:'梁灏'})

第二个问题也可以直接用splice来解决：

app.books.splice(1);