列表渲染

1.v-for遍历数组

<ul>
    <li v-for="item in items">{{item}}</li>
    <li v-for="(item, index) in items">{{item}} - {{index}}</li>
    <!-- ES6迭代器语法 -->
    <li v-for="item of items">{{item}}</li>
</ul>

var app = new Vue({
    el: "#app",
    data: {
        items: [1, 2]
    }
});

2.v-for遍历对象

<ul>
    <li v-for="item in items">{{item}}</li>
    <li v-for="(item, key, index) in items">{{item}} - {{key}} - {{index}}</li>
    <li v-for="item of items">{{item}}</li>
</ul>

var app = new Vue({
    el: "#app",
    data: {
        items:{first:1, second:2}
    }
});

v-for默认使用“就地复用”策略更新已渲染过的元素列表，为了跟踪每个节点，需要为每项提供一个唯一key，如：
<li v-for="(item, index) in items" :key="index"></li>

3.数组更新检测

• 变异方法(改变原始数组)：Vue重写了数组的push, pop, shift, unshift, splice, sort, reverse方法，会触发视图更新
• 非变异方法：filter, concat, slice等返回一个新数组，可用新数组赋值替换，触发视图更新

Vue不能检测以下变动：
vm.items[0] = 6; vm.items.length = 0;
替代方案：
Vue.set(vm.items, 0, 6);

4.对象更新检测

Vue不能检测对象属性的添加或删除,还需通过Vue.set方法

//或使用实例方法$set, $delete
Vue.set(app.items, "third", 3);
Vue.delete(app.items, "first");
//为已有对象添加多个属性,建议创建新对象,重新赋值
app.items = Object.assign({}, app.items, {first: 1, fourth: 4});

5.显示过滤/排序结果

建议使用计算属性得到一个数组过滤副本，嵌套循环不能使用计算属性的可以使用一个method返回副本

6.一段取值范围的v-for

<ul>
    <!-- 输出：1~6 -->
    <li v-for="n in 6">{{n}}</li>
</ul>

7.v-for on a <template>

<ul>
    <template v-for="(item, key) in items">
        <li>{{item}}</li>
        <li>{{key}}</li>
    </template>
</ul>

v-for优先级高于v-if，对于有条件的跳过循环，需要将v-if置于v-for元素外层

8.组件v-for

<!-- 组件有自己独立作用域，传递数据到组件要使用props，避免耦合 -->
<my-component v-for="item in items" :item="item" :key="item.id"></my-component>

2.20+组件使用v-for必须绑定key