iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Vue.js

這是我的 Vue.js 筆記,不知道有沒有機會幫到你 系列

Vue.js ,一個已經不算新的前端框架,尤雨溪大大在 2023年Laravel x Vue Conf 驚嘆這框架已經走了將近十個年頭。這十年間從 Vue2 到 Vue3 的迭代,也有許多人寫下這套框架的教學與筆記。甚至Vue的官方文件,清晰度說是框架文件的頂標也不為過。

有句話說,最適合自己的老師,往往是跟自己學習進度相近的那位。
如果我把自己目前所知、所學的內容用我能表達的話語紀錄下來,不知道有沒有機會幫到跟我有相同經驗的人?我還不知道。

或許,在30天之後,甚至這場賽事過後的好幾年,會有機會幫助到還不懂什麼是框架,有想要探究 Vue.js 的你/妳。

鐵人鍊成 | 共 30 篇文章 | 22 人訂閱 訂閱系列文 RSS系列文
DAY 21

我的 Vue.js 筆記(21) - 元件之間的溝通:props

前言 這篇文章來記錄一下,當父層元件傳遞資料給子層元件的語法:props props 我們已經知道在模版中要使用元件,會是這樣的語法: <div id=&...

2023-10-06 ‧ 由 imall 分享
DAY 22

我的 Vue.js 筆記(22) - 元件之間的溝通:emit

前言 前篇說到,在定義好元件之後,如果元件需要透過「外部」傳入狀態,可以使用 props 來傳遞,同時也提到 props 應該是 readonly 的特性,不該...

2023-10-07 ‧ 由 imall 分享
DAY 23

我的 Vue.js 筆記(23) - 在元件與元件之間使用 v-model

前言 之前提到,元件如果要接收資料,必須用 props元件如果要向外傳資料,則是定義 emit 事件 假設我們的元件有個 <input> 標籤,我們...

2023-10-08 ‧ 由 imall 分享
DAY 24

我的 Vue.js 筆記(24) - 動態元件 is 與 keep-alive

動態元件 網頁中有一種常見的功能,是能做到某個區塊可以點選畫面中的按鈕(或標籤)進行資料的抽換,這種功能在電商網站就很常會看到。 在 Vue 中要實踐這種功能,...

2023-10-09 ‧ 由 imall 分享
DAY 25

我的 Vue.js 筆記(25) - slot 插槽

前言 不知道大家在開始使用元件的時候有沒有一個疑惑,明明元件在模版中的寫法跟一般的 HTML 標籤沒兩樣 <my-component></my...

2023-10-10 ‧ 由 imall 分享
DAY 26

我的 Vue.js 筆記(26) - 使用 Vite 開發 Vue

Vite 的簡易介紹 之前所有的操作項目,都是直接使用 CDN 引入 Vue 之後進行開發,這種做法在一個小型的應用程式足以感受到 Vue 的方便性。 不過一個...

2023-10-11 ‧ 由 imall 分享
DAY 27

我的 Vue.js 筆記(27) - 使用 Vue Router

前言 傳統網頁的網址,以往會是後端根據不同的頁面去配置不同的網址規則。 不過如果要使用 Vue 框架開發網頁,會是「單一頁面網站」 (Sigle Page Ap...

2023-10-12 ‧ 由 imall 分享
DAY 28

我的 Vue.js 筆記(28) - 認識大鳳梨

前言 我們已經知道元件與元件之間的溝通可以使用 props 與 emits,不過這東西就只能設定兩個元件溝通的狀態。 如果我們的元件樹的結構長得比較複雜一點,尾...

2023-10-13 ‧ 由 imall 分享
DAY 29

我的 Vue.js 筆記(29) - 將專案打包上版到 GitHub Pages

前言 多年前筆者初次接觸框架時,不對...應該是開始寫網頁程式時,最大的疑惑莫過於那個在 localhost 執行的東西,該怎麼實際讓人家有辦法透過網只看到內容...

2023-10-14 ‧ 由 imall 分享
DAY 30

我的 Vue.js 筆記(30) - Vue 的版本代號與參賽後記

前言 這篇文章來回收 為什麼選 Vue? 所埋的伏筆。 我就先說了,這篇應該不會是什麼太正經的文章,純粹是最後一天放飛自我的內容 XD Vue 的版本代號 會想...

2023-10-15 ‧ 由 imall 分享