Vue.js（讀音 /vjuː/，類似於視圖）是一套構建用戶界面的漸進式框架。
採用自底向上增量開發的設計. Vue 的核心庫只關注 視圖層，易學習，易項目整合。
Vue.js 完全有能力驅動採用單文件組件和 Vue.js 生態系統支持的庫開發的複雜單頁應用。
優點，可只專注在 web 技術上，支援 html template、jade、coffeescript，可與 sass、less 等做整合，插件多，不像 React、AngularJS 專注跨平台、跨載具，導致要學的東西就變很多。
如果剛開始學習前端開發，將框架作為第一步可能不是最好的主意 - 掌握好基礎知識再來！之前有其他框架的 使用經驗對於學習 Vue.js 是有幫助的，但這不是必需的。
認識 Vue.js
1.瀏覽器限制
不支持 IE8 及其以下版本，因為 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性（Object.defineProperty）。
支持所有兼容 ECMAScript 5 的瀏覽器。
2..引入 Vue.js
嘗試 Vue.js 最簡單的方法是創建一個 .html 文件，然後引入Vue：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
Vue.js 基礎
1.Hello World!
提供兩種寫法！都可以完成一樣的結果
<div id="app"> {{ message }} </div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
or
var data ={
message: 'Hello Vue!'
}
new Vue({
el:"#app",
data:data
})
</script>
瀏覽器渲染結果：
Hello Vue!
Vue 使數據和 DOM 被綁定在一起，所有的元素都是響應式的。
當 app.message 改變時，會引起 DOM 的重新呈染。
2.選擇對象
實例化Vue時，需要選定一個選項對象，裡面包含數據、模板、掛載元素、方法、生命週期鉤子等選項。
選項對象包含常用的屬性包括，在下文還會進行拓展：
3.data 應用
data 對象裡的所有屬性，以上面範例為例：
vm.message // => Hello Vue！
在選項對象裡，this 表示構造器的實例，所以在 methods 對象中的方法也使用 this 屬性獲取 data 裡的屬性：
......
methods:{
floramag:function(){
alert('這是message資料'+ '==>' +this.message)
}
}
......
data 是一個外部變量
var data = {
message:"Hello World!"
}
new Vue({
....
data:data
...
)}
數據與訊息雙向綁定的，二者有一方改變，對方都會改變。
注意，data 一直存在在內存中。
在寫節點語法時不能使用 exports = function（）{} 導出模塊一樣，
不能像下面這樣試圖改變選項對象所綁定的數據變量，因為這樣完全破壞了數據與vm的引用關係。
4.實例屬性與方法
屬性代理的是 VM 選項對象中的數據對象中的屬性，那麼，數據等直接定義在選項對象裡的屬性怎麼辦呢？
數據這樣的選項對象屬性，則需在前面加上 $，例如：
vm.$el // =>HTMLXXXDOM
vm.$data // => {message:'Hello Vue!'}
監控元素改變的 $ 觀看方法
vm。$ watch（'a'，function（newVal，oldVal）{
//這個回調將在 ' vm.a '改變後調用
}）