為了讓用戶和你的應用進行互動,我們可以用 v-on 指令綁定一個監聽事件用于調用我們 Vue 實例中定義的方法:
~~~
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
~~~
~~~
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
~~~
在 reverseMessage 方法中,我們在沒有接觸 DOM 的情況下更新了應用的狀態 - 所有的 DOM 操作都由 Vue 來處理,你寫的代碼只需要關注基本邏輯。
Vue 也提供了 v-model 指令,它使得在表單輸入和應用狀態中做雙向數據綁定變得非常輕巧。
~~~
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
~~~
~~~
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
~~~