在開始學習 Vue 之前，我想先介紹一下 Vue.JS 是什麼，以及這個框架的開發背景。我們先知道這個框架的大致方向及特色，我們就會對 Vue 這個框架有更深層的認識，未來在學習的時候也不會那麼的迷茫。老智慧說得好：「勿當無頭蒼蠅」，因此了解 Vue.JS 的背景，以及它為何而生，對我們是非常重要的。

啊對了，本教學會參考 Vue.JS 的中文官方文檔，如果讀者有需要，歡迎參閱 Vue.JS 的文檔喔！

另外，本教學的所有術語，建議新手們記起來，在實際開發的時候很常用到喔！

Vue.JS 簡介

學習一個新框架，不外乎我們要先學習這個框架名字怎麼唸。Vue 大家會怎麼唸呢？我自己會傾向於唸「View」（發音類似），詳細國際音標我這邊就不詳談了。

Vue.JS 是一個用於建構「用戶」介面的 JavaScript 框架，聽起來很複雜對吧？這邊先小小科普一下，我們熟知的網頁他是透過 HTML、JS、CSS所組成的，而為了讓畫面更有豐富度及實用性，我們可以編寫 JavaScript 來達成自己想要的功能。我們在實際開發的時候，為了方便，我們會使用前端框架做開發，而 Vue.JS 就是這一種前端框架（我們姑且先不討論 Server Side，新手在這個階段先不需理解）。

Vue 社群

在台灣，最紅的兩大框架，不外乎就是 React、Vue，而另外一個 Angular 在新創來說偏少使用，多數仍然使用 React、Vue。以我本身接案經驗來說，多數業主及甲方都是要求寫 React、Vue。而本教學是介紹 Vue，如果未來我還有空也可以來寫寫 React（前提要我有空哈哈）。

Vue 在台灣有非常龐大的社群資源，在新手這個階段，你不怕問不到人，你也不怕找不到答案，只要你想學習，資源總是有。大家可以動手在 Facebook 找找看 Vue.JS 相關的社團。

Vue 也有豐富的套件資源，讀者想要打造什麼功能，也幾乎不怕找不到套件實作，至少是在新手的現階段來說，應該功能都可以滿足了。

為什麼要使用 Vue.JS 而不使用純 JavaScript？

首先！我們要先理解一個概念，我們在編寫 Vue.JS 之後呢，我們要進行輸出，將專案打包出來。此時打包後的專案會是 JavaScript 檔，各位可以先姑且簡單理解成「編譯」。就像是讀者在寫編寫一段程式之後，需要編譯成電腦看得懂的語言。而 Vue.JS 框架編譯出來的就是 JavaScript 檔案。但這邊需要說明一下，實際的狀況他並非編譯，Vue本質還是 JavaScript，他是將.vue的檔案打包輸出成瀏覽器可以讀得懂的 JavaScript。

那我們為什麼不寫 JavaScript 呢？這是因為我們如果想要快速的建構出一套專案，我們可以選擇框架進行開發。並不是說純 JavaScript 不行，但你可以理解為有更快的做法，JavaScript 有點類似土法煉鋼。另外 Vue.JS 已經為開發者提供好了最簡潔明瞭的檔案結構，可供開發者進行開發。

傳統的 JavaScript 當中，開發者需要自己操作 DOM（文件物件模型），如果讀者不懂 DOM 是什麼，我這邊可以用一個日常的說明向讀者解釋。DOM 你可以想像成車子的檔位，當你想要提速或是減速，駕駛可能要自己打檔，也就是所謂的手排車。而在現今除了大卡車司機或是公車司機等，應該多數人都是開自排車吧？那 Vue.JS 就是自排車，它可以在底層就已經幫開發者處理好 DOM，開發者就不需要自己操作標籤，只要專心在功能開發，那當然如果讀者必要時想要自己操作 DOM 也可以。如果想要學習底層原理，歡迎再自行學習，本篇就不再贅述更底層的原理。

Vue.JS 是透過「資料綁定（Binding）」的形式，來把數值等「渲染（render）」在畫面，講明白點就是呈現在畫面上。

以下舉個例子：

傳統 JavaScript 操作 DOM

首先我們先寫一個超連結標籤：

<div id="app">
  <a href="#">這是一段連結</a>
</div>

如果我們要修改這個標籤的連結，在傳統的 JavaScript 當中我們會這樣對他進行操作 DOM，非常不方便。

const dom = document.querySelector("a") 
dom.setAttribute("href","https://google.com")

Vue 修改標籤

一樣，首先我們先寫一個超連結標籤：

<a :href="link">這是一段連結</a>

const app = Vue.createApp({
  data() {
    return {
      link: "https://google.com"
    }
  }
})

app.mount("#app")

讀者可以看到，我將 link 定義在這變數裡面，而我的 HTML 只需要綁定即可，這個觀念後面會介紹，讀者只需要先理解不同就好。

本文結尾

好了，相信各位讀者都知道為什麼要學 Vue.JS 了，我們用一句話總結就是：「開發者可以專心在開發 Vue.JS 功能上，而不用處理繁瑣複雜的 DOM」。這對開發者來說，變得更輕鬆了。

下一篇我們就來介紹 TypeScript 吧！