一、Vue 實例與數據綁定
Vue. 最核心的功能 ：數據的雙向綁定在輸入框輸入的內容會實時展示在頁面的標籤內。
1.1 實例 數據
Vue js 應用的創建通過構造函數 Vue 就可以創建 Vue 的根實例，並啓動 Vue
var app ＝new Vue({
／／選項
})
變量App 就代表了這個vue 實例
注：el必不可少的
el 用於指定 個頁面中己存在的 DOM 元素來掛載 Vue實例
通過 Vue 實例的 data 選工頁，可以聲明應用內需要雙向綁定的數據。建議所有會用到的數據都
預先在 data 聲明，這樣不至於將數據散落在業務邏輯中，難以維護。
1.2 生命週期
1.2.1 jQuery 的生命週期鉤子
1.2.2 Vue 的生命週期鉤子 比較常用的有：
- created 實例創建完成後調用，此階段完成了數據的觀測等，但尚未掛載， $el 還不可用。需要初始化處理一些數據時會比較有用，後面章節將有介紹．
- mounted el 掛載到實例上後調用，一般我們的第一個業務邏輯會在這裏開始
- beforeDestroy 實例銷燬之前調用。主要解綁一些使用 addEventListener 監聽的事件等。
1.3 插值與表達式
使用雙大括號（ Mustache 語法）“｛｛｝｝”是最基本的文本插值方
1.3.1 v-html:輸出 HTML，link 的內容將會被渲染爲 個具有點擊功能的 標籤，而不是將數據解釋後的純文本
<span v-html=”l ink”></span>
<div id=” app” >
<span v-html=”l ink”></span>
</div>
<script>
var app =new Vue({
el :’#app ’,
data: {
link: ’<a href ＝”＃”＞這是 個連接 la
})
</script>
注：使用 v-html 輸出後， 般可將尖括號“<> ”轉義
1.3.2 v-pre 跳過這個元素 它的子元素 編譯過程，顯示｛｛｝｝標籤，而不進行替換
<span v-pre >｛｛這裏的內容是不會被編譯的 } }</ span>
1.4 過濾器
過濾器可以用在兩個地方：雙花括號插值和v-bind表達式。 過濾器應該被添加在JavaScript表達式的尾部，由“管道”符號指示：
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
過濾器也可以串聯，而且可以接收數據，例如：
<!-- 串聯 -->
{{ message | filterA | filterB }}
<!-- 接收參數 -->
{{ message | filterA('arg1', 'arg2') }}
這裏的字符串 arg1 和 arg2 將分別傳給過濾器的第二個和第三個參數，因爲第一個參數是數據本身。
過濾器應當用於簡單的文本轉換，如果要實現複雜的數據變換，應當使用計算屬性。
二、指令與事件
Vue.js 內置了很多指令，常用指令:
v-if ：條件渲染指令，根據其後表達式的bool值進行判斷是否渲染該元素，是true則渲染元素，false則將元素註釋掉v-show：與v-if類似，true就渲染，但是false並不是註釋掉，而是通過display:none;來將元素隱藏，如果需要來回切換，使用v-show更好。v-else：必須跟在v-if/v-show指令之後，不然不起作用.v-for ：類似JS的遍歷，用法爲 v-for=“item in items”, items是數組，item爲數組中的數組元素。v-bind：這個指令用於響應地更新 HTML 特性，比如綁定某個class元素或元素的style樣式v-on:給標籤綁定函數，可以縮寫爲@，例如綁定一個點擊函數
三、語法糖
v-bind:可以縮寫爲冒號:
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
v-on:可以縮寫爲@
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->