12. vue中的修饰符

修饰符是用于限定类型以及类型成员的声明的一种符号

在vue中，修饰符处理了许多DOM事件的细节，分为以下五种

表单修饰符

在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model

• lazy
• 在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步

  <input type='text' v-model.lazy='value'/>
  <p>{{value}}</p>

• trim

  自动过滤用户输入的首空格字符，而中间的空格不会过滤

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

• number

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

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

事件修饰符

事件修饰符是对事件捕获以及目标进行了处理，有如下修饰符：

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

• self

  只当在 event.target 是当前元素自身时触发处理函数

    <div v-on:click.self="doThat">...</div>

• once

  绑定了事件以后只能触发一次，第二次就不会触发

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

• capture

  使事件触发从包含这个元素的顶层开始往下触发(事件捕获)

    <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

• passive

  在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">...</div>

• native

让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

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

鼠标按键修饰符

鼠标按键修饰符针对左键、右键、中键点击

• left
• right
• middle

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

键值修饰符

修饰键盘事件

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

  // 只有按键为keyCode的时候才触发
  <input type="text" @keyup.enter="shout()" @keydown.tab='test()'>

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

  Vue.config.keyCodes.f2 = 113