文章目录
一、修饰符是什么
在Vue中,修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理
Vue中修饰符分为以下五种:
- 表单修饰符
- 事件修饰符
- 鼠标按键修饰符
- 键值修饰符
- v-bind修饰符
二、表单修饰符
2.1. .lazy
v-model.lazy就可以吧这个同步事情变得懒惰, 只会在
失去焦点
的时候进行数据同步
<input type="text" v-model.lazy="value">
<p>{{value}}</p>
2.2. .trim
自动过滤用户输入的首空格字符,而中间的空格不会过滤
<input type="text" v-model.trim="value">
2.3. .number
自动将用户的输入值转为数值类型,但如果这个值无法被
parseFloat
解析,则会返回原来的值
<input v-model.number="age" type="number">
三、事件修饰符
3.1. .stop
阻止了事件冒泡,相当于调用了event.stopPropagation方法
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
//只输出1
3.2. .prevent
阻止了事件的默认行为(a标签跳转,表单提交等等),相当于调用了event.preventDefault方法
<form v-on:submit.prevent="onSubmit"></form>
3.3. .self
只当在 event.target 是当前元素自身时触发处理函数
<div v-on:click.self="doThat">...</div>
重点:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用
v-on:click.prevent.self
会阻止所有的点击,而v-on:click.self.prevent
只会阻止对元素自身的点击
3.4. once
绑定了事件以后只能触发一次,第二次就不会触发
<button @click.once="shout(1)">ok</button>
3.5. .capture
使事件触发从包含这个元素的顶层开始往下触发
<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">
obj4
</div>
</div>
</div>
</div>
// 输出结构: 1 2 4 3
3.6. .passive
当我们在监听元素滚动事件的时候,会一直触发
onscroll
事件会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给onscroll
事件整了一个.lazy修饰符
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。passive 会告诉浏览器你不想阻止事件的默认行为
3.7. native
让组件变成像html内置标签那样监听根元素的原生事件,否则组件上使用 v-on 只会监听自定义事件
<my-component v-on:click.native="doSomething"></my-component>
三、鼠标按键修饰符
- left 左键点击
- right 右键点击
- middle 中键点击
<button @click.left="shout(1)">ok</button>
<button @click.right="shout(1)">ok</button>
<button @click.middle="shout(1)">ok</button>
四、v-bind修饰符
4.1. sync
能对props进行一个双向绑定
//父组件
<comp :myMessage.sync="bar"></comp>
//子组件
this.$emit('update:myMessage',params);
以上这种方法相当于以下的简写
//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
this.bar = e;
}
//子组件js
func2(){
this.$emit('update:myMessage',params);
}
使用sync需要注意以下两点:
- 使用sync的时候,子组件传递的事件名格式必须为update:value,其中value必须与子组件中props中声明的名称完全一致
- 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
- 将 v-bind.sync 用在一个字面量的对象上,例如 v-bind.sync=”{ title: doc.title }”,是无法正常工作的
4.2. prop
设置自定义标签属性,避免属性暴露在标签上,防止污染HTML结构
<body>
<div id="app">
<div
:test1="'我会在标签属性中展示'"
:test2.prop="'我不会在标签属性中展示'"
></div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
k: "",
},
});
</script>
</body>
打开控制台检查元素
发现只有test1属性暴露在标签上面
4.3. camel
由于HTML 特性是不区分大小写的。
<svg :viewBox="viewBox"></svg>
实际上会渲染为
这将导致渲染失败,因为 SVG 标签只认 viewBox,却不知道 viewbox 是什么。
如果我们使用.camel修饰符,那它就会被渲染为驼峰名。
另,如果你使用字符串模版,则没有这些限制。
const vm = new Vue({
template: '<svg :viewBox="viewBox"></svg>',
});
五、键盘按键修饰符
其实这个也算是事件修饰符的一种,因为它都是用来修饰键盘事件的。
比如onkeyup,onkeydown啊
5.1. keyCode
如果不用keyCode修饰符,那我们每次按下键盘都会触发shout,当我们想指定按下某一个键才触发这个shout的时候,这个修饰符就有用了,具体键码查看键码对应表
// 按下回车键触发
<input type="text" @keyup.13="dddd" />
5.2. 常用的keyCode别名
- 回车 => enter
- 删除 => delete (捕获“删除”和“退格”键)
- 退出 => esc
- 空格 => space
- 换行 => tab (特殊,必须配合keydown去使用)
- 上 => up
- 下 => down
- 左 => left
- 右 => right
可以通过全局
config.keyCodes
对象自定义按键修饰符别名:
Vue.config.keyCodes.f1 = 112
注意:键分成了普通常用的键和系统修饰键
当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发keyup事件的。
<input type="text" @keyup.ctrl="shout(4)" />
那该如何呢?我们需要将系统修饰键和其他键码链接起来使用,比如
<input type="text" @keyup.ctrl.67="shout(4)" />
这样当我们同时按下ctrl+c时,就会触发keyup事件。
另,如果是鼠标事件,那就可以单独使用系统修饰符。
<button @mouseover.ctrl="shout(1)" />
<button @mousedown.ctrl="shout(2)" />
<button @click.ctrl.67="shout(3)" />
5.3. exact
精确系统修饰符按键
<button @click.ctrl="shout(3)" />
当你同时按下ctr+alt+点击按钮也可以触发
<button @click.ctrl.exact="shout(3)" />
只能通过ctrl+点击按钮才可以触发
<button @click.ctrl.shift.exact="dddd">111</button>
只能通过ctrl+shift+点击按钮才可以触发