v-on指令的使用

先上圖，我們?cè)O(shè)置兩個(gè)按鈕：

第一種我們直接在行內(nèi)進(jìn)行運(yùn)算，通過(guò)v-on綁定click點(diǎn)擊事件，當(dāng)點(diǎn)擊按鈕時(shí)，可以直接加一

第二種我們給按鈕綁定一個(gè)sub方法，再在methods里面來(lái)定義這個(gè)方法，也能夠?qū)崿F(xiàn)同樣的功能
<div id="app">
    {{ count }}
    <br>
    <button v-on:click="count += 1">加1</button>
    <br>
    <button v-on:click="sub">減1</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            count: 1
        },
        methods: {
            sub(){
                this.count -= 1
            }
        }
    })
</script>

運(yùn)行結(jié)果如下

當(dāng)我們點(diǎn)擊加1時(shí)數(shù)字就會(huì)加1，當(dāng)點(diǎn)擊減1數(shù)字就會(huì)減1

vue官方給這個(gè)v-on設(shè)置了@替代符，使用@符號(hào)就等于v-on：，所以以上代碼可以如下書寫

<div id="app">
    {{ count }}
    <br>
    <button @click="count += 1">加1</button>
    <br>
    <button @click="sub">減1</button>
</div>

事件修飾符的作用

示例 示例說(shuō)明
@click.stop 阻止單擊事件冒泡
@submit.prevent 提交頁(yè)面不再重載頁(yè)面
@click.capture 添加事件監(jiān)聽器時(shí)使用事件捕獲模式
@click.self 只有當(dāng)單擊事件是元素的自身事件時(shí)，才會(huì)觸發(fā)
@click.once 只觸發(fā)一次。

總結(jié)：v-on指令用來(lái)綁定事件，既可以直接行內(nèi)運(yùn)算，還能夠定義方法；事件修飾符就是用來(lái)對(duì)點(diǎn)擊事件存在的一些默認(rèn)行為進(jìn)行設(shè)置的，例如事件冒泡，事件捕獲等等