iT邦幫忙

2024 iThome 鐵人賽

DAY 1
5
Modern Web

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

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

  • 分享至 

  • xImage
  •  

文章背景圖

前言

大家好,我是 Antonio(安東尼奧),目前是一名 Angular 的新手工程師,同時,也是一名熱愛寫程式的工程師。去年參加六角學院的 Vue 直播班,在那時候就深深著迷著 Vue 的語言,自此這半年多的時間裡,我白天認真學習 Angular Signal,晚上則努力理解 Vue 官方文檔。

我嘗試將官方文檔中的每個概念都親自實作,使用 codepen 來驗證學習成果,這是我認為身為 Vue 新手村村民的最終任務。如果過程中有任何闡述不清楚或錯誤的地方,歡迎大家不吝指教與討論!

這系列撰寫的對象

基本的 HTML、CSS 和 JavaScript 能力加上對 Vue3 有一點點的興趣。

撰寫章節範圍

這系列主要會以 Vue3 Options API 進行概念的說明,但同時我也希望適時的補充 Vue3 Composition API 的寫法。因為我私心認為還是 Options API 在學習時幫助理解上更好,所以採取這種分配方式。

文章主要會分成三個方向進行介紹:

  1. Vue 原理說明與指令的基本應用
  2. Vue 組件使用方式
  3. Vue 路由及狀態管理

除了介紹 Vue 官網提及的 Guideline 的項目之外,也會試著在其中穿插一些我有使用到的相關工具:

  • 非同步請求:vue-axios
  • 響應式表單驗證:vee-validate
  • 路由管理:Vue Router
  • 狀態管理工具:Pinia

不負責任聲明:恩...先說好,還是會視情況看能夠撰寫到哪些部分(・ω´・ )

進行的方式

大部分實做的部分,這邊會優先透過 codepen 的方式說明,儘管寫法上一定沒有直接使用建構工具來的優雅,但是概念的理解上,我認為 codepen 會更加方便,更重要的是,我希望大家都可以直接看到那個章節闡述的概念。

我會在說明完概念的時候在下方透過箭頭圖示直接示範給大家看,若有額外重要的補充則是透過星星的方式表達。

👉 xxx 實做連結
⭐ xxx 注意事項

資料來源

最主要的來源還是來自於 Vue 官網,其餘我有參考的資料來源如下:

  1. 六角學院的 Vue 直播班影片
  2. 重新認識Vue.js | Kuro Hsu
  3. [ 想入門,我陪你 ] Vue 3 宅家輕鬆玩系列| Alex

對於自己的期許

其實準備了很久很久,但一度想過要放棄,很擔心自己撰寫的內容菜到不行。所以也是拖到了最後一天,決定好好收起不安的心情,完成這次挑戰。


下一篇
Vue 3 用實作帶你看過核心概念 - Day 2:命令式編程 vs 聲明式編程
系列文
Vue 3 初學者:用實作帶你看過核心概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ayao
iT邦新手 5 級 ‧ 2024-09-17 10:10:19

我也是拖到最後一天才報名,加油R

Antonio iT邦新手 4 級 ‧ 2024-09-17 20:07:32 檢舉

我們可以一起加油!希望可以順利完成

我要留言

立即登入留言