在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染

可以通过html标签内添加v-for 属性（Vue里面叫指令），实现html标签的循环控制

v-for类似于JavaScript的for循环，可以用于遍历一组数据；

数组用法

1、数组基本用法

通过

<template>
  <div>
    <div>健康食物有：</div>
    <div v-for="item in food">{{item}}</div>
  </div>
</template>
<script>
  export default {
      data(){
        return {
          food:[
            "青菜",
            "牛奶",
            "鸡蛋",
            "豆制品"
          ]
        }
      }
    };
</script>
<style>
</style>

数组写成这样也可以，调用的时候就要调用{{item.name}}

items: [
    { name:20},
    { name:23 },
    { name:18 }
]

2、数组带下标index的用法

<template>
  <div>
    <div>健康食物有：</div>
    <div v-for="(item,index) in food">{{index+1}}.{{item}}</div>
  </div>
</template>
<script>
  export default {
      data(){
        return {
          food:[
            "青菜",
            "牛奶",
            "鸡蛋",
            "豆制品"
          ]
        }
      }
    };
</script>
<style>
</style>

对象用法

1、对象value值的用法

<template>
  <div>
    <div>健康食物有：</div>
    <div v-for="item in food">{{item}}</div>
  </div>
</template>
<script>
  export default {
      data(){
        return {
          food:{
            a:"青菜",
            b:"牛奶",
            c:"鸡蛋",
            d:"豆制品"
          }
        }
      }
    };
</script>
<style>
</style>

2、对象key值和value值

<template>
  <div>
    <div>健康食物有：</div>
    <div v-for="(value,key) in food">{{key}} {{value}}</div>
  </div>
</template>
<script>
  export default {
      data(){
        return {
          food:{
            a:"青菜",
            b:"牛奶",
            c:"鸡蛋",
            d:"豆制品"
          }
        }
      }
    };
</script>
<style>
</style>

3、对象key、value、下标

<template>
  <div>
    <div>健康食物有：</div>
    <div v-for="(value,key,index) in food">{{index}} {{key}} {{value}}</div>
  </div>
</template>
<script>
  export default {
      data(){
        return {
          food:{
            a:"青菜",
            b:"牛奶",
            c:"鸡蛋",
            d:"豆制品"
          }
        }
      }
    };
</script>
<style>
</style>

数值用法

第一个参数是数值，第二个参数是下标

<ul>
  <li v-for="(num, index) in 10">{{num}}-{{index}}</li>
</ul>

=======================

template元素

类似于v-if，你可以使用 template 元素来循环渲染一段包含多个元素的内容：
我们使用template来对多个元素进行包裹，而不是使用div来完成，重复的div无用且消耗性能；

  <template id="my-app">
    <ul>
      <template v-for="(value, key) in info">
        <li>{{key}}</li>
        <li>{{value}}</li>
        <li class="divider">我是分隔符</li>
      </template>
    </ul>
  </template>

数组排序

伪排序

<template>
  <div>
    <div>伪排序：</div>
    <div v-for="(value,index) in arrSort" >{{index}}.{{value}}</div>
  </div>
</template>
<script>
  export default {
      data(){
        return {
          food:[
            3,
            54,
            78,
            11,
            22,
            33,
            13,
            11,
            23,
            22,
            54,
            59,
          ]
        }
      },
      computed:{
        arrSort(){
          return this.food.sort();
        }
      },
    };
</script>
<style>
</style>

真排序

<template>
  <div>
    <div>伪排序：</div>
    <div v-for="(value,index) in arrSort" >{{index}}.{{value}}</div>
  </div>
</template>
<script>
  export default {
      data(){
        return {
          food:[
            3,
            54,
            78,
            11,
            22,
            33,
            13,
            11,
            23,
            22,
            54,
            59,
          ]
        }
      },
      computed:{
        arrSort(){
          return this.food.sort((a,b)=>{return a-b});
        }
      },
    };
</script>
<style>
</style>

=======================

key标识

给 v-for 循环增加一个key，这个key可以更好地提高组件复用的效率，提高页面视图的更新效率。

这个是怎么实现的呢？

1、数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图页面响应式更新。

包括数组的这些方法：
push( )
pop( )
shift( )
unshift( )
splice( )
sort( )
reverse( )
上面的方法会直接修改原来的数组，
但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、 concat() 和 slice()。

这些方式都可以触发页面响应式更新。

注意！通过下标索引修改，不是响应式，无法触发页面更新。

2、VNode

VNode的全称是Virtual Node，也就是虚拟节点；

事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode（如下图）；

VNode的本质是一个JavaScript的对象，Vue是通过把