Vue常用的修饰符的作用详解_vue.js

来源:脚本之家  责任编辑:小易  
目录
一、Vue的修饰符是什么二、修饰符的作用1、表单修饰符2、事件修饰符3、鼠标按钮修饰符4、键盘修饰符5、v-bind修饰符三、常用的应用场景

一、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中sync修饰符分析原理及用法示例Vue重要修饰符.sync对比v-model的区别及使用详解vue使用once修饰符,使事件只能触发一次问题vue中的事件修饰符once,prevent,stop,capture,self,passivevue5中的事件修饰符(style)和templateVue之事件处理和事件修饰符详解面试最常问的13种Vue修饰符详解Vue的sync修饰符

  • 本文相关:
  • vue的属性、方法、生命周期实例代码详解
  • vue指令防止按钮连点解析
  • vue 2.0+vue-router构建一个简单的单页应用(附源码)
  • vue3.0公共组件自动导入的方法实例
  • easycom模式开发uni-app组件调用必须掌握的实用技巧
  • vue使用混入定义全局变量、函数、筛选器的实例代码
  • vue 中固定导航栏的实例代码
  • 通过源码分析vue的双向数据绑定详解
  • vue.js 60分钟轻松入门
  • vue中实现回车键登录功能
  • Vue 按键修饰符处理事件的方法
  • Vue.js事件处理器与表单控件绑定详解
  • vue的self修饰符只触发自己的事件,不包含子元素,你造吗?
  • 详解vue表单——小白速看
  • Vue方法与事件处理器详解
  • 如何理解Vue的.sync修饰符的使用
  • 详解Vue2.0之去掉组件click事件的native修饰
  • Vue.js 2.0学习教程之从基础到组件详解
  • vue实现绑定事件的方法实例代码详解
  • 如何理解Vue的.sync修饰符的使用
  • 详解vue中的父子传值双向绑定及数据更新问题
  • Vue.js 2.0和Cordova开发webApp环境搭建方法
  • 详解vue中this.$emit()的返回值是什么
  • vue自定义一个v-model的实现代码
  • vue监听键盘事件的快捷方法【推荐】
  • Vue.directive使用注意(小结)
  • 如何使用vue.js构造modal组件
  • Vue表单类的父子组件数据传递示例
  • Vue.js 十五分钟入门图文教程
  • Vue自定义属性实例分析
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首页javascriptjavascript类库vue.jsvue中sync修饰符分析原理及用法示例vue重要修饰符.sync对比v-model的区别及使用详解vue使用once修饰符,使事件只能触发一次问题vue中的事件修饰符once,prevent,stop,capture,self,passivevue5中的事件修饰符(style)和templatevue之事件处理和事件修饰符详解面试最常问的13种vue修饰符详解vue的sync修饰符vue的属性、方法、生命周期实例代码详解vue指令防止按钮连点解析vue 2.0+vue-router构建一个简单的单页应用(附源码)vue3.0公共组件自动导入的方法实例easycom模式开发uni-app组件调用必须掌握的实用技巧vue使用混入定义全局变量、函数、筛选器的实例代码vue 中固定导航栏的实例代码通过源码分析vue的双向数据绑定详解vue.js 60分钟轻松入门vue中实现回车键登录功能vue引用js文件的多种方式(推荐)vue跳转页面的几种方法(推荐)详解vue 路由跳转四种方式 (带参数)vue项目刷新当前页面的三种方法vue之父子组件间通信实例讲解(props、$ref、$emvue props用法详解(小结)vue.js中created方法作用element-ui中select组件绑定值改变,触发chavue实现文件上传功能vue元素的隐藏和显示(v-show指令)vue.js原理分析之observer模块详解easycom模式开发uni-app组件调用必须掌握的实用技巧vue的缓存方法示例详解vue实现一个flappy bird游戏的示例代码axios解决高并发的方法:axios.all()与axios.spreadvue实现简单的mvvm框架vue远程加载sfc组件思路详解详解vite2.0配置学习(typescript版本)vue动态控制input的disabled属性的方法iview table组件中各种组件扩展的使用
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved