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

前言

大家好，我是 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

對於自己的期許

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