1-4. Vue.js核心知識(shí)之事件處理

darkbaby123 發(fā)布于2019-08-23 18:00 / 1293人閱讀

摘要：我們可以用指令監(jiān)聽(tīng)事件，并在觸發(fā)時(shí)運(yùn)行一些代碼。點(diǎn)擊按鈕，后面的函數(shù)會(huì)把參數(shù)帶入執(zhí)行，彈窗顯示點(diǎn)擊計(jì)算事件修飾符事件處理程序中經(jīng)常會(huì)用到或，這里幫我們很容易的就實(shí)現(xiàn)了。

我們可以用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。

監(jiān)聽(tīng)事件

事件處理方法

有些事件觸發(fā)的操作邏輯是很復(fù)雜的，甚至還需要傳遞參數(shù)，用上面的方法肯定是不現(xiàn)實(shí)的，所以這里我們可以把事件觸發(fā)操作邏輯寫(xiě)成一個(gè)函數(shù)。

事件修飾符

事件處理程序中經(jīng)常會(huì)用到 event.preventDefault() 或 event.stopPropagation() ，這里vue.js幫我們很容易的就實(shí)現(xiàn)了。















點(diǎn)擊看看



點(diǎn)擊看看

按鍵修飾符

需要監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，我們也可以使用vue.js的按鍵修飾符輕松的實(shí)現(xiàn)。








點(diǎn)擊鍵盤(pán)按鍵"Ctrl"看看





點(diǎn)擊鼠標(biāo)左鍵看看

總結(jié)

本節(jié)我們學(xué)習(xí)了vue.js的事件處理，包括事件的監(jiān)聽(tīng)、觸發(fā)方法和各種修飾符，有沒(méi)有發(fā)現(xiàn)，使用vue.js，事件處理就變得相當(dāng)簡(jiǎn)單了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104516.html

相關(guān)文章

1-1. Vue.js核心知識(shí)之實(shí)例簡(jiǎn)介

摘要：的核心庫(kù)只關(guān)注視圖層，易于上手，便于與第三方庫(kù)或既有項(xiàng)目整合。全局注冊(cè)全局注冊(cè)組件我的組件創(chuàng)建根實(shí)例渲染后的我的組件總結(jié)本節(jié)學(xué)習(xí)的核心知識(shí)點(diǎn)莫過(guò)于模板渲染表單綁定事件處理組件化這幾點(diǎn)了，下面我們針對(duì)每一個(gè)知識(shí)點(diǎn)細(xì)細(xì)學(xué)習(xí)。 Vue.js是什么 Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue.js的核心庫(kù)只關(guān)注視圖層，易于上手，便于與第三方庫(kù)或既有項(xiàng)目整合。Vue.js與現(xiàn)代化的工...

amuqiao 2019-08-23 18:00 評(píng)論0 收藏0
1-5. Vue.js核心知識(shí)之組件化

摘要：組件是最強(qiáng)大的功能之一。組件的創(chuàng)建和注冊(cè)我們可以使用注冊(cè)一個(gè)全局組件。父組件的數(shù)據(jù)需要通過(guò)才能下發(fā)到子組件中。如果傳入的數(shù)據(jù)不符合要求，會(huì)發(fā)出警告。這對(duì)于開(kāi)發(fā)給他人使用的組件非常有用。組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。組件的創(chuàng)建和注冊(cè) 我們可以使用 Vue.component(tagName, opti...

weknow619 2019-08-23 18:00 評(píng)論0 收藏0
前端開(kāi)發(fā)知識(shí)點(diǎn)整理

摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 評(píng)論0 收藏0
前端開(kāi)發(fā)知識(shí)點(diǎn)整理

摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。初衷...

Sike 2019-08-29 12:44 評(píng)論0 收藏0
前端開(kāi)發(fā)知識(shí)點(diǎn)整理

摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。初衷...

tracy 2019-08-01 16:59 評(píng)論0 收藏0