1. Commonly used modifiers
1.1 Form modifiers
| Modifier | effect | use |
|---|---|---|
| lazy | After filling in the information, the value will be assigned to value when the cursor leaves the label | <input type="text" v-model.lazy="value"> |
| trim | Automatically filter the first space character entered by the user, and the middle space will not be filtered | <input type="text" v-model.trim="value"> |
| number | Automatically convert the value entered by the user to a numeric type. If it cannot be parseFloatparsed, it will return the original value |
<input v-model.number="age" type="number"> |
1.2 Event modifiers
| Modifier | effect | use |
|---|---|---|
| stop | Prevents event bubbling, which is equivalent to callingevent.stopPropagation |
<div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div>// only output 1 |
| prevent | The default behavior of the event is blocked, which is equivalent to calling event.preventDefaultthe method |
<form v-on:submit.prevent="onSubmit"></form> |
| once | After the event is bound, it can only be triggered once, and it will not be triggered the second time | <button @click.once="shout(1)">ok</button> |
1.3 Mouse button modifiers
| Modifier | effect | use |
|---|---|---|
| left | left click | <button @click.left="shout(1)">ok</button> |
| right | right click | <button @click.right="shout(1)">ok</button> |
| middle | middle click | <button @click.middle="shout(1)">ok</button> |
1.4 Keyboard Modifiers
Keyboard modifiers are used to modify keyboard events (onkeyup, onkeydown), as follows:
- Common keys (enter, tab, delete, space, esc, up...)
- System modifier keys (ctrl, alt, meta, shift)
<!-- 只有按键为keyCode的时候才触发 -->
<input type="text" @keyup.keyCode="shout()">
You can also customize some global keyboard code aliases in the following ways
<!-- Vue.config.keyCodes.f5 = 116; -->
<!--预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法-->
<input type="text" @keydown.f2="prompt()">
1.5 v-bind modifier
| Modifier | effect | use |
|---|---|---|
| sync | Implement two-way binding of subcomponent props | <BT :age.sync="age"></BT> |
| prop | Set custom tag attributes to avoid exposing data and preventing HTML structure from being polluted | <input id="uid" title="title1" value="1" :index.prop="index"> |
| camel | Change the naming to camel case, such as converting the view-Box attribute name to viewBox |
Two, .sync
2.1 Background
In daily development, we always encounter 父子组件the problem of two-way binding, but considering the maintainability of components, vuesubcomponents are not allowed to change propsthe value passed by the parent component. At the same time, a solution modifier is also provided in vue .sync.
2.2 .syncHow to write before the modifier
- parent component
<BT :age="age" @update:age="$event => age = $event"></BT> - Subassembly
this.$emit('update:age', 20)
The child component uses to $emit('update:xxx', newVal)send events to the parent component. Note that the event name here update:xxxis a convention, and using other event names has the same effect.
2.3 How to use .syncmodifiers
In order to facilitate this way of writing, modifiers vueare provided .sync. To put it bluntly, it is a 简写way, and we can regard it as a way 语法糖. syncIntroduced in 2.3version, as a 事件绑定 语法糖.
- parent component
<BT :age.sync="age"></BT> - Subassembly
this.$emit('update:age', 20)
3. .native
Sometimes, one will want 自定义组件to listen on one 原生事件, like this:
<BT @click="click()"></BT>
At this time click, the event does not work, you need to use .nativemodifiers:
<BT @click.native="click()"></BT>
It should be noted that to listen to an event for 普通the HTMLlabel, add .nativethe modifier after that 不会起作用. For example:
<a @click.native="click()">a</a>
It will even report an error:
[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <a>.
4. .prop
.propThe modifier is used to specify that the bound value should not bepropsparsed, but should bedombound属性to the element as.<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>
result:<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