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

目录
  • 一、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修饰符内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 面试最常问的13种Vue修饰符

    目录 1.lazy 2.trim 3.number 4.stop 5.capture 6.self 7.once 8.prevent 9.native 10.left,right,middle 11.passive 12.camel 12.sync 13.keyCode 1.lazy lazy修饰符作用是,改变输入框的值时value不会改变,当光标离开输入框时,v-model绑定的值value才会改变 <input type="text" v-model.lazy="v

  • vue使用once修饰符,使事件只能触发一次问题

    目录 once修饰符,使事件只能触发一次 vue事件修饰符(once:prev:stop) 注释说的很详细 once修饰符,使事件只能触发一次 多个修饰符可以同步使用 <!--定义vue的操作对象--> <div id="app">     <!-- 使用self修饰符 点击标签自身时才会执行事件 -->     <!-- 使用once修饰符 使事件只能触发一次  -->     <!-- 多个修饰符可以同时使用   -->

  • Vue中sync修饰符分析原理及用法示例

    Vue中sync修饰符分析原理及用法示例

    目录 不使用sync修饰符的代码示例 使用sync修饰符的代码示例 sync修饰符的原理 前几天在看别人代码时,发现了sync修饰符的妙用,特记录其用法和原理如下. 不使用sync修饰符的代码示例 父组件: <template> <div> <div v-if="show">11111</div> <h3>下面是子组件</h3> <SyncDemo :show="show" @update

  • Vue重要修饰符.sync对比v-model的区别及使用详解

    目录 Vue 中的双向绑定 Vue 中的 .syc 修饰符 .sync 使用注意事项 .sync 与 v-model的比较 Vue 中的双向绑定 上一节中我们已经讨论过Vue中并没有真正的双向绑定.Vue中的 props等数据是单向流动的,由父级至子级向下绑定的,即:每次父组件更新时,子组件中的所有 props 都会刷新为最新的值.如果在子组件中修改 props ,Vue会向你发出一个警告,且并不能通过修改子组件的数据来更改父组件的数据). 如果有需求,我们可以在父组件中,子组件的标签上声明一个

  • Vue之事件处理和事件修饰符详解

    Vue之事件处理和事件修饰符详解

    <div id="root"> <h2>{{name}},加油!</h2> <!-- 阻止默认事件 --> <a @click.prevent="showInfo" href="https:www.baidu.com">点我提示信息</a> <!-- 阻止事件冒泡 --> <div class="demo1" @click="s

  • 详解Vue的sync修饰符

    详解Vue的sync修饰符

    1 .指令 指令即 Directive,从字面意思理解就是我告诉你要做什么,就是发送了一个指令,然后由接收指令的人去做就好了.在 Vue 中的指令有个统一好认的格式,就是以 v- 开头的就是指令,如: <div v-text="x"> </div> //v-text指定标签文本指令 <div v-on:click="add"> <div> //v-on事件绑定指令 但并不是所有的指令都以 v- 开头,对于一些简写,也是

  • vue中的事件修饰符once,prevent,stop,capture,self,passive

    目录 vue中的事件修饰符 1. once 2. prevent 3. stop 4. capture和self 5. passive与prevent相反 vue事件处理(修饰符) 事件修饰符 按键修饰符 系统修饰键 鼠标按钮修饰符 vue中的事件修饰符 1. once 只执行一次 <div v-on:click.once='alert("1")'></div> 只有在第一次点击时会执行,再次点击不会起作用 2. prevent 阻止默认程序,比如form表单中

  • vue5中的事件修饰符(style)和template

    目录 事件修饰符 按键修饰符 自定义按键修饰符别名 template 组件 组件注册 Vue 调试工具 组件插槽 事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符 修饰符是由点开头的指令后缀来表示的 <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doT

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

    目录 一.Vue的修饰符是什么 二.修饰符的作用 1.表单修饰符 2.事件修饰符 3.鼠标按钮修饰符 4.键盘修饰符 5.v-bind修饰符 三.常用的应用场景 一.Vue的修饰符是什么 Vue中的修饰符分为以下五种: 表单修饰符: 事件修饰符: 鼠标按键修饰符: 键值修饰符: v-bind修饰符. 二.修饰符的作用 1.表单修饰符 修饰符 作用 使用 lazy 填完信息,光标离开标签的时候,才会将值赋予给value <input type="text" v-model.lazy

  • Vue编译器源码分析compileToFunctions作用详解

    Vue编译器源码分析compileToFunctions作用详解

    目录 引言 Vue.prototype.$mount函数体 源码出处 options.delimiters & options.comments compileToFunctions函数逐行分析 createFunction 函数源码 引言 Vue编译器源码分析 接上篇文章我们来分析:compileToFunctions的作用. 经过前面的讲解,我们已经知道了 compileToFunctions 的真正来源你可能会问为什么要弄的这么复杂?为了搞清楚这个问题,我们还需要继续接触完整的代码. 下面

  • C#中const 和 readonly 修饰符的用法详解

    1. 只有C#内置类型(int,double,long等)可以声明为const;结果.类和数组不能声明为const. 2. readonly 是在字段上使用的修饰符,直接以类名.字段访问. 3. const 必须在申明中初始化.之后不能再修改. 4. readonly可以在申明中初始化,也可以在构造函数中初始化,其它情况不能修改. namespace const_and_readonly { class Program { static void Main(string[] args) { Co

  • vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值. 但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了 用法如下: HTML: <div id="app"> <input

  • Vue3父子组件传参有关sync修饰符的用法详解

    Vue3父子组件传参有关sync修饰符的用法详解

    目录 单向数据流讲解 Vue2.x使用 定义事件的形式, 通知父组件修改 .sync 和 update: 的使用 父传子, 传递多个数据的简写 采用v-model简写(要求严格) Vue3.x使用 普通用法 简写 单向数据流讲解 单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用 定义事件的形式

  • Vue开发实例探究key的作用详解

    目录 前言 为什么不推荐使用 index 作为 key? 如果 key 重复会导致什么样的错误? 使用 key 和不使用 key 有什么差别? key的实际应用 上述结论在Vue3中也成立吗? 总结 使用key 不使用key 前言 一提到 vue 中的 key,你会想到什么?使用v-for时需要使用 key ?key 不能重复?建议不要使用 index 来做key的值?这究竟是为什么呢?就下来我们就一起来通过实例来一探究竟. 为什么不推荐使用 index 作为 key? 我们先来看两个例子 为了

  • Vue中v-on的基础用法、参数传递和修饰符的示例详解

    一.v-on的基本用法 使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可以省掉,如上述的<button @click="increment">加</button>. 以简单的计数器为例 <body> <div id="app"> <h2>{{count}}</h2> <

  • vue .sync修饰符的使用详解

    vue的官网介绍非常不错,先通读一遍. 2.3.0+ 新增 在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之.举个例子,在一个包含  title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图: this.$emit('update:title', newTi

  • vue中v-model指令与.sync修饰符的区别详解

    vue中v-model指令与.sync修饰符的区别详解

    目录 v-model .sync 细微之处的区别 总结功能作用场景: v-model <!--父组件--> <template> <!--v-model 指令是语法糖--> <Child v-model="model"></Child> <!-- 把 v-model 指令展开后相当于下面的代码 --> <!-- v-model绑定的默认事件是input,默认prop是value属性 --> <Ch

  • Java中的权限修饰符(protected)示例详解

    Java中的权限修饰符(protected)示例详解

    前言 大部分来自:https://blog.csdn.net/justloveyou_/article/details/61672133.并在这个博客的基础上,加上了自己的一些理解. 权限控制表 修饰词 本类 同一个包的类 继承类 其他类 private √ × × × 无(默认) √ √ × × protected √ √ √ × public √ √ √ √ 关于protected 最近在看Effective Java时,遇到了一个关于protected修饰符的问题.这个问题中,对于它的认识

随机推荐