iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

前端暴龍機,Vue2.x 進化 Vue3 系列

剛出社會,只會一點點 HTML, CSS, JavaScript,卻沒有框架而處處碰壁嗎? 你的痛處我也懂QQ
想當初...
哈,不過過去就過去了,現在學應該還來的急~


雖然自己 Vue 的技術只算堪用而已~~
不過還是希望透過鐵人賽的30天文章,盡力帶大家走進前端框架的大門
內容主要介紹" Vue " 這個前端框架,會從 Vue 2.x 開始介紹,到介紹 Vue 3
~第一次參加鐵人賽,期許可以挑戰成功

鐵人鍊成 | 共 30 篇文章 | 24 人訂閱 訂閱系列文 RSS系列文 團隊請付費解鎖團隊名稱
DAY 11

[前端暴龍機,Vue2.x 進化 Vue3 ] Day11.列表渲染

當我們有很多重復的架構,內容卻不一樣,以舊有無框架的開發,我們可能就需要手動一筆一筆的刻出來,更進步一點,會透過複製+貼上~再來更改內容(像是成績單,訂單,或者...

2021-09-20 ‧ 由 gior__ann 分享
DAY 12

[前端暴龍機,Vue2.x 進化 Vue3 ] Day12.事件處理

Vue 裡面的事件處理,使用的方式會跟一般 JavaScript 的用法相近,下面跟著一起看吧~ 事件處理 v-on 使用的方式為 例1.<button...

2021-09-21 ‧ 由 gior__ann 分享
DAY 13

[前端暴龍機,Vue2.x 進化 Vue3 ] Day13.Class 與 Style 綁定

除了資料的操作, Vue 也還可以跟 網頁樣式 有關係,除了內容可以用 v-if 做切換,擁有會員資格的是不是也可以讓它的介面更華麗呢? 趕快來看看~ v-bi...

2021-09-22 ‧ 由 gior__ann 分享
DAY 14

[前端暴龍機,Vue2.x 進化 Vue3 ] Day14.監聽器

雖然之前提過的 計算屬性 computed,就有監聽的功能了,不過有時候我們仍需要一個屬於自己定義的監聽器,這時就可以使用到 watch 這個更通用的方法了~點...

2021-09-23 ‧ 由 gior__ann 分享
DAY 15

[前端暴龍機,Vue2.x 進化 Vue3 ] Day15.組件介紹

當我們有時候某個功能的重複運用性較高,但每次都還要再寫一個一模一樣的功能,是不是很麻煩呢?那麼這時我們就可以好好利用 Vue 組件的功能,可以讓我們只寫一次,就...

2021-09-24 ‧ 由 gior__ann 分享
DAY 16

[前端暴龍機,Vue2.x 進化 Vue3 ] Day16.父子組件的溝通-props

在上一篇的內容中,已經介紹到了該如何寫一個組件並完成應用了,現在再繼續進入更深一點的運用吧~對於 Vue 的實體來說,我們稱之為 父組件,而在裡面所使用的稱之為...

2021-09-25 ‧ 由 gior__ann 分享
DAY 17

[前端暴龍機,Vue2.x 進化 Vue3 ] Day17.父子組件的溝通-$emit

在前一篇中,我們已經了解父組件向子組件傳遞資料了,接著來認識子組件向父組件的溝通吧 子組件向父組件溝通: $emit 子組件(傳送) this.$emit(&q...

2021-09-26 ‧ 由 gior__ann 分享
DAY 18

[前端暴龍機,Vue2.x 進化 Vue3 ] Day18.組件練習-分頁(一)

組件的部份因為有比較複雜,所以會做個小練習來熟悉一點 - 分頁的組件 分頁組件(props & $emit 運用) 快速利用簡單的分頁組件範例來寫個小練...

2021-09-27 ‧ 由 gior__ann 分享
DAY 19

[前端暴龍機,Vue2.x 進化 Vue3 ] Day19.組件練習 ref -分頁(二)

今天我們會利用上一篇的 分頁組件 範例來做更改,不過差別在於,這次我們父子組件的溝通不是透過 props & $emit 而是透過另一個方式來達成相同的...

2021-09-28 ‧ 由 gior__ann 分享
DAY 20

[前端暴龍機,Vue2.x 進化 Vue3 ] Day20. 『小專題◕ᴥ◕』 Vue 旅遊小幫手(一)

話說~ 從疫情到現在,已經不知道多久沒出去玩了~好想出去玩玩喔~ 從開賽到現在已經默默地來到第二十天了~以目前所學習的內容,已經可以開發一個小小 Vue...

2021-09-29 ‧ 由 gior__ann 分享