Vue實例
- 每個 Vue.js 應用都是通過構造函數 Vue 創建一個 Vue 的根實例啟動的。
- 每個 Vue 實例都會代理其 data 對象里所有的屬性，只有被代理的屬性是響應的。除了 data 屬性，Vue 實例其他屬性與方法都有前綴 $，與代理的 data 屬性區分。
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
模板語法
Vue.js 使用了基于 HTML 的模板語法。在底層的實現上， Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應用到 DOM 操作上。
插值
使用 “Mustache” 語法（雙大括號）進行文本插值：
<span>Message: {{ msg }}</span>
雙大括號會將數據解釋為純文本，使用 v-html 指令插入HTML（數據綁定會被忽略）：
<div v-html="rawHtml"></div>
Mustache 不能在 HTML 屬性中使用，應使用 [v-bind 指令]，使用了v-bind 指令后，引號里面就是一個js表達式，而不是字符串：
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
如果條件被求值為 false 的話該屬性會被移除：
<button v-bind:disabled="isButtonDisabled">Button</button>
Vue.js 的數據綁定支持 JavaScript 表達式，但是每個綁定都只能包含單個表達式。
指令
- 指令（Directives）是帶有 v- 前綴的特殊屬性。指令的職責就是當其表達式的值改變時相應地將某些行為應用到 DOM 上。
- 修飾符（Modifiers）是以半角句號 . 指明的特殊后綴，用于指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對于觸發的事件調用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
過濾器
Vue.js 允許自定義過濾器，用作一些常見的文本格式化,用在兩個地方：mustache 插值和 v-bind 表達式。添加在 JavaScript 表達式的尾部，由“管道”符指示：
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
過濾器設計目的就是用于文本轉換。在指令中實現更復雜的數據變換，應該使用計算屬性。
計算屬性
當需要對模板中的數據進行復雜的處理時，使用computed屬性。計算屬性 reversedMessage 函數將用作屬性 vm.reversedMessage 的 getter 。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
computed vs methods
- 計算屬性會基于它的依賴進行緩存，只有在它的相關依賴發生改變時才會重新求值。
- 只要發生重新渲染，methods調用總會執行該函數。
計算屬性setter
計算屬性默認只有 getter ，在需要時也可以自定義一個 setter 。
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
觀察watch
當需要在數據變化響應，執行異步操作或開銷較大的操作時，使用watch 。
Class 綁定
在 v-bind 用于 class 和 style 時，表達式的結果類型除了字符串之外，還可以是對象或數組。
對象語法
v-bind:class 指令可以與普通的 class 屬性共存。動態地切換 class：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
也可以綁定返回對象的計算屬性:
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
數組語法
//三元表達式
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
//當有多個條件 class 時這樣寫有些繁瑣，在數組語法中使用對象語法
<div v-bind:class="[{ active: isActive }, errorClass]">
條件渲染
v-if，v-else-if，v-else ，v-show。
Vue 提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的 key 屬性即可。
v-if vs v-show
- v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
- v-show 不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換。
- v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。如需頻繁地切換，使用 v-show ；如運行時條件不太可能改變，則使用 v-if。
列表渲染
用 v-for 根據一組數組進行渲染.
- 數組語法： (item,[index]) in items 。
- 對象語法：(value, key, index) in object
組件和v-for
組件有自己獨立的作用域，為了傳遞迭代數據到組件里，要用 props：
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id">
</my-component>
事件處理器
為什么在HTML中監聽事件？
Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護上的困難。它有如下優點：
- 根據HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。
- 無須在 JavaScript 里手動綁定事件， ViewModel 代碼是純粹的邏輯，和 DOM 完全解耦，更易于測試。
- 當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除，無須手動清理它們。
