vue2 指令修饰符

什么是指令修饰符？

所谓指令修饰符就是通过“.”指明一些指令不同的后缀，封装了不同的处理操作，目的是为了简化代码

按键修饰符

• @keyup.enter —> 当点击enter键的时候才触发

示例：

<div id="app">
    <h3>@keyup.enter → 监听键盘回车事件</h3>
    <input @keyup.enter="fn" v-model="username" type="text">
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
          fn(){
            console.log(this.username)
          }
      }
    })
  </script>

v-model 修饰符

• v-model.trim —> 去除首位空格
• v-model.number —> 转数字

   <!--去除首尾空格-->
姓名：<input v-model.trim="username" type="text"><br>  

   <!--转数字型，如果数值不是数字不会强行转成NaN，而是不转换-->
年龄: <input v-model.number="age" type="text"><br>  

事件修饰符

• @事件名.stop —> 阻止冒泡
• @事件名.prevent —> 阻止默认行为
• @事件名.stop.prevent —> 可以连用 即阻止事件冒泡也阻止默认行为

   <!--阻止冒泡-->
   <div @click.stop="fatherFn" class="father">
      <div @click="sonFn" class="son">儿子</div>
   </div>

   <!--阻止默认事件-->
  <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>