用Vue.js框架實作自己的Blog – CH1 新的開端

接觸前端到現在也差不多快一年半了，過去在開發前端的時後，都是使用原生javascript與jQuery以及php進行開發，雖然隨著時間推移接觸到的東西越來越多，開始有了有系統性開發與後續維護的需求，剛開始頂多就是將JS與php物件化，但還是無法完全解決頁面控制以及資料、事件、渲染、樣式控制等不同任務間的分離，所以開始接觸Vue.js框架來增加開發效率並且將原本幾乎純手刻的這個Glovecoding blog進行翻新，順便寫篇系列紀錄一下～

Beginner of Vue

在約莫半年前的時候其實就有試著自學Vue框架的想法了，但當時自己的背景知識量還不大夠，包括AJAX的運作以及同步異步的線程阻塞問題等，在當時都是我無法掌握的技術，最近把這些東西補齊並且看了根webpack相關的技術之後，才回頭撿起這個框架慢慢開始啃。Vue的框架有一個非常大的優點，尤其是對於英文較不熟練的開發者而言，因為開發Vue框架的工程師是來自中國的，所以他本身官網的技術文件都支援簡體中文，如果不習慣閱讀簡中的朋友也可以利用Chrome 的功能把它翻成繁中XD，在進入實作之前還是得先來了解一下這個框架本身的特性。

Components 組件的概念

在使用Vue框架的時候會不斷地使用到Components來進行網站頁面的組裝，依照不同的頁面需求，引入不同的components 到根(Root) 或是常見的App頁面，在這個框架中，其實整個網站結構很像一個葡萄串，從最上面的Root 到下面的頁面(View) 與組件(Component) 不斷的往下串，最終變成一個不斷串連組裝的網站結構，像我的Blog 結構大概長這樣：

整個部落格主要分為首頁、分類、關於、文章、404Notfound 五個頁面，這五個頁面會附著於#APP這個根上，而每一個頁面各自會使用到不一樣的組件進行組裝，這些組件的方便之處就在於：像是首頁與分類頁面都會使用到卡片作為文章的顯示方式，在一般的情況我們需要把相同的版型寫在不同的頁面，這就會造成在維護上的麻煩，尤其又是使用PHP生成內容的時候，只會使頁面變得越來越複雜，然而在Vue框架中，我們可以把這些會重複使用到的版型部分化做組件(Component) 他是一個獨立的模板，在需要使用到這個模板的時候，我們只需要引入這個版型即可，像blog首頁的卡片式文章顯示就是利用上圖中的紅色組件 – CardUi 所架構，而組件的運作方式在之後的文章中，我會在獨立介紹他。

資料驅動一切

在Vue框架當中，有另一項特色就在於它是利用資料驅動所有變化的，當資料發生變化時，Vue會根據我們設定的情況做出相應的改變，首先在這個架構中，資料與模板是獨立分離的，在一開始寫網頁時，我們會直接將內容寫在HTML的標籤當中，或是透過PHP在預處理階段時生成，但在Vue框架中，資料會獨立存取在Vue物件的Data中，然後在物件被實例化的Creat階段時渲染(Render) 進模板當中，像是這樣：

<template>
  <div id="app">
    <h3>{{ title }}</h3>
    <span>{{ content }}</span>
  </div>
</template>

<script>
export defalt {
  data () {
    return {
      title: 'Hello World !',
      content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.'
    }
  }
}
</script>

上面的程式碼中主要分為模板(template)與物件(script部分)，模板會定義在兩個template標籤中，在裡面我們可以設計想要的html標籤架構然後標籤中的內容我們可以使用兩個花括弧 {{ 變數 }} 中，花掛號中的變數則會對應到 script裡物件的data()中的key值，而在這個組件被創造時，Vue會將定義在data()中的這些資料渲染進定義的花括弧位置中，像是下方的輸出一樣：

<div id="app">
  <h3>Hello World !</h3>
  <span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
  </span>
</div>

當然Vue這個框架的特色並不止於此，在後續的文章中透過分享如何建置這個blog的過程中也會跟大家一步步介紹這個框架的其他功能與特色，如果對這個框架有興趣的朋友也歡迎來跟我一起交流喔～

下回在這裡來去建置環境囉！