Vue事件修饰符笔记

事件修饰符

   (1) .stop 阻止事件冒泡(事件从下向上冒泡似的触发)
        语法:
            v-on:事件类型.stop="事件执行函数名"
        或  @事件类型.stop="事件发生函数名"
   (2) .prevent 阻止默认事件
        语法:
            v-on:事件类型.prevent="事件执行函数名"
        或  @事件类型.prevent="事件发生函数名"
            @contextmenu.prevent="btnHandler"
   (3) .capture 添加事件侦听器时使用事件捕获模式
        语法：
            v-on:事件类型.capture="事件执行函数名"
        或  @事件类型.capture="事件执行函数名"
   (4) .self 当事件在该元素本身上触发时触发回调
        语法:
            v-on：事件类型.self="事件执行函数名"
        或  @事件类型.self="事件执行函数名"
   (5) .once 事件只触发一次
        语法:
            v-on:事件类型.once="事件执行函数名"
        或  @事件类型.once="事件执行函数名"
   (6)  .lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
        <input v-model.lazy="msg" >
   (7)  .number   如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
        <input v-model.number="age" type="number">
   (9)  .trim  如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
        <input v-model.trim="msg">

    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>

    <!-- click 事件只能点击一次，2.1.4版本新增 -->
    <a v-on:click.once="doThis"></a>