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 列表页跳转详情页获取id以及详情页通过id获取数据

    vue 列表页跳转详情页获取id以及详情页通过id获取数据

    这篇文章主要介绍了vue 列表页跳转详情页获取id以及详情页通过id获取数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 详解Vue计算属性原理

    详解Vue计算属性原理

    计算属性是Vue中比较好用的API,开发者可以利用计算属将复杂的计算进行缓存,同时基于它的响应式特性,我们无需关注数据更新问题,但需要注意的是,计算属性是惰性求值的,本文将详细介绍计算属性的实现原理,需要的朋友可以参考下
    2023-05-05
  • 使用FileReader API创建Vue文件阅读器组件

    使用FileReader API创建Vue文件阅读器组件

    这篇文章主要介绍了使用FileReader API创建一个Vue的文件阅读器组件,需要的朋友可以参考下
    2018-04-04
  • vue项目如何实现ip和localhost同时访问

    vue项目如何实现ip和localhost同时访问

    这篇文章主要介绍了vue项目如何实现ip和localhost同时访问,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 用vue实现注册页效果 vue实现短信验证码登录

    用vue实现注册页效果 vue实现短信验证码登录

    这篇文章主要为大家详细介绍了用vue实现注册页,短信验证码登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue组件间的样式冲突污染问题详解

    Vue组件间的样式冲突污染问题详解

    默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。导致组件之间样式冲突的根本原因,我们接下来探究一下
    2022-11-11
  • Vue项目引用百度地图并实现搜索定位等功能(案例分析)

    Vue项目引用百度地图并实现搜索定位等功能(案例分析)

    这篇文章主要介绍了Vue项目引用百度地图并实现搜索定位等功能(案例分析),本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识,需要的朋友可以参考下
    2022-09-09
  • 使用Vue实现调用接口加载页面初始数据

    使用Vue实现调用接口加载页面初始数据

    今天小编就为大家分享一篇使用Vue实现调用接口加载页面初始数据,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中computed及watch区别实例解析

    Vue中computed及watch区别实例解析

    这篇文章主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • vue实现城市列表选择功能

    vue实现城市列表选择功能

    这篇文章主要介绍了vue实现城市列表选择功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07

最新评论