列表渲染

1. v-for指令基于一个数组对列表进行渲染

item in items 在items中是原始的数据，而item则是数据中被迭代的数组元素的别名

在v-for语句中，我们可以访问$data中的所有属性，也就相当于items作用域的属性

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

vm.$data={
    items:[],
    paraentMessage:"somethings"
}
// v-for中的in可以被of代替

2.基于对象进行遍历

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
vm.$data.Object={
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }

同样可以遍历对象中的键名和索引

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
//渲染后结果
    0.title: How to do lists in Vue
    1.author: Jane Doe

3.关于v-for的维护

​ 为了让Vue能够跟踪每个节点，就需要为每一项提供一个唯一的key属性，除了那种遍历输出到DOM的操作外，作者都建议提供一个唯一的键

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

4.数组更新的检测

• 4.1 原数组发生改变的方法

  • push() 添加新的元素到数组尾部

  • pop() 删除数组尾部元素

  • shift() 删除数组头部元素

  • unshift() 添加新的元素到数组头部

  • splice() 用于添加或删除数组中的元素

  • sort()

  • reverse()

• 4.2 不改变原始数组的方法

  这样要改变原始数组的话，就只能将得到的数组赋值给原始数组，由于vue考虑到重用性，这种替换的方法还是很高效的。并不一定会丢弃现有的DOM去渲染整个列表

  • filter()

  • concat()

  • slice()

• 4.3 注意事项

  由于javascripte的限制，当对数组做以下的操作时，并不能够响应式的更新DOM

  //使用索引去改变一个元素
  vm.items[index]=value
  //改变数组的长度
  vm.items.length=newLength

  正确的方法

  Vue.set(vm.items,index,value)
  vm.items.splice(newLength) //自己瞎操作竟然碰到一个知识点

5. 对象变更时注意事项

​ :warning:对于已经创建的vue实例对象，Vue是不允许添加根级别的响应属性的，但是还是可以使用vue.set()方法向对象中添加响应式的属性

  //使用全局函数Vue.set
  Vue.set(vm.新加属性,"value")
  //使用vue实例方法
  vm.$set(vm.新加属性,"value")

为已存在的对象添加多个新的属性

  var vm = new Vue({
    data: {
      userProfile: {
        name: 'Anika'
      }
    }
  })
  //给userProfile添加新的属性age和favoriteColor

  vm.userProfile=Object.assign({},vm.userProfile,{
      age:27,
      favoriteColor:"Green Hat"
  })

6.在中使用v-for

​ 与v-if的效果类似，带有v-for的将会循环的渲染多个元素的内容

​ 不仅可以显示的使用Vue的组件，还可以在标签元素中使用is=组件名来避开浏览器的解析错误

这里的li标签将会被解析为Vue中注册的组件 todo-item