一、常用修饰符
1.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"> |
1.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> |
1.3 鼠标按钮修饰符
修饰符 | 作用 | 使用 |
---|---|---|
left | 左键点击 | <button @click.left="shout(1)">ok</button> |
right | 右键点击 | <button @click.right="shout(1)">ok</button> |
middle | 中键点击 | <button @click.middle="shout(1)">ok</button> |
1.4 键盘修饰符
键盘修饰符用来修饰键盘事件(onkeyup,onkeydown)的,有如下:
- 普通键(enter、tab、delete、space、esc、up…)
- 系统修饰键(ctrl、alt、meta、shift)
<!-- 只有按键为keyCode的时候才触发 -->
<input type="text" @keyup.keyCode="shout()">
还可以通过以下方式自定义一些全局的键盘码别名
<!-- Vue.config.keyCodes.f5 = 116; -->
<!--预先定义了keycode 116(即F5)的别名为f5,因此在文字输入框中按下F5,会触发prompt方法-->
<input type="text" @keydown.f2="prompt()">
1.5 v-bind修饰符
修饰符 | 作用 | 使用 |
---|---|---|
sync | 实现子组件props的双向绑定 | <BT :age.sync="age"></BT> |
prop | 设置自定义标签属性,避免暴露数据,防止污染HTML结构 | <input id="uid" title="title1" value="1" :index.prop="index"> |
camel | 将命名变为驼峰命名法,如将 view-Box属性名转换为 viewBox |
二、.sync
2.1 背景
日常开发时,我们总会遇到需要父子组件
双向绑定的问题,但是考虑到组件的可维护性,vue
中是不允许子组件改变父组件传的props
值的。那么同时,vue中也提供了一种解决方案.sync
修饰符。
2.2 .sync
修饰符之前的写法
- 父组件
<BT :age="age" @update:age="$event => age = $event"></BT>
- 子组件
this.$emit('update:age', 20)
子组件使用$emit('update:xxx', newVal)
向父组件发送事件,注意这里的事件名称update:xxx
是一种约定的写法,使用其它事件名称是同样的效果。
2.3 使用.sync
修饰符的写法
为了方便这种写法,vue
提供了.sync
修饰符,说白了就是一种简写
的方式,我们可以将其当作是一种语法糖
。sync
在2.3
版本引入,作为一个事件绑定
语法糖
。
- 父组件
<BT :age.sync="age"></BT>
- 子组件
this.$emit('update:age', 20)
三、.native
有时候,会想在某个自定义组件
上监听一个原生事件
,就像这样:
<BT @click="click()"></BT>
此时click
事件并不起作用,需要借助.native
修饰符:
<BT @click.native="click()"></BT>
需要注意的是给普通
的HTML
标签监听一个事件,之后添加 .native
修饰符是不会起作用
的。例如:
<a @click.native="click()">a</a>
甚至会报错:
[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <a>.
四、.prop
.prop
的修饰符用来指定绑定的值不应该被props
解析,而应该作为dom
的属性
绑定在元素上。<template> <div> <p>AT</p> <BT :age.prop="20"></BT> <BT :age="20"></BT> </div> </template> <script> import BT from "./BT.vue"; export default { name: "AT", components: { BT }, data() { return { }; }, methods: { }, }; </script>
结果:<template> <div> <p>BT</p> <p>{ { age }}</p> </div> </template> <script> export default { name: "BT", props: { age: { type: Number, default: 18, }, }, data() { return { }; }, mounted() { }, methods: { }, }; </script>
AT BT 18 BT 20