Vue2官網簡要筆記

####Vue實例
vue構造器：
var vm = new Vue({
  // 選項
})
擴展vue構造器：
var MyComponent = Vue.extend({
  // 擴展選項
})
屬性和方法：
var vm = new Vue({
  el: "#example",
  data: data，
  computed: {}，
  watch: {},
  methods: {}
})
生命週期：
beforeCreate, created, beforeMount, mouted, beforeUpdate, updated, beforeDestory, destoryed
####模板語法：
文本：<span>Message: {{msg}}</span>
純HTML：<div v-html="rawHtml"></div>
屬性：<div v-bind:id="dynamicId"></div>
使用js表達式：{{ number + 1 }}
指令（Directives）是帶有v-前綴的特殊屬性
<p v-if="seen">Now you see me</p>
參數：（一個指令能接受一個參數，在指令後以冒號指明）
<a v-bind:href="url"></a>
<a v-on:click="doSomethind"></a>
修飾符（Modifiers）是以半角句號.指明的特殊後綴
<form v-on:submit.prevent="onSubmit"></form>
過濾器：
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>
縮寫：
<a v-bind:href="url"></a>  縮寫爲 <a :href="url"></a>
<a v-on:click="doSomething"></a> 縮寫爲 <a @click="doSomethind"></a>
####計算屬性：
計算緩存VS Methods:計算屬性是基於他們的依賴進行緩存的，只要在他的相關依賴發生改變時纔會從新求值。
computed屬性VS Watched屬性：儘可能使用computed。
計算setter: 計算屬性默認只有getter, 不過在須要時你能夠提供一個setter。
觀察Watchers：響應變化的數據，執行異步操做或者開銷較大的操做。
####Class與Style綁定：
綁定HTML Class（對象語法）：
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
綁定HTML Class（數組語法）：
<div :class="[activeClass, errorClass]"></div>
綁定內聯樣式（對象語法）：
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="styleObject"></div>
綁定內聯樣式（數組語法）：
<div :style="[baseStyles, overridingStyles]"></div>
####條件渲染
v-if, v-else, v-else-if, v-show
用key 管理可複用的元素
####列表渲染
v-for: 數組迭代，對象迭代，整數迭代
key: v-for 正在更新已渲染的元素列表時，它默認「就地複用」策略。
<div v-for="item in items" :key="item.id"></div>
數組更新檢測：
變異方法：push(), pop(), shift(), unshift(),splice(),sort(),reverse()
重塑數組：filter(), concat(), slice()
####事件處理器
監聽事件：v-on
方法事件處理器：methods
內聯處理器方法：<button @click="say('hi', $event)">Say hi</button>
事件修飾符：.stop, .pervent, .capture, .self, .once
按鍵修飾符：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right, .ctrl, .alt, .shift, .meta
####表單控件綁定
基本用法：
文本：<input v-model="message" >
多行文本：<textarea v-model="message"></textarea>
複選框：<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>
單選按鈕：<input type="radio" id="radio" v-model="radiobox"><label for="radio">Radio</label>
選擇列表：<select v-model="selected">...</select>
綁定value
單選按鈕：<input type="radio" v-model="picked" value="a">
複選框：<input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
列表設置：<select v-model="selected"><option :value="{ number: 123 }">123</option></select>
修飾符
.lazy, .number, .trim
組件：
註冊：new Vue({el: "element"})
全局註冊：Vue.component('my-component',{})
局部註冊：new Vue({ ...,components: { 'my-component': ChildComponent }})
DOM模板解析說明：元素ul, ol, table, select 限制了被包裹的元素
data 必須是函數
構成組件：props down, events up.
Prop
使用prop傳遞數據：props: ['message']
camelCase VS kebab-case：當使用的不是字符串模板，駝峯式命名的prop須要轉換爲相對應的短橫線隔開式命名。
props: ['myMessage']
<child my-message="hello"></child>
動態prop: <child :my-message="parentMsg"></child>
單向數據流：prop是單項綁定的。
Prop驗證：能夠爲組件的props指定驗證規格。
自定義事件：
使用v-on綁定自定義事件
    使用 $on(eventName) 監聽事件
    使用 $emit(evnetName) 觸發事件
使用自定義事件的表單輸入組件：
<input v-model="something">（語法糖）
<input v-bind:value="something" v-on:input="something = $event.target.value">
非父子組件通訊：簡單的場景下，使用一個空的Vue實例做爲中央事件總線。
使用Slot分發內容
編譯做用域：父組件模板的內容在父組件做用域內編譯；子組件模板的內容在子組件做用域內編譯。
單個Slot：
除非子組件模板至少包含一個<slot>，不然父組件的內容將會被丟棄。
<slot>標籤內的任何內容都是備用內容。備用內容在子組件的做用域內被編譯，而且只有在宿主元素爲空，且沒有要插入的內容時才顯示備用內容。
具名Slot:
<slot>能夠用一個特殊屬性name來配置如何分發內容。
做用域插槽：（沒看懂）
動態組件：
使用保留的<component>元素，動態的綁定到他的is特性，讓多個組件使用同一掛載點，並動態切換。
keep-alive參數：把切換出去的組件保存再內存中，避免從新渲染。
雜項：
編寫可複用組件：
Vue組件的api來自三部分，Props, Events, Slots.
Props容許外部環境傳遞數據給組件。
Events容許組件觸發外部環境的反作用。
Slots容許外部環境將額外的內容組合到組件中。
子組件索引：使用ref爲子組件指定一個索引ID。
異步組件：Vue容許將組件定義爲一個工廠函數，動態的解析組件的定義，在組件須要渲染時觸發工廠函數。
組件命名規約：在註冊組件時，可使用 kebab-case ，camelCase ，或 TitleCase 。
在HTML模板中，使用kebab-case。
在字符串模板中，三種均可以。
若是組件未經slot傳遞內容，能夠在組件名後使用/自閉合。<my-component/>
遞歸組件：
組件在有name屬性時，能夠在本身的模板內遞歸的調用本身。
組件間的循環引用：？？
內聯模板：若是組件有inline-template特性，組件將把他的內容做爲他的模板，而不是做爲分發內容。
X-Templates：另外一種定義模板的方式是在js標籤內使用text/x-template類型，並指定一個ID。
對低開銷的靜態組件使用v-once：當組價中頗有大量的靜態內容，可使用v-once將渲染結果緩存起來。


############進階################
####深刻響應式原理
變化檢測問題：vue在初始化實例時對屬性執行getter/setter轉化過程，因此屬性必須在data對象上存在才能轉化他，這樣才能讓他是響應式的。
可使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上，vm.$set方法是全局方法Vue.set的別名。
聲明響應式屬性：vue不容許動態添加根級響應屬性，因此必須在初始化實例前聲明根級響應式屬性。
異步更新隊列：？？
####過渡效果：
單元素／組件的過渡：Vue提供了transition的封裝組件。
過渡的CSS類名：v-enter, v-enter-active, v-leave, v-leave-active。
CSS過渡：
CSS動畫：
自定義過渡類名：<transition name="..." enter-active-class="..." leave-active-class="..."></transition>
同時使用Transitions和Animations:
JavaScript鉤子：
初始渲染的過渡：<transition appear></transition>
多個元素的過渡：當有相同標籤名的元素進行切換時，最好設置key屬性加以區分。
過渡模式：<transition name="fade" mode="out-in"></transition>
多個組件的過渡：不須要key特性，只須要使用動態組件（:is）。
列表過渡：<transition-group></transition-group>
可複用的過渡：將<transition>或者<transition-group>做爲根組件，將任何子組件放置其中就能夠了。
動態過渡：最基本的是經過name屬性來綁定動態值。<transition :name="transitionName"></transition>
####過渡狀態
####render函數
####自定義指令
####混合
####插件：
插件一般會爲Vue添加全局功能
開發插件：
一、添加全局方法或者屬性
二、添加全局資源：指令、過濾器、過渡
三、經過全局mixin方法添加一些組件選項，如vuex。
四、添加Vue實例方法，經過把他們添加到Vue.prototype上實現。
五、一個庫，提供本身的api，同時提供上面提到的一個或多個功能，如vue-router。
使用插件：
Vue.use(MyPlugin)
Vue.use(MyPlugin, { someOption: true })
####單文件組件
####生產環境部署
####路由：vue-router
####狀態管理
####單元測試
####服務端渲染（SSR）