vuejs常用修饰符

一天一丢丢

已于 2023-01-05 12:16:27 修改

阅读量1.1k

点赞数

文章标签： vue.js 前端

于 2023-01-05 12:15:06 首次发布

本文链接：https://blog.csdn.net/letianxf/article/details/128534678

版权

一、常用修饰符

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>