Vue---day4---列表渲染

列表渲染

v-for指令

v-for=“item in items”这里的items指的是源数组，item则是为他取的别名，相关代码案例在前面Vue介绍那篇博客已经展示过了。这里再补充一个v-for使我们可以访问父作用域的property，还有一个可选的第二参数，也就是当前元素的索引index。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

这里的index就是其在数组中的索引位置，从0开始。为了更接近js的语法，可以将in改为of，不过in更类似python的语法，这里用啥纯粹个人喜好不会对程序产生影响。

不止数组，v-for也可以用来访问一个对象。其中各种属性均以键值对的形式来获取。

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

同样这里也有索引的概念，从0开始。
（遍历对象时，会以Object.key()遍历，但是不同的JS引擎可能导致结果不一样）

维护策略

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。
也就是说当数据的顺序发生改变时，Vue在更新渲染元素不会直接操作DOM元素移动来同步数据顺序的改变，而是直接依据更新后的数据进行就地更新，并保证索引的正确。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute。建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。但是v-for并不与key特别关联。

数组更新检测

Vue对被绑定侦听的数据包裹了变更方法。

		<div id="app">
           <p v-for="item in items">
               {{item}}
           </p>
       </div>
       <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   items:[
                       {boy1:"mike"},
                       {girl1:"mercy"},
                       {boy2:"Bob"}
                       ]
               }
           })
       </script>

push()加入一个元素。

pop()删除最后一个

shift()删除第一个元素

unshift()添加元素到第一位

splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）

sort()类似java中的排序，这里需要指定比较的属性，例如id什么的。

<div id="app">
            <div v-for="item in nums">
                {{item.value}}
            </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    nums:[
                        {id:1,value:"this"},
                        {id:3,value:"simple"},
                        {id:2,value:"a"},
                        {id:4,value:"words"}
                    ]
                },
                methods:{
                    sort(){
                        this.nums.sort((a,b)=>{
                        return a.id-b.id;
                        });
                    }
                }
            })
        </script>

reverse()数据翻转。