JavaScript >> Javascript 文檔 >  >> JavaScript

使用 v-on 處理 Vue 事件指南:鼠標、鍵盤、表單和自定義事件

簡介

事件處理 在嘗試製作交互式應用程序時,這是一個非常重要的概念。一般來說,事件 是用戶和我們的應用程序之間交互的標誌——點擊、在鍵盤上輸入等等。交互式和反應式應用程序本質上是圍繞對事件做出反應的概念構建的——每次檢測到事件時,應用程序都會調用相應的函數來處理檢測到的事件。

Vue 也不例外。它有一個事件處理機制,允許您從每個獨立的組件文件中捕獲和處理事件。事件可以作為用戶輸入出現,也可以在代碼中手動創建並在需要時發出。

v-on Vue 中的指令

Vue 使用 v-on 用於捕獲和處理事件的指令。它定義了一個它監聽的 DOM 事件,並分配了一個 JavaScript 函數,該函數在檢測到事件時運行:

<div v-on:click="handleClick"/>
<div @click="handleClick"/>

注意: v-on 指令可與 @ 互換使用 符號 - v-on:event-name 等於 @event-name .

Vue 中的常見事件

有很多可以捕捉的事件!但是,並非所有這些都每天都在使用。您通常要跟踪的大多數事件可以分為三類:鼠標 , 鍵盤 , 和 表單事件 .

他們每個人都有一些特定的區別,所以讓我們更深入地了解每個單獨的組以及如何處理它們。

Vue 中的鼠標事件

鼠標事件 每次用戶單擊、拖動、放下或用鼠標對特定項目執行某些操作時都會觸發。例如,以下代碼會在用戶點擊時提示警報 使用 v-on:click 的按鈕 :

<div>
    <!-- `v-on:click` detects the click event -->
    <button v-on:click="showAlert('Thank you for clicking the button!')" >
        Show alert
    </button>
</div>

<script>
export default {
    methods: {
        showAlert: (message) => {
            alert(message);
        }
    }
};
</script>

或者,我們可以使用 @ 符號並避免使用 v-on 如下圖:

<div>
    <button @click="showAlert('Thank you for clicking the button!')">
        Show alert
    </button>
</div>

Vue 中的鍵盤事件

鍵盤事件 當用戶在鍵盤上鍵入特定按鈕時觸發。您可以在用戶按下某個鍵時註冊一個事件 (keydown ),開始按鍵(keypress ),或釋放一個鍵 (keyup ):

<input type='text' placeholder='Type something' @keypress='handleKeyPressed' @keydown='handleKeyDown' @keyup='handleKeyUp' />

例如,假設當我們按下鍵盤上的回車鍵時,我們想要一個警報來顯示輸入字段中輸入的內容。這可以使用 @keyup.enter 輕鬆實現 :

<div>
    <input type="text" v-model="name" @keyup.enter="showAlert(name)" />
</div>

<script>
export default {
    data() {
        return {
            name: ""
        };
    },
    methods: {
        showAlert: (message) => {
            alert(message);
        }
    }
};
</script>

看看上面的代碼,你會注意到我們添加了 key event modifiers - 如.enter . Vue 中的鍵事件修飾符為監聽鍵盤輸入提供了廣泛的支持。

按鍵事件修飾符遵循結構:

v-on.keyevent.keyname
// Or
v-on.keyevent.keycode

注意: 密鑰代碼通常已被棄用,您應該避免使用它們,因為大多數現代瀏覽器不再支持它們。僅出於遺留原因使用它們是合理的 - 如果您需要支持不支持鍵名修飾符的舊瀏覽器。

Vue 通過為最常用的鍵碼 - .enter 提供別名,讓您的工作更輕鬆 , .tab , .delete (封裝了“Delete”和“Backspace”鍵),.esc , .space , .up , .down , .left , .right .

鍵名遵循 Vue 中的簡單命名約定。您應該知道的第一件事是您可以在 KeyboardEvent.key 中找到所有有效的鍵名 .這些名稱使用駝峰式大小寫(例如 CapsLock ),但 Vue 中的鍵名使用 kebab 大小寫 (例如 caps-lock )。

因此,要找到有效的 Vue 鍵名,請查看其在 KeyboardEvent.key 中的名稱 並將其轉換為烤肉串盒。就這麼簡單!

注意: 你也可以連鎖 多個鍵名,例如 v-on.keyup.ctrl.enter .

如果您必須使用密鑰代碼,您可以再次使用,即使不建議這樣做:

<input type="text" v-model="name" @keyup.13="showAlert(name)" />

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

第 13 個鍵是 “Enter” .

注意: 您可以在此處檢查密鑰代碼。

Vue 中的表單事件

表單事件 由表單操作觸發,例如提交、輸入字段更改等等 - 使用像 :submit 這樣的事件名稱 , :change , :reset .以下代碼說明瞭如何在提交表單數據時彈出警告消息:

<form className="new-task" @submit="handleSubmit">
    <input
        type="text"
        placeholder="Type to add new tasks"
        v-model="newTask"
    />
</form>

<script>
export default {
    data() {
        return {
            newTask: ""
        };
    },
    methods: {
        handleSubmit() {
            alert(this.newTask);
        }
    }
};
</script>

在 JavaScript 應用程序中管理表單提交時應記住的一件事是您必須使用本機 preventDefault() 在運行表單處理函數之前提交事件的函數。否則,頁面將在表單驗證函數有機會驗證表單之前被重定向。這是因為默認情況下,下一個預期操作是將數據轉發到服務器的 REST API,而我們這裡沒有。

這可以通過添加 prevent 使用 Vue 輕鬆完成 事件修飾符 直接到表單模板,而不是在您的處理程序中手動執行。添加時,prevent 修飾符確保提交事件不會重新加載頁面。值得注意的是,修飾符是在.之後插入的 在指令中:

<form @submit.prevent="handleSubmit"></form>

Vue 提供了幾個事件修飾符 在常見的事件處理場景中很有用:

  • .stop - 停止傳播點擊事件:
<a v-on:click.stop="doThis"></a>
  • .capture - 在父元素中針對子元素的事件首先由父元素處理,然後再委託給子元素:
<div v-on:click.capture="doThis"></div>

還有其他像 .self , .once , .passive 等。

注意: 修飾符可以鏈接 也是。例如 v-on:click.stop.prevent="handleClick" .

在 Vue 中編寫和發出自定義事件

到目前為止,我們已經討論了處理原生事件。現在,讓我們看看如何讓組件發出自己的事件 , 鑑於 Vue 是一個基於組件的框架 .

假設我們想要一個子組件向父組件傳遞信息。道具數據只能從父母發送給孩子,不能反過來,因此我們不能在這裡使用它。一個解決方案是讓子組件發出一個事件,讓父組件監聽它。

當您希望發出事件時,請使用 this.$emit("my-event-name") 從子組件。假設我們有一個組件 ChildComponent 必須通知其父 MainPage 它已經關閉了。

子組件

export default {
	methods: {
		onClose() {
			this.$emit('close-dialog');
		},
	},
};

此外,您還可以在自定義事件中發送數據。 MainPage 可以在 close-dialog 的處理函數中訪問該數據 事件:

onClose() {
    this.$emit("close-dialog", { time: Date.now() });
}

主頁面

父組件(MainPage ) 然後可以像處理原生事件一樣處理自定義事件。

<div>
    <dialog-component @close-dialog="handleEvent" />
</div>

事件處理程序可以訪問 close-dialog 時發送的數據 事件已發出:

handleEvent ({ time }) {
    console.log(`The Dialog was closed at ${time}`);
}

結論

在本文中,我們學習瞭如何使用 v-on 在 Vue 中處理事件 .我們已經解釋了最常見的事件類型——鼠標事件、表單事件和鍵盤事件。

此外,我們還解釋瞭如何在 Vue 中創建自定義事件。看完這篇文章,你應該對 Vue 中的事件處理有一個全面的了解,你應該能夠處理所有的原生事件,並且能夠從澱粉中創建自己的自定義事件。


Tutorial JavaScript 教程
  1. 反應至今

  2. Typescript:抽象泛型類的子類類型

  3. 向靜態網站添加評論

  4. React lazy 失敗時如何重試

  5. 幫助參考數據的技巧

  6. 理解 RxJS 用例(第二部分)

  7. 命令式與聲明式編程

  1. 2019 年對象存儲的最佳地點是什麼?

  2. 我的哇,我不知道!與 Jest 的時刻

  3. 幽靈 CMS,WordPress 上的類固醇?

  4. 嘗試基本的 SVG

  5. 在 JavaScript 中使用 JSON 數據的備忘單

  6. ReactJS 中的初學者友好的雜貨清單應用程序

  7. 使用 loadio 管理 React 的加載狀態要容易得多

  1. 使用 accounts-js 和 Apollo GraphQL 進行電子郵件和密碼身份驗證 - 第 1 部分 - 設置 GraphQL 服務器

  2. 使用 XState 並行狀態構建增量視圖

  3. 17 多篇 7 月學習 Javascript 的文章

  4. 使用 Google 的 OAuth、Passport.js 和 Express 進行授權 - 第 1 部分