Vue 是一套构建用户界面的渐进式框架。它只关注 MVC 框架中的视图层，即 view 层，因此 Vue 也读作 view。
构建一个 Vue 实例：
var vm = new Vue({
// 节点选择器
el: "#app",
// 成员属性
data: {},
// 成员方法
methods: {
fn: function () {},
...
},
// 实例被创建后执行
created: function() {},
// 实例被装载后执行
mounted: function() {},
// 计算属性
computed: {
computedValue: function() {},
...
}
})
Vue 指令
注：以下均用 vm 表示 Vue 的一个实例
绑定文本
<div>{{ msg }}</div>，其中 msg 是 vm 的成员属性
（这种大括号包裹变量的语法，称为 Mustache语法）
v-html 绑定HTML
v-html='rawHTML' 将当前节点的 innerHTML 与 rawHTML 绑定
<!--vm.rawHTML='<p>okii</p>'-->
<div v-html="rawHTML">123</div>
渲染结果：<div><p>okii</p></div>
v-once 仅执行一次数据渲染
<span>这个将会随时更新: {{ msg }}</span>
<span v-once>这个仅在创建时更新: {{ msg }}</span>
v-if 条件渲染
v-if='value' 根据 value 的布尔值决定创建、销毁当前节点
v-if v-else-if v-else 可一起搭配使用
可以与 <template> 搭配使用，用来控制一组标签
v-show 显示、隐藏节点
v-show='value' 始终创建当前节点，并根据 value 的布尔值决定显示、隐藏当前节点（通过设置节点的样式 display）
不可以与 <template> 搭配使用
v-for 列表渲染
v-for='(item[, index]) in myArray' 迭代数组
v-for='(value[, key[, index]]) in myObject' 迭代对象
in 可替换为 of
若对迭代的次序有要求，可加入 :key='index'（或 :key='key'）
该指令所在的节点，一定是被重复创建的节点
push() pop() shift() unshift() splice() sort() reverse() 将会触发更新
可以与 <template> 搭配使用，用来渲染一组标签
v-bind 绑定节点属性
v-bind:attributeName="attributeValue" 将节点属性 attributeName 与 attributeValue 绑定
简写 :attributeName='attributeValue'
属性名称 attributeName 可以用方括号动态设定，如：:[dynamic_attribute_name]='attributeValue'
注：浏览器会把 attribute 名全部强制转为小写，因此动态属性名称最好不要出现大写字母
v-on 绑定事件监听
v-on:eventName="eventValue" 将节点属性 eventName 与 eventValue 绑定
简写 @eventName='eventValue'
动态绑定事件参数 @[dynamic_event_name]='eventValue'
v-on:click="counter += 1" // counter为成员属性
v-on:click="greet" // greet为成员方法
v-on:click="say('hi')" // 向成员方法 say() 传入一个字符串参数 hi
v-on:click="warn('Form cannot be submitted yet.', $event)" // 传入两个参数，第一个参数为字符串，第二个参数是原始 DOM 事件
修饰符
.stop .prevent .capture .self .once .passive
<!-- 阻止单击事件继续传播 -->
<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>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
计算属性
计算属性是个匿名函数，函数一般涉及成员属性的计算，计算属性的值即 匿名函数计算的结果。
当被计算的成员属性更新时，计算属性也会随之更新；若成员属性没有变动，重复调用该匿名函数，不会重新计算，但返回上次计算的结果。
var vm = new Vue({
el: '',
data: {},
computed: {
myValue: function() {
return ... // 之后可以调用 vm.myValue
}
}
})
class 绑定
写法一：绑定字符串
:class='className'，其中 vm.className 是字符串
写法二：对象语法——对象中绑定布尔值
:class='{ active: isActive, 'text-danger': hasError }'，根据成员属性 isActive 和 hasError 的布尔值决定是否添加类名 active 和 text-danger
写法三：对象语法——绑定对象
:class='classObj，其中 vm.classObj={actice: true, 'text-danger': false}
写法四：数组语法——数组中绑定字符
:class='[activeClass, errorClass]'，其中 data: {activeClass: 'active', errorClass: 'text-danger'}
Vue 的类名绑定可以和普通类名赋值混合
style 绑定
写法一：绑定字符串
写法二：对象语法——对象中绑定字符串/数值
:style="{ color: activeColor, fontSize: fontSize + 'px' }"，其中 data: {activeColor: 'red', fontSize: 30}
写法三：对象语法——绑定对象
:style="styleObject"，其中data: {styleObject: {color: 'red', fontSize: '13px'}}
写法四：数组语法——数组中绑定样式对象
数组元素为样式对象
Vue 的样式绑定可以和普通样式赋值混合
组件
Vue.component('my-component', {
props: [prop1, ...],
data: function() {
return {
value1: 0,
...
}
},
// template 中仅允许有一个根节点
template: `
<div>
<h3>{{ value1 }}
<p>{{ prop1 }}</p>
</div>`
})
监听事件
父组件声明子组件的自定义事件，子组件中通过 $emit() 调用：
<div id='app'>
<div :style='{fontSize: fontSize + "em"}'>
<!--向系统注册（声明）一个名为 enlarge-text 的自定义事件-->
<my-post v-on:enlarge-text='fontSize += 0.1' />
</div>
</div>
Vue.component('my-post', {
template:`
<div>
<h3>title</h3>
<button v-on:click='$emit("enlarge-text")'>放大文本</button>
</div>
`
})
// $emit('enlarge-text') 即调用自定义事件 enlarge-text
new Vue({
el: '#app',
data: {
fontSize: 1
}
})
子组件通过 $emit(eventName, param) 抛出参数 param，供父级组件使用：
<div id='app'>
<div :style='{fontSize: fontSize + "em"}'>
<!--向系统注册一个名为 lessen-text 的自定义事件，$event 即子组件传入的参数-->
<my-post v-on:lessen-text='fontSize += $event' />
<!--向系统注册一个名为 lessen-text 的自定义事件，调用 vm.appMethod()-->
<my-post v-on:lessen-text='appMethod' />
</div>
</div>
Vue.component('my-post', {
// $emit("lessen-text", 0.3) 即调用父组件注册事件 lessen-text，并抛出参数 0.3
template:`
<div>
<h3>title</h3>
<button v-on:click='$emit("lessen-text", 0.3)'>缩小文本</button>
</div>
`
})
new Vue({
el: '#app',
data: {
fontSize: 2
},
methods: {
appMethod: function(lessenAmount) { // lessenAmount 即子组件通过 $emit('lessen-text', 0.3) 传过来的第二个参数：0.3
this.fontSize -= lessenAmount
}
}
})
事件监听步骤总结
- 在父组件中引入子组件时，通过
v-on:eventName='...'声明子组件可以使用的事件 eventName - 在子组件相应的位置激活 1 中声明的事件 eventName。事件具体执行的内容为 1 中的 ...
子组件向父组件传递参数，是通过 $emit(eventName, param)。父组件通过 $event 内联调用，或在 vm.methods() 中作为方法的参数
动态组件
通过 component 标签加上 is 属性，动态切换组件
<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>