vue常见修饰后缀

操作事件修饰后缀

<div @click.stop="click"></div><!-- 阻止事件向上冒泡 -->

<div @click.self="click"></div>
<!-- 根据实际操作对象执行函数 -->
<!-- 还记得JQ中 $("div").on(click, "p", function(){}) 吗? 与其差不多, 两者都不向上冒泡也不向下冒泡 -->

<div @click.prevent="click"></div>
<!-- 取消事件的默认动作,相当于加了一行 event.preventDefault()代码 -->

<component @click.native="click"></component>
<!-- 为自定义组件添加原生事件,在根元素上添加.native是无效的 -->

<div @click.once="click"></div>
<!-- 事件将只能执行一次 -->

<input @input.trim="input">
<!-- 去除前后所有的空格,ri顺序不要写错 -->

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

<div id="d1" @click.capture="click">
	<div id="d2" @click.capture="click">
		<div id="d3" @click="click">
			<div id="d4" @click="click">
				<!-- 点击d4的时候,执行的顺序为d1,d2,d4,d3 -->
				<!-- 由于1,2有修饰符,因此先触发事件,然后就是4本身,最后是冒泡事件的3 -->
			</div>
		</div>
	</div>
</div>

键盘监听修饰后缀

<div @keypress.13="keypress"></div>
<!-- 当'keyCode'是13时执行 -->
<div @keypress.enter="keypress"></div>
<!-- 当按下回车时执行 -->
<div @keypress.tab="keypress"></div>
<!-- 当按下tab时执行 -->
<div @keypress.delete="keypress"></div>
<!-- 捕获 <delete> 和 <backspace> -->
<div @keypress.esc="keypress"></div>
<!-- 当按下esc时执行 -->
<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,所以可以跳转到/#.