什麼是vue.js？
vue是前端的一套構建用戶界面的漸進式框架
什麼是漸進式框架？
漸進式框架：就是可以將vue作爲應用的一部分嵌入其中
爲什麼需要學習vue.js？
通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件
如何安裝vue.js？
1、直接CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、下載和引入
開發環境 https://vuejs.org/js/vue.js
生產環境 https://vuejs.org/js/vue.min.js
3、npm安裝
$ npm install vue
如何用vue實現一個小功能？
實例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--dom元素APP-->
<div id="APP">
<h2>{{message}}</h2>
</div>
<!--引入vue.js依賴文件-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
< !--創建vue對象-->
let APP = new Vue({
/*vue和dom元素建立關聯（將vue對象掛載到dom元素上）*/
el: '#APP',
/*存儲數據*/
data: {
message: 'HelloVue!'
}
});
</script>
</body>
</html>
計數器代碼實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>當前計數：{{counter}}</h2>
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
<!1.--引入vue.js依賴文件-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
//vue實例和dom元素綁定
el: '#app',
data: {
counter: 0
},
methods: {
add () {
this.counter++
},
sub () {
this.counter--
}
}
});
</script>
</body>
</html>
實例說明：
1、引入vue.js的依賴文件
2、實例化vue
3、將vue實例和dom元素進行關聯
4、獲取數據
5、綁定事件
數據是如何傳遞和展示的呢？
View：DOM（展示數據）
Model：Data（數據層）
VueModel：Listener、Binding（通過監聽和綁定完成Model和View間的溝通）
