前一陣子開始學vue，會在這邊紀錄學vue的一些學習筆記。
學了一段時間後，覺得可以做成筆記，所以筆記的順序可能會有點奇怪。
簡介
- 讀音類似「view」
- 一套用於建構用戶介面簡單輕量的JS漸進式框架，也能與其他前端框架與函式庫並存共⽤
- 採用MVVM的概念
- 版本目前學2.6.10，Vue 3.0 處於RFC階段
- 目前是說關於vue3.0 的部分有向下相容，所以只要學新的部分
- 入門前要會一點HTML、CSS 和 JavaScript
何謂漸進式框架?
一張圖說明這個概念
Vue.js的核心只關注於view layout的呈現，是提供最小化且必要的功能給予使用者。
其餘相關的功能項目都可用其他函式庫或是工具去協助處理。
舉例來說：
當你不想透過server-side 進行url的轉換的需求時，可以採用vue-router實現前端路由
當有跨component溝通的需求時，可以採用vuex進行狀態管理等等
也就是說根據你實際需要去堆疊出各項應用。
也可以參考這篇說明Vue.js，何謂漸進式框架？
MVVM(Model-View-ViewModel)是什麼？
M(model):資料的部分
V(view):畫面的呈現
VM(view-model):雙向數據綁定，會監聽model與view兩邊。
當使用者在操作畫面(View)時，viewModel會監聽狀態，若有改變則會同步修改資料(Model);
反之，當資料(Model)有改變時，viewModel會將改變傳回給畫面(View)。因此，不需要手動操作DOM元素也能更新資料。
相比之下，如果是使用JQuery的話是直接操作DOM元素，vue 是透過資料的狀態(Model)去變動畫面(View)。
從jQuery 到 vue
講這個之前先來一個小範例，兩個範例都是要取得輸入的值並顯示在網頁上
使用jQuery的作法 vs.使用vue的作法
jQuery
採用指令式渲染，以操作 DOM Node 為基礎的開發模式
開發方式直覺，透過 Selector 取得 DOM 就開始操作
但程式架構擴⼤複雜後，程式碼混雜不易維護
Vue
以操作物件模型為基礎的開發模式。
行為關注點放在資料 ( Model ) 與狀態
改變的是資料，而不是直接操作 DOM
其他
前陣子也去聽了一場演講不vue白不vue ─ 當天就上手的Vue新⼿教學，這邊也提供簡報給大家參考
參考資料
五倍紅寶石-Vue.js 與 Vuex 前端開發實戰課程