v-on的基本用法

v-on的基本用法

基本用法

<!--基本用法 -->
<button type="button" v-on:click="">按钮2</button>
<!--语法糖 -->
<button type="button" @click="">按钮2</button>

参数传递

1.事件调用方法没有参数

<!-- 事件调用方法没有参数 -->
<button type="button" @click="btnclick()">按钮1</button>
<button type="button" @click="btnclick">按钮1</button>

2.在事件定义时，写方法是省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器自己生成的event事件对象作为参数传入到方法中

<!--在事件定义时，写方法是省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器自己生成的event事件对象作为参数传入到方法中-->	
<div id='app'>
	<button type="button" @click="btnclick">按钮1</button>
    <!-- 这是点击按钮，控制台返回的是浏览器自己生成的MouseEvent事件 -->
</div>	
<script type="text/javascript">
	let app = new Vue({
		el:'#app',
		data:{
			status: true
		},
		methods:{
			btnclick(a){
				console.log(a);
			}
		}
	})
</script>

3.方法定义时，我们需要event对象，同时又需要传入其他参数，这时在调用方法，如何手动获取到浏览器参数的event对象： $event

<button type="button" @click="btnclick('abc', $event)">按钮1</button>

修饰符的使用

.stop - 调用event.stopPropagation()

.prevent - 调用event.preventDefault()

.{keyCode | keyAlias} - 只当事件是从特定按键触发时才触发回调

.native - 监听组件根元素的原生事件

.once - 只触发一次回调

<div id='app'>
			<!-- 由于事件冒泡，点击button后btnclick和divclick事件都会触发 -->
			<div @click="divClick">
				<button type="button" @click="btnClick">按钮1</button>
			</div>
			
			<!-- 1.stop的使用：vue中处理事件冒泡比较简单，直接使用修饰符 -->
			<div @click="divClick">
				<button type="button" @click.stop="btnClick">按钮1</button>
			</div>
			
			<!-- 2.prevent的使用：阻止默认事件 -->
			<form action="baidu...">
				<input type="submit" value="提交" @click.prevent="subClick"/>
			</form>
			
			<!-- 3.监听某个按键(回车)的点击 -->
			<input type="text" @keyup.enter="keyUp"/>
</div>