Vue常用修饰符的作用是什么

这篇文章主要介绍“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常用修饰符的作用是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注蜗牛博客行业资讯频道，小编每天都会为大家更新不同的知识点。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。