美文网首页
vue修饰符

vue修饰符

作者: MYSUNFLOWER | 来源:发表于2019-03-31 16:02 被阅读0次

1、表单修饰符(重点):

.lazy - 取代 input 监听 change 事件

.number - 输入字符串转为有效的数字

.trim - 输入首尾空格过滤

2、事件修饰符(重点):

.stop

.prevent

.capture

.self

.once

.passive

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 

v-on:click.prevent.self 会阻止所有的点击,而

 v-on:click.self.prevent 只会阻止对元素自身的点击。

<!-- 阻止单击事件继续传播 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

<!-- 即事件不是从内部元素触发的 -->

<div v-on:click.self="doThat">...</div>

3、.sync 修饰符

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

4、按键修饰符:

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->

<input v-on:keyup.enter="submit">

5、系统修饰符(win 和 mac系统有区别)

.ctrl

.alt

.shift

.meta

.exact

注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。

<!-- Alt + C -->     

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

<!-- Ctrl + Click -->

<div @click.ctrl="doSomething">Do something</div>

.exact修饰符(修饰符允许你控制由精确的系统修饰符组合触发的事件):

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->

<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->

<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->

<button @click.exact="onClick">A</button>

6、鼠标按键修饰符

.left

.right

.middle

相关文章

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