9.Vue 常见的修饰符

1.修饰符分类

        1.表单修饰符

        2.事件修饰符

        3.v-bind修饰符

        4.鼠标按键修饰符

        5.键值修饰符

2.表单修饰符

        1.lazy

        2.trim

        3.number

2.1 lazy

当输入值后，光标离开标签，才会赋值给value，也就是在change事件后完成信息同步

 <input type="text" v-model.lazy="value">

2.2 trim

自动过滤用户输入的首末空格字符

 <input type="text" v-model.trim="value">

2.3 number

自动将输入的值转换为数值类型，如果这个值无法被parseFloat解析，则会返回原值

<input v-model.number="age" type="number">

3.事件修饰符

        1.stop：阻止事件冒泡

        2.prevent：阻止事件的默认行为

        3.self：只当event.target是当前元素时触发处理函数

        4.once：只触发一次当前的处理函数

        5.capture：使事件从包含这个元素的顶层开始触发

        6.passive：在移动端，我们监听滚动时，会一直触发onscroll，导致网页卡顿，使用此修饰符，相当于给onscroll事件绑定了一个.lazy修饰符，注意不要与prevent修饰符一起使用！

        7.native：让组件变得像html内置标签一样监听根元素的内置事件，否则组件上使用v-on只会监听自定义事件，使用.native操作普通HTML标签会使得事件失效。

 <button @click.stop="shout(1)">ok</button>
 <form v-on:submit.prevent="onSubmit"></form>
 <div v-on:click.self="doThat">...</div>
 <button @click.once="shout(1)">ok</button>


 <div @click.capture="shout(1)">
 obj1
 <div @click.capture="shout(2)">
 obj2
 <div @click="shout(3)">
 obj3
 <div @click="shout(4)">
 obj4
 </div>
 </div>
 </div>
 </div>
 // 输出结构: 1 2 4 3

 <div v-on:scroll.passive="onScroll">...</div>

 <my-component v-on:click.native="doSomething"></my-component>

4.鼠标修饰符

        1.left

        2.right

        3.middle

5.键值修饰符

        1.普通键（enter、tab、delete、esc）

        2.系统键（ctrl、alt、meta、shift）

//自定义键盘码别名 
Vue.config.keyCodes.f2 = 113

6.v-bind修饰符

        1.asycn

        2.prop

        3.camel

6.1 asycn

能对props值进行双向数据绑定

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。

//Father.vue
<template>
  <div>
    <child-view :name.sync="name"></child-view>
    <p>{{ name }}</p>
  </div>
</template>

<script>
import ChildView from './ChildView.vue'
export default {
  components: { ChildView },
  data () {
    return {
      name: 'adong'
    }
  }
}
</script>


//Child.vue
<template>
  <div class="about">
    {{ name }}
    <button @click="handler">点击我修改props参数</button>
  </div>

</template>

<script>
export default {
  props: ['name'],
  methods: {
    handler () {
      this.$emit('update:name', 'srd')
    }
  }
}
</script>

6.2 prop

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

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

6.3 camel

将命名变为驼峰命名

<svg :viewBox="viewBox"></svg>