一.什么是Vue
Vue是一套前端框架，免除原生JS中的DOM操作，简化书写
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。
二、Vue快速入门
1.新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>2.在JS代码区域，创建Vue核心对象，定义数据模型
<script>
new Vue({
el: "#app",//vue接管区域
data: {
message: "Hello Vue"
}
})
</script>3.编写视图
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
</body>
<script>
new Vue({
el: "#app",//vue接管区域
data: {
message: "Hello Vue"
}
})
</script>
</html>
三.Vue常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义
常用指令如下： 
1.v-bind v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
url: "https://www.baidu.com"
}
})
</script>
</html>
2.v-on
<input type="button" value="点我一下" v-on:click="handle()"><input type="button" value="点我一下" @click="handle()">//简写<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
handle: function () {
alert("你点我了一下....")
}
}
})
</script>
</html>
3.v-if v-show
年龄<input type="text" v-model="age">经判定为：
<span v-if="age<=35">年轻人</span>
<span v-else-if="age>35 && age<60">中年人</span>
<span v-else>老年人</span>年龄<input type="text" v-model="age">经判定为：
<span v-show="age<=35">年轻人</span><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
年龄<input type="text" v-model="age">经判定为：
<span v-if="age<=35">年轻人</span>
<span v-else-if="age>35 && age<60">中年人</span>
<span v-else>老年人</span>
<br><br>
年龄<input type="text" v-model="age">经判定为：
<span v-show="age<=35">年轻人</span>
<span v-show="age>35 && age<60">中年人</span>
<span v-show>老年人</span>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
age: 20
},
methods: {
}
})
</script>
</html>
注意：v-if v-else-if v-else和v-show的区别，前面三个是满足要求才会显示，而v-show而是基于CSS来决定display是否展示
4.v-for
<div v-for="addr in addres">{{addr}}</div>
<!-- index是索引，addr自定义名称{{里面用来展示数据}} -->
<div v-for="(addr,index) in addres">{{index}} : {{addr}}</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="addr in addres">{{addr}}</div>
<!-- index是索引，addr自定义名称{{里面用来展示数据}} -->
<div v-for="(addr,index) in addres">{{index}} : {{addr}}</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
addres: ["北京", "上海", "西安", "成都", "深圳"]
},
methods: {
}
})
</script>
</html>
