iT邦幫忙

鐵人檔案

2025 iThome 鐵人賽
回列表
Vue.js

從零開始的Vue之旅 系列

分享第一次接觸Vue.js的新手,從認識Vue開始,學習基礎操作、核心功能,到能實際寫出小專案的成長紀錄篇。

參賽天數 25 天 | 共 25 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文 團隊Orbit Coders
DAY 1

前言

本身是有稍微接觸過設計前端網頁的學生,了解HTML,CSS,JS的基礎概念,寫過幾項小專案,之前接觸過react,而這次是因為比賽的契機,才認識到vue,身為第...

2025-09-13 ‧ 由 angel_1024 分享
DAY 2

認識vue.js(上)

上一篇稍微提到幾項vue的優點,這篇來詳細介紹vue吧! 到vue的官網查看,映入眼簾的第一句話就是「漸進式JavaScript框架」,那什麼是漸進式框架? 漸...

2025-09-14 ‧ 由 angel_1024 分享
DAY 3

認識vue.js(下)

今天接著講vue.js另外一項核心功能--元件化組件元件化組件(Component System)將使用者介面拆解成一個個不利且能重複使用的零件(元件),並利用...

2025-09-15 ‧ 由 angel_1024 分享
DAY 4

安裝Vue.js

好的今天來介紹一下怎麼安裝vue.js。我本身已經安裝好VSCode跟Node.js以及npm,所以這裡直接跳到安裝vue.js的部分,各位如果還沒安裝VSCo...

2025-09-16 ‧ 由 angel_1024 分享
DAY 5

簡介Vite & Hello Vue

今天開頭先提一下,如果是照Day4的方式建專案的各位,我們建的是一個基於Vite的Vue專案喔在專案中應該會看到vite.config.js和package.j...

2025-09-17 ‧ 由 angel_1024 分享
DAY 6

套件安裝建議

再來我們在VS Code安裝一些vue.js的相關擴充套件,讓我們撰寫程式時更方便點擊紅圈中的圖示就能到搜尋套件的畫面。 在搜尋列輸入下列兩項套件並安裝 V...

2025-09-18 ‧ 由 angel_1024 分享
DAY 7

專案結構介紹 & ref和reactive函式介紹

今天先介紹一下專案架構,認識一些資料夾與檔案負責的主要功能,及資料傳送的流程 src/ : 程式的核心,幾乎所有的程式都寫在這裡,基本上我們會將程式碼目錄...

2025-09-19 ‧ 由 angel_1024 分享
DAY 8

語法介紹Part1-基本互動、雙向綁定、條件渲染

今天來看看vue有哪些基礎但重要的語法吧這些程式基本上都是從Vue的官網上抓來的,大家也可以到官網查詢相關資料,練習或觀察範例 v-bindv-bind : 將...

2025-09-20 ‧ 由 angel_1024 分享
DAY 9

Day 9-語法介紹Part2-列表渲染&計算屬性

今天繼續介紹Vue的語法 v-forv-for在官網上是寫List Rendering(列表渲染),不過v-for的執行方式就像我們一般寫for迴圈,藉由v-f...

2025-09-21 ‧ 由 angel_1024 分享
DAY 10

語法介紹Part3-Lifecycle Hooks&模板參考

今天來談一些vue的核心概念 Lifecycle&Lifecycle HooksLifecycle:生命週期,每個元件都有一個從「創建 ->使用...

2025-09-22 ‧ 由 angel_1024 分享