fbpx

接觸前端到現在也差不多快一年半了,過去在開發前端的時後,都是使用原生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的過程中也會跟大家一步步介紹這個框架的其他功能與特色,如果對這個框架有興趣的朋友也歡迎來跟我一起交流喔~

Leave a Reply