vue 方法與事件

xuanxuanQueen發表於2019-08-22
Vue事件

在事件繫結上，類似原生Javascript的onclick寫法，也是在HTML上進行監聽的。@click的表示式可以直接使用javascript語句，也可以是一個在Vue例項中methods選項內的函式名。

    <div id="app">
        點選次數:{{ counter }}
        <button @click="handleAdd()">+ 1</button>
        <button @click="handleAdd(10)">+ 10</button>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                counter: 0
            },
            methods: {
                handleAdd: function (count) {
                    count = count || 1;
                    //this指向當前vue例項app
                    this.counter += count;
                }
            }
        })
    </script>

vue提供了一個特殊變數$event,用於訪問原生DOM事件

    <div id="app">
        <a href="http://www.baidu.com" @click="handleClick('禁止開啟', $event)">開啟連結</a>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                counter: 0
            },
            methods: {
                handleClick: function (message, event) {
                    event.preventDefault();
                    window.alert(message);
                }
            }
        })
    </script>

在上面使用的event.preventDefault()也可以用vue事件的修飾符來實現，在@繫結的事件後加小圓點“.”，再跟一個字尾來使用修飾符。

事件修飾符

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
<!-- 阻止單擊事件繼續傳播 -->  
<a v-on:click.stop="doThis"></a> 
<!-- 提交事件不再過載頁面 -->  
<form v-on:submit.prevent="onSubmit"></form>  
<!-- 修飾符可以串聯 --> 
<a v-on:click.stop.prevent="doThat"></a> 
<!-- 只有修飾符 -->  
<form v-on:submit.prevent></form>  
<!-- 新增事件監聽器時使用事件捕獲模式 -->  
<!-- 即元素自身觸發的事件先在此處理，然後才交由內部元素進行處理 --> 
<div v-on:click.capture="doThis">...</div>  
<!-- 只當在 event.target 是當前元素自身時觸發處理函式 -->  
<!-- 即事件不是從內部元素觸發的 -->  
<div v-on:click.self="doThat">...</div>

按鍵修飾符

  • .enter
  • .tab
  • .delete (捕獲“刪除”和“退格”鍵)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

系統修飾符

  • .ctrl
  • .alt
  • .shift
  • .meta
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章