[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>
```
