Vue中v-on参数传递和修饰符
小余努力搬砖 人气:0一、v-on的基本用法
使用v-on:click
给button绑定监听事件以及回调函数,@是v-on:
的缩写,也就是简写也可以使用@click
。方法一般是需要写方法名加上(),在@click
中可以省掉,如上述的<button @click="increment">加</button>
。
以简单的计数器为例
<body> <div id="app"> <h2>{{count}}</h2> <!-- <button v-on:click="count++">加</button> <button v-on:click="count--">减</button> --> <button @click="increment">加</button> <button @click="decrement">减</button> </div> <script> const app = new Vue({ el:"#app", data:{ count:0 }, methods: { increment(){ this.count++ }, decrement(){ this.count-- } } }) </script> </body>
二、v-on的参数传递
在methods中定义的方法,我们可以进行调用,可以带上(),也可以不带()
如下的btnClick的调用中,加了()想要调用,里面必须要有值,如果不加小括号,就只会调用事件对象。
btnClick3想要传入event,需要在调用时写$event,才能调用事件对象。
<div id="app"> <!-- 事件没传参 --> <button @click="btnClick">按钮1</button> <button @click="btnClick()">按钮2</button> <!-- 事件调用方法传参,写函数时候省略小括号,但是函数本身需要传递一个参数 --> <button @click="btnClick2(123)">按钮3</button> <button @click="btnClick2()">按钮4</button> <button @click="btnClick2">按钮5</button> <!-- 事件调用时候需要传入event还需要传入其他参数 --> <button @click="btnClick3($event,123)">按钮6</button> </div> <script src="vue.js"></script> <script> const app = new Vue({ el:"#app", methods:{ btnClick(){ console.log("点击XXX"); }, btnClick2(value){ console.log(value+"----------"); }, btnClick3(event,value){ console.log(event+"----------"+value); } } }) </script>
事件没传参,可以省略()事件调用方法传参了,写函数时候省略了小括号,但是函数本身是需要传递一个参数的,这个参数就是原生事件event参数传递进去如果同时需要传入某个参数,同时需要event是,可以通过$event
传入事件。
三、v-on的修饰词
.stop
的使用,btn的click事件不会传播,不会冒泡到上层,调用event.stopPropagation()
。
.prevent
调用event.preeventDefault
阻止默认行为。
.enter
监听键盘事件;
once
事件只触发一次(常用);
capture
使用事件的捕获模式;
self
只有event.target是当前操作的元素时才触发事件;
passive
事件的默认行为立即执行,无需等待事件回调执行完毕;
<style> .div { height:80px; background:#f00; } </style> </head> <body> <div id="app"> <!--1. .stop的使用,btn的click事件不会传播,不会冒泡到上层,调用event.stopPropagation() --> <div @click="divClick"> <button @click.stop="btnClick">按钮1</button> </div> <!-- 2. .prevent 调用event.preeventDefault阻止默认行为 --> <form action="www.baidu.com"> <button type="submit" @click.prevent="submitClick">提交</button> </form> <!--3. 监听键盘的事件 --> <form @submit.prevent=''> 账号<input type="text" name="user"/> 密码<input type="text" name="password" @keyup.enter="submit"/> <input type="submit" value="登录"/> </form> <!--4. 事件只触发一次(常用) --> <button @click.once="showInfo">点我提示信息</button> <!--5. capture使用事件的捕获模式 --> <div class="box1" @click.capture="show(111)"> div1外面 <div class="box2" @click="show(222)"> div2里面 </div> </div> <!-- 6.只有event.target是当前操作的元素时才触发事件 --> <div class="div" @click.self="showself"> <button @click="showself">点我</button> </div> <!-- 7.passive事件的默认行为立即执行,无需等待事件回调执行完毕 --> </div> <script src="vue.js"></script> <script> const app = new Vue({ el:"#app", methods:{ btnClick(){ console.log("点击button"); }, divClick(){ console.log("点击div"); }, submitClcik(){ console.log("提交被阻止了") }, submit(){ console.log("keyup点击") }, showInfo(){ alert('web学习真有趣') }, show(msg){ console.log(msg) }, showself(e){ console.log(e.target); }, } }) </script> </body>
加载全部内容