iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

從零開始學習TypeScript、Vue.js !! 系列

本次主題延續去年的方向,同樣以《TypeScript x Vue.js 一氣呵成 前端開發大白到大神》張益琿編著,此書為核心參考,但將焦點更深入放在 Vue.js 的應用與特色上。Vue.js 作為現今前端開發中廣受歡迎的框架,擁有簡潔易上手的語法與強大的組件化設計,能夠大幅提升開發效率與專案維護性。帶大家一同認識 Vue.js 的核心觀念、元件設計思維以及如何結合 TypeScript 提升程式的可讀性與安全性。希望透過分享,讓參與者能更加理解 Vue.js 的價值與應用潛力,進一步拓展前端開發的視野。

參賽天數 14 天 | 共 16 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1

處理使用者互動 延續上次的內容,這次我們要介紹的章節是 「處理使用者互動」。 在前端開發中,處理使用者互動其實就是 監聽並回應使用者操作事件。 在 Vue 中,...

2025-09-15 ‧ 由 jay0519 分享
DAY 2

Day 2

根據昨天寫的計步器,如果在自訂傳遞參數的基礎上,需要使用系統的Event物件參數,可以用$event來傳遞參數,例如: click(step, event) {...

2025-09-16 ‧ 由 jay0519 分享
DAY 3

Day 3

事件修飾符號 學習事件修飾符號前,要先來回顧一下DOM事件的傳遞原理。當頁面觸發一個點擊事件時,事件會從父元件開始依次傳遞至子元件,這個過程通常形象地稱為事件捕...

2025-09-17 ‧ 由 jay0519 分享
DAY 4

Day 4

事件修飾符號 今天接著介紹有什麼樣的場景會不希望事件進行傳遞,在昨天的例子中,當使用者點擊內層的元件時,只想讓其觸發內層元件所綁定的方法,當使用者點擊外層元件...

2025-09-18 ‧ 由 jay0519 分享
DAY 5

Day 5

Vue中的事件類型 事件本身是有類型之分的,使用@click綁定的就是元素的點擊事件,如果需要透過使用者滑鼠操作行為來實現更加複雜的互動邏輯,則需要監聽更加複...

2025-09-19 ‧ 由 jay0519 分享
DAY 6

Day 6

常用的事件類型 首先建立一個名為eventType.html的檔案,並撰寫程式: <!DOCTYPE html> <html lang=&qu...

2025-09-20 ‧ 由 jay0519 分享
DAY 7

Day 7

按鍵修飾符號 當需要對鍵盤按鍵進行監聽時,通常會使用keyup參數,如果只是要對某個按鍵進行監聽,可以透過Event物件來判斷,例如要監聽使用者是否有按了確認...

2025-09-21 ‧ 由 jay0519 分享
DAY 8

Day 8

按鍵修飾符號 昨天提到的系統修飾符號,只需要滿足條件就會觸發,以滑鼠按下事件為例,只要滿足使用者按Control鍵的時候按滑鼠按鍵,就會觸發事件,即讓使用者同...

2025-09-22 ‧ 由 jay0519 分享
DAY 9

Day 9

實作一:隨滑鼠移動的小球 今天將會嘗試撰寫一段簡單的範例應用,在頁面上繪製一塊區域,在區域內繪製一個圓形球體,我們需要實現當滑鼠在區域內移動時,球體可以平滑地...

2025-09-23 ‧ 由 jay0519 分享
DAY 10

Day 10

實作一:隨著滑鼠移動的小球 根據昨天的實作,其實已經能做出一個基礎監聽滑鼠事件的程式了,今天將要稍微做一點創新,為昨天的這個程式增添一點新意。 程式碼如下:...

2025-09-24 ‧ 由 jay0519 分享