vue-5-列表渲染

一个数组的v-for
<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' }
    ]
  }
})

//也可以用 of 替代 in 作为分隔符
<div v-for="item of items"></div>

//支持一个可选的第二个参数为当前项的索引
<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' }
    ]
  }
})

一个对象的v-for:
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

//第三个参数为索引
<div v-for="(value, key, index) in object">

　　　　{{ index }}. {{ key }}: {{ value }}

　　</div>

key:

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>
//v-bind 来绑定唯一动态值，用来响应数据项的顺序改变等

数组更新检测：

//变异方法，会改变被这些方法调用的原始数组，会观察数组，触发视图更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

//替换数组：返回一个新数组，如filter(), concat() 和 slice()
example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

数组检测注意事项：

？是不适当的做法，+是替代方案;

？ 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
+Vue.set(example1.items, indexOfItem, newValue) 
+example1.items.splice(indexOfItem, 1, newValue)
//splice返回的是含有被删除的元素的新数组

？ 当你修改数组的长度时，例如：vm.items.length = newLength
+example1.items.splice(newLength)

对象检测注意事项：

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

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

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

//vm.$set 实例方法，它只是全局 Vue.set 的别名
this.$set(this.userProfile, 'age', 27)


//赋多个属性，使用Object.assign或者_.extend()时，组合成一个新对象
this.userProfile = Object.assign({}, this.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
    })
  }
}

//或者，一个method();
<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

v-for 渲染多个元素

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

v-for与v-if在同一个元素上时，v-for的优先级更高

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
//每个循环中都会调用v-if

一个组件的v-for

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

为了传递迭代数据到组件里，我们要用 props

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

<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>