【学习笔记】16-v-on的修饰符

v-on修饰的学习

• @click.stop //阻止冒泡事件
• @click.prevent //阻止默认事件的发生，例如submit的提交过程
• @keyup.enter //监听键盘某键的事件
• @click.once //只执行一次

代码示例

	<div id="app" @click="divClick">aaaaaa
	<button type="button" @click="btnClick">按钮1</button>
	<button type="button" @click.stop="btnClick">按钮1</button>
	<!-- stop修饰符，阻止按钮冒泡事件 -->
	<form action="****">
		<input type="submit" @click.prevent="submitButton" />
		<!-- 阻止默认事件的发生，prevent -->
	</form>
	<input type="text" name="" id="" value="" @keyup.enter="keyUp"/>
	<!-- 监听键盘某键的事件，keyup.键码 -->
	<button type="button" @click.once="btn3Click">按钮</button>
	<!-- 修饰符.once 只执行一次 -->
	</div>
	</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const apt = new Vue({
		el:'#app',
		data:{
			counter:0,
		},
		methods:{
		btnClick(){
			console.log("btnClick")
		},
		divClick(){
			// console.log('divClick')
		},
		submitButton(){
			console.log("submitButton")
		},
		keyUp(){
			console.log("keyUp")
		},
		btn3Click(){
			console.log("btn3Click")
		}
		},
	})
</script>