一、vue介紹
vue官網說：Vue.js（讀音 /vjuː/，類似於 view） 是一套構建用戶界面的漸進式的JavaScript框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。
1、漸進式的JavaScript框架
Angular React Vue
作者 google公司 facebook公司 尤雨溪
組織方式 MVC 模塊化 模塊化
數據綁定 雙向綁定 單向綁定 雙向綁定
模板能力 強大 自由 自由
自由度 較小 大 較大
路由 靜態路由 動態路由 動態路由
2、前端框架和庫的區別
（1）功能上的不同
jquery庫：包含DOM(操作DOM)+請求，就是一塊功能的實現。
art-template庫：模板引擎渲染，高性能的渲染DOM。
框架：大而全的概念，簡易的DOM體驗+請求處理+模板引擎。
在KFC的世界來看的話，庫就是一個小套餐，框架就是全家桶。
（2）代碼上的不同
一般使用庫的代碼，是調用某個函數或者使用拋出來的對象，我們自己處理庫中的代碼。
一般使用框架，框架本身提供好的成套的工具幫我們運行我們編寫好的代碼。
（3）框架的使用
1）初始化自身的一些行為；
2）執行你所編寫的代碼；
3）釋放一些資源。
3、關於漸進式和自底向上增量開發
我們來看一下知乎的回答：知乎回答
總的來說，它給你提供足夠的optional，但並不主張很多required。
我們常說：做減法比做加法難。我覺得一個框架如果是“漸進式”的，就意味着，它本身承擔了較難的做減法的部分，而留給它的使用者較簡單的做加法的部分。
就是說，在我們用一個工具的時候，並不是為了用其中的某一個部分，而想辦法無視或者裁剪掉其他部分（做減法），而是上手就可以用上它的大多數功能，再在需要的時候引入它的官方或第三方插件（做加法）。
二、vuejs的優點
1.易用
已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！
2.靈活
不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮。
3.高效
20kB min+gzip 運行大小
超快虛擬 DOM (虛擬dom的渲染速度要比我們真實的dom渲染速度快)
最省心的優化
虛擬的DOM的核心思想是：對復雜的文檔DOM結構，提供一種方便的工具，進行最小化地DOM操作。這句話，也許過於抽象，卻基本概況了虛擬DOM的設計思想
(1) 提供一種方便的工具，使得開發效率得到保證
(2) 保證最小化的DOM操作，使得執行效率得到保證
三、vue的使用
1、安裝
（1）兼容性
Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。
（2）Vue Devtools插件
在使用 Vue 時，推薦在瀏覽器上安裝 Vue Devtools。它允許你在一個更友好的界面中審查和調試 Vue 應用。
（3）直接用<script>引入（推薦新手使用）
直接下載並用 <script> 標簽引入，Vue 會被注冊為一個全局變量。
下載可以選擇去npm下載或者去vue官網下載並引入：
（4）cdn引入
我們推薦鏈接到一個你可以手動更新的指定版本號：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。
Vue 也可以在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯后)。
確認了解不同構建版本並在你發布的站點中使用生產環境版本，把 vue.js 換成 vue.min.js。這是一個更小的構建，可以帶來比開發環境下更快的速度體驗。（開發環境使用vue.js，生產環境使用vue.min.js）
2、引入vue.js文件
這里是開發環境，因此選用vue.js。
<body> <!--1.先引包--> <!--<script src="js/vue.js"></script>--> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> </script> </body>
引入vue.js文件后，Vue被注冊為一個全局的變量，是一個構造函數。在網站控制台查看：
四、使用Vue實例化對象
1、創建vue實例對象
每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的：
<body>
<div id="app">
<h3>{{title}}</h3>
<p>{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
// 創建vue實例對象
var app = new Vue({
el: "#app", // 元素
// 所有的數據都放在數據屬性里
data: {
title: "土豆",
msg: "路飛"
}
})
</script>
</body>
輸出結果：
已經簡單的創建了第一個vue應用。渲染的數據的方式我們也叫聲明式的渲染。現在數據和 DOM 已經被建立了關聯，所有東西都是響應式的。我們要怎么確認呢？打開你的瀏覽器的 JavaScript 控制台 (就在這個頁面打開)，並修改 app.msg 的值，你將看到上例相應地更新。
2、模板語法
{{}}模板語法：主要作用是插值，不僅可以插變量，只要你能想到的插入都可以（if-else不可以）。
<body>
<div id="app">
<h3>{{msg}}</h3>
<!--字符串拼接-->
<h3>{{msg + 'hello'}}</h3>
<!--三目運算符-->
<h3>{{1>2?"真的":"假的"}}</h3>
<!--可以插入字符串-->
<h4>{{'helloworld'.split('').reverse().join('')}}</h4>
<!--不能使用if-else-->
<!--{{}}模板語法的設計，只是為了簡單的運算-->
</div>
<!--1.先引包-->
<!--<script src="js/vue.js"></script>-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 2.創建vue實例化對象
new Vue({
el: '#app', // 目的地
data:{ // data屬性可以是函數或對象
msg: 'hello Vue' // 數據屬性
}
})
</script>
</body>
顯示效果：
注意：
1）data屬性可以是一個函數也可以是一個對象。msg是數據屬性。依靠數據驅動視圖（模板語法），將數據（msg）渲染到DOM（標簽也就是view）中。
2）模板語法中不能使用if-else。
3）Vue實例化對象后，這個對象中屬性前面都有前綴 $，主要是為了跟我們自定義的屬性區分。
3、app.$el對象問題
（1）app.$el對象等價於對應標簽所有內容
<body>
<div id="app">
<h3>{{msg}}</h3>
<!--字符串拼接-->
<h3>{{msg + 'hello'}}</h3>
<!--三目運算符-->
<h3>{{1>2?"真的":"假的"}}</h3>
</div>
<!--1.先引包-->
<!--<script src="js/vue.js"></script>-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 2.創建vue實例化對象
var app = new Vue({ // 這樣定義，實例化有返回值
el: '#app', // 目的地
data:{ // data屬性可以是函數或對象
msg: 'hello Vue', // 數據屬性
}
});
console.log(app);
console.log(app.$el);
console.log(app.$el === document.getElementById('app'));
</script>
</body>
顯示效果：
（2）el和template的優先級問題
template的優先級要高於el，具體情況如下所示：
1）當代碼只定義了el和模板語法時：
<body>
<div id="app">
<h3>{{msg}}</h3>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello指令系統',
},
//template:`<h4>{{msg}}</h4>>`
})
</script>
</body>
模板在app標簽下，效果如下所示：
2）當代碼也定義了template時：
<body>
<div id="app">
<h3>{{msg}}</h3>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello指令系統',
},
template:`<h4>{{msg}}</h4>>`
})
</script>
</body>
msg沒有渲染到el中，如下圖所示：
4、Vue應用的組成結構
一個 Vue 應用由一個通過 new Vue 創建的根 Vue 實例，以及可選的嵌套的、可復用的組件樹組成。舉個例子，一個 todo 應用的組件樹可以是這樣的：
根實例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics