表单修饰符
.lazy
从这里我们可以看到，我们还在输入的时候，光标还在的时候，下面的值就已经出来了，可以说是非常地实时。
但是有时候我们希望，在我们输入完所有东西，光标离开才更新视图。
<div>
<input type="text"v-model.lazy="value">
<p>{{value}}</p>
</div>
这样即可~这样只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。
.trim
<input type="text" v-model.trim="value">
过滤多余的空格，需要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的
.prevent
<!--提交事件不再重载页面-->
<form v-on:submit.prevent="onSubmit"></form>
用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。
.self
只当事件是从事件绑定的元素本身触发时才触发回调。像下面所示，刚刚我们从.stop时候知道子元素会冒泡到父元素导致触发父元素的点击事件，当我们加了这个.self以后，我们点击button不会触发父元素的点击事件shout，只有当点击到父元素的时候（蓝色背景）才会shout~从这个self的英文翻译过来就是‘自己，本身’可以看出这个修饰符的用法
<divclass="blue"@click.self="shout(2)">
<button @click="shout(1)">ok</button>
</div>
.capture
从上面我们知道了事件的冒泡，其实完整的事件机制是：捕获阶段--目标阶段--冒泡阶段。
默认的呢，是事件触发是从目标开始往上冒泡。
当我们加了这个.capture以后呢，我们就反过来了，事件触发从包含这个元素的顶层开始往下触发。
从上面这个例子我们点击obj4的时候，就可以清楚地看出区别，obj1，obj2在捕获阶段就触发了事件，因此是先1后2，后面的obj3，obj4是默认的冒泡阶段触发，因此是先4然后冒泡到3~
.passive
当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符
鼠标修饰符
.left 左键点击
.right 右键点击
.middle 中键点击
网友评论