Vue基础修饰符学习2

一、事件修饰符

修饰符是vue功能的拓展,是对vue事件或者系统操作等进行功能的补充。

1 .stop修饰符

事件冒泡

当有多层嵌套标签并且都绑定了监听事件时,触发最内层事件时是内层标签事件首先触发,然后依次向外层冒泡触发事件,直到最外层。

如何阻止事件冒泡?

<div class="outer" @click="outer">
	<div class="center" @click="center">
		<div class="inner" @click.stop="inner"></div>
	</div>
</div>

类似原生Javascript的stopPropagation()方法

inner(event){
	event.stopPropagation();
	console.log("内层");
}

2 .self修饰符

作用是只有点击元素本身的时候才能触发事件,不接受冒泡上来的事件,同时也不能阻止事件的冒泡

<div class="outer" @click.self="outer">
	<div class="center" @click.self="center">
		<div class="inner" @click.self="inner"></div>
	</div>
</div>

3 .prevent修饰符

当标签本身具有功能时(如a标签),倘若不想给让他使用原有标签,重新给其赋予事件,可以使用…prevent

<div id="app">
	<a href="www.baidu.com" @click.prevent="alertDialog">
</div>
var vue = new Vue({
	el:"#app",
	methods:{
		alertDialog(event){
				alert('我是超链接')
			}
	}
})

和原生Javascript方法preventDefault()类似

event.preventDefault();

4 .capture修饰符

capture修饰符是对事件捕获的监听,vue的事件监听默认都是获取冒泡阶段的,所以用capture去监听捕获阶段的事件。

<div class="outer" @click.capture="outer">
	<div class="center" @click.capture="center">
		<div class="inner" @click.capture="inner"></div>
	</div>
</div>

5 .once修饰符

once修饰符是使事件只触发一次。

二、按键修饰符

在原生Javascript中有onkeydown和onkeyup按键的事件监听,在vue中有对应的事件修饰符。
基本使用方法:

<input type="text" @keyup.space="add">
<!--add的方法在methods中随便写-->

.space是vue封装的keyCode别名,和下面代码表示内容相同。

<input type="text" @keyup.32="add">

常用keyCode别名:

keyCode值别名
13.enter
32.space
37.left
38.up
39.right
40.down
9.tab
46或8. delete

1、系统修饰符

通过规定的按键配合鼠标点击或键盘事件进行事件监听。
比如.ctrl系统修饰符的使用

<button @click.ctrl="add"></button>

此时按住键盘ctrl键然后鼠标点击,才能实现add加1。
常用系统修饰符:

修饰符名称对应键盘键名称
.ctrlctrl
.altalt
.shiftshift
metawindows系统:logo键;ios:common

此时,如果设置了系统修饰符,并不希望有其他的按键组合事件,如设置了ctrl修饰符,此时按住ctrl和任意按键,都会触发事件监听。所以使用其他修饰符来设置精确匹配,如下修饰符。

2、.exact修饰符

对其他修饰符进行精确匹配。

<button @click.ctrl.exact="add"></button>

方法为在对应的修饰符后面进行连续打点。

三、鼠标修饰符

修饰鼠标的左、滚轮、右键

例:.prevent清除默认右键事件监听

<p>{{a}}</p>
<button @click.right.prevent="add">按我加1</button>

例:按下滚轮键触发事件

<p>{{a}}</p>
<button @click.middle="add">按我加1</button>

四、表单修饰符

表单修饰符一共三个.lazy .number .trim,均为修饰v-model

.lazy

.lazy将Input输入框的数据绑定v-model从实时监听的状态变为change状态。

<div id="app">
<input type="text" v-model.lazy="a">
<p>{{a}}</p>
</div>

当鼠标的光标失去焦点后,再进行数据的更新。

.number

.number将输入的string内容转换为number类型,会将非数字内容过滤,若全不是数字,则得到NaN。

<div id="app">
<input type="text" v-model.number="a">
<p>{{a}}</p>
</div>

.trim

.trim过滤用户输入的首尾空格

<div id="app">
<input type="text" v-model.trim="a">
<p>{{a}}</p>
</div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值