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

一、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中键点击

1 2 3

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