聲明：本文主要是照着官網教學自己敲了一遍，純屬動手練習，沒什麼技術含量。

事件：

事件監聽(事件綁定)：使用v-on:監聽事件，v-on:可簡寫爲@。

示例：

html中的代碼：
script中的代碼：
效果演示：

事件的處理：簡單邏輯可以直接寫在指令中，複雜一點的邏輯需要寫在方法裏。

示例：

html中的代碼：
script中的代碼：
效果演示：

事件觸發方法時的參數傳遞：可以傳遞普通參數，也可以傳遞事件對象$event。

示例：

html中的代碼：
script中的代碼：
效果演示：
注：事件對象包含的信息非常多，下面給出一個事件的組成結構(部分節點未作展開)：
- 注：我們除了纔可以從事件對象中獲取信息外，我們還可以使用事件對象調用方法。

事件修飾符：Vue認爲方法應只有純粹的數據邏輯，而不是去處理 DOM 事件細節。所以引入了事件修飾符來處理DOM事件。

事件修飾符及說明

事件修飾符	具體說明
.stop	阻止事件冒泡。舉例說明：若元素A中有元素B，元素B中有元素C；且A元素有點擊事件methodA,B元素有點擊事件methodB,C元素有點擊事件methodC;正常來講，點擊C元素，那麼會觸發methodC,methodC的邏輯處理完後會觸發methodB，methodB的邏輯處理完後會觸發methodA，這就是事件冒泡。如果使用了.stop，那麼冒泡會在當前方法執行完畢後結束，不會再往上冒泡了。
.capture	調整冒泡順序；將冒泡中的(啓用了.capture的事件)節點的執行順序提升到最前面。注：若冒泡的各節點中，同時存在多個啓用了.capture的節點，那麼會優先執行範圍較大的那個capture節點，然後執行剩下的範圍較小的那個capture節點，然後執行剩下的範圍較小的那個普通節點，然後執行剩下的範圍較大的那個普通節點。舉例說明：若正常的冒泡順序爲C-> B-> A。假設在B處加了.capture，那麼當觸發C時，冒泡順序就變爲了B-> C-> A。假設在C處和A處都加了.capture，那麼當觸發C時，冒泡順序就變爲了A-> C-> B。
.prevent	.prevent使標籤本身的默認方法不執行。 .passive使瀏覽器不檢查js中是否設置了event.preventDefault()，直接認定需要執行默認方法。注：所謂默認事件，指的是html標籤本身自帶的事件，如：<a href=“...”>標籤中，點擊跳轉至href指向的地址，就是a標籤的默認事件；再如：表單<form ...><button type="submit" ...></form>中的 submit，點擊跳轉至form指向的地址，就是表單的默認事件。注：.prevent等價於在js中調用事件對象的preventDefault方法，達到執行完js邏輯後，不執行默認事件的目的。注：對於是否需要執行默認事件，瀏覽器需要先判斷js中是否有執行事件對象的preventDefault方法，如果有執行的話，那麼就不會走默認事件，沒有執行的話，會走默認事件。而.passive的功能是直接告訴瀏覽器(壓根兒不需要檢查js中是否有執行事件對象的preventDefault方法，)需要走默認事件。注：.passive的好處是，對於一些會被頻繁觸發的事件(如：滾動事件等)，不需要瀏覽器頻繁的作preventDefault檢查，進而提升性能。
.passive
.self	當且僅當事件起始於自身時，才觸發。注：當裏面的事件往外冒泡時，是不會觸發帶有.self的事件的，因爲事件並不起始於自身。
.once	事件只會觸發一下。

示例：

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件修飾符</title>

    <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            // 允許chrome的擴展程序【vue-devtools】進行調試
            // 建議: 開發時，設置爲true; 生產時, 設置爲false
            Vue.config.devtools = true

            // ****************************************************** .stop ******************************************************
            new Vue(
                {
                    el: '#myId',
                    methods: {
                        // 自定義形參名即可
                        myAlert(param) {
                            alert(param);
                        },

                        myAlert2(abc) {
                            this.$options.methods.myAlert(abc);
                        }
                    }
                }
            );
        }
    </script>
</head>

<body>
    <span id='myId'>

        <!-- ****************************************************** .stop ******************************************************  -->
        <h3>事件修飾符之.stop</h3>
        <b>說明：divA中有divB,divB中有button</b><br />
        <div @click="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
            <div @click="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
                <button @click="myAlert('我是最裏面的button的事件')">使用事件修飾符.stop之前</button>
            </div>
        </div>

        <br />

        <div @click="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
            <div @click.stop="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
                <button @click="myAlert2('我是最裏面的button的事件')">divB使用@click.stop之後</button>
            </div>
        </div>

        <hr />

        <!-- ****************************************************** .capture ******************************************************  -->
        <h3>事件修飾符之.capture</h3>
        <b>說明：divA中有divB,divB中有button</b><br />
        <div @click="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
            <div @click="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
                <button @click="myAlert('我是最裏面的button的事件')">使用事件修飾符.capture之前</button>
            </div>
        </div>

        <br />

        <div @click="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
            <div @click.capture="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
                <button @click="myAlert2('我是最裏面的button的事件')">divB使用@click.capture之後</button>
            </div>
        </div>

        <br />

        <div @click.capture="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
            <div @click="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
                <button @click.capture="myAlert2('我是最裏面的button的事件')">divA和button都使用了@click.capture之後</button>
            </div>
        </div>

        <hr />

        <!-- ****************************************************** .prevent與.passive ******************************************************  -->
        <h3>事件修飾符之.prevent與.passive</h3>
        <!-- 執行完myAlert方法對應的邏輯後，會 執行a標籤的默認方法跳轉至http://www.baidu.com -->
        <a href="http://www.baidu.com" target="blank" @click="myAlert('未加.prevent或.passive')">未加.prevent或.passive
            點擊跳轉</a>
        <br /><br />

        <!-- 執行完myAlert方法對應的邏輯後，不會 執行a標籤的默認方法跳轉至http://www.baidu.com -->
        <a href="http://www.baidu.com" target="blank" @click.prevent="myAlert('加了.prevent')">@click.prevent點擊跳轉</a>
        <br /><br />
        <!-- 
            執行完methodOne方法對應的邏輯後，會 執行a標籤的默認方法跳轉至http://www.baidu.com 。
            即便methodOne方法中有e.preventDefault();
        -->
        <a href="http://www.baidu.com" target="blank" @click.passive="myAlert('加了.passive')">@click.passive點擊跳轉</a>

        <hr />

        
        <!-- ****************************************************** .self ******************************************************  -->
        <h3>事件修飾符之.self</h3>
        <b>說明：divA中有divB,divB中有button</b><br />
        <div @click="myAlert('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
            <div @click="myAlert('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
                <button @click="myAlert('我是最裏面的button的事件')">使用事件修飾符.self之前</button>
            </div>
        </div>

        <br />

        <div @click.self="myAlert('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
            <div @click="myAlert('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
                <button @click="myAlert('我是最裏面的button的事件')">divA使用@click.self之後</button>
            </div>
        </div>

        <hr />

        <!-- ****************************************************** .once ******************************************************  -->
        <h3>事件修飾符之.once</h3>
        <button @click="myAlert('我彈出來了~')">(沒加once的)@click</button>
        <br /> <br />
        <button @click.once="myAlert('我彈出來了~')">@click.once</button>
        <hr />
    </span id='myId'>
</body>

</html>

效果演示：

按鍵修飾符：

在監聽事件時，我們常常會用到類似於【當按下enter鍵時觸發事件】這樣的需求，在以往js中，需要主動邏輯中進行判斷，如：
Vue的按鍵修飾符爲我們簡化了上述操作，直接使用v-on:xxx1.xxx2即可，其中xxx1爲按鍵事件，xxx2爲鍵碼或鍵碼別名，如v-on:keydown.13或v-on:keydown.enter就表示：當且僅當按下回車鍵時才觸發keydown方法。

注：Vue2.x爲我們內置了一些常用的鍵碼別名：

注：有一些按鍵(.esc 以及所有的方向鍵)在 IE9 中有不同的 key 值, 如果你想支持 IE9，這些內置的別名應該是首選。

注：如果上述別名不滿足你的需求，那麼也可通過Vue.config.keyCodes.別名 = 鍵碼來自定義按鍵修飾符別名。
示例：

html中的代碼：
script中的代碼：
效果演示：

提示： Vue還有一些系統修飾鍵等，可用於控制組合觸發事件(如：按住ctrl的同時點擊鼠標左鍵進行事件觸發就屬於組合觸發事件)，這裏就不一一示例了，可詳見vue官網。

^_^ 如有不當之處，歡迎指正

^_^ 學習整理自
https://cn.vuejs.org/v2/guide/events.html
https://cn.vuejs.org/v2/api/

^_^ 本文已經被收錄進《程序員成長筆記(六)》，筆者JustryDeng

vue事件

事件：

事件監聽(事件綁定)：使用v-on:監聽事件，v-on:可簡寫爲@。

事件的處理：簡單邏輯可以直接寫在指令中，複雜一點的邏輯需要寫在方法裏。

事件觸發方法時的參數傳遞：可以傳遞普通參數，也可以傳遞事件對象$event。

事件修飾符：Vue認爲方法應只有純粹的數據邏輯，而不是去處理 DOM 事件細節。所以引入了事件修飾符來處理DOM事件。

按鍵修飾符：

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

nodejs學習06——小案例

評估統計算法在銀行僞造鈔票檢測中的價值

C# Xmlserializer 程序集內存泄露

Java ThreadPoolShutdown

5月21日相聚上海張江！與文心大模型一起共建大模型產業應用生態圈

【jdk1.8特性】之Stream(上)

vue入門示例

SpringBoot profile整合Maven profile實現多環境下配置、依賴自動切換

ThreadLocal數據觀察及原理驗證

一個走心的RedisUtil工具類

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結