本次主題延續去年的方向,同樣以《TypeScript x Vue.js 一氣呵成 前端開發大白到大神》張益琿編著,此書為核心參考,但將焦點更深入放在 Vue.js 的應用與特色上。Vue.js 作為現今前端開發中廣受歡迎的框架,擁有簡潔易上手的語法與強大的組件化設計,能夠大幅提升開發效率與專案維護性。帶大家一同認識 Vue.js 的核心觀念、元件設計思維以及如何結合 TypeScript 提升程式的可讀性與安全性。希望透過分享,讓參與者能更加理解 Vue.js 的價值與應用潛力,進一步拓展前端開發的視野。
處理使用者互動 延續上次的內容,這次我們要介紹的章節是 「處理使用者互動」。 在前端開發中,處理使用者互動其實就是 監聽並回應使用者操作事件。 在 Vue 中,...
根據昨天寫的計步器,如果在自訂傳遞參數的基礎上,需要使用系統的Event物件參數,可以用$event來傳遞參數,例如: click(step, event) {...
事件修飾符號 學習事件修飾符號前,要先來回顧一下DOM事件的傳遞原理。當頁面觸發一個點擊事件時,事件會從父元件開始依次傳遞至子元件,這個過程通常形象地稱為事件捕...
事件修飾符號 今天接著介紹有什麼樣的場景會不希望事件進行傳遞,在昨天的例子中,當使用者點擊內層的元件時,只想讓其觸發內層元件所綁定的方法,當使用者點擊外層元件...
Vue中的事件類型 事件本身是有類型之分的,使用@click綁定的就是元素的點擊事件,如果需要透過使用者滑鼠操作行為來實現更加複雜的互動邏輯,則需要監聽更加複...
常用的事件類型 首先建立一個名為eventType.html的檔案,並撰寫程式: <!DOCTYPE html> <html lang=&qu...
按鍵修飾符號 當需要對鍵盤按鍵進行監聽時,通常會使用keyup參數,如果只是要對某個按鍵進行監聽,可以透過Event物件來判斷,例如要監聽使用者是否有按了確認...
按鍵修飾符號 昨天提到的系統修飾符號,只需要滿足條件就會觸發,以滑鼠按下事件為例,只要滿足使用者按Control鍵的時候按滑鼠按鍵,就會觸發事件,即讓使用者同...
實作一:隨滑鼠移動的小球 今天將會嘗試撰寫一段簡單的範例應用,在頁面上繪製一塊區域,在區域內繪製一個圓形球體,我們需要實現當滑鼠在區域內移動時,球體可以平滑地...