一、Vue.js是什麼？
Vue.js是一套構建用戶界面（view）的MVVM框架。Vue.js的核心庫只關注視圖層，目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
vue兩大特點：響應式編程、組件化
vue的優勢：輕量級框架、簡單易學、雙向數據綁定、組件化、視圖、數據和結構的分離、虛擬DOM、運行速度快。
開發中常見的高級功能，比如
• 解輯視圖與數據。
• 可複用的組件
• 前端路由．
• 狀態管理
• 虛擬 DO ( Virtual DOM)
1.1什麼是MVVM？
MVVM模式
MVVM可以拆分成：View — ViewModel — Model三部分
M: model 業務模型，用處：處理數據，提供數據
V: view 用戶界面、用戶視圖
看下面的視圖：
上圖中，左側的View相當於我們的DOM內容，我們所看到的頁面視圖，右側的Model相當於我們的數據對象
業務模型model中的數據發生改變的時候，用戶視圖view也隨之變化。用戶視圖view改變的時候，業務模型model中的數據也可以發生改變，而這個過程就是有ViewModel來操作的，不需要你手動地去寫代碼去實現（你不用再手動操作DOM了）。
1.2. Vue.js有什麼不同
（1）jquery：輕量級的js庫
（2） vue：前端js庫，是一個精簡的MVVM，它專注於MVVM模型的viewModel層，通過雙向數據綁定把view和model層連接起來，通過對數據的操作就可以完成對頁面視圖的渲染。
（3）vue和jquery對比：
vue是通過vue對象將數據和view完全分離開的，對數據操作不在引用相應的DOM對象；主要是操作數據
jQuery是使用選擇器（$）選取DOM對象，並對其進行賦值、取值、事件綁定等操作；主要是操作DOM
二、如何使用Vue.js
在一個html文件中，我們直接可以通過script標籤引入Vue.js，然後就可以在頁面裏寫Vue.js代碼了。下圖中我們通過new Vue()構建了一個Vue的實例
可以包含掛在元素（el），數據（data），模板（template），方法（methods）與生命週期鉤子（created等）等選項。不同的實例選項擁有不同的功能，如：
（1）el表明我們的Vue需要操作哪一個元素下的區域，’#demo’表示操作id爲demo的元素下區域。
（2）data表示Vue 實例的數據對象，data 的屬性能夠響應數據的變化。
（3）created表示實例生命週期中創建完成的那一步，當實例已經創建完成之後將調用其方法。
總結：在Vue.js中，網頁是可以看成多個組件組成的。把整一個網頁的拆分成一個個區塊，每個區塊我們可以看作成一個組件。網頁由多個組件拼接或者嵌套組成。這樣是頁面的複用度達到最高（支持組件化）。看下圖：
