事件修饰符

<!-- 阻止单击事件继续传播 -->
<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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

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

<!--让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件-->
<my-component v-on:click.native="doSomething"></my-component>

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

关于.prevent修饰符,看vue官网没看明白,看其他人的代码才看明白,代码如下:

<div @click="log(1)" @click.capture="log(11)">
    <div @click="log(2)" @click.capture="log(22)">
        <div @click="log(3)" @click.capture.stop="log(33)">
            <a @click="log(4)" @click.capture="log(44)" href="javascript: console.log('x')">stop</a>
        </div>
    </div>
</div>

<div @click="log(1)" @click.capture="log(11)">
    <div @click="log(2)" @click.capture="log(22)">
        <div @click="log(3)" @click.capture="log(33)">
            <a @click.prevent="log(4)" @click.capture="log(44)" href="javascript: console.log('x')">prevent</a>
        </div>
    </div>
</div>


log(str) {
    console.log(str)
},

输出结果如下:

// 点击stop
11
22
33
x

// 点击prevent
11
22
33
4
44
3
2
1

4比44先输出是因为在<a>标签内,@click.prevent="log(4)"写在@click.capture="log(44)"前面,没有其他原因,如果把<a>标签内的两个事件顺序换一下,4和44的输出顺序也会改变

表单修饰符

lazy

在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步
.lazy修饰符对input有效,对el-input无效

<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：阻止事件冒泡
.native：绑定原生事件
.once：事件只执行一次
.self ：将事件绑定在自身身上，相当于阻止事件冒泡
.prevent：阻止默认事件
.caption：用于事件捕获
.once：只触发一次