八、事件監聽（一）
阿新 • • 發佈：2022-03-30
1、v-on 的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>{{counter}}</h3>
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
<p>呼叫methods方法</p>
<button v-on:click="increment()">+</button>
<button v-on:click="transment()">-</button>
<!-- //v-on的語法糖 -->
<p>語法糖寫法</p>
<button @click="increment()">+</button>
<button @click="transment()">-</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
counter:0
},
methods:{
increment(){
this.counter++;
},
transment(){
this.counter--;
}
}
});
</script>
</body>
</html>
2、v-on 的引數傳遞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 事件呼叫的方法沒有引數 -->
<button @click="btn1Click">按鈕1</button>
<!-- 在事件定義時，寫函式時省略了小括號，但是方法本身是需要一個引數的,
這個時候，瀏覽器會預設將瀏覽器生成的event事件物件作為引數傳入到方法 -->
<!-- <button @click="btn2Click(123)">按鈕2</button> -->
<!-- <button @click="btn2Click()">按鈕2</button> -->
<button @click="btn2Click">按鈕2</button>
<!-- 在函式定義時，我們需要event物件，同時又需要其他引數 -->
<!-- 在呼叫方式，如何手動的獲取到瀏覽器引數的event物件：$event-->
<button @click="btn3Click(123,$event)">按鈕3</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
},
methods: {
btn1Click(){
console.log("btn1Click");
},
btn2Click(event){
console.log("--------------", event);
},
btn3Click(abc,event){
console.log("--------------", abc , event);
}
}
});
</script>
</body>
</html>