欧欧欧，在今天的文章开始前插播一则消息，今天是我生日耶✧*｡٩(ˊᗜˋ*)و✧*｡生日也要记的来发铁人，剩下没几天了加加油(๑•̀ω•́)ノ
欧给!开始吧!

昨天讲了一些v-on的例子，今天港ㄎㄨㄢˋ来看看v-on!!来介绍一下它的修饰符~

修饰符

Vue.js 提供许多後缀修饰符，依照功能可以大概分为:

• 事件修饰符
• 按键修饰符
• 系统修饰键
  用法:v-on:事件.修饰符="事件发生时做的事"

事件修饰符

在事件处理的程序中我们常常会使用到event.preventDefault()或event.stopPropagation()。虽然在methods中也可以设定，但为了让methods只有纯粹的数据逻辑，不用额外处理DOM事件细节，Vue.js为v-on提供了事件修饰符。
例如:

• .stop:阻止事件继续传播(防止事件冒泡)
• .prevent:中止预设行为发生
• .capture:设定为由外向内触发
• .self:只触发事件本身，不包含子元素
• .once:事件只触发一次
• .passive:被修饰的指令若条件符合将会立即触发，主要用在卷轴的onscroll事件上，避免滑动的时候卡卡的。

.stop

.stop修饰符会会停止事件的冒泡，在预设的情况下，触发了下层 DOM 元素的事件後，会往上叫用其他 DOM 元素的事件，但加上.stop修饰符後就只会执行完目前的事件，不会继续触发上层事件。

<div id="app">
    <div class="one" @click="out">
        <button @click.stop="inside">内层</button>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            out() {
                console.log("外层");
            },
            inside() {
                console.log("内层");
            },
        }
    });
</script>

如果我们内层的click事件没加上.stop的话，当我们点击内层按钮时，外层也会被触发。

当我们加上.stop修饰符，内层事件被触发後就会停止，所以打开console我们不会看到外层。

.prevent

.prevent修饰符会阻止元素本身预设事件发生，在这个例子，本来点下”想去google首页”就会连到我们设定的href网址，但加上.prevent後他就不会发生本来预设的状况，反而是变成我们在methods里写的在consloe跳出”去不了google首页QQ”

<div id="app">
    <a href="https://www.google.com.tw/" @click.prevent="google">想去google首页</a>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            google(){
                console.log('去不了google首页QQ')
            }
        }
    });
</script>

使用修饰符的时候顺序是很重要的! 相应的代码会按照顺序产生。如果使用v-on:click.prevent.self会阻止所有的节点，但使用v-on:click.self.prevent只会阻止元素自身的节点。

按键修饰符

在监听键盘事件的时候，我们常常会需要检查详细的按键，Vue允许位v-on在监听键盘事件时添加按键修饰符。
别名修饰符:

• .enter
• .tab
• .delete (这个修饰符也包含了退格键)
• .esc
• .space
• .up (这边和下面是方向键的上下左右，不包含WASD)
• .down
• .left
• .right

系统修饰键

可以用这些修饰符来实现仅在按下乡应按键时才触发属标或键盘事件的监听器，常搭配别名修饰符使用:

• .ctrl
• .shift
• .alt

鼠标按钮(滑鼠)修饰符:

• .right 右键
• .left 左键
• .middle 中间滚轮

参考资料
「Vue.js 学习笔记 Day5」- v-on 事件监听
Day5 vue.js - v-on 修饰符