1.背景
2.简单使用
2.1.做一个简单的点击计数器
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>模拟购买数</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h2>模拟购买数-普通写法</h2> <button v-on:click="decrement">-</button> -{{number}}- <button v-on:click="increment">+</button> <hr> <h2>模拟购买数-简写</h2> <button @click="decrement">-</button> -{{number}}- <button @click="increment">+</button> </div> <script> const app = new Vue({ el: '#app', data: { number: 1 }, methods: { increment: function () { console.log("---执行加一") this.number++ }, decrement: function () { console.log("---执行减一") if (this.number > 1) { this.number-- } else { console.log("---在减就没有了") } } } }) </script> </body> </html>
2.2.v-on参数的秘密
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-on参数</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h2>v-on参数</h2> <pre> 当通过methods中定义方法，以供@click调用时，需要注意参数问题： 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。 </pre> <hr> <h2>默认将原生事件event参数传递进去</h2> <button @click="decrement">-</button> <br> <br> -{{number}}- <h2>如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件</h2> <button @click="increment(2,$event)">+2</button> </div> <script> const app = new Vue({ el: '#app', data: { number: 1 }, methods: { increment: function (num,event) { console.log("---执行加"+num) console.log("---event"+event) this.number+=num }, decrement: function (event) { console.log("---执行减一") console.log("---event一"+event) if (this.number > 1) { this.number-- } else { console.log("---在减就没有了") } } } }) </script> </body> </html>
2.3.v-on的修饰符
常用
1.阻止事件传递，嵌套标签中@click.stop
2.阻止默认事件执行@click.prevent
3.回车键触发事件@keyup.enter
4.只执行一次@click.once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on修饰符</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <h2>.stop - 调用 event.stopPropagation()</h2> <pre> 如果一个div里面有一个button标签，div与button上都有点击事件 有事我们希望，点击div就只执行div的事件方法 点击button就只执行button的事件方法，代码如下 </pre> <hr> <h3>1.不使用了@click.stop</h3> <div @click="f1"> div内容1 <button @click="f2">按钮1</button> </div> <hr> <h3>2.使用了@click.stop</h3> <div @click="f1"> div内容2 <button @click.stop="f2">按钮2</button> </div> <hr> <hr> <h2>.prevent - 阻止默认事件执行调用 event.preventDefault(</h2> <pre> 比如我们在form表单中，当用户点击提交按钮时， 默认会请求到action="/baidu" 中去, 如果你不想去执行默认的可以使用 .event阻止默认行为 </pre> <h3>1.不使用了@click.prevent</h3> <form action="/hello"> <input type="submit" value="默认提交到/hello" @click="f3"> </form> <h3>2.使用了@click.prevent</h3> <form action="/hello"> <input type="submit" value="不会提交到/hello" @click.prevent="f4"> </form> <hr> <h2>.@keyup.enter 按回车键触发</h2> 姓名:<input @keyup.enter="f3" type="text"/> <hr> <h3> @click.once - 只触发一次回调</h3> <button @click.once="f4">按钮</button> </div> <script> const app = new Vue({ el: '#app', data: { number: 1 }, methods: { f1() { console.log("-------f1---div---") }, f2() { console.log("-------f2---button---") }, f3() { console.log("-------f3------") }, f4() { console.log("-------f4------") } } }) </script> </body> </html>
完美！