Vue的事件處理方法

archieyang 發布于2019-08-21 12:05 / 1443人閱讀

摘要：事件處理上一篇的條件渲染與列表渲染下一篇的表單輸入綁定事件監聽指令可以用來監聽事件來執行一些代碼這個按鈕被點擊了次按鈕方法事件處理器許多事件處理的邏輯都很復雜，所以直接把代碼寫在指令中是不可行的。因此可以接收一個定義的方法來調用。

事件處理

上一篇：Vue的條件渲染與列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...

事件監聽

v-on 指令可以用來監聽dom事件來執行一些js代碼


    這個按鈕被點擊了{{msg}}次

方法事件處理器

許多事件處理的邏輯都很復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 可以接收一個定義的方法來調用。

內聯處理器方法

除了直接綁定到一個方法，也可以用內聯 JavaScript 語句：

有時也需要在內聯語句處理器中訪問原生 DOM 事件。可以用特殊變量 $event 把它傳入方法：

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題， Vue.js 為 v-on 提供了事件修飾符。通過由點(.)表示的指令后綴來調用修飾符。

.stop

.prenent

.capture

.self

.once














...


...

鍵值修飾符

在監聽鍵盤事件時，我們經常需要監測常見的鍵值。 Vue 允許為 v-on 在監聽鍵盤事件時添加關鍵修飾符。先來看看如何獲取鍵值：

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

修飾健

可以用如下修飾符開啟鼠標或鍵盤事件監聽，使在按鍵按下時發生響應。

.ctrl

.alt

.shift

.meta
比如：

同時按下ctrl和alt鍵，會有一個彈窗

鼠標按鈕修飾符

.left

.right

.middle

這些修飾符會限制處理程序監聽特定的鼠標按鍵.

To be continue......

上一篇：Vue的條件渲染與列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表單輸入綁定：https://segmentfault.com/a/11...

GPU云服務器云服務器 jquery的事件處理 asp中的事件處理大數據預處理的方法大數據的數據處理方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87437.html

Vue.js中的v-on(事件處理)

摘要：不必擔心，因為所有的事件處理方法和表達式都嚴格綁定在當前視圖的上，它不會導致任何維護上的困難。當一個被銷毀時，所有的事件處理器都會自動被刪除。 Vue.js的事件處理監聽事件我們可以用 v-on 指令監聽 DOM 事件來觸發一些 JavaScript 代碼。 {{msg}} var vm = new Vue({ el:.box, data:{ ...

YuboonaZhang 2019-08-21 12:05 評論0 收藏0
vue2.0學習筆記（事件處理）

摘要：請記住，會告訴瀏覽器你不想阻止事件的默認行為。而單單釋放也不會觸發事件。修飾符修飾符允許你控制由精確的系統修飾符組合觸發的事件。當一個被銷毀時，所有的事件處理器都會自動被刪除。 1、監聽事件用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。 Add 1 The button above has been clicked {{ counte...

bovenson 2019-08-23 18:35 評論0 收藏0
vue練習小項目

項目參考了notepad，非常感謝。用flex布局頁面，響應式，簡化了內容，當做練手vue項目項目開發過程中，遇到的問題及知識點全部記錄在下方 vue2 + vuex + flex + localStorage 本地記事本項目使用了vue cli 腳手架，webpack-simple模板,fontawesome圖標在線預覽及本地安裝 notebook github點擊預覽 npm insta...

lbool 2019-08-20 14:24 評論0 收藏0
vue.js起步式（二）

摘要：當需要和第三方的動畫庫，比如配合時會非常有用顯式聲明過渡類型新增需要給過渡元素添加事件偵聽器來偵聽過渡何時結束。在下例中我們使用注冊一個自定義的過渡元素已被插入在動畫結束后調用與相同然后用特性中漸近過渡與一起用時可以創建漸近過渡。 8.方法與事件處理器方法處理器可以用 v-on 指令監聽 DOM 事件： Greet 我們綁定了一個單擊事件處理器到一個方法 greet。下面在...

BearyChat 2019-08-20 10:29 評論0 收藏0
Vue 事件處理

摘要：事件處理監聽事件綁定可以用指令監聽事件來觸發一些代碼。可以用特殊變量把它傳入方法事件修飾符在事件處理程序中調用阻止默認行為或阻止冒泡是非常常見的需求。換一種說法如果要引發，必須按下時釋放其他的按鍵單單釋放不會引發事件。事件處理監聽事件 (綁定) 可以用 v-on 指令監聽 DOM 事件來觸發一些 JavaScript 代碼。這個按鈕被點擊了 {{numb...

villainhr 2019-08-21 16:17 評論0 收藏0