事件修饰符
事件修饰符主要用来处理 DOM 事件细节，如阻止事件冒泡、取消事件默认行为、修饰鼠标、修饰键盘等。
鼠标按键修饰
以鼠标修饰符举例，通常单击时可触发事件，我们可以将其设置成右击或者单击鼠标滚轮时触发事件，代码如下。
视图层代码如下。
<div id="app" v-cloak>
<input type="button" value="单击" @click.right="show">
</div>在 “@click” 后面加 “.right”，此时必须右击才能触发 show 方法，也可以将其设置为单击鼠标滚轮时触发，代码如下。
<div id="app" v-cloak>
<input type="button" value="单击" @click.middle="show">
</div>“.middle” 表示必须单击鼠标滚轮才能触发 show 方法。
系统修饰符
常用的系统修饰符有 .ctrl、.alt、.shift，其表示按住修饰键才能触发事件，代码如下。
<div id="app" v-cloak>
<input type="button" value="单击" @click.ctrl="show">
</div>上述代码必须在单击的同时按住 Ctrl 键，才能触发 show 方法，同理，.alt 修饰和 .shift 修饰的实现方法也是一样的。
事件修饰符
常用的事件修饰符有 .stop、.capture、.self、.prevent、.once。
.stop 阻止事件冒泡的代码如下。
视图层代码如下。
<div id="app" v-cloak>
<div class="content" @click="sayhi">
<div class="main" @click="show"></div>
</div>
</div>上述代码中，两个 div 盒子属于嵌套关系，并且都有事件，当单击 main 盒子时，首先会触发 show 方法，然后触发 sayhi 方法，这叫作事件冒泡，.stop 可以阻止事件冒泡，代码如下。
<!-- 使用 .stop 来阻止事件冒泡 -->
<div id="app" v-cloak>
<div class="content" @click="sayhi">
<div class="main" @click.stop="show"></div>
</div>
</div>此时单击 main 盒子，只会触发 show 方法。
<!-- 使用 .capture 来启用事件捕获 -->
<div id="app" v-cloak>
<div class="content" @click.capture="sayhi">
<div class="main" @click="show"></div>
</div>
</div>此时单击 main 盒子，首先触发的是 sayhi 方法，再触发 show 方法。
.self 单击元素本身触发事件，代码如下。
<!-- 使用 .self 仅在元素本身触发事件 -->
<div id="app" v-cloak>
<div class="content" @click.self="sayhi">
<div class="main" @click="show"></div>
</div>
</div>此时单击 main 盒子只能触发 show 方法，要触发 sayhi 方法则必须单击 content 盒子。
.self 和 .stop 的区别：.self 只能阻止元素自身冒泡，如果还有其他嵌套事件，会继续冒泡；.stop 是阻止整个事件冒泡。
.prevent 阻止默认事件，代码如下。
<!-- 使用 .prevent 阻止跳转，并调用 show 方法 -->
<div id="app" v-cloak>
<a href="http://www.baidu.com" @click.prevent="show">百度</a>
</div>此时单击 “百度”，并不会跳转到百度页面，.prevent 阻止了 a 标签的跳转功能，打开控制台，控制台会调用 show 方法。
.once 修饰符只生效一次，代码如下。
<!-- 使用 .once 修饰符，只生效一次 -->
<div id="app" v-cloak>
<a href="http://www.baidu.com" @click.prevent.once="show">百度</a>
</div>第一次单击 “百度”，.prevent 会阻止 a 标签的默认跳转，所以不会进行页面跳转。但是第二次单击 “百度” 页面，则会正常跳转，加上 .once 之后，.prevent 修饰符只生效一次。