美文网首页
Vue修饰符

Vue修饰符

作者: 艾晓雪 | 来源:发表于2020-08-20 17:41 被阅读0次
1.常用事件修饰符
  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!--.stop阻止事件冒泡;.self只响应自己的事件,不响应子节点冒泡上来的事件-->
<div @click.self="parentClick">
    <a href="javascript:void(0)" @click.stop="childClick"></a>
</div>

<!--.prevent 提交时间不再重载页面-->
<form @submit.prevent="onSubmit"></form>

<!--修饰符可以串联-->
<form @submit.stop.prevent="doSomething"></form>

<!--也可以只有修饰符-->
<form @submit.prevent></form>

<!--.capture 改变冒泡顺序,先执行当前有这个修饰符的事件,然后再从内往外执行-->

<div class="div1" @click="click1">
    <div class="div2" @click.capture="click2">
        <div class="div3" @click="click3"></div>
    </div>
</div>
<!--
当我们点击div3时,按理说执行顺序是click3->click2->click1;
但是我们click2有.capture修饰符,
所以最后执行的顺序是:click2->click3->click1
-->

<!--.once 事件只会触发一次,并且可以使用到自定义的组件事件上去-->

 <el-select v-model="value" placeholder="请选择" @change.once="selectChange">
    ......
</el-select>


<!--.passive 滚动事件的默认行为(即滚动行为)将会立即触发-->
<!--而不会等待`onScroll`完成-->
<!--这其中包含`event.preventDefault()`的情况-->

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

<!--这个`passive`修饰符尤其能够提升移动端的性能-->
<!--注意,不要把`.passive`和`.prevent`一起使用,因为`.prevent`将会被忽略,同时浏览器会抛出一个警告。-->
<!--`.passive`会告诉浏览器你不想阻止事件的默认行为-->

2.按键修饰符
  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
<input type="text" @keyup.enter="submit">
3.系统修饰符
  • .ctrl

  • .alt

  • .shift

  • .meta

  • .exact

需要注意的是,在Mac电脑上,meta对应command键。

<input type="text" @keyup.alt.67="clear">

<!--这里的修饰符与上面不同,在和keyup事件一起用时,事件触发时修饰按键必须处于按下的状态。-->
<!--也就是说,只有在按住alt的情况下释放其他案件,才会触发keyup.alt。而单单释放alt也不会触发事件。-->
<!--如果你想要触发,建议换用keycode:keyup.18-->

.exact


<!--即使alt或者shift其他按键一起按下也会触发-->
<button @click.ctrl="onClick"></button>

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

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

4,其他的常用的修饰符
  • .number
  • .lazy
  • .trim

.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

<input v-model.number="age" type="number">

.lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步
(除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步

<!-- 在“change”时而非“input”时更新,不会输入一个就触发一次,而是输入完,失焦以后 -->
<input v-model.lazy="msg">

.trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

<input v-model.trim="msg">

相关文章

  • 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前...

  • 2018-10-11

    vue 修饰符sync【 vue sync修饰符示例】 先看下一个参考的文章:深入理解vue 修饰符sync【 v...

  • Vue事件修饰符

    Vue 事件修饰符 事件修饰符结合使用

  • vue中的修饰符

    事件修饰符 使用vue,让代码中只有纯粹的数据逻辑,而不是去处理DOM事件细节。 ---事件修饰符vue事件修饰符...

  • 2020-12-29

    Vue修饰符和事件 Vue修饰符:用来修饰事件的操作例如: 代码举例:阻止默认动作 1、v-on和其他支持的修饰符...

  • Vue面试考点准备03

    1、Vue中的修饰符有哪些? 修饰符是用于限定类型以及类型成员的声明的一种符号。Vue中修饰符分为如下五种:表单修...

  • Vue事件修饰符详解

    Vue事件修饰符详解(转) 整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,...

  • 在vue中使用.stop阻止单击事件继续传播

    一、vue的事件修饰符 为了不在方法中处理DOM事件细节,vue中提供6个事件修饰符。分别是: .stop .pr...

  • 31.Vue v-model 修饰符

    与 Vue事件修饰符 类似,v-model也有修饰符,用于控制数据同步。 案例

  • Vue-day3

    Vue常用指令 修饰符 表单修饰符 v-model.lazy:change事件,失去焦点才改变.number ①限...

网友评论

      本文标题:Vue修饰符

      本文链接:https://www.haomeiwen.com/subject/qxdejktx.html