前言
- 本篇文章是专门用来介绍vue的修饰符
- 包括了指令的修饰符,事件修饰符,按键修饰符,其它修饰符
- 了解常用的修饰符,使某些场景的开发变得更加简便
指令的修饰符
简介: 指令的修饰符包括了v-model的修饰符和v-bind的修饰符,这些都是一些比较常用的修饰符,有便于我们平常的开发
-
v-model的修饰符
v-model的修饰符分为3种.lazy,.trim,.number- .lazy
v-model在添加了.lazy修饰符之后只有等输入框失去焦点之后或者按下enter键才会显示输入的内容<template> <input v-model.lazy="demoText" type="text"/> <h1>{{ demoText }}</h1> </template>- .trim
.trim修饰符会将双向绑定的内容的首尾空格进行去除,和字符串的trim方法效果是一致的,如果一直输入空格按钮,则绑定的值一直为''(空字符串),中间的空格是无法清除的。<template> // 如果输入demoText为 ' abc ' 则显示为:abc // 如果输入demoText为 'a bc ' 则显示为:a bc <input v-model.trim="demoText" type="text"/> <h1>{{ demoText }}</h1> </template>- .number
v-model在加了.number修饰符之后,会把输入的数值从字符串或其他类型转换为number类型<template> // 如果输入demoText为 '' 则 typeText为string // 如果输入demoText为 '123' 则 typeText为number <input v-model.number="demoText" type="text"/> <h1> {{ typeText }} </h1> </template> <script> import { defineComponent ,ref ,computed} from 'vue' export default defineComponent({ setup(){ let demoText = ref('') let typeText = computed(()=>{ return typeof demoText.value }) return { demoText, typeText } } }) <script> -
v-bind的修饰符
v-bind的常用修饰符为.sync- .sync
v-bind的属性名之后添加.sync,可以通过$emit('update:属性名', value)实现父子组件的数据双向绑定<template> <div class="demo"> /* 实际扩展为: <child-comp :label="label" @update:label="val => label = val" /> */ <child-comp :label.sync="label" /> <div>{{ label }}</div> </div> </template> // childComp.vue <template> <div class="demoChild"> <button @click="$emit('update:label','修改父组件的label')"> 修改 </button> </div> </template>当点击childComp.vue的button时,父组件的label则会改为 修改父组件的label
值的注意的是,vue3.0已经将
.sync修饰符移除,与v-model进行了一个融合
事件的修饰符
简介: 针对事件行为设计的修饰符,比如stopPropagation()[阻止冒泡],preventDefault()[阻止默认行为]等等…
- stop –> event.stopPropagation()阻止事件冒泡
<!-- 阻止单击事件冒泡，当点击box2时就不会触发box1的点击事件，若不加则会触发 -->
<div class="box1" @click="btn">
<div class="box2" @click.stop="btn1"></div>
</div>
- prevent -> event.preventDefault(),阻止事件默认行为
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
- capture –> 来实现捕获触发事件的机制
<!-- 添加事件侦听器时使用事件捕获模式，先执行外层盒子事件，再执行里面盒子事件 -->
<div v-on:click.capture="toDo">...</div>
- self –> 实现只有点击当前元素时候，才会触发事件处理函数（只会阻止自己身上的冒泡行为，并不会阻止真正的冒泡）
<!-- 只当事件在该元素本身（而不是子元素）才去执行 -->
<div v-on:click.self="toDo">...</div>
- once –> 只触发一次处理函数
<button v-on:click.once="toDo"></button>
- passive –> 对应 addEventListener 中的 passive 选项；表示它不会阻止事件的默认行为(通常来说，滚动页面的默认行为被阻止了，页面必须静止不动，但浏览器无法预先知道一个监听器会不会调用 preventDefault(),只有等滚动监听器执行完再去执行默认行为，而监听器执行是要耗时的，而且80%的滚动监听器是不会阻止默认行为的，所以浏览器白等，passive 监听器诞生了，可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。）
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
.passive 修饰符尤其能够提升移动端的性能
不要把.passive和.prevent一起使用,因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。passive会告诉浏览器你不想阻止事件的默认行为
- 事件修饰符的小技巧
<!-- 修饰符可以串联，阻止默认事件 -->
<a v-on:click.stop.prevent="toDo"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
按键的修饰符
简介:通过键盘或鼠标的按键指定事件的触发方法(由于keyCode在Vue3.0废弃并且在一些高版本浏览器不支持,本文对keyCode形式的不作介绍)
- enter 回车键
- tab
- delete (捕获 “删除” 和 “退格” 键)
- esc
- space
- up
- down
- left (如果是鼠标就是左键)
- right (如果是鼠标就是右键)
- ctrl
- alt
- shift
- meta (MIT计算机键盘上的的一个特殊键)
- middle(鼠标的中间滚轮键)
示例:
```
// 按下回车键触发search方法
补充的修饰符
简介: 介绍了.exact修饰符和.native修饰符
- .exact修饰符
作用: 精准的控制触发事件的按钮
// 只有按下enter键才可以触发search方法,如果同时按下 alt + enter 键,则不会触发 <input type="text" v-on:keyup.enter.exact="search" />
- .native修饰符
作用: 将原生事件绑定到组件,组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件
```
/*
常用于一个纯icon组件,进行一个事件的绑定
*/
<comp @click.native=“consoleDetails” />
comp.vue
<div>
<img src="xxx">
</div>
```
值的注意: 在vue3.0中,将
.native修饰符也进行了废弃,如果需要达到.native的修饰符的方法则不能将绑定在组件标签上的方法注册进emits选项中(或者defineEmits([]))
博客地址:https://roily.github.io/
标签：vue,修饰符,组件,事件,监听器,demoText 来源： https://blog.csdn.net/m0_48269997/article/details/121803646
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。