vue中的修饰符作用详细讲解

2023-11-19

一、Vue的修饰符是什么

Vue中的修饰符分为以下五种：

表单修饰符；
事件修饰符；
鼠标按键修饰符；
键值修饰符；
v-bind修饰符。

二、修饰符的作用

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">

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>

3、鼠标按钮修饰符

left左键点击、right右键点击、middle中键点击

<button @click.left="shout(1)">ok</button>

<button @click.right="shout(1)">ok</button>

<button @click.middle="shout(1)">ok</button>

4、键盘修饰符

键盘修饰符用来修饰键盘事件（onkeyup,onkeydown）的，有如下：

普通键（enter、tab、delete、space、esc、up…）
系统修饰键（ctrl、alt、meta、shift）

1 2	`// 只有按键为keyCode的时候才触发` `<input` `type="text"` `@keyup.keyCode="shout()">`

还可以通过以下方式自定义一些全局的键盘码别名

1	`Vue.config.keyCodes.f2 = 113`

5、v-bind修饰符

props设置自定义标签属性，避免暴露数据，防止污染HTML结构

1	`<input` `id="uid"` `title="title1"` `value="1"` `:index.prop="index">`

三、常用的应用场景

修饰符	应用场景
.stop	阻止事件冒泡
.native	绑定原生事件
.once	事件只执行一次
.self	将事件绑定在自身身上，相当于阻止事件冒泡
.prevent	阻止默认事件
.caption	用于事件捕获
.once	触发一次
.keyCode	监听特定键盘按下
.right	右键

四.Vue 中的 .sync 修饰符的作用

vue 修饰符sync的功能是：当一个子组件改变了一个 props的值时，这个变化也会同步到父组件中所绑定。通俗的说：.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

vue规则：

1.组件不能修改外部数据

2.this.$emit可以突发事件，并传参

3.$event可以获取$emit的参数

一个父组件app，一个子组件helloworld,子组件通过props接收父组件传过去的title,子组件通过$emit传给父组件，按照原来的写法，父组件@update:title接收子组件修改的值

通过vue中的.sync修饰符可以实现子组件与父组件的双向绑定,实现子组件同步修改父组件的值。

<template>
  <div id="app">
    <HelloWorld :title="doc.title" :content="doc.content" @update:title="doc.title = $event" @update:content="doc.content = $event"></HelloWorld>
    <HelloWorld v-bind.sync="doc"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      title: '初始标题',
      doc: {
        title: '初始标题',
        content: '初始内容',
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <div>{{ content }}</div>
    <button @click.left="changeTitle">修改标题</button>
    <button @click.right="changecontent">修改内容</button>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    title: {
      type: String
    },
    content: {
      type: String
    }
  },
  methods: {
    changeTitle() {
      this.$emit('update:title', '新标题')
    },
    changecontent() {
      this.$emit('update:content', '新内容')
    }
  }
}
</script>

<style scoped>
</style>

<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <div>{{ content }}</div>
    <button @click="changeTitle">修改标题</button>
    <button @click="changecontent">修改内容</button>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    title: {
      type: String
    },
    content: {
      type: String
    }
  },
  methods: {
    changeTitle() {
      this.$emit('update:title', '新标题')
    },
    changecontent() {
      this.$emit('update:content', '新内容')
    }
  }
}
</script>

<style scoped>
</style>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

前端

javascript