延續上次的內容，這次我們要介紹的章節是 「處理使用者互動」。
在前端開發中，處理使用者互動其實就是 監聽並回應使用者操作事件。
在 Vue 中，我們通常使用 v-on 指令來進行事件監聽與處理。
為了簡化書寫，開發者也常以 「@」 作為 v-on 的縮寫，例如：
<!-- 使用 v-on -->
<button v-on:click="handleClick">點擊我</button>
<!-- 使用縮寫 @ -->
<button @click="handleClick">點擊我</button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件綁定</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<div>點擊次數：{{count}}</div>
<button @click="click">點擊</button>
</div>
<script>
const App = {
data() {
return {
count:0
}
},
methods: {
click() {
this.count += 1
}
}
}
Vue.createApp(App).mount("#Application")
</script>
</body>
</html>
<button @click="this.count += 1">點擊</button>
也可以達到一樣的效果，但通常事件的處理方法都不是單行的script就可以搞定的。
click(event) {
console.log(event)
this.count += 1
}
click(step) {
this.count += step
}
<button @click="click(2)">點擊</button>
iThome鐵人賽
看影片追技術