Vue基本結構
一個vue頁面主要包括3個部分：
1.<template>界面展示代碼</template>
2.<script>業務實現代碼</script>
3.<style>界面佈局代碼</style>
Vue 生命週期函數
beforeCreate 實例創建前：這個階段實例的data、methods是讀不到的
created 實例創建後：這個階段已經完成了數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。mount掛載階段還沒開始，$el 屬性目前不可見，數據並沒有在DOM元素上進行渲染
beforeMount：在掛載開始之前被調用：相關的 render 函數首次被調用。
mounted：el選項的DOM節點 被新創建的 vm.$el 替換，並掛載到實例上去之後調用此生命週期函數。此時實例的數據在DOM節點上進行渲染
beforeUpdate：數據更新時調用，但不進行DOM重新渲染，在數據更新時DOM沒渲染前可以在這個生命函數裏進行狀態處理
updated：這個狀態下數據更新並且DOM重新渲染，當這個生命週期函數被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。當實例每次進行數據更新時updated都會執行
beforeDestory：實例銷燬之前調用。
destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷燬。
MVVM模式
已經瞭解到vue是通過數據劫持的方式來做數據綁定的，其中最核心的方法便是通過Object.defineProperty()來實現對屬性的劫持，達到監聽數據變動的目的。
整理了一下，要實現mvvm的雙向綁定，就必須要實現以下幾點：
1、實現一個數據監聽器Observer，能夠對數據對象的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者
2、實現一個指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
3、實現一個Watcher，作爲連接Observer和Compile的橋樑，能夠訂閱並收到每個屬性變動的通知，執行指令綁定的相應回調函數，從而更新視圖
4、mvvm入口函數，整合以上三者
Vue指令總結
- v-if數據真假判斷方法：v-if常用語判斷表達式的真假，並根據真假結果決定顯示或者隱藏該html元素，同時該隱藏是html元素將從代碼中直接刪除。 v-if有較高的切換消耗。
- v-show與v-if用法類似，都根據判斷結果決定html元素是否顯示，不過v-show爲假時，不是將元素完全刪除，而是通過display:none將元素隱藏。 v-show有較高的渲染消耗。
- v-for數據循序遍歷方法：v-for在日常工作使用中及其廣泛，如常見的列表數據獲取。最好加上：key值。
- v-text與v-html數據替換方法：v-text及v-html方法同爲對html元素及標籤內容進行覆蓋，不過v-text只覆蓋文本內容，而v-html可以直接寫入html標籤。
- v-bind屬性綁定方法：爲html標籤綁定新的屬性，類名方法，url地址信息等(注：常用“：”簡寫)；
- v-on標籤事件綁定方法：如點擊事件，鼠標滑動事件等（注：常用“@”簡寫）。v-on可以綁定任何屬性，包括鼠標點擊，鼠標滑動，鍵盤按下及擡起等任何操作方法，同時v-on還可以添加事件修飾符，用來實現組合按鍵的效果。
- v-cloak消除閃爍問題：需要自己定義一個樣式例如：
display ：none； - 事件修飾符：
stop:阻止冒泡
prevent：阻止默認事件
self：只有點擊自己纔會觸發事件。並不會真正阻止冒泡行爲。
once：只觸發一次事件 - v-model：數據雙向綁定
過濾器
全局過濾器
定義：Vue.fliter(“過濾器的名稱”,function(){});
過濾器的function中第一個參數永遠是管道符前面傳來的參數
調用方法: { { name | 過濾器的名稱 }}
私有過濾器
在vm實例上定義一個
filters{ 過濾器名稱，處理函數}
自定義全局案件修飾符
Vue.config.keyCodes.enter= 113
自定義全局指令
Vue.directive(“focus”,{ //function第一個參數都爲el，用來操作DOM,第二個參數爲binding，
binding有很多屬性：name；value；
bind: function (el) { } //每當指令綁定到元素上時，就會執行這個bind函數，只執行一次
inserted： function (el) { } //inserted表示元素插入到DOM中時，會執行inserted函數
updated： function (el) { } //當VNode更新的時候會執行這個函數，有可能執行多次
})