iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

Vue 3 初學者:用實作帶你看過核心概念 系列

儘管我曾經完成過 Vue 的 side project(寵物用品電商網站),但內心總感覺對於框架的理解仍有許多不足。遇到問題時,或許我能想到某種解決方案,但卻無法靈活應對各種情境。因此,在這次的挑戰中,我計畫根據 Vue 官網的脈絡,逐步梳理每個章節的核心概念,並補充相關的實作練習。希望藉由這個過程,不僅能夠強化自己的 Vue 技能,也能幫助那些想進一步瞭解或嘗試學習 Vue 的人。

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

Vue 3 用實作帶你看過核心概念 - Day 1:前言介紹

前言 大家好,我是 Antonio(安東尼奧),目前是一名 Angular 的新手工程師,同時,也是一名熱愛寫程式的工程師。去年參加六角學院的 Vue 直播班...

2024-09-14 ‧ 由 Antonio 分享
DAY 2

Vue 3 用實作帶你看過核心概念 - Day 2:命令式編程 vs 聲明式編程

目錄 命令式編程 聲明式編程 總結 命令式編程 還記得我們在使用純 HTML 和 JavaScript 時,如何實現按下按鈕來變更文字顏色嗎?讓我們一起...

2024-09-15 ‧ 由 Antonio 分享
DAY 3

Vue 3 用實作帶你看過核心概念 - Day 3:使用 Vite 建構工具搭建 Vue 專案

目錄 Vite 環境搭建 Vue 專案(適用於正式開發環境) Step 1:安裝 Vue 套件並執行 create-vue Step 2:執行對應指令並啟...

2024-09-16 ‧ 由 Antonio 分享
DAY 4

Vue 3 用實作帶你看過核心概念 - Day 4:基於 Vite 建構工具的 Vue 專案結構解析

目錄 Vue 鷹架工具產生基於 Vite 環境的專案樹狀結構 index.html:專案的入口文件 vite.config.js:Vite 應用的配置文件...

2024-09-17 ‧ 由 Antonio 分享
DAY 5

Vue 3 用實作帶你看過核心概念 - Day 5:Options API vs Composition API

目錄 Vue 應用說明 Options API 與 Composition API 邏輯區塊寫法差異 Options API 特色說明 Compositio...

2024-09-18 ‧ 由 Antonio 分享
DAY 6

Vue 3 用實作帶你看過核心概念 - Day 6:數據綁定和模板(Template)

目錄 模板語言更新實際網頁 DOM 元素流程 文字插值(Text Interpolation) Vue 指令介紹 v-text:更新元素的文本內容,不解析H...

2024-09-19 ‧ 由 Antonio 分享
DAY 7

Vue 3 用實作帶你看過核心概念 - Day 7: 響應式基礎 - Options API

目錄 JavaScript Proxy 物件 Options API - 響應式基礎 - this(proxy object) Options API -...

2024-09-20 ‧ 由 Antonio 分享
DAY 8

Vue 3 用實作帶你看過核心概念 - Day 8:計算屬性應用與實踐

目錄 Vue Mustache 複雜邏輯情境描述 Vue Mustache 優化 - 使用 methods 存放邏輯 定時器範例展示方法重複執行問題 Vue...

2024-09-21 ‧ 由 Antonio 分享
DAY 9

Vue 3 用實作帶你看過核心概念 - Day 9:Class 與 Style 的樣式綁定

目錄 模板 Class 綁定樣式 Vue 響應式物件綁定模板寫法 - 通用屬性綁定物件 Vue Class 響應式物件綁定模板寫法 - Class 物件寫法...

2024-09-22 ‧ 由 Antonio 分享
DAY 10

Vue 3 用實作帶你看過核心概念 - Day 10:條件渲染 - v-if 與 v-show 的區別與應用

目錄 v-if 條件渲染指令 - 單個元素 v-if 條件渲染指令 - 多個元素 v-show 條件渲染指令 - 單個元素 v-if vs v-show 總...

2024-09-23 ‧ 由 Antonio 分享