VUE复习笔记8（列表渲染）

用 v-for 把一个数组 对应为 一组元素

我们使用 v-for 指令根据数组的列表来进行渲染。
v-for指令需要使用 item,idx in items这样特殊的语法， items是源数据数组，item则是数组中的每一项。idx代表索引，但是idx不是必须的。

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

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

列表输入 foo bar两项

在 v-for 块中，我们拥有对父级作用域的完全访问权，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 通过一个对象的属性来迭代，而不只是数组。

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

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

输出 john doe 30
我们也可以提供使用第二个参数作为键名

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

输出
firstName：john
lastName：doe
age：30

也就是说，在使用数组循环的时候，参数分别为：item当前项和第二参数索引index
在使用对象循环时，参数分别为 当前想item的value，item的key和他的索引index

key

当 vuejs 使用 v-for 更新已经渲染过的元素列表时，它默认用“就地复用”策略。
如果数据项的顺序改变，vue也不会移动dom来匹配数据项的顺序，而只是简单的复用每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

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

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

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

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

因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

数组更新检测

变异方法

vue中还包含一些数组变异的方法，所以他们也会触发视图的更新。
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push() //数组最后插入添加一个
pop() //删除数组的最后一个元素
shift() //删除数组的第一个元素
unshift()  //数组开头添加一个或多个元素
splice()  //法向/从数组中添加/删除项目
sort() //数组排序
reverse() //颠倒数组中元素的排序

//demo
example1.items.push({ message: 'Baz' }) 。

替换数组

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

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

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

注意事项

由于 js 的限制，vue不能够检测到以下数组的变化
1.当使用索引直接对一个项进行设置时

vm.items[indexOfItem] = newValue

2.当修改数组长度时

vm.items.length = newLength

举例：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

以上虽然可以修改，但是vue检测不到，所以就不是响应式的。
这里列举了 解决第一类问题的2种方法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
//分别是 数组、数组索引、新添加对应索引的值

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)；
//分别是 数组的索引位置，添加个数，添加的值

解决第二类问题的方法

vm.items.splice(newLength)

对象更改检测注意事项

由于js 的限制，vue不能检测对象属性的添加和删除

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的，因为这里的b是新添加的，无法检测到。

对于已经创建的实例，vue不能够动态添加根级别的响应式属性，但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

这时可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)

有时候可能需要对已有对象赋多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。

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

显示过滤排序结果

有时候需要显示一个数组的过滤或者排序的副本，而不实际改变或者重置原始数据，这种情况下，可以创建返回过滤或者排序数组的计算属性。

<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
    })
  }
}
//这里返回能够被2整除的 2和4

如果在计算属性不适合的情况下则使用 methods

一段范围内的取值

v-for也可以取整数。在这种情况下，它将重复多次模板。

//循环10次
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

v-for on a <template>

类似 v-if，我们也可以利用带有 v-for的 template渲染多个元素

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

v-for with v-if

当他们处于同一个节点时，v-for的优先级高于v-if，也就是说，先进行循环再判断。
比如下面这个列表，我们只想渲染部分节点，这时候v-if判断就很有用。

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

上面的代码只传递了未完成的 todos。

如果我们的目的是先进行判断，在看是否有必要循环，就可以将 v-if包裹在外层的div中。

<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>

一个组件的 v-for

了解组件相关知识，查看 组件。完全可以先跳过它，以后再回来查看。

在自定义组件中，我们可以像普通元素那样使用 v-for。

<my-component v-for="item in items" :key="item.id"></my-component>

注意：2.2.0的版本中，v-for对应的key也是必须填写的。

然而任何数组都不会被自动传递到组件中，因为组件有自己独立的作用域，为了把迭代的数据传递到组件里，我们要使用props。

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

下面是一个简单的 todo list 的完整例子：

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

注意这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。查看 DOM 模板解析说明 来了解更多信息。

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})