[TOC]
## 一、項目引進 Vue 的方式
### （一）、安裝Vue
* **方式一：直接CDN引入**（*CDN*的全稱是Content Delivery Network，即內容分發網絡。）
```
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```
* 方式二：下載和引入
```
// 開發環境?
https://vuejs.org/js/vue.js
// 生產環境?
https://vuejs.org/js/vue.min.js
```
* 方式三：NPM安裝
后續通過Vue-Cli3方式引入，我們使用該方式
<br />
## 二、簡單體驗Vue
### 簡單案例
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>01-體驗Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{t}}</p> <!-- 云龍兄天秀 -->
<p>{{k1}}</p> <!-- key1 -->
<p>{{arr[2]}}</p> <!-- 8 -->
<p>{{obj['key1']}}</p> <!-- 123 -->
<p>{{obj.key2}}</p> <!-- 456 -->
<p>Vue調用對象屬性另一種方式，如可以將?obj?對象屬性?key1?名設為data對象里的屬性?k1?的值;
調用方法跟對象調用屬性一致。如obj.k1</p>
<p>{{obj[1>2?k1:k2]}}</p> <!-- 456 -->
<p>{{obj[k1]}}</p> <!-- 123 -->
</div>
<script>
new Vue({
el:'#app',//el:掛載到某個節點
data:{ //固定屬性 data ，通常存儲數據用。
t:'云龍兄天秀',
k1:'key1',
k2:'key2',
obj:{
key1:123,
key2:456,
},
arr:[2,5,8,6]
}
})
</script>
</body>
</html>
```
<br />
## 三、雙向綁定數據
需求：輸入框輸入數據，會顯示到 `span` 元素上，分別通過 `js` 和 `vue` 實現
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>02-Vue雙向數據綁定</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
p{
font-size:20px;
color: skyblue;
}
</style>
</head>
<body>
<input type="text" id="input">
<p id="p"></p>
<div id="app">
<input type="text" v-model="inputVal">
<p>{{inputVal}}</p>
</div>
<script>
/* jq 做法 */
var inputDom = document.getElementById('input');
var pDom = document.getElementById('p');
inputDom.oninput=function(){
pDom.innerHTML=this.value;
};
/* Vue 做法 */
var vm = new Vue({
el:'#app',
data:{
inputVal:'',
}
})
</script>
</body>
</html>
```
