Vue 常用修饰符

目录

定义

[事件修饰符 v-on(缩写@)](#事件修饰符 v-on(缩写@))

鼠标按键修饰符

[v-bind 修饰符(缩写:)](#v-bind 修饰符(缩写:))

键值修饰符

表单修饰符


定义

修饰符是用于限定类型以及类型成员的声明的一种符号,vue 中修饰符分为以下五种:事件修饰符、鼠标按键修饰符、v-bind 修饰符、键值修饰符、表单修饰符

事件修饰符 v-on(缩写@)

  • .stop:阻止事件冒泡,相当于调用 event.stopPropagation() 方法

  • .prevent:阻止事件的默认行为,相当于调用 event.preventDefault() 方法

  • .capture:使事件触发从包含这个元素的顶层开始往下触发

    html 复制代码
    <div @click.capture="shout(1)">
        obj1
        <div @click.capture="shout(2)">
            obj2
            <div @click="shout(3)">
                obj3
                <div @click="shout(4)">
                    obj4
                </div>
            </div>
        </div>
    </div>
    // 输出结构:1 2 4 3
  • .self:只当在 event.target 是当前元素自身时触发处理函数

  • .native:让组件变成像 html 内置标签那样监听根元素的原生事件,否则组件上使用 v-on 只会监听自定义事件

  • .once:绑定了事件以后只能触发一次,第二次就不会触发

  • .passive:在移动端,当我们在监听元素滚动事件的时候,会一直触发 onscroll 事件会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给 onscroll 事件整了一个 .lazy 修饰符

    html 复制代码
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">...</div>

❗️❗️ 注意:

不要把 .passive.prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

鼠标按键修饰符

  • .left:只当点击鼠标左键时触发

  • .right:只当点击鼠标右键时触发

  • .middle:只当点击鼠标中键时触发

v-bind 修饰符(缩写:)

  • .prop:设置自定义标签属性,避免暴露数据,防止污染HTML结构

  • .camel:将命名变为驼峰命名法,如将 view-Box属性名转换为 viewBox

  • .sync:语法糖,能对 props 进行一个双向绑定

键值修饰符

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

@keyup:按键抬起

@keydown:按键按下

  • .enter :只有在 `key` 是 `Enter` 时调用

    html 复制代码
    <input v-on:keyup.enter="submit">
  • **.tab:**捕获 tab 键

  • **.delete:**捕获 delete 删除键和 backspace 退格键

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

  • .ctrl

  • .alt

  • .shift

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

    html 复制代码
    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button v-on:click.ctrl="onClick">A</button>
    
    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button v-on:click.ctrl.exact="onCtrlClick">A</button>
    
    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button v-on:click.exact="onClick">A</button>
  • .meta

❗️❗️ 注意:

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

使用 keyCode attribute 也是允许的:

html 复制代码
<!-- 回车键 -->
<input v-on:keyup.13="submit">

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

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

javascript 复制代码
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

表单修饰符

  • .lazy :在表单输入时不会马上显示在页面,而是等输入完成失去焦点时才会显示,也就是在change 事件之后再进行信息同步

    html 复制代码
    <input type="text" v-model.lazy="value">
    <p>{{value}}</p>
  • .trim :过滤表单输入时两边的空格,而中间的空格不会过滤

    html 复制代码
    <input type="text" v-model.trim="value"></input>
  • .number :自动将用户的输入值转为数值类型,但如果这个值无法被 parseFloat 解析,则会返回原来的值

    html 复制代码
    <input type="number" v-model.number="age"></input>
相关推荐
真的很上进6 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web1309332039812 分钟前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_23432 分钟前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1231 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~2 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语2 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport2 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg2 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww2 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254882 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui