Vue这些修饰符帮我节省20%的开发时间

键值修饰符

其实这个也算是事件修饰符的一种，因为它都是用来修饰键盘事件的。

比如onkeyup，onkeydown啊

• .keyCode

如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看键码对应表https://zhidao.baidu.com/question/266291349.html

<input type=“text” @keyup.keyCode=“shout(4)”>

为了方便我们使用，vue给一些常用的键提供了别名

//普通键

.enter

.tab

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

.space

.esc

.up

.down

.left

.right

//系统修饰键

.ctrl

.alt

.meta

.shift

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

// 可以使用 v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

我们从上面看到，键分成了普通常用的键和系统修饰键，区别是什么呢？

当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发keyup事件的。

<input type=“text” @keyup.ctrl=“shout(4)”>

那该如何呢？我们需要将系统修饰键和其他键码链接起来使用，比如

<input type=“text” @keyup.ctrl.67=“shout(4)”>

这样当我们同时按下ctrl+c时，就会触发keyup事件。

另，如果是鼠标事件，那就可以单独使用系统修饰符。

<button @mouseover.ctrl=“shout(1)”>ok

<button @mousedown.ctrl=“shout(1)”>ok

<button @click.ctrl.67=“shout(1)”>ok

大概是什么意思呢，就是你不能单手指使用系统修饰键的修饰符（最少两个手指，可以多个）。你可以一个手指按住系统修饰键一个手指按住另外一个键来实现键盘事件。也可以用一个手指按住系统修饰键，另一只手按住鼠标来实现鼠标事件。

• .exact (2.5新增)

我们上面说了这个系统修饰键，当我们像这样绑定了click键按下的事件，惊奇的是，我们同时按下几个系统修饰键，比如ctrl shift点击，也能触发，可能有些场景我们只需要或者只能按一个系统修饰键来触发（像制作一些快捷键的时候），而当我们按下ctrl和其他键的时候则无法触发。那就这样写。

注意：这个只是限制系统修饰键的，像下面这样书写以后你还是可以按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，但是不能按下ctrl + shift +普通键来触发。

<button type=“text” @click.ctrl.exact=“shout(4)”>ok

然后下面这个你可以同时按下enter+普通键来触发，但是不能按下系统修饰键+enter来触发。相信你已经能听懂了8~

<input type=“text” @keydown.enter.exact=“shout(‘我被触发了’)”>

v-bind修饰符

**

• .sync(2.3.0+ 新增)

**

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。我们通常的做法是

//父亲组件

<comp :myMessage=“bar” @update:myMessage=“func”>

//js

func(e){

this.bar = e;

}

//子组件js

func2(){

this.$emit(‘update:myMessage’,params);

}

现在这个.sync修饰符就是简化了上面的步骤

//父组件

//子组件

this.$emit(‘update:myMessage’,params);

这样确实会方便很多，但是也有很多需要注意的点

1、使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致(如上例中的myMessage，不能使用my-message)

2、注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。

3将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

• .prop

要学习这个修饰符，我们首先要搞懂两个东西的区别。

Property：节点对象在内存中存储的属性，可以访问和设置。

Attribute：节点对象的其中一个属性( property )，值是一个对象。

可以通过点访问法 document.getElementById(‘xx’).attributes 或者 document.getElementById(‘xx’).getAttributes(‘xx’) 读取，通过 document.getElementById(‘xx’).setAttribute(‘xx’,value) 新增和修改。

在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。

其实attribute和property两个单词，翻译出来都是属性，但是《javascript高级程序设计》将它们翻译为特性和属性，以示区分

//这里的id,value,style都属于property

//index属于attribute

//id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变

//input.index === undefined

//input.attributes.index === this.index

从上面我们可以看到如果直接使用v-bind绑定，则默认会绑定到dom节点的attribute。

为了

• 通过自定义属性存储变量，避免暴露数据

• 防止污染 HTML 结构

我们可以使用这个修饰符，如下

//input.index === this.index

//input.attributes.index === undefined

• .camel

由于HTML 特性是不区分大小写的。

实际上会渲染为

这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。

如果我们使用.camel修饰符，那它就会被渲染为驼峰名。

另，如果你使用字符串模版，则没有这些限制。

new Vue({

template: ‘ ’

})

最后

不知道有没有漏的，如果有漏的麻烦在评论区告知一声，有建议或者意见也可以提一下，谢谢~

相关文章

---

1. 手写简易版vue-router

2. Vue 中 Axios 的封装和 API 接口的管理

3. 10个实用技巧让你的 Vue 代码更优雅

last

---

转发文章并关注公众号：前端开发博客，回复 1024，领取前端进阶资料

1. 回复「Vue」获取 Vue 精选文章

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

img-zQ4SbbR9-1710700410122)]
[外链图片转存中…(img-P155mAoL-1710700410122)]
[外链图片转存中…(img-tnYk5laW-1710700410123)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-ErRC78dj-1710700410123)]

最后

[外链图片转存中…(img-J4V8jDIX-1710700410124)]

[外链图片转存中…(img-CuWQtZwT-1710700410124)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】