Vue常用的修饰符的作用详解

更新时间：2022年08月04日 15:51:00 作者：饭啊饭°

为了方便大家写代码，Vue 给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等，这篇文章将给大家分享Vue 中的常用的修饰符

一、Vue的修饰符是什么

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

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

二、修饰符的作用

1、表单修饰符

修饰符	作用	使用
lazy	填完信息，光标离开标签的时候，才会将值赋予给value	<input type="text" v-model.lazy="value">
trim	自动过滤用户输入的首空格字符，中间的空格不会过滤	<input type="text" v-model.trim="value">
number	自动将用户输入的值转为数值类型，如果不能被parseFloat解析，会返回原来的值	<input v-model.number="age" type="number">

2、事件修饰符

修饰符	作用	使用
stop	阻止了事件冒泡，相当于调用了event.stopPropagation	<div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div>//只输出1
prevent	阻止了事件的默认行为，相当于调用了event.preventDefault方法	<form v-on:submit.prevent="onSubmit"></form>
once	绑定了事件以后只能触发一次，第二次就不会触发	<button @click.once="shout(1)">ok</button>

3、鼠标按钮修饰符

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

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

4、键盘修饰符

键盘修饰符用来修饰键盘事件（onkeyup,onkeydown）的，有如下：

普通键（enter、tab、delete、space、esc、up…）
系统修饰键（ctrl、alt、meta、shift）

// 只有按键为keyCode的时候才触发
<input type="text" @keyup.keyCode="shout()">

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

Vue.config.keyCodes.f2 = 113

5、v-bind修饰符

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

<input id="uid" title="title1" value="1" :index.prop="index">

三、常用的应用场景

修饰符	应用场景
.stop	阻止事件冒泡
.native	绑定原生事件
.once	事件只执行一次
.self	将事件绑定在自身身上，相当于阻止事件冒泡
.prevent	阻止默认事件
.caption	用于事件捕获
.once	触发一次
.keyCode	监听特定键盘按下
.right	右键

到此这篇关于Vue常用的修饰符的作用详解的文章就介绍到这了,更多相关Vue修饰符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue.js打包项目后页面出现空白的解决办法
这篇文章主要介绍了vue.js打包项目后页面出现空白的解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021-11-11
Vue 收集表单数据方法详情
这篇文章主要介绍了Vue 收集表单数据方法详情，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-05-05
vue实现动态表单动态渲染组件的方式(2)
这篇文章主要为大家详细介绍了vue实现动态表单动态渲染组件的方式第二篇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue使用transition组件动画效果的实例代码
这篇文章主要介绍了vue使用transition组件动画效果的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
Vue 使用formData方式向后台发送数据的实现
这篇文章主要介绍了Vue 使用formData方式向后台发送数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
一文了解vue-router之hash模式和history模式
这篇文章主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
一文详解Vue中过滤器filters的使用
Vue.js允许自定义过滤器，过滤器的作用可被用于一些常见的文本格式化（也就是修饰文本，但是文本内容不会改变），本文主要来和大家讲讲过滤器filters的使用，感兴趣的可以了解一下
2023-04-04
Vue中如何实现轮播图的示例代码
本篇文章主要介绍了Vue中如何实现轮播图的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Vue中点击url下载文件的案例详解
这篇文章主要介绍了Vue中点击url下载文件案例详解，此文需要注意若是文件的url存在跨域的情况，则可能会下载失败，因为fetch请求连接后，由于跨域，拿不到资源，也就无法执行后续的操作，此时是失败的,详细内容跟随小编一起看看吧
2022-04-04
浅谈vue中所有的封装方式总结
因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目，那么应该如何封装，本文就介绍一下如何封装，感兴趣的可以了解一下
2021-07-07