大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
vue修饰符主要分为:
1.表单修饰符;
2.事件修饰符;
3.按键修饰符,其中包含特殊修饰符:
系统修饰键,
.exact修饰符;
4.鼠标按钮修饰符;
5.其他修饰符,包含:
.sync,
.prop,
.camel
一、表单修饰符(用法一致为表单元素使用v-model时加修饰符: v-model.修饰符)
1) .trim: 去除仅首尾的空格
2) .lazy: 不让表单外双向绑定的数据实时接收表单内数据并更新,而是blur(失焦)后更新
3) .number: 如果你先输入数字,那它就会限制你输入的只能是数字;如果你先输入字符串则该修饰符失效
二、事件修饰符(特定的被修饰事件.修饰符)
1) .stop: 阻止事件冒泡(相当于event.stopPropagation()方法)
2) .prevent: 阻止默认行为(例如submit的提交行为,相当于event.preventDefault()方法)
3) .self: 用self修饰符的元素不会受其他关联元素上的事件所影响(例如事件冒泡机制)
注意: @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。也就是从左往右判断
4) .once: 使被修饰的事件仅触发一次
5) .capture: 捕获.即 使被修饰事件改变默认的冒泡阶段触发,而是在捕获阶段触发
6) .passive: 移动端用到的,防止监听元素滚动事件时网页卡顿(类似.lazy防止热更新), 大大减少事件触发,提升移动端性能
7) .native: 针对原生事件在外来组件上无法生效的问题,可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签. 注意：使用.native修饰符来操作普通HTML标签是会令事件失效的
三、按键修饰符(键盘事件.修饰符)
1) .keyCode: 让键盘事件在指定的keyCode值被触发时触发,至于keyCode值,可以监听键盘事件去methods上打印e.target查阅,也可查看ASCII码表
2) 为了方便我们使用，vue给一些常用的键提供了别名
普通键:
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
系统修饰键:
.ctrl.alt.shift.meta
3) .exact: 主要用来制作快捷键
四、其他修饰符
1) .sync：用法:
//父组件
<comp :myMessage.sync="bar"></comp>
//子组件
this.$emit('update:myMessage',params);简化了父子传递事件时父组件的代码,当然方便之余 相应的也有一定限制:
- 使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致
- 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。
- 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。
2) .prop: 用于纠正所绑定的值绑定到property,避免绑定到dom节点的attribute
<input id="uid" title="title1" value="1" :index.prop="index">
//input.index === this.index
//input.attributes.index === undefined3) .camel: 也是起到一个纠正作用，由于HTML特性不区分大小写
<svg :viewBox="viewBox"></svg>实际渲染效果：
<svg viewbox="viewBox"></svg>这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。
如果我们使用.camel修饰符，那它就会被渲染为驼峰名。
另，如果你使用字符串模版，则没有这些限制：
new Vue({
template: '<svg :viewBox="viewBox"></svg>'
})本篇大部分参考了https://segmentfault.com/a/1190000016786254 ，其中有详细解说和大量案例。此文仅供速查
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/227285.html原文链接：https://javaforall.net
![测试开发需要学习的知识结构[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
