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 不能检测以下数组的变动：
- 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如：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】的含义：
- 指对应的时间信息
- 对于原生元素（如 button、input）来说，$event 是原始的 DOM 事件
- 对于自定义组件（如 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 等。
