vue修饰符最全

扶苏1002

已于 2024-02-22 14:40:20 修改

阅读量858

点赞数 26

分类专栏： Vue2 文章标签： vue.js 前端

于 2024-02-02 11:17:40 首次发布

本文链接：https://blog.csdn.net/qq_44741577/article/details/135986985

版权

Vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、修饰符是什么

在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理

Vue中修饰符分为以下五种：

表单修饰符
事件修饰符
鼠标按键修饰符
键值修饰符
v-bind修饰符

二、表单修饰符

2.1. .lazy

v-model.lazy就可以吧这个同步事情变得懒惰, 只会在失去焦点的时候进行数据同步

<input type="text" v-model.lazy="value">
<p>{{value}}</p>

2.2. .trim

自动过滤用户输入的首空格字符，而中间的空格不会过滤

<input type="text" v-model.trim="value">

2.3. .number

自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

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

三、事件修饰符

3.1. .stop

阻止了事件冒泡，相当于调用了event.stopPropagation方法

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1

3.2. .prevent

阻止了事件的默认行为（a标签跳转，表单提交等等），相当于调用了event.preventDefault方法

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

3.3. .self

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

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

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

3.4. once

绑定了事件以后只能触发一次，第二次就不会触发

<button @click.once="shout(1)">ok</button>

3.5. .capture

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

<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

3.6. .passive

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

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

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

3.7. native

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

<my-component v-on:click.native="doSomething"></my-component>

三、鼠标按键修饰符

left 左键点击
right 右键点击
middle 中键点击

<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

四、v-bind修饰符

4.1. sync

能对props进行一个双向绑定

//父组件
<comp :myMessage.sync="bar"></comp> 
//子组件
this.$emit('update:myMessage',params);

以上这种方法相当于以下的简写

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
 this.bar = e;
}
//子组件js
func2(){
  this.$emit('update:myMessage',params);
}

使用sync需要注意以下两点：

使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的

4.2. prop

设置自定义标签属性，避免属性暴露在标签上，防止污染HTML结构

<body>
  <div id="app">
    <div
      :test1="'我会在标签属性中展示'"
      :test2.prop="'我不会在标签属性中展示'"
    ></div>
  </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        k: "",
      },
    });
  </script>
</body>

打开控制台检查元素
在这里插入图片描述

发现只有test1属性暴露在标签上面

4.3. camel

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

<svg :viewBox="viewBox"></svg>

实际上会渲染为

在这里插入图片描述

这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。
如果我们使用.camel修饰符，那它就会被渲染为驼峰名。
另，如果你使用字符串模版，则没有这些限制。

const vm = new Vue({
  template: '<svg :viewBox="viewBox"></svg>',
});

五、键盘按键修饰符

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

5.1. keyCode

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

// 按下回车键触发
<input type="text" @keyup.13="dddd" />

5.2. 常用的keyCode别名

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

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

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)" />
<button @mousedown.ctrl="shout(2)" />
<button @click.ctrl.67="shout(3)" />

5.3. exact

精确系统修饰符按键

<button @click.ctrl="shout(3)" />

当你同时按下ctr+alt+点击按钮也可以触发

<button @click.ctrl.exact="shout(3)" />

只能通过ctrl+点击按钮才可以触发

 <button @click.ctrl.shift.exact="dddd">111</button>

只能通过ctrl+shift+点击按钮才可以触发

扶苏1002

关注

26
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue修饰符最全

如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看。在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发keyup事件的。事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给。另，如果是鼠标事件，那就可以单独使用系统修饰符。
复制链接

扫一扫