Vue —— 事件

Ozzie發表於2019-12-17
Vue事件

本篇主要總結了Vue的事件相關知識

監聽事件

我們以 v-on 指令為例來說明對DOM事件的監聽，簡單點說，就是我們通過 v-on 來達到這樣一個目的：
當我對整個頁面進行一些操作（比如點選）時，頁面也會實時地進行一些操作（比如彈出視窗等等）

  1. 原生JS：
    • 我們設了一個點選事件，點選時頁面上的數字會 加1. 
      <div id="app">
    <!-- v-on繫結了點選事件，即click，而雙引號內的是點選時會發生的事件 -->
    <button type="button" v-on:click="counter += 1">Add</button>
    <!-- 實時反映出counter的值 -->
    <p>This is counter： {{ counter }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        counter: 0  //初始值設為0
    },
})
</script>
  2. 繫結方法：
    • 此時事件繫結著一個方法，v-on接受到的是一個要被呼叫的方法名 
      <div id="app">
    <!--這裡的add是方法名-->
    <button type="button" v-on:click="add">Add</button>
    <p>This is counter： {{ counter }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
            counter: 0
    },
    methods: {
        add: function(){
            //this方法指向當前的Vue例項，即app，其實app.counter就是這裡的counter
            this.counter += 1;
        }
        /*可以簡寫為：
        add(){
            this.counter += 1;
        }
        */
    }
})
</script>
  3. 方法傳參：
    • 除了直接繫結一個方法，也可以呼叫方法： 
      <div id="app">
    <button type="button" v-on:click="say('Hi')">Hi</button>
    <button type="button" v-on:click="say('Hello')">Hello</button>
</div>
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    methods: {
        say(msg){
            alert(msg);
        }
    }
})
</script>
  4. 訪問原生DOM事件：
    • 我們使用一個特殊的變數$event來訪問其對應的原始的事件是什麼 
      <div id="app">
<button type="button" v-on:click="one('one',$event)">one</button><br><br>
<p style="background-color: red;" v-on:mouseover="two('two',$event)">
    two
</p>
</div>
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    methods: {
        one(message,event){
            alert(message + event);
        },
        two(message,event){
            alert(message + event);
        }
    }
})
</script>

事件修飾符

v-on的事件修飾符已在另一篇博文中詳細介紹：

按鍵修飾符

v-on的按鍵修飾符以及系統修飾符已在另一篇博文中詳細介紹：

相關文章