vue基礎語法

標簽（空格分隔）： vue

插值

文本
指令v-text和{{}}效果幾乎相同。

<span>Message: {{ msg }}</span>

雙大括號（{{}}）會將數(shù)據解釋為純文本。

純HTML
指令v-html

<div v-html="rawHtml"></div>

輸出為HTML需要使用v-html指令。

綁定屬性
指令v-bind: 可以簡寫為:

<div v-bind:id="dynamicId"></div>

常被用于綁定class或style

使用JavaScript表達式
vue.js模塊種支持表達式，但每個綁定只能包含單個表達式。

指令

指令是帶有v-前綴的特殊屬性。

一些指令可以接受一個參數(shù)，在指令后以冒號指明。如：v-bind: 、 v-on:

修飾符：英文句號（.）指明的特殊后綴，用于指出一個指令應該以特殊方式綁定

過濾器

過濾器用在兩個地方：mustache 插值和 v-bind 表達式。
過濾器添加在表達式尾部，由管道符（|）表示.
過濾器可以串聯(lián)，過濾器是JavaScript函數(shù)，可以有參數(shù)。

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

一般用來在html中插入特定內容。

計算屬性

計算屬性關鍵詞：computed
一般用來添加函數(shù)方法。
有兩種方式：computed和 methods。
computed和 methods的最終結果是形同的。
不同的是：computed基于他們的依賴進行緩存，也就是只有他的相關依賴發(fā)生改變是才會重新求值。
methods：只要發(fā)生重新渲染，method調用總會執(zhí)行該函數(shù)。
計算setter

觀察Watchers

條件渲染

• v-if
  根據表達式的值的真假條件渲染元素
• v-else
  前一個兄弟元素必須有v-if或者v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

• v-show
  使用css屬性display渲染元素。

列表渲染

• v-for

基于源數(shù)據多次渲染元素。必須是同特定語法item in items，給當前元素提供別名。

<div v-for="item in items">
  {{ item.text }}
</div>

v-for默認就地替換，若要重新改變元素位置，需要提供key。

事件處理

• v-on
  可以在v-on:后面定義方法名，在vue實例的methods對象中定義方法。
• 事件修飾符

.stop //阻止事件冒泡
.prevent //提交事件不在重載頁面
.capture//添加事件偵聽器時使用事件捕獲模式
.self//只有該元素本身（而不是子元素）觸發(fā)時調用。
.once//事件只會觸發(fā)一次

修飾符可以串聯(lián)

表單控件綁定

v-mode 指令在表單控件元素上創(chuàng)建雙向數(shù)據綁定。
將用戶輸入表單的內容引出
有三個控件

.lazy - 取代 input 監(jiān)聽 change 事件
.number - 輸入字符串轉為數(shù)字
.trim - 輸入首尾空格過濾