vue常见修饰后缀

操作事件修饰后缀

<div @click.stop="click">div>

<div @click.self="click">div>

<div @click.prevent="click">div>

<component @click.native="click">component>

<div @click.once="click">div>

<input @input.trim="input">

关于.capture,我在网上找到了一个实例

<div id="d1" @click.capture="click">
	<div id="d2" @click.capture="click">
		<div id="d3" @click="click">
			<div id="d4" @click="click">
				
				
			div>
		div>
	div>
div>

键盘监听修饰后缀

<div @keypress.13="keypress">div>

<div @keypress.enter="keypress">div>

<div @keypress.tab="keypress">div>

<div @keypress.delete="keypress">div>

<div @keypress.esc="keypress">div>

<div @keypress.space="keypress">div>

<div @keypress.up="keypress">div>

<div @keypress.down="keypress">div>

<div @keypress.left="keypress">div>

<div @keypress.right="keypress">div>

修饰后缀的混用

修饰后缀可以混用,但是会因顺序的不同产生不同的效果
我在项目中遇到过这个问题,随后在网上找到了一个不错的例子

<div @click="alert(1)">
	<a href="/#" @click.prevent.self="alert(2)">
		<div @click="alert(3)">div>
	a>
div>

点击div3会alert3,alert1;不但阻止了alert2,还阻止了a的默认跳转.
    因为点击的时候会先prevent, 阻止默认事件,组织了跳转;然后判断是否是self,因为点击到的是div3,不是self,组织了alert2

<div @click="alert(1)">
	<a href="/#" @click.self.prevent="alert(2)">
		<div @click="alert(3)">div>
	a>
div>

点击div3,会alert3,alert1,跳转到/#.只阻止了alert2
    因为会先判断self,点击到div3,不是self,所以不会执行click事件,就不会阻止默认事件的alert2,所以可以跳转到/#.