「Vue.js 學習筆記 Day1」- 建立 Vue 應用程式
程式海無涯，聽說永遠學不完，那我只好一點一點把它們寫下來囉！
Vue.js 是前端三大框架之一，有別於其他以 MVC 軟體架構的設計模式。
它採用的是類似 MVVM 的軟體架構的設計模式，全名為 Model — View — ViewModel，特色在於資料雙向綁定（View & ViewModle），以資料驅動的運作模式。
不論前端的資料或是後端的資料有所異動，都會同步更新視圖的內容，簡單說就是以資料狀態來操作畫面。
由於 Vue 的核心庫只專注於視圖層，不但很方便與其他第三方工具或現有項目整合使用，也可以搭配 Vue 生態系的開源資源使用，為開發 SPA 單頁式網站提供極佳的動能。
來建立第一個應用程式吧
首先，透過new Vue()創建一個 Vue 實例(instance)，並在裡面傳入包含屬性及方法的物件。
- el ( element )：要綁定的 DOM 元素
- data：要綁定的資料內容
同時，我們會在名為 app 應用程式的 data 當中，定義變數 text 內容。
接著，使用模板雙花括號 {{ }} 串接資料，並 render 至瀏覽器呈現畫面。
小提醒
Vue 應用程式可以水平同時存在，但不可有上下階層的關係，因為資料只會讀取最外層的 data 內容，如下圖所示：
聲明式渲染 VS. 命令式渲染
Vue.js 的核心是一個採用簡潔的模板語法，透過「聲明式渲染」將數據渲染到 DOM 元素的系統。
命令式渲染
命令式渲染通常意味著手動操作 DOM 元素，需要一步一步的告诉程式碼該如何去做，能否達成结果取決於開發者的設計邏輯和方式。
例如：去廚房，打開冰箱，從冰箱取出牛排，等候牛排解凍約 15 分鐘，接著再………。
而 jQuery 就是上述說的命令式，俗稱一個口令一個動作，使用時一定要先取得目標元素，再來把該值放入元素中，若以前面建立 Vue 應用程式的案例來改寫成 jQuery 的寫法如下：
$("#app").text("這是我的第一個 Vue 應用程式")聲明式渲染
聲明式渲染讓開發者可以更關注在狀態或資料表現，只需要告诉程式碼想要什麼结果，不用煩惱底層該如何實現。
例如：我想要吃一頓牛排大餐。
因此，Vue 透過 el 屬性決定執行範圍後，他會把應用程式 data 屬性所存入的值傳送給{{{text}}}模板，所以當資料改變時，HTML 內容也會跟著改變。
結論
當使用 Vue 作為開發套件時，我們只要專注於資料，同時，決定資料要渲染在 HTML 標籤的哪個位置，剩下的事情就交給 Vue 來處理就okay囉。
謝謝你的閱讀！如果有任何想法，也歡迎留言與我分享～如果願意給我一些小小鼓勵，請給我 1–20 個拍手；
如果覺得文章對你有點幫助，請給我 21-30 個拍手；如果非常喜歡我的技術筆記，請長按拍手按鈕（50個拍好拍滿）讓我知道哦 👏🏻最後，若希望持續追蹤我的最新文章，別忘了追蹤 皮爾斯的自學旅程 唷，乾溫 :D
