v-on使用

目录

• v-on 参数
• v-on 修饰符

v-on 参数

• 当通过methods中定义方法，以供@click调用时，需要注意参数问题

  • 情况一：如果该方法不需要额外参数，那么方法后面的()可以不添加；

    注意：如果方法本身中有一个参数，那么会将原生事件event参数传进去

  • 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<div id="app">
	<!--这个时候省略括号直接调用-->
	<button @click="btn1Click">按钮一</button>
	<!--这个时候省略会将event事件传进去-->
	<button @click="btn2Click">按钮二</button>
	<!--使用$event将事件传进去-->
	<button @click="btn3Click('lidx',$event)">按钮三</button>
</div>
<script src="../js/vue.js"></script>
<script>
	const app = new Vue({
		el : "#app",
		methods : {
			btn1Click(){
				console.log('btn1OClick');
			},
			btn2Click(name){
				console.log(name);
			},
			btn3Click(name,event){
				console.log(name);
			}
		}
	})
</script>

v-on 修饰符

.stop

​ 模拟事件冒泡：

<div id="app" @click="divClick">
	<button @click="btnClick">按钮</button>
</div>

​ 这时候会执行两个方法：divClick btnClick，只需要在按钮的事件中添加修饰符：

<div id="app" @click="divClick">
    <!-- 添加stop修饰符 -->
	<button @click.stop="btnClick">按钮</button>
</div>

.prevent

​ 阻止默认事件

.{keyCode | keyAlias}

​ 指定按键监听

.native

​ 监听组件根元素的原生事件。

.once

​ 只触发一次