昨天講了基本的邏輯方法—條件與迴圈，今天要來處理使用者輸入，動態網頁一定會碰到要和使用者互動的情境，如點擊、輸入資料等，此外今天也會講到vue怎麼自定義dom元件
事件綁定 v-on
最常見的事件綁定為點擊事件，即onclick事件，在vue裡面的寫法如下1
2
3
4<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>1
2
3
4
5
6
7
8
9
10
11var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
如果執行成功的話將會產生一行字跟一個按鈕，當按下按鈕時第一行字會反轉。
這個範例同時展示了事件綁定以及更新內容的方法，在vue裡面更新內容不必直接存取dom，vue會自動偵測data的改變並更新dom，就像之前做的小實驗一樣。
vue能將物件中的methods綁定到dom事件中，方法和data綁定很類似，大家可以類比一下。
more >>