鐵人賽剩最後６天，回顧前面裝了這麼多工具和指令，還欠缺實際的應用，手上還有一本 Kuro大的『008天絕對看不完的 Vue.js 3』一直沒有好好研讀，決定在剩下的幾天來學習框架，雖然都說８天學不完了，６天更是不可能，到時候就繼續寫下去吧。

初探 Vue.js

先提供官網連結：
Vue.js官網

• 相信許多跟我一樣的前端新手在入門 Javascript的時候都會使用各種的 querySelector, getElementById 搭配 addEventListener 來操控 DOM（jQuery也是一樣的操作方式），當網頁的元素越來越多整個事件和 DOM 的操作就會越來越複雜，特別是選取 DOM 時超長的 .nextNode.nextSibling.......會讓人看的眼花撩亂。

• Vue 的特色

  1. 宣告式渲染
     相對於『宣告式渲染』的就是『指令式渲染』，指令式渲染就如前面所說的，利用 JS 或是 jQuery 針對 DOM 監聽和變更資料，內容複雜時會寫許多程式碼來觸發 n 個事件 > 取得 n 個資料狀態 > 更新到 n 個 DOM 上。
     宣告式渲染則是把資料和狀態都交由 JS 的物件來管理，只要指定好網頁的內容，Vue 物件會管理狀態並且完成內容更新，可以參考下面 Vue３ 的基本程式碼：

  <!-- HTML 部分 -->
  <div id="test"> <!-- Vue 物件的進入點d，通常在最外層，才能操控裡面所有物件 -->
      <h1>{{message}}</h1> <!-- 用兩個大括號來將對應資料放入textContent -->
      <input type="text" v-model="message"> <!-- 用 v-model 來綁定標籤屬性 -->
  </div>
  

  // JS 部分
  const vm = Vue.createApp({ // 起手式，建立一個 Vue 物件
    data() { //各種資料操作和控制的區塊
      return {
        message: 'Test'
      }
    }
  }).mount('#test'); // 用指定 vue 物件掛載到 html 指定標籤位置
  

  2. MVVM 架構
     MVVM 四個字母代表的是 Model、View 和 ViewModel 三個部分，分別代表的是：

     • Model - Plain JavaScript Objects
     • View - DOM
     • ViewModel - Vue (DOM Listeners, Data Bindings)

     接續上一段落介紹的宣告式渲染和上面三點，可以看到 Vue 包辦了監聽和資料綁定，畫面 (View) 觸發事件或是狀態 (Model)變更了，都會由 Vue (ViewModel)來處理並且同步更新畫面 (View)。

安裝 Vue.js

• Vue 非常簡易上手，只要使用 標籤引入 CDN 就可以(cdnjs）。

• 也可以用進階的方式來建置 Vue 環境：

  1. 透過 vite 安裝 Vue 3

  $ npm init vite-app hello-vue3
  

  2. 安裝 vue-cli

  $ npm install -g @vue/cli
  

  3. 建置 Vue 3 環境

  vue create hello-vue3
  

• 除此之外也可以在 VS Code 安裝 Vetur 套件，撰寫 Vue 的時候也能有高亮的效果。

  VSCode Vetur

• 上面用到的 Vite 是 Vue 的作者開發出的另外一套開發工具，Vite 的 dev server 速度一流，但前面幾天主要還是先學習 Vue 的運用，後面有機會再嘗試使用 Vite。