監聽事件

可以用 v-on 指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 程式碼。

為button監聽點選事件

<div id="app">
    <button v-on:click="showsome">click me</button>
</div>

<script>
    var app = new Vue({
        el: '#app',
        methods: {
            showsome: function () {
                alert('click me!!'
 
);
            }
        }
    })
</script>

事件物件

1.如果在監聽事件時只寫表示式，則預設第一個引數為事件物件

<div id="app">
    <button v-on:click="showsome">click me</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            showsome: function (event)
 
 {
                console.log(event)
            }
        }
    })
</script>

2.假如在表示式中傳參，則固定$event為事件物件

<div id="app">
    <button v-on:click="showsome(123, $event)">click me</button>
</div>

<script>
    var app = new Vue({
        el: '#app',
        methods: {
            showsome: function
 
 (str, event) {
                console.log(str);
                console.log(event);
            }
        }
    })
</script>

事件冒泡

<div id="app">
    <div v-on:click="showsome('div click')">
        <button v-on:click="showsome('button click')">click me</button>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        methods: {
            showsome: function (str) {
                console.log(str);
            }
        }
    })
</script>

console :
button click
div click
先後出發兩次click事件是因為預設會有事件冒泡，阻止事件冒泡的屬性是.stop 如：

<div id="app">
    <div v-on:click="showsome('div click')">
        <button v-on:click="showsome('button click')">click me</button>
    </div>
</div>

點選button後便不會在冒泡到div上

預設事件

<div id="app">
     <a href="http://www.baidu.com" v-on:click="showsome">www.baidu.com</a>
 </div>

預設情況下會先觸發showsome，然後跳轉到baidu.com，阻止預設事件的屬性是.prevent 如：

<div id="app">
    <a href="http://www.baidu.com" v-on:click.prevent="showsome">www.baidu.com</a>
</div>

點選a標籤後只會出發showsome，不會跳轉連結