按鍵修飾符

在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢測 keyCode。Vue.js 允許為 v-on 添加按鍵修飾符：

記住所有的 keyCode 比較困難，Vue.js 為最常用的按鍵提供別名：

全部的按鍵別名：

enter
tab
delete
esc
space
up
down
left
right

1.0.8+： 支持單字母按鍵別名。

1.0.17+： 可以自定義按鍵別名：

// 可以使用 @keyup.f1
Vue.directive("on").keyCodes.f1 = 112

為什么在 HTML 中監(jiān)聽事件?

你可能注意到這種事件監(jiān)聽的方式違背了傳統(tǒng)理念 “separation of concern”。不必?fù)?dān)心，因為所有的 Vue.js 事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的 ViewModel 上，它不會導(dǎo)致任何維護(hù)困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應(yīng)的方法。

因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易于測試。

當(dāng)一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔(dān)心如何自己清理它們。

基礎(chǔ)用法

可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。根據(jù)控件類型它自動選取正確的方法更新元素。盡管有點神奇，v-model 不過是語法糖，在用戶輸入事件中更新數(shù)據(jù)，以及特別處理一些極端例子。

(1)Text:

Message is: {{ message }}




(2)Multiline text:

Multiline message is:
{{ message }}




(3)Checkbox:

3-1.單個勾選框，邏輯值：


{{ checked }}

3-2.多個勾選框，綁定到同一個數(shù)組：


Jack

John

Mike


Checked names: {{ checkedNames | json }}

new Vue({
  el: "...",
  data: {
    checkedNames: []
  }
})

(4)Radio:


One



Two


Picked: {{ picked }}

(5)Select

5-1.單選：


  A
  B
  C

Selected: {{ selected }}

5-2.多選（綁定到一個數(shù)組）：


  A
  B
  C



Selected: {{ selected | json }}

5-3.動態(tài)選項，用 v-for 渲染：


  
    {{ option.text }}
  

Selected: {{ selected }}

new Vue({
  el: "...",
  data: {
    selected: "A",
    options: [
      { text: "One", value: "A" },
      { text: "Two", value: "B" },
      { text: "Three", value: "C" }
    ]
  }
})

綁定 value

對于單選按鈕，勾選框及選擇框選項，v-model 綁定的 value 通常是靜態(tài)字符串（對于勾選框是邏輯值）：

  




  ABC

但是有時我們想綁定 value 到 Vue 實例的一個動態(tài)屬性上，這時可以用 v-bind 實現(xiàn)，并且這個屬性的值可以不是字符串。

1.Checkbox



// 當(dāng)選中時
vm.toggle === vm.a
// 當(dāng)沒有選中時
vm.toggle === vm.b

2.Radio



// 當(dāng)選中時
vm.pick === vm.a

3.Select Options


  
  123


// 當(dāng)選中時
typeof vm.selected // -> "object"
vm.selected.number // -> 123

參數(shù)特性
1.lazy

在默認(rèn)情況下，v-model 在input 事件中同步輸入框值與數(shù)據(jù)，可以添加一個特性 lazy，從而改到在 change 事件中同步：

2.number

如果想自動將用戶的輸入轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值），可以添加一個特性 number：

3.debounce

debounce 設(shè)置一個最小的延時，在每次敲擊之后延時同步輸入框的值與數(shù)據(jù)。如果每次更新都要進(jìn)行高耗操作（例如在輸入提示中 Ajax 請求），它較為有用。

注意 debounce 參數(shù)不會延遲 input 事件：它延遲“寫入”底層數(shù)據(jù)。因此在使用 debounce 時應(yīng)當(dāng)用 vm.$watch() 響應(yīng)數(shù)據(jù)的變化。若想延遲 DOM 事件，應(yīng)當(dāng)使用 debounce 過濾器。

通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時自動應(yīng)用過渡效果。Vue.js 會在適當(dāng)?shù)臅r機為你觸發(fā) CSS 過渡或動畫，你也可以提供相應(yīng)的 JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作。

為了應(yīng)用過渡效果，需要在目標(biāo)元素上使用 transition 特性：

transition 特性可以與下面資源一起用：

v-if
v-show
v-for （只在插入和刪除時觸發(fā)，使用 vue-animated-list 插件）
動態(tài)組件 （介紹見組件）
在組件的根節(jié)點上，并且被 Vue 實例 DOM 方法（如 vm.$appendTo(el)）觸發(fā)。

當(dāng)插入或刪除帶有過渡的元素時，Vue 將：

嘗試以 ID "my-transition" 查找 JavaScript 過渡鉤子對象——通過 Vue.transition(id, hooks) 或 transitions 選項注冊。如果找到了，將在過渡的不同階段調(diào)用相應(yīng)的鉤子。

自動嗅探目標(biāo)元素是否有 CSS 過渡或動畫，并在合適時添加/刪除 CSS 類名。

如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫，DOM 操作（插入/刪除）在下一幀中立即執(zhí)行。

CSS 過渡
示例:

典型的 CSS 過渡像這樣：

hello

然后為 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 規(guī)則:

/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter 定義進(jìn)入的開始狀態(tài) */
/* .expand-leave 定義離開的結(jié)束狀態(tài) */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

你可以在同一元素上通過動態(tài)綁定實現(xiàn)不同的過渡：

hello

new Vue({
  el: "...",
  data: {
    show: false,
    transitionName: "fade"
  }
})

另外，可以提供 JavaScript 鉤子:

Vue.transition("expand", {

  beforeEnter: function (el) {
    el.textContent = "beforeEnter"
  },
  enter: function (el) {
    el.textContent = "enter"
  },
  afterEnter: function (el) {
    el.textContent = "afterEnter"
  },
  enterCancelled: function (el) {
    // handle cancellation
  },

  beforeLeave: function (el) {
    el.textContent = "beforeLeave"
  },
  leave: function (el) {
    el.textContent = "leave"
  },
  afterLeave: function (el) {
    el.textContent = "afterLeave"
  },
  leaveCancelled: function (el) {
    // handle cancellation
  }
})

過渡的 CSS 類名

類名的添加和切換取決于 transition 特性的值。比如 transition="fade"，會有三個 CSS 類名：

.fade-transition 始終保留在元素上。

.fade-enter 定義進(jìn)入過渡的開始狀態(tài)。只應(yīng)用一幀然后立即刪除。

.fade-leave 定義離開過渡的結(jié)束狀態(tài)。在離開過渡開始時生效，在它結(jié)束后刪除。

如果 transition 特性沒有值，類名默認(rèn)是 .v-transition, .v-enter 和 .v-leave。
自定義過渡類名

1.0.14 新增

我們可以在過渡的 JavaScript 定義中聲明自定義的 CSS 過渡類名。這些自定義類名會覆蓋默認(rèn)的類名。當(dāng)需要和第三方的 CSS 動畫庫，比如 Animate.css 配合時會非常有用：

Watch me bounce

Vue.transition("bounce", {
  enterClass: "bounceInLeft",
  leaveClass: "bounceOutRight"
})

顯式聲明 CSS 過渡類型

1.0.14 新增

Vue.js 需要給過渡元素添加事件偵聽器來偵聽過渡何時結(jié)束。基于所使用的 CSS，該事件要么是 transitionend，要么是 animationend。如果你只使用了兩者中的一種，那么 Vue.js 將能夠根據(jù)生效的 CSS 規(guī)則自動推測出對應(yīng)的事件類型。但是，有些情況下一個元素可能需要同時帶有兩種類型的動畫。比如你可能希望讓 Vue 來觸發(fā)一個 CSS animation，同時該元素在鼠標(biāo)懸浮時又有 CSS transition 效果。這樣的情況下，你需要顯式地聲明你希望 Vue 處理的動畫類型 (animation 或是 transition)：

Vue.transition("bounce", {
  // 該過渡效果將只偵聽 `animationend` 事件
  type: "animation"
})

過渡流程詳解

當(dāng) show 屬性改變時，Vue.js 將相應(yīng)地插入或刪除

如果 show 變?yōu)?false，Vue.js 將：
    調(diào)用 beforeLeave 鉤子；
    添加 v-leave 類名到元素上以觸發(fā)過渡；
    調(diào)用 leave 鉤子；
    等待過渡結(jié)束（監(jiān)聽 transitionend 事件）；
    從 DOM 中刪除元素并刪除 v-leave 類名；
    調(diào)用 afterLeave 鉤子。

如果 show 變?yōu)?true，Vue.js 將：
    調(diào)用 beforeEnter 鉤子；
    添加 v-enter 類名到元素上；
    把它插入 DOM；
    調(diào)用 enter 鉤子；
    強制一次 CSS 布局，讓 v-enter 確實生效。然后刪除 v-enter 類名，以觸發(fā)過渡，回到元素的原始狀態(tài)；
    等待過渡結(jié)束；
    調(diào)用 afterEnter 鉤子。

enter: function (el) {
  // 沒有第二個參數(shù)
  // 由 CSS transitionend 事件決定過渡何時結(jié)束
}

vs.

enter: function (el, done) {
  // 有第二個參數(shù)
  // 過渡只有在調(diào)用 `done` 時結(jié)束
}

Look at me!

.bounce-transition {
  display: inline-block; /* 否則 scale 動畫不起作用 */
}
.bounce-enter {
  animation: bounce-in .5s;
}
.bounce-leave {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}

Vue.transition("fade", {
  css: false,
  enter: function (el, done) {
    // 元素已被插入 DOM
    // 在動畫結(jié)束后調(diào)用 done
    $(el)
      .css("opacity", 0)
      .animate({ opacity: 1 }, 1000, done)
  },
  enterCancelled: function (el) {
    $(el).stop()
  },
  leave: function (el, done) {
    // 與 enter 相同
    $(el).animate({ opacity: 0 }, 1000, done)
  },
  leaveCancelled: function (el) {
    $(el).stop()
  }
})

Vue.transition("stagger", {
  stagger: function (index) {
    // 每個過渡項目增加 50ms 延時
    // 但是最大延時限制為 300ms
    return Math.min(300, index * 50)
  }
})