Vue.js 提供了一個方便的方法來添加事件:v-on 指令。這個指令允許你為 DOM 元素添加各種不同類型的事件,例如 click、input、submit 等等。
在這里,我們將會使用 v-on 指令來為 DOM 元素添加 click 事件。使用 v-on 指令的語法非常簡單,只需要將其中的事件名作為指令的參數即可。
<!-- HTML 文件 -->
<div id="app">
<button v-on:click="showAlert">Click me</button>
</div>
<!-- JavaScript 文件 -->
var app = new Vue({
el: '#app',
methods: {
showAlert: function() {
alert('Hello world!');
}
}
});
在上面的代碼中,我們先創建了一個按鈕,在按鈕上使用 v-on 指令添加 click 事件,并將 showAlert 方法作為事件的處理程序。隨后,在 Vue 實例中定義了名為 showAlert 的方法,這個方法將會在點擊按鈕時被調用。
可以看到,使用 v-on 指令添加事件非常簡單,只需要按照上面的例子,將事件名作為指令的參數,并在 Vue 實例的 methods 中定義相應的方法即可。