Vue学习（五）列表渲染，维护状态，事件处理，表单输入绑定

列表渲染

我们可以用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {
  { item.message }}
  </li>
</ul>

var example1 = new Vue({
   
  el: '#example-1',
  data: {
   
    items: [
      {
    message: 'Foo' },
      {
    message: 'Bar' }
    ]
  }
})

在v-for块中，我们可以访问所有父作用域的property，v-for还支持一个可选的第二个参数，即当前项的索引。

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

var example2 = new Vue({
   
  el: '#example-2',
  data: {
   
    parentMessage: 'Parent',
    items: [
      {
    message: 'Foo' },
      {
    message: 'Bar' }
    ]
  }
})

结果：

你也可以用 of 替代 in 作为分隔符

<div v-for="item of items"></div>

在v-for里使用对象

你也可以用 v-for 来遍历一个对象的 property。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {
  { value }}
  </li>
</ul>

new Vue({
   
  el: '#v-for-object',
  data: {
   
    object: {
   
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

你也可以提供第二个的参数为 property 名称 (也就是键名)：

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

还可以用第三个参数作为索引：

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

维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

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

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

数组更新检测

变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

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

你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如 example1.items.push({ message: 'Baz' })。

替换数组

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
   
  return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

显示过滤/排序后的结果

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

例如：

<li v-for="n in evenNumbers">{
   {
    n }}</li>
data: {
   
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
   
  evenNumbers: function () {
   
    return this.numbers.filter(function (number) {
   
      return number % 2 === 0</