1. 列表渲染

使用v-for指令基于数组或对象来渲染一个列表

使用v-for迭代或遍历一个数组

使用v-for迭代或遍历一个对象

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

需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名（也可以传入第二个参数index）

//html

  
    {{ item.message }}

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

//渲染结果为
Foo
Bar

2. v-for里使用一个对象

第一个参数为Object.keys() 的结果value,可以提供第二个的参数name为 property 名称 (也就是键名),还可以继续提供第三个参数index
【注意】v-for 在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

//html

  {{ index }}. {{ name }}: {{ value }}

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

//渲染结果为
0. title: How to do lists in Vue
1. author: Jane Doe
2. publishedAt: 2016-04-10

3. 维护状态

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

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key 属性：

4. 数据更新检测

变异方法mutation method
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

//举例
  example1.items.push({ message: 'Baz' })

替换数组
相对于变异方法，改变了调用变异方法的原始数组，替换数组方法是不改变原始数组，而是总返回一个新的数组.
比如：
- filter（）
- concat()
- slice()
  ……
注意由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

//举例，这个代码有bug
add(){ 
    this.items[this.items.length] = {name:'xxx',clicked:false,id:Math.random()}
    console.log(this.items) //this.items 确实变化了
}

//解决bug 的方法：
 1. 如果改成 this.items.push 就可以解决这个 BUG 了，因为 Vue 在 this.items.push 方法上做了一些手脚
 2. 使用 this.$set(this.items, this.items.length, ...) 能解决这个 BUG

2. 事件处理

1. 事件监听

使用v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码


  //或者 
//点击对应div后调用methods.add

2. 事件处理方法

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

//html

//js
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!

3. 内联处理器中的方法

在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

【$event】的含义：

指对应的时间信息
对于原生元素（如 button、input）来说，$event 是原始的 DOM 事件
对于自定义组件（如 child）来说, 是其自身 $emit 发出的第一个参数

//html

//js
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

4. 修饰符

4.1 事件修饰符

Vue.js 为 v-on 提供了事件修饰符，之前提过，修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive

//html














...



...

4.2 键盘修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
.数字
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.page-down
.ctrl
.alt
.shift
.meta
.exact

4.3 鼠标按钮修饰符

.left
.right
.middle

Vue不支持自定义修饰符，参考链接 [https://github.com/vuejs/vue/issues/6982]

5. 关注点分离原则

关注点分离原则是处理复杂性的一个原则。由于关注点混杂在一起会导致复杂性大大增加，所以把不同的关注点分离开来分别处理，关注点分离在计算机科学中，是将计算机程序分隔为不同部分的设计原则。每一部分会有各自的关注焦点。比如网站可以分离为前端和后端，前端的网页又可以分离为 HTML、CSS 和 JS 等。

【Vue】列表渲染与事件处理