vue 常用修饰符

事件修饰符：
    .prevent: 提交事件不再重载页面,相当于调用了event.preventDefault()方法

<a @click.prevent="test">test</a>

    .stop: 阻止单击事件冒泡,相当于调用了event.stopPropagation()方法

<button @click.stop="test">test</button>

    .self: 当事件发生在该元素本身而不是子元素的时候会触发

<div @click.self="test">test</div>

    .capture: 事件的完整机制是捕获-目标-冒泡，事件触发是目标往外冒泡

<!-- 使用事件的捕获模式 -->
<div class="box1" @click.capture="showMsg(1)">
        div1
    <div class="box2" @click="showMsg(2)">
        div2
    </div>
</div>

    .once: 事件只能用一次，无论点击几次，执行一次之后都不会再执行

<div @click.once="test">test</div>

表单修饰符
    .trim: 输入首尾空格过滤

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

    .number: 输入字符串转为有效的数字

<iput type="text" v-model.number="value">

    .lazy: 取代 input 监听 change 事件

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

    .native：组件绑定当前组件的事件是不会触发的，需要用native才能触发

<input @keyup.enter="myClick()"></input>

<el-input @keyup.enter.native="myClick()"></el-input>

以上两个例子都能够通过键盘事件触发myClick()方法，为什么在<el-input ></el-input>上需要.native才能触发成功？

原因：

使用 v-on 的 .native可以将原生事件（此处的键盘事件）绑定到组件上，也就是说此处的.native可以将键盘事件绑定到<el-input>组件上

    .sync：对prop进行双向绑定
    .passive：addEventListener中的第三个参数，表示 listener 永远不会调用 preventDefault()