1、v-on
（1）v-on的基本使用
<body> <div id="app"> <h2>{{num}}</h2> <button v-on:click="increment">加</button> <button v-on:click="decrement">减</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { num: 0 }, methods: { increment() { this.num++ }, decrement() { this.num-- } } }) </script> </body>
（2）语法糖
<div id="app"> <h2>{{num}}</h2> <button @click="increment">加</button> <button @click="decrement">减</button> </div>
在事件监听的时候，如果函数没有参数就可以将小括号省略掉
（3）传递参数
- 传递一个参数
<body> <div id="app"> <button @click="cli(123)">点击</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { cli(message){ console.log(message); } } }) </script> </body>
- 获取Event对象（一个参数）
<body> <div id="app"> <button @click="cli">点击</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { cli(message){ console.log(message); } } }) </script> </body>
当方法需要传递参数但是没有传递参数的时候，默认传递的是Event对象。
- 获取Event对象（多个参数）
<body> <div id="app"> <button @click="cli(123,$event)">点击</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { cli(message,event){ console.log(message+"-----"+event); } } }) </script> </body>
需要注意的问题是，如果传递进去的第一个参数是按照名命规范进行的命名且未加单引号就会去data里面找数据，如果data里面没有数据就会出现错误
2、修饰符
（1）stop阻止事件冒泡
在div里面定义一个button，点击button后div的click也会被触发，这就是事件冒泡
<body> <div id="app" @click="divCli(123)"> <button @click="btnCli(233)">点击</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { btnCli(message) { console.log(message+'btnCli'); }, divCli(message) { console.log(message+'divCli'); } } }) </script> </body>
对click添加修饰符，冒泡即可被阻止 ，只有点击div的时候才会触发，点击button的时候是不会触发的
<div id="app" @click="divCli(123)"> <button @click.stop="btnCli(233)">点击</button> </div>
（2）prevent修饰符：阻止默认行为
<body> <div id="app"> <form action="hello.html"> <input type="submit" value="提交" v-on:click.prevent="btnCli('acx')"> </form> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { btnCli(message) { console.log(message + 'btnCli'); } } }) </script> </body>
默认的情况是，点击提交后会进行页面的跳转，在添加prevent之后会将这样的默认行为组织掉
（3）指定键盘按键的监听
<body> <div id="app"> <input type="text" @keyup.enter="btnCli('www')"> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { btnCli(message) { console.log(message + 'btnCli'); } } }) </script> </body>
这样的话只有在点击Enter键的时候事件才会触发，否则，其它键盘按键被点击后也会触发
（4）once，只有第一次的时候会触发
<body> <div id="app"> <button @click.once="btnCli(222)">点击</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { btnCli(message) { console.log(message + 'btnCli'); } } }) </script> </body>
只有第一次点击按键的时候触发了事件