八、事件监听（一）
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>
浙公网安备 33010602011771号