終極目标：掌握和使用Vue（全家桶：Core+Vue-router+Vuex）
本部落格目的：記錄Vue學習的進度和心得（Vue基礎文法）
内容：通過官網說明，掌握Vue基礎文法。
正文：
Vue基礎文法
一、插值文法
1、Mustache，即雙大括号{{}}。 括号裡面可以是變量，也可以是簡單的表達式。（tips:複雜的表達式不再适合，我們可以考慮使用計算屬性，後面會說）（Mustache：胡子）
2、v-once。通過使用 v-once 指令，也能執行一次性地插值，當資料改變時，插值處的内容不會更新。
3、v-html。原始HTML：雙大括号會将資料解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，需要使用v-html指令。注意：站點上動态渲染的任意 HTML 可能會非常危險，因為它很容易導緻 XSS 攻擊（Cross Site Scripting，攻擊全稱跨站腳本攻擊）。請隻對可信内容使用 HTML 插值，絕不要對使用者提供的内容使用插值。
4、v-text。與Mustache類似，接受一個string類型。但靈活性不夠Mustache，尤其是字元串拼接下。用的比較少。
5、v-pre。跳過這個元素和它子元素額編譯過程，用于顯示原來的Mustache文法，即原封不動把内容顯示出來。
6、v-cloak。當浏覽器可能直接渲染出未編譯的Mustache文法（可能網頁卡了或者什麼原因），會不好看，用上v-cloak可以過渡顯示得過程，待渲染編譯完Mustache文法後，才顯示結果。 用得比較少。（cloak：鬥篷）
二、綁定屬性
當我們不再是簡單往HTML元素使用插值文法動态綁定其模闆的内容，而是想根據某些需求動态的改變元素屬性時，例如動态綁定a元素的href屬性等，需要使用綁定屬性。在實際開發中，資料都不是簡單的綁死的，而是動态由伺服器請求來的資料去傳到對應的部分，進行渲染的。
1、v-bind指令。作用：動态綁定屬性。縮寫（一個文法糖）：：（冒号）。注意，Mustache文法是在元素内容裡面用。屬性綁定時，用v-bind:屬性=‘變量名’，這樣變量（在程式編譯時）就綁定了對應屬性。（tips：變量名内如果是有引号譯為字元串，沒有就譯為變量）
2、動态綁定class（class屬性）。也可以用v-bind簡單綁定。
3、動态綁定class對象文法：也可以綁定為一個對象并把布爾值放在vue執行個體中的data裡面控制對應class是否加入到元素class屬性中，如{類名1：布爾值1，類名2：布爾值2}當布爾值1為true時，即把類名1（所代表的的類添加到這個Html元素中去），同樣的類名2也是。（tips：直接通過{}綁定一個類；也可以通過判斷，傳入多個值；與普通類同時存在，并不沖突；如果過于複雜，可以放在一個methods或者computed計算屬性裡）
4、動态綁定class數組文法：也可以綁定為一個數組，與上述對象文法類似，可以放在一個methods或者computed計算屬性裡。
5、動态綁定style：多用于元件化開發的定制樣式渲染。也是存在對象文法和數組文法。對象文法：{key:value}，與class綁定不一樣，style的對象是{css屬性名：屬性值}。屬性值通常是動态變化的，是以屬性性一般是變量，在vue執行個體的data屬性裡面對其控制，類似渲染模闆的意味。數組文法用的比較少，也是相當于先以數組形式進行綁定，然後在vue的data屬性定義為對象（tips：變量名内如果是有引号譯為字元串，沒有就譯為變量）
三、計算屬性
我們知道，在模闆中可以直接通過插值文法顯示一些data中的資料。但在某些情況，我們可能需要對資料進行一些轉換後再顯示，或者需要将多個資料結合起來進行顯示。因而可以使用到計算屬性computed（在Vue執行個體中）。
1、在計算屬性computed中定義顯示資料的屬性，然後在對應HTML元素位置調用。有點類似與方法定義（簡寫的時候），但是和方法不一樣。
2、計算屬性的setter和getter。完整寫法是在具體計算屬性變量中定義一個對象，對象裡面包含set方法和get方法。一般隻實作get方法，此時計算屬性相當于隻讀屬性（也就是先前簡寫方式所對應内在聯系）。如果是需要改變的話，就需要set方法，通常也是方法是需要參數的，然後在定義具體方法。
3、計算屬性和方法methods對比。計算屬性是基于它們的響應式依賴進行緩存的。隻在相關響應式依賴發生改變時它們才會重新求值。相比之下，每當觸發重新渲染時，調用方法将總會再次執行函數，大大影響性能。
四、事件監聽
1、在前端開發中，我們需要經常和用于互動，因而我們必須監聽使用者發生的事件，比如點選、拖拽、鍵盤事件等。是以，我們可以使用v-on實作事件監聽。
2、v-on。作用：綁定事件監聽器。縮寫：@（也是一個文法糖）。參數：event。綁定事件到vue執行個體中的methods。
3、v-on的使用注意參數問題。如果方法不需要額外參數，那麼方法後面的（）可以不添加。在事件定義時，寫方法時省略了小括号，但是方法本身是需要一個參數的，這個時候，Vue會預設将浏覽器産生的event事件對象（例如點選時，浏覽器會産生一個MouseEvent事件對象）作為參數傳入到方法。如果需要同時傳入某個參數，同時需要event時，可以手動設定通過$event作為參數傳入事件。類似于：<button @click='btnClick(參數1,$event)'></button> （tips:如果當一個函數需要參數，但是沒有傳入，那麼函數的形參為undefined）
4、v-on的修飾符。修飾符是由點開頭的指令字尾來表示的：.stop ，.prevent ，.capture，.self， .once， .passive等。.stop 會調用event.stopPropagation()，阻止事件冒泡。.prevent 會調用event.preventDefault()，阻止預設事件。.{keyCode|keyAlias}隻當事件是從特定鍵觸發時才觸發回調。.native監聽元件根元素的原生事件。.once 隻觸發一次回調。注意：使用修飾符時，順序很重要；相應的代碼會以同樣的順序産生。
五、條件和循環
1、v-if。條件判斷某元素是否能被渲染輸出。（有一個小tip，vue的底層是先建構虛拟DOM，在進行渲染，其會對比要改變的DOM和原來的DOM，盡可能地隻把改變的部分渲染，保留原有沒有改變的部分。如果我們需要元素都要重新渲染而不是讓Vue出現類似重複利用的問題，則需要加上key屬性并key屬性的值不一樣。）
2、v-else。通常與v-if配合使用。當元素中條件為真，執行v-if塊，否則，執行v-else塊。
3、v-else-if。通常也是與v-if配合使用。如果判斷邏輯過于複雜，我們可以轉而使用計算屬性。
4、v-show。另一個用于根據條件展示元素的選項是v-show指令。不同的是帶有v-show 的元素始終會被渲染并保留在 DOM 中。v-show 隻是簡單地切換元素的 CSS 屬性display。注意，v-show 不支援<template> 元素，也不支援v-else。當需要在顯示與隐藏比較頻繁時，用v-show。當隻有一個切換時，使用v-if。（通常v-if使用比較多）
5、v-for。v-for周遊數組。周遊中，可以擷取索引下标值。v-for周遊對象。在周遊對象過程，如果隻是擷取一個值，擷取的是value。如果兩個參數，用（key,value）。如果是三個參數，用（key,value,index）。
6、組價的key屬性。官方推薦我們在使用v-for時，給對應的元素或元件添加上一個：key屬性。這個與vue的虛拟DOM的DIff算法有關系。通過使用：key來給每一個節點做一個唯一辨別（綁定之前要展示的變量）。進而高效地更新虛拟DOM。
7、哪些數組的方法是響應式的？可以響應的：push方法,pop,shift,unshift,splice,sort,reverse。不可以響應的：通過索引值修改數組中的元素（如果想要響應式修改數組元素，應該使用splice方法。或者是使用Vue.set函數）。
六、表單綁定
表單控件在實際開發中是非常常見的。特别是對于使用者資訊的送出，需要大量的表單（input标簽等）。Vue中使用v-model指令來實作表單元素和資料的雙向綁定。（通過input标簽的type屬性選擇單選框，複選框等）
1、v-model的基本使用及原理。在表單元素中設定v-model=‘變量名’（變量是在vue執行個體中的data裡面），就表單元素與資料data雙向綁定。（v-model其實也是一個文法糖，其本質包含兩個操作：通過使用v-bind綁定變量響應式地渲染表單元素，然後用v-on綁定事件并傳入event事件參數，當表單元素變化，能同步修改data中的資料（event.target.value））
2、v-model結合radio類型。radio是單選框。通過v-model綁定表單的變量（例如當使用v-model綁定input标簽的某個變量，就可以形成互斥（即不再需要在多個單選框中的name屬性定義一樣的值），進而實作單選，并且綁定對應變量）
3、v-model與checkbox類型。checkbox是複選框，分為單個勾選框，多個勾選框。注意結合label的使用（通過label的for屬性指派為input标簽的id屬性值，進而在點選input标簽内容（label）的時候也能夠選中勾選框）。
4、v-model與select類型（select-option）。分為單選和多選。多選就是在select标簽中添加multiple屬性（通過ctrl鍵實作多選）。
5、值綁定。即動态地給input标簽指派。在真實開發中，這些input的值可能是從網絡擷取或定義在data中的，是以我們可以通過v-bind:value動态地給value綁定值。例如：
<label v-for="item in OriginItems" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="Items">{{item}}
</label>
v-model綁定data中的items（數組），然後通過v-bind動态地給value綁定為item值。
6、v-model的修飾符。主要用三個：.lazy,.number,.trim。
lazy修飾符。之前v-model是實時綁定的（預設是在input事件中同步輸入框的資料的，一旦有資料改變，對應的data資料就會自動發生改變），當我們不想實時綁定（例如在輸入中，我們想按回車或者是失去焦點再進行綁定），就可以使用v-model.lazy。
number修飾符。預設下，v-model綁定的變量是字元串類型，如果需要數值型，則用.number修飾符。
trim修飾符。除去input的内容左右兩邊的空格去掉。
應用案例（含源碼）：（綜合應用上述vue基礎文法，做出一個圖書購物車）
要求：1、正确顯示購物車書單内容并且計算出總價格；2、購買數量欄中存在加減按鈕，并且控制購買數量不能減至0以下；3、使用移除按鈕去除對應購物清單；4、價格顯示要保留兩位小數，并且顯示￥符号。
涉及的知識：v-for，周遊對象；v-on，監聽事件，包括參數傳入問題；v-bind，綁定屬性；methods，方法；computed，計算屬性；filters，濾波器；for循環的使用let的塊作用域等。
源碼：在我的Github上：圖書購物車。