vue.js起步式（二）
8.方法與事件處理器
方法處理器
能夠用 v-on 指令監聽 DOM 事件：css
<div id="example"> <button v-on:click="greet">Greet</button> </div>
咱們綁定了一個單擊事件處理器到一個方法 greet。下面在 Vue 實例中定義這個方法：vue
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
greet: function (event) {
// 方法內 `this` 指向 vm
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也能夠在 JavaScript 代碼中調用方法
vm.greet() // -> 'Hello Vue.js!'
內聯語句處理器json
除了直接綁定到一個方法，也能夠用內聯 JavaScript 語句：數組
<div id="example-2">
<button v-on:click="say('hi')">Say Hi</button>
<button v-on:click="say('what')">Say What</button>
</div>
new Vue({
el: '#example-2',
methods: {
say: function (msg) {
alert(msg)
}
}
})
相似於內聯表達式，事件處理器限制爲一個語句。
有時也須要在內聯語句處理器中訪問原生 DOM 事件。能夠用特殊變量 $event 把它傳入方法：app
<button v-on:click="say('hello!', $event)">Submit</button>
// ...
methods: {
say: function (msg, event) {
// 如今咱們能夠訪問原生事件對象
event.preventDefault()
}
}
事件修飾符函數
在事件處理器中常常須要調用 event.preventDefault() 或 event.stopPropagation()。儘管咱們在方法內能夠輕鬆作到，不過讓方法是純粹的數據邏輯而不處理 DOM 事件細節會更好。佈局
爲了解決這個問題，Vue.js 爲 v-on 提供兩個 事件修飾符：.prevent 與 .stop。你是否還記得修飾符是點號打頭的指令後綴？測試
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件再也不重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符能夠串聯 --> <a v-on:click.stop.prevent="doThat"> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> 1.0.16 添加了兩個額外的修飾符： <!-- 添加事件偵聽器時使用 capture 模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當事件在該元素自己（而不是子元素）觸發時觸發回調 --> <div v-on:click.self="doThat">...</div>
按鍵修飾符動畫
在監聽鍵盤事件時，咱們常常須要檢測 keyCode。Vue.js 容許爲 v-on 添加按鍵修飾符：this
<!-- 只有在 keyCode 是 13 時調用 vm.submit() --> <input v-on:keyup.13="submit"> 記住全部的 keyCode 比較困難，Vue.js 爲最經常使用的按鍵提供別名： <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit">
所有的按鍵別名：
enter tab delete esc space up down left right
1.0.8+： 支持單字母按鍵別名。
1.0.17+： 能夠自定義按鍵別名：
// 可使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112
爲何在 HTML 中監聽事件?
你可能注意到這種事件監聽的方式違背了傳統理念 「separation of concern」。沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護困難。實際上，使用 v-on 有幾個好處：
掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。 由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。 當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何本身清理它們。
9.表單控件綁定
基礎用法
能夠用 v-model 指令在表單控件元素上建立雙向數據綁定。根據控件類型它自動選取正確的方法更新元素。儘管有點神奇，v-model 不過是語法糖，在用戶輸入事件中更新數據，以及特別處理一些極端例子。
(1)Text:
<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">
(2)Multiline text:
<span>Multiline message is:</span>
<p>{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
(3)Checkbox:
3-1.單個勾選框，邏輯值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
3-2.多個勾選框，綁定到同一個數組：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
(4)Radio:
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
(5)Select
5-1.單選：
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
5-2.多選（綁定到一個數組）：
<select v-model="selected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>
5-3.動態選項，用 v-for 渲染：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
綁定 value
對於單選按鈕，勾選框及選擇框選項，v-model 綁定的 value 一般是靜態字符串（對於勾選框是邏輯值）：
<!-- 當選中時，`picked` 爲字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 爲 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 當選中時，`selected` 爲字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
可是有時咱們想綁定 value 到 Vue 實例的一個動態屬性上，這時能夠用 v-bind 實現，而且這個屬性的值能夠不是字符串。
1.Checkbox
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b">
// 當選中時
vm.toggle === vm.a
// 當沒有選中時
vm.toggle === vm.b
2.Radio
<input type="radio" v-model="pick" v-bind:value="a">
// 當選中時
vm.pick === vm.a
3.Select Options
<select v-model="selected">
<!-- 對象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 當選中時
typeof vm.selected // -> 'object'
vm.selected.number // -> 123
參數特性
1.lazy
在默認狀況下，v-model 在input 事件中同步輸入框值與數據，能夠添加一個特性 lazy，從而改到在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model="msg" lazy>
2.number
若是想自動將用戶的輸入轉爲 Number 類型（若是原值的轉換結果爲 NaN 則返回原值），能夠添加一個特性 number：
<input v-model="age" number>
3.debounce
debounce 設置一個最小的延時，在每次敲擊以後延時同步輸入框的值與數據。若是每次更新都要進行高耗操做（例如在輸入提示中 Ajax 請求），它較爲有用。
<input v-model="msg" debounce="500">
注意 debounce 參數不會延遲 input 事件：它延遲「寫入」底層數據。所以在使用 debounce 時應當用 vm.$watch() 響應數據的變化。若想延遲 DOM 事件，應當使用 debounce 過濾器。
10.過渡
經過 Vue.js 的過渡系統，能夠在元素從 DOM 中插入或移除時自動應用過渡效果。Vue.js 會在適當的時機爲你觸發 CSS 過渡或動畫，你也能夠提供相應的 JavaScript 鉤子函數在過渡過程當中執行自定義的 DOM 操做。
爲了應用過渡效果，須要在目標元素上使用 transition 特性：
<div v-if="show" transition="my-transition"></div>
transition 特性能夠與下面資源一塊兒用：
v-if v-show v-for （只在插入和刪除時觸發，使用 vue-animated-list 插件） 動態組件 （介紹見組件） 在組件的根節點上，而且被 Vue 實例 DOM 方法（如 vm.$appendTo(el)）觸發。
當插入或刪除帶有過渡的元素時，Vue 將：
嘗試以 ID "my-transition" 查找 JavaScript 過渡鉤子對象——經過 Vue.transition(id, hooks) 或 transitions 選項註冊。若是找到了，將在過渡的不一樣階段調用相應的鉤子。 自動嗅探目標元素是否有 CSS 過渡或動畫，並在合適時添加/刪除 CSS 類名。 若是沒有找到 JavaScript 鉤子而且也沒有檢測到 CSS 過渡/動畫，DOM 操做（插入/刪除）在下一幀中當即執行。
CSS 過渡
示例:
典型的 CSS 過渡像這樣：
<div v-if="show" transition="expand">hello</div>
而後爲 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 規則:
/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter 定義進入的開始狀態 */
/* .expand-leave 定義離開的結束狀態 */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
你能夠在同一元素上經過動態綁定實現不一樣的過渡：
<div v-if="show" :transition="transitionName">hello</div>
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 定義進入過渡的開始狀態。只應用一幀而後當即刪除。 .fade-leave 定義離開過渡的結束狀態。在離開過渡開始時生效，在它結束後刪除。
若是 transition 特性沒有值，類名默認是 .v-transition, .v-enter 和 .v-leave。
自定義過渡類名
1.0.14 新增
咱們能夠在過渡的 JavaScript 定義中聲明自定義的 CSS 過渡類名。這些自定義類名會覆蓋默認的類名。當須要和第三方的 CSS 動畫庫，好比 Animate.css 配合時會很是有用：
<div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>
Vue.transition('bounce', {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
顯式聲明 CSS 過渡類型
1.0.14 新增
Vue.js 須要給過渡元素添加事件偵聽器來偵聽過渡什麼時候結束。基於所使用的 CSS，該事件要麼是 transitionend，要麼是 animationend。若是你只使用了二者中的一種，那麼 Vue.js 將可以根據生效的 CSS 規則自動推測出對應的事件類型。可是，有些狀況下一個元素可能須要同時帶有兩種類型的動畫。好比你可能但願讓 Vue 來觸發一個 CSS animation，同時該元素在鼠標懸浮時又有 CSS transition 效果。這樣的狀況下，你須要顯式地聲明你但願 Vue 處理的動畫類型 (animation 或是 transition)：
Vue.transition('bounce', {
// 該過渡效果將只偵聽 `animationend` 事件
type: 'animation'
})
過渡流程詳解
當 show 屬性改變時，Vue.js 將相應地插入或刪除 <div> 元素，按照以下規則改變過渡的 CSS 類名：
若是 show 變爲 false，Vue.js 將：
調用 beforeLeave 鉤子；
添加 v-leave 類名到元素上以觸發過渡；
調用 leave 鉤子；
等待過渡結束（監聽 transitionend 事件）；
從 DOM 中刪除元素並刪除 v-leave 類名；
調用 afterLeave 鉤子。
若是 show 變爲 true，Vue.js 將：
調用 beforeEnter 鉤子；
添加 v-enter 類名到元素上；
把它插入 DOM；
調用 enter 鉤子；
強制一次 CSS 佈局，讓 v-enter 確實生效。而後刪除 v-enter 類名，以觸發過渡，回到元素的原始狀態；
等待過渡結束；
調用 afterEnter 鉤子。
另外，若是在它的進入過渡還在進行中時刪除元素，將調用 enterCancelled 鉤子，以清理變更或 enter 建立的計時器。反過來對於離開過渡亦如是。
上面全部的鉤子函數在調用時，它們的 this 均指向其所屬的 Vue 實例。編譯規則：過渡在哪一個上下文中編譯，它的 this 就指向哪一個上下文。
最後，enter 和 leave 能夠有第二個可選的回調參數，用於顯式控制過渡如何結束。所以沒必要等待 CSS transitionend 事件， Vue.js 將等待你手工調用這個回調，以結束過渡。例如：
enter: function (el) {
// 沒有第二個參數
// 由 CSS transitionend 事件決定過渡什麼時候結束
}
vs.
enter: function (el, done) {
// 有第二個參數
// 過渡只有在調用 `done` 時結束
}
當多個元素一塊兒過渡時，Vue.js 會批量處理，只強制一次佈局。
CSS 動畫
CSS 動畫用法同 CSS 過渡，區別是在動畫中 v-enter 類名在節點插入 DOM 後不會當即刪除，而是在 animationend 事件觸發時刪除。
示例： (省略了兼容性前綴)
<span v-show="show" transition="bounce">Look at me!</span>
.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);
}
}
JavaScript 過渡
也能夠只使用 JavaScript 鉤子，不用定義任何 CSS 規則。當只使用 JavaScript 過渡時，enter 和 leave 鉤子須要調用 done 回調，不然它們將被同步調用，過渡將當即結束。
爲 JavaScript 過渡顯式聲明 css: false 是個好主意，Vue.js 將跳過 CSS 檢測。這樣也會阻止無心間讓 CSS 規則干擾過渡。
在下例中咱們使用 jQuery 註冊一個自定義的 JavaScript 過渡：
Vue.transition('fade', {
css: false,
enter: function (el, done) {
// 元素已被插入 DOM
// 在動畫結束後調用 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()
}
})
而後用 transition 特性中：
<p transition="fade"></p>
漸近過渡
transition 與 v-for 一塊兒用時能夠建立漸近過渡。給過渡元素添加一個特性 stagger, enter-stagger 或 leave-stagger：
<div v-for="item in list" transition="stagger" stagger="100"></div>
或者，提供一個鉤子 stagger, enter-stagger 或 leave-stagger，以更好的控制：
Vue.transition('stagger', {
stagger: function (index) {
// 每一個過渡項目增長 50ms 延時
// 可是最大延時限制爲 300ms
return Math.min(300, index * 50)
}
})
- 1. vue.js 起步式（一）
- 2. vue.js的起步
- 3. vue.js起步
- 4. Vue.js - 起手式
- 5. # 【vue.js】vue起步練習
- 6. Vue.js學習筆記（一） - 起步
- 7. Vue.js 學習過程一 起步
- 8. Vue.js起手式+Vue小做品實戰
- 9. （二）vue.js的設計模式
- 10. java 開發起步（二)
- 更多相關文章...
- • Hibernate的二級緩存 - Hibernate教程
- • SQLite 表達式 - SQLite教程
- • 委託模式
- • RxJava操作符（二）Transforming Observables
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vue.js 起步式（一）
- 2. vue.js的起步
- 3. vue.js起步
- 4. Vue.js - 起手式
- 5. # 【vue.js】vue起步練習
- 6. Vue.js學習筆記（一） - 起步
- 7. Vue.js 學習過程一 起步
- 8. Vue.js起手式+Vue小做品實戰
- 9. （二）vue.js的設計模式
- 10. java 開發起步（二)