1. 列表渲染

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

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

 <li v-for="(item, index) in items">

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

<li v-for="(value, key, index) in object">

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

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

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

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

//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 属性：

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

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 @onclick="add"></div>  //或者 <div @onclick="add()"></div>
//点击对应div后调用methods.add

---

2. 事件处理方法

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

//html
<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

//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】的含义：

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

//html
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

//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
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

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