Vue框架中常用的修饰符的作用及详细使用方法

来源：绵阳动力网络公司  时间：2022-08-08  阅读：10 次

近期在用Vue框架做网站建设项目开发时学到了一些关于装饰符的使用方法，装饰符适当的时候可以为网站的风格做一些点缀美化，例如取消冒泡，阻止默认事件等等，现将学习到的资料分享给大家。

一、Vue的修饰符是什么

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

表单修饰符；

事件修饰符；

鼠标按键修饰符；

键值修饰符；

v-bind修饰符。

二、修饰符的作用

1、表单修饰符

2、事件修饰符

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">

三、常用的应用场景

好了，今天和大家分享的关于Vue框架中常用的修饰符的作用及详细使用方法的全部内容就是这些，如果你看后喜欢的话记得收藏哦！