Vue修饰符

已于 2023-08-10 15:28:04 修改
阅读量428 收藏
点赞数
分类专栏： vue 栏 文章标签： vue.js javascript 前端
于 2023-08-10 15:26:40 首次发布
CSDN-CRJ
本文链接：https://blog.csdn.net/CRJ453027119/article/details/132211009
版权

事件修饰符

在Vue 2.0中，事件修饰符允许我们在处理事件时对其进行修改或增强。以下是一些常用的事件修饰符：

  1. .stop：阻止事件冒泡。使用此修饰符后，父元素的相同事件不会再触发。
  2. .prevent：阻止事件的默认行为。比如，提交表单时可以使用.prevent修饰符阻止页面的刷新。
  3. .capture：使用事件捕获模式，即在父元素上触发事件处理程序，然后才在子元素上触发。默认情况下，事件是在冒泡阶段处理的。
  4. .self：只有当事件是从元素自身触发时才触发事件处理程序。如果事件是从子元素冒泡上来的，那么事件处理程序不会被触发。
  5. .once：只触发一次事件处理程序。即使事件被多次触发，只有第一次触发时会执行相应的处理程序。
  6. .passive：指定事件处理程序不会调用preventDefault()方法。这可以提升滚动性能。

.stop 阻止事件冒泡

<template>
    <div>
    	<div @click="showInfo" style="height: 50px;background: yellowgreen;">
        	<button @click.stop="showInfo">点我提示信息</button>
		</div>
    </div>
</template>
<script>
export default {
    methods: {
        showInfo(e) {
            // e.stopPropagation();
            alert(".prevent 修饰符")
        }
    }
};
</script>

.prevent 阻止事件的默认行为

<template>
    <div>
      	// 阻止了表单提交时的默认行为
        <form @submit.prevent="handleSubmit">
          <input type="text" />
          <button type="submit">Submit</button>
        </form>
		// 阻止了a标签的默认行为
        <a href="www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    </div>
</template>
<script>
export default {
    methods: {
        handleSubmit() {
            console.log('.prevent 修饰符')
        },
        showInfo(e) {
            // e.preventDefault();
            alert(".prevent 修饰符")
        }
    }
};
</script>

.capture 事件捕获模式

<template>
    <div>
    	<div style="background: red;padding: 5px;" @click.capture="showMsg(1)">
            div1
            <div style="background: yellow;padding: 5px;" @click="showMsg(2)">
                div2
            </div>
        </div>
    </div>
</template>
<script>
export default {
    methods: {
        showMsg(msg) {
            console.log(msg)
        }
    }
};
</script>

.once 只触发一次事件处理程序

<template>
    <div>
    	<button @click.once="showInfo">点我提示信息</button>
    </div>
</template>
<script>
export default {
    methods: {
        showInfo() {
            alert(".prevent 修饰符")
        }
    }
};
</script>

.self 只有当事件是从元素自身触发时才触发事件

<template>
    <div>
    	<div @click.self="showInfo" style="height: 50px;background: yellowgreen;">
        	<button @click="showInfo">点我提示信息</button>
		</div>
    </div>
</template>
<script>
export default {
    methods: {
        showInfo(e) {
            // e.stopPropagation();
            alert(".prevent 修饰符")
        }
    }
};
</script>

.passive 事件的默认行为立即执行，无需等待事件回调执行完成

<template>
    <div>
    	<ul @scroll="headelScroll" @wheel.passive="headelWhell" style="height: 100px; overflow: auto;background: bisque;color:#fff">
            <li style="height: 50px;background: rebeccapurple;">1</li>
            <li style="height: 50px;background: blue;">2</li>
            <li style="height: 50px;background: rebeccapurple;">3</li>
            <li style="height: 50px;background: blue;">4</li>
		</ul>
    </div>
</template>
<script>
export default {
    methods: {
        headelScroll() {
            console.log("@");
        },
        // 滚轮事件
        headelWhell() {
            for (let i = 0; i <100000; i++) {
                console.log('++');
            }
            console.log("@@");
        }
    }
};
</script>

.native 就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加 native事件是无法触发的。

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

键盘修饰符

在Vue 2.0中，你可以使用键盘修饰符来更方便地处理键盘事件。键盘修饰符是在处理键盘事件时使用的一种特殊语法，在按下特定键时执行相应的操作。

Vue 2.0中支持的键盘修饰符有以下几种：

普通

  • .enter：按下Enter键。
  • .tab：按下Tab键。
  • .delete 或 .backspace：按下Delete或Backspace键。
  • .esc：按下Escape键。
  • .space：按下Space键。
  • .up：按下上箭头键。
  • .down：按下下箭头键。
  • .left：按下左箭头键。
  • .right：按下右箭头键。

系统修饰键

  • .ctrl：按下Ctrl键。
  • .alt：按下Alt键。
  • .shift：按下Shift键。
  • .meta：按下Meta键（通常是Command键或Windows键）。

还可以通过以下方式自定义一些全局的键盘码别名：

<!-- HTML -->
<div id="app">
    <input type="text" v-on:keydown.f5="prompt()">
</div>

Vue.config.keyCodes.f5 = 116;
let app = new Vue({
    el: '#app',
    methods: {
        prompt: function() {
            alert('我是 F5！');
        }
    }
});

你可以通过在Vue模板中使用这些修饰符来监听相应的键盘事件。以下是一个示例：

<template>
  <div>
    <input v-on:keydown.enter="handleEnter" />
    <input v-on:keydown.tab="handleTab" />
    <input v-on:keydown.delete="handleDelete" />
    <input v-on:keydown.esc="handleEscape" />
    <input v-on:keydown.space="handleSpace" />
    <input v-on:keydown.up="handleUp" />
    <input v-on:keydown.down="handleDown" />
    <input v-on:keydown.left="handleLeft" />
    <input v-on:keydown.right="handleRight" />
    <input v-on:keydown.ctrl="handleCtrl" />
    <input v-on:keydown.alt="handleAlt" />
    <input v-on:keydown.shift="handleShift" />
    <input v-on:keydown.meta="handleMeta" />
    <input v-on:keydown="handleAll" />
      
    <!-- 其它 -->
    <input v-on:keydown.caps-lock="handleAll" />
  </div>
</template>

<script>
export default {
  methods: {
    handleEnter() {
      // 按下Enter键的处理逻辑
    },
    handleTab() {
      // 按下Tab键的处理逻辑
    },
    // 其他键盘事件处理函数...
    handleAll () {
        console.log(e.key, e.keyCode); // CapsLock 20
    }
  }
}
</script>

在上面的示例中，我们分别在不同的input元素上使用了不同的键盘修饰符，并绑定了相应的事件处理函数。当用户在输入框中按下对应的键时，对应的事件处理函数会被调用。

希望这能帮助到你！如果你有任何进一步的问题，请随时问我。

鼠标修饰符

针对的就是左键、右键、中键点击，对应的鼠标键点击才会触发函数

left 左键点击
right 右键点击
middle 中键点击
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>

表单修饰符

在Vue.js 2.0中，表单修饰符是一种用于修改表单输入行为的特殊指令。它们是通过在指令后面添加一个句点(“.”)和修饰符来使用的。

下面是一些常用的表单修饰符：

  • .lazy：默认情况下，Vue会在每次输入事件触发时同步更新输入框的值。使用.lazy修饰符可以改为在change事件触发时进行同步更新。

  • .number：将用户的输入值转为数字类型。如果输入的值无法转为有效的数字，则会返回原始的字符串。

  • .trim：自动过滤用户输入的首尾空白字符。

  • .native：监听组件根元素的原生事件，而不是组件内部通过$emit触发的自定义事件。

使用示例：

<input type="text" v-model.lazy="message"> <!-- 在change事件触发时更新message值 -->
<input type="text" v-model.number="age"> <!-- 将用户输入的值转为数字 -->
<input type="text" v-model.trim="username"> <!-- 自动去除输入内容的首尾空白字符 -->

以上是一些常用的Vue.js 2.0表单修饰符，它们可以帮助我们更好地处理表单输入。

v-bind修饰符

在Vue.js 2.0中，v-bind 是用来绑定一个或多个属性的指令。它可以接受修饰符，用于修改绑定的行为。下面是一些常用的 v-bind 修饰符：

  • .prop：将属性绑定到组件的属性，而不是绑定到DOM元素的特性。这在使用自定义组件时非常有用。

  • .camel：将属性名转换为驼峰式命名。例如，v-bind:my-prop.camel 将会绑定到组件的 myProp 属性，而不是 my-prop 属性。

  • .sync：实现双向绑定。当绑定的值发生变化时，会将变化同步回父组件。注意，在实际使用中，需要在父组件中使用 .sync 修饰符来更新变量。

  • .modifiers：用于传递修饰符的参数。例如，.number、.trim 修饰符可以使用 v-bind:my-prop.number.trim。

使用示例：

<custom-component v-bind:prop-name.prop="value"></custom-component> <!-- 将属性绑定到组件的属性 -->
<my-input v-bind:input-value.camel="myValue"></my-input> <!-- 将属性名转换为驼峰式命名 -->
<my-component v-bind:my-prop.sync="parentData"></my-component> <!-- 实现双向绑定 -->
<input v-bind:value.trim="inputValue"> <!-- 过滤输入值的首尾空白字符 -->

注意，在Vue 2.0中，v-bind 通常可以用简写的冒号语法来代替，例如 :prop-name.prop="value" 等同于 v-bind:prop-name.prop="value"。

以上是一些常用的Vue.js 2.0 v-bind 修饰符，它们可以帮助我们更好地控制属性绑定的行为。

.sync

作用：sync修饰符是一个语法糖，类似v-model，它主要是解决了父子组件的双向绑定问题。因为vue提倡的是单向数据流动，因此不能直接在子组件里面修改父组件传过来的数据，我们一般$emit。

sync修饰符其实是做了两步动作：
1、声明传的数据visible
2、声明@update:visible事件

注意：

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

原始写法$emit：

<!-- 父组件 -->
<template>
  <div id="app">
    <button @click="visible=true">显示</button>
    <my-alert :visible="visible" @close="closeAlert"></my-alert>
  </div>
</template>
<script>
import myalert from './components/myalert'
export default {
  components:{'my-alert': myalert},
  data(){
    return {
      visible:false
    }
  },
  methods:{
    closeAlert(value){
      this.visible = value
    }
  }
 
}
</script>

<!-- 子组件 -->
<template>
    <div class="cont" v-show="visible">
        <h2>这是一个对话框</h2>
        <button @click="closeAlert">关闭</button>
    </div>
</template>
 
<script>
    export default {
        name: "myalert",
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            closeAlert(){
                this.$emit('close',false)
            }
        }
    }
</script>

一个数据就要带一个自定义事件才能实现双向绑定，为了避免乱起名引起的混乱，事件名我们最好约定一下规则。
因为是修改visible这个数据，因此事件我们统一就叫@update:visible

<!-- 父组件 -->
<template>
  <div id="app">
    <button @click="visible=true">点击</button>
    <my-alert :visible="visible" @update:visible="value => visible=value"></my-alert>
  </div>
</template>
 
<script>
import myalert from './components/myalert'
export default {
  name: 'App',
  components:{'my-alert': myalert},
  data(){
    return {
      visible:false
    }
  }
 
}
</script>
 
<!-- 子组件 -->
<template>
    <div class="cont" v-show="visible">
        <h2>这是一个对话框</h2>
        <button @click="closeAlert">关闭</button>
    </div>
</template>
 
<script>
    export default {
        name: "myalert",
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            closeAlert(){
                this.$emit('update:visible',false)
            }
        }
    }
</script>

这么写还是太麻烦了，但有了统一的规则，系统就可以帮我们自动生成不必要的代码，这就是sync修饰符的作用，它让写法更为简洁：

<!-- 父组件 -->
<template>
  <div id="app">
    <button @click="visible=true">点击</button>
    <my-alert :visible.sync="visible"></my-alert>
  </div>
</template>
 
<script>
import myalert from './components/myalert'
export default {
  name: 'App',
  components:{'my-alert': myalert},
  data(){
    return {
      visible:false
    }
  },
 
}
</script>

<!-- 子组件 -->
<template>
    <div class="cont" v-show="visible">
        <h2>这是一个对话框</h2>
        <button @click="closeAlert">关闭</button>
    </div>
</template>
 
<script>
    export default {
        name: "myalert",
        props:{
            visible:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            closeAlert(){
                this.$emit('update:visible',false)
            }
        }
    }
</script>

.prop

prop:设置自定义标签属性，编译后不会出现在html中，避免暴露数据，防止污染HTML结构

<input id="input" type="foo" value="11" :data="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11" data="inputData 的值"></input>
// input.data === undefined
// input.attributes.data === this.inputData
 
<input id="input" type="foo" value="11" :data.prop="inputData"></input>
// 标签结构: <input id="input" type="foo" value="11"></input>
// input.data === this.inputData
// input.attributes.data === undefined

.camel

camel:将命名变为驼峰命名法，只有props和.prop会默认将kebab-case转化为camelCase，剩下的作为attribute的不会。而.camel修饰符正是针对attribute的。如将view-Box属性名转换为 viewBox。

data() {
    return {
        msgText: 'aaa'
    }
}
 
<h2 :msg-text="msgText">原本</h2>
<!-- 编译后为<h2 msg-text="aaa">原本</h2> -->
 
<h2 :msg-text.camel="msgText">加camel修饰符</h2>
<!-- 编译后为<h2 msgtext="aaa">加camel修饰符</h2>,由于camel将msg-text转化为msgText,html中不区分大小写，所以会将大写都转化为小写，则最终结果为msgtext -->
前端全栈分享站
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue 键盘修饰符
weixin_45677987的博客
02-27 1938
1: vue 中常用的键盘修饰符: 键盘修饰符别名: 回车 => enter键 删除 => delete键 退回 => esc 空格键 => space 换行 => tab (特殊键, 必须配合keydown 去使用) 上 => up 键 下 => dpwn 键 左 => left 键 右 => right 键 2: vue 中未提供别名的按键, 可以使用键盘原始的key 值去.
Vue常用修饰符
m0_67381422的博客
06-19 8556
1. 事件修饰符 - 处理 DOM 事件细节 2. 按键修饰符 - 为 v-on 在监听键盘事件时添加按键修饰符 3. 系统修饰键 -实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 4. 鼠标按钮修饰符 - 限制处理函数仅响应特定的鼠标按键 5. 表单修饰符 - v-model增强的修饰符...
Vue常用的修饰符及使用的场景，面试篇
最新发布
2401_84002339的博客
04-04 861
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。键盘修饰符用来修饰键盘的事件（如：onkeyup、onkeydown等），键盘的事件触发需要相对应的keyCode。这个我们以移动端监听元素滚动事件说明，在监听元素滚动事件的时候，会一直触发onscroll事件让页面变的越来越卡，因此在我们使用这个修饰符后，相当于给onscroll事件增加了.lazy修饰符。
笔记2：简述-Vue(要点记录)
SLD_nmht的博客
01-12 402
简述-Vue(要点记录)
Vue 按键修饰符
qq_51133939的博客
08-08 771
Vue 按键修饰符——enter、tab、delete、esc、space、up、down、left、right。
Vue的各种keyup键盘点击事件
周瑞的博客
03-22 1438
Vue的各种keyup键盘点击事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现...
Vue 按键修饰符处理事件的方法
08-27
主要介绍了Vue 按键修饰符的相关资料，vue中新增按键修饰符和系统修饰符来处理类似的事件，具体内容详情大家参考下本
Vue事件修饰符native、self示例详解
10-16
主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue中的按键修饰符
qq_42772400的博客
08-13 1525
常用的按键码的别名： 1、 .enter （回车键） 2、 .tab 3、.delete （捕获”删除“和”退格“键） 4、 .esc （退出键） 5、 .space （空格键） 6、 . up 7、 .dowm 8、 .left 9、 .right （右箭头） 可以通过 Vue.config.keyCodes.f2=113 自定义按键修饰符 f2 是自定义的名称 ，113是键盘对应的码值 有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如
Vue.js按键修饰符及v-model修饰符
m0_61961937的博客
04-29 1276
Vue.js按键修饰符及v-model修饰符示例
VUE笔记01
weixin_47325510的博客
08-10 483
VUE笔记01 组件 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。 每个 Vue 应用都是通过用 Vue 函数（类）创建一个新的 Vue 实例开始的。一般的 UI 组件是需要有 html、css 去展示对应的界面（视图）的。所以，我们需要给这种组件设置模板。 data：因为 vue 根节点,在整个vue单页面实例中,它有且只有一个,所以 data 可以设置成一个 Object{}；但是子组件可能会多次实例化和调用,所以为了确保子组件的数据的独立
Vue项目：路由跳转时中文传参被URL编码，怎么解决？用js封装Base64编码解码加密解密
weixin_46099312的博客
07-15 2944
Vue项目路由传参中文，加密解密方式
Vue 常用的修饰符有哪些？
weixin_62897746的博客
01-18 5330
在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号。 在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理 vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符
vue常用的修饰符
weixin_43962020的博客
12-09 1625
使用sync需要注意：使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致，注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用，将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的。在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步。解析，则会返回原来的值。
vue中的修饰符作用详细讲解
WUYOU798的博客
12-02 2875
vue中修饰符的使用
vue-按键修饰符
QWERTY55555的专栏
10-15 216
meta:mac针对的是command键盘，windows针对的windows键盘（田）.delete(针对delete和backspace两个按键)按键修饰符：主要用于监听键盘上的按钮被按下时，可触发对应的事件函数。v-on:keyup.修饰符.修饰符】、系统修饰符必须按下才触发。
vue修饰符阻止捕获
09-26
Vue修饰符"阻止捕获"指的是在Vue中使用事件修饰符时，可以通过该修饰符来阻止事件的继续向上冒泡或者阻止事件的默认行为。 在Vue中，事件冒泡是指事件先触发在内层元素上，然后再逐层向上触发，直到事件冒泡到最...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端全栈分享站

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值