美文网首页Vue
vue 修饰符

vue 修饰符

作者: jasmine_6aa1 | 来源:发表于2020-03-29 02:19 被阅读0次

修饰符,这里分为两块讲:事件修饰符,按键修饰符,

1,事件修饰符

  • .stop:阻止单击事件继续传播
  • .prevent:提交事件不再重载页面
  • .capture:添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理,然后才交由内部元素进行处理
  • .self: 只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的
  • .once:点击事件将只会触发一次
  • .passive:滚动事件的默认行为 (即滚动行为) 将会立即触发 ,而不会等待 onScroll 完成,这其中包含 event.preventDefault() 的情况
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2,按键修饰符

  • .enter => // enter键
  • .tab => // tab键
  • .delete (捕获“删除”和“退格”按键) => // 删除键
  • .esc => // 取消键
  • .space => // 空格键
  • .up => // 上
  • .down => // 下
  • .left => // 左
  • .right => // 右
    常规用法
<!-- 也可用于简写语法 -->
<input @keyup.enter="submit">

相关文章

  • 深入理解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/ponwkhtx.html