<div id="app">
<h2>{{counter}}</h2>
<!-- 监听一个click鼠标点击事件 -->
<button v-on:click="increment">+</button>
<!-- v-on:的语法糖写法@ -->
<button @click="decrement">-</button>
</div>
<script type="text/javascript">
const app = new Vue({
el: ‘#app‘,
data: {
counter: 0
},
methods: {
increment() {
this.counter++;
},
decrement() {
this.counter--;
}
}
})
</script>
<button @click="btn2Click">按钮2</button>
<button @click="btn3Click(123)">按钮3</button>
<script type="text/javascript">
const app = new Vue({
methods: {
btn2Click(event) {
console.log(‘..........‘, event); //MouseEvent {...}
},
btn3Click(a,event) {
console.log(‘..........‘, a, event); //123,MouseEvent {...}
},
btn3Click(a) {
console.log(‘..........‘, a); //123
}
}
})
</script>
<div id="app" @click="divClick" :style="{height:‘400px‘, width:‘400px‘, border:‘1px solid green‘}">
<!-- 当点击按钮时,不会触发div的事件 -->
<div @click="keyup" :style="{height:‘200px‘, width:‘200px‘, border:‘1px solid red‘}">
<button @click.stop="btnClick">按钮</button>
</div>
</div>
<script type="text/javascript">
const app = new Vue({
methods: {
divClick(){
console.log(‘divClick‘);
},
btnClick(){
console.log(‘btnClick‘);
},
submitClick(){
console.log(‘submitClick‘);
},
keyup(){
console.log(‘keyUp‘);
}
}
})
</script>
<div>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick"/>
</form>
</div>
<!-- 当按下回车键才会触发keyUp事件 -->
<input type="text" @keyup.enter="keyUp"/>
<input type="text" @keyup.13="keyUp"/>
<!-- btn2Click事件只会触发一次 -->
<button @click.once="btn2Click">按钮2</button>
<!-- 点击组件back-top时也会触发backClick事件 -->
<back-top @click.native="backClick"></back-top>
原文:https://www.cnblogs.com/jincanyu/p/14352952.html