vue的修饰符

Posted 2022-08-08 xjy20170907

一、v-model.lazy 只有在input输入框发生一个blur时才触发

v-model绑定的变量正常输入的时候会同步更新，加上lazy时只在失去焦点时更新绑定的变量。

二、v-model.trim 将用户输入的前后的空格去掉

三、v-model.number 将用户输入的字符串转换成number

我们在获取用户输入的数字时取到的是字符串类型，使用number可以取到数值类型。

四、@click.once点击事件只会触发一次

五、@click.stop点击子节点不会捕获到父节点的事件，以下例子中只会执行inner事件，去掉stop则会依次执行inner middle outer。

<div id="app"> 
　　<div class="outeer" @click.stop="outer"> 
　　　　<div class="middle" @click.stop="middle"> 
　　　　　　<button @click.stop="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>

六、@click.prevent阻止事件的默认行为，而不停止事件的进一步传播。

七、@click.capture点击子节点会触发从外至内的父节点的事件（触发事件捕获），依次执行outer middle inner。

<div id="app"> 
　　<div class="outeer" @click.capture="outer"> 
　　　　<div class="middle" @click.capture="middle"> 
　　　　　　<button @click.capture="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>

八、@click.self只会触发当前元素绑定的事件，以下例子只会执行inner事件

<div id="app"> 
　　<div class="outeer" @click.self="outer"> 
　　　　<div class="middle" @click.self="middle"> 
　　　　　　<button @click.stop="inner">点击我(^_^)</button>
 　　　　</div>
 　　</div> 
</div>

九、@click.passive告诉浏览器不想阻止事件的默认行为

<div @scroll.passive="onScroll">...</div>

十、事件修饰符可以串联，顺序很重要，相应的代码会以同样的顺序产生，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

十一、键盘修饰符

.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

<!-- 点回车时调用submit事件 -->
<input @keyup.enter="submit">

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 ：@keyup.f1
Vue.config.keyCodes.f1 = 112

十二、系统修饰符，可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器，@click.ctrl="doSomething"
.ctrl
.alt
.shift
.meta

十三、.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

十四、鼠标按钮修饰符，这些修饰符会限制处理函数仅响应特定的鼠标按钮

.left
.right
.middle

 原文：https://blog.csdn.net/qq_42238554/article/details/86592295