Vue.js 基礎入門
Vue.js 入門基礎
初識
前端技術發展:
HTML 網頁結構
掌握HTML是網頁的核心，是一種製作全球資訊網頁面的標準語言，是全球資訊網瀏覽器使用的一種語言，它消除了不同計算機之間資訊交流的障礙。因此，它是網路上應用最為廣泛的語言，也是構成網頁文件的主要語言，學好HTML是成為Web開發人員的基本條件。
HTML是一種標記語言，能夠實現Web頁面並在瀏覽器中顯示。HTML5作為HTML的最新版本，引入了多項新技術，大大增強了對於應用的支援能力，使得Web技術不再侷限於呈現網頁內容。
隨著CSS、JavaScript、Flash等技術的發展，Web對於應用的處理能力逐漸增強，使用者瀏覽網頁的體驗已經有了較大的改善。不過HTML5中的幾項新技術實現了質的突破，使得Web技術首次被認為能夠接近於本地原生應用技術，開發Web應用真正成為開發者的一個選擇。
HTML5可以使開發者的工作大大簡化，理論上單次開發就可以在不同平臺藉助瀏覽器執行，降低開發的成本，這也是產業界普遍認為HTML5技術的主要優點之一。AppMobi、摩托羅拉、Sencha、Appcelerator等公司均已推出了較為成熟的開發工具，支援HTML5應用的發展。
CSS 頁面效果
JavaScript 頁面邏輯、行為、動作 提供互動效果
單頁應用
前端開發的一種，通過 Ajax 非同步載入新的資料，改變頁面內容，為了更簡單的使用出現了 Angular、React、Vue 等框架
補充：
構建大型互動專案、需大量的 JavaScript 程式碼操作DOM(文件物件模型)
DOM(文件物件模型)：文件物件模型（Document Object Model，簡稱DOM），是
jQuery：一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（框架）於2006年1月由
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能介面；具有高效靈活的CSS選擇器，並且可對CSS選擇器進行擴充套件；擁有便捷的外掛擴充套件機制和豐富的外掛。
什麼是 Vue
構建使用者介面的漸進式框架，自底向上逐漸應用
通過虛擬DOM 技術來減少對DOM 的直接操作
通過API 實現響應的資料繫結，支援單、雙向資料繫結
元件特徵：提高開發效率，程式碼更易複用、提高專案的可維護性、便於團隊協同開發
Vue 與現代化的工具鏈以及各種支援類庫結合使用，能完全為複雜的單頁應用提供驅動
Vue 資料驅動
中心思想：一切都是元件
Vue.js的資料驅動就是通過MVVM這種框架來實現的。
MVVM框架主要包含3個部分: Model、View和 ViewModel。
Model: 指的是資料部分，對應到前端相當於JavaScript物件。
View: 指的是檢視部分，對應前端相當於DOM(處理檢視)。
ViewModel: 就是連線檢視與資料的中介軟體通訊（監聽Model、View的修改），觀察者: 實現檢視、模型的互相理解。
資料(Model)和檢視(View)是不能直接通訊的，而是需要通過ViewModel來實現雙方的通訊。當資料變化的時候，ViewModel能夠監聽到這種變化，並及時的通知view做出修改。同樣的，當頁面有事件觸發時，ViewModel也能夠監聽到事件，並通知model進行響應。ViewModel就相當於一個觀察者，監控著雙方的動作，並及時通知對方進行相應的操作。
Vue 優勢
秉承了Angular和React 框架的優勢、程式碼簡潔易上手
輕量級：與Angular 相比簡單直接，使用友好
資料繫結：MVVM 框架，雙向繫結，檢視、資料同時變化
指令：內建指令和自定義指令
“v-”開頭，作用於HTML 元素
外掛：MyPlugin.install 完成外掛的編寫，可全域性使用
基於以來追蹤的觀察系統並且使用非同步佇列更新，所有資料獨立觸發
元件間可實現巢狀，以“*.vue” 檔案格式，需編譯才可使用
補充：
React 依賴虛擬DOM
Vue 使用DOM 模板（使用帶具有複雜互動邏輯的前端應用中）