vue學習筆記(四)事件處理器

時間 2020-01-03

標籤 vue 學習筆記事件處理器简体版

原文原文鏈接

前言

在上一章vue學習筆記(三)class和style綁定的內容中，咱們學習瞭如何在vue中綁定class和style，介紹了經常使用的綁定方法，class的數組綁定和對象綁定以及style的數組綁定和對象綁定，本篇博客將會講解關於vue中事件的使用。javascript

其實關於事件咱們都不陌生，在學習JavaScript的時候就有接觸過，例如點擊事件，鼠標事件，鍵盤事件以及移動端的觸摸事件等等。在學習vue的事件處理以前咱們先回顧一下在Javascript中是如何綁定事件的吧！html

Javascript綁定事件

方法一：直接在標籤上綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button onclick="add()">你好</button>
        <script type="text/javascript">
            function add(){
                alert('你好')
            }
        </script>
    </body>
</html>

方法二：經過獲取節點動態綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">問候</button>
        <script type="text/javascript">
            document.getElementById('btn').onclick=function(){
                alert('你好')
            }
        </script>
    </body>
</html>

方法三：使用addEventListener監聽事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="btn">問候</button>
        <script type="text/javascript">
            document.getElementById('btn').addEventListener('click',function(){
                alert('你好')
            },false)
        </script>
    </body>
</html>

區別：vue

用「addeventlistener" 能夠屢次綁定同一個事件，且都會執行。
在DOM結構若是綁定兩個 "onclick" 事件，只會執行第一個。
在腳本經過匿名函數的方式綁定的只會執行最後一個事件。

vue中綁定事件

vue中綁定事件的方法其實和JavaScript中綁定事件都差很少，不信，咱們來看看實例就一目瞭然了。java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <button @click="greet('你好')">問候</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    
                },
                computed:{
                    
                },
                methods:{
                    greet(msg){
                        alert(msg);
                    }
                }
            })
        </script>
    </body>
</html>

如今感受是否是差很少呀！vue中的事件(方法)統一由methods管理，任何處理的方法都必須寫在這裏面。數組

接下來我講解一下vue事件處理帶括號和沒有帶括號的區別。瀏覽器

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <button @click="greet('你好',$event)">問候</button>
            <button @click="say">打招呼</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    
                },
                computed:{
                    
                },
                methods:{
                    greet(msg,event){
                        alert(msg);
                        console.log(event);
                    },
                    say(event){
                        console.log(event);
                    }
                }
            })
        </script>
    </body>
</html>

結果：app

區別：在於事件對象參數 event 的處理。不加括號時，函數第一個參數爲 event，加了括號後，須要手動傳入 $event 才能得到事件對象。函數

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。post

爲了解決這個問題，vue.js 爲 v-on 提供了事件修飾符。以前提過，修飾符是由點開頭的指令後綴來表示的，好比下面的這些。學習

.stop
.prevent
.capture
.self
.once
.passive
.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>
<!-- 點擊事件將只會觸發一次 -->
 <a v-on:click.once="doThis"></a>

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <button v-on:click.once="greet()">問候</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    
                },
                computed:{
                    
                },
                methods:{
                    greet:function(){
                        alert('你好')
                    }
                }
            })
        </script>
    </body>
</html>

示例中咱們點擊事件只能調用一次，當點擊第二次的時候它不會有任何的反應。

注意：

使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 v-on:click.prevent.self 會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

按鍵修飾符

在監聽鍵盤事件時，咱們常常須要檢查詳細的按鍵。vue 容許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符。

<!-- 只有在 `key` 是 `Enter` 時調用 `submit()方法` -->
<input v-on:keyup.enter="submit">

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <button v-on:keyup.enter="greet()">問候</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const vm=new Vue({
                el:'#app',
                data:{
                    
                },
                computed:{
                    
                },
                methods:{
                    greet:function(){
                        alert('你好')
                    }
                }
            })
        </script>
    </body>
</html>

按鍵碼

爲了在必要的狀況下支持舊瀏覽器，Vue 提供了絕大多數經常使用的按鍵碼的別名：

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

系統修飾符

能夠用以下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。

.ctrl
.alt
.shift
.meta

.exact修飾符

.exact 修飾符容許你控制由精確的系統修飾符組合觸發的事件。

<!-- 即便 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>