一、引入
Vue是一套前端框架，免除javaScript中的DOM操作，简化书写。基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。
框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。
二、下载
下载地址：https://v2.vuejs.org/v2/guide/installation.html
三、Vue快速入门
①新建HTMl页面，引入Vue.js文件
<script src="../JS/vue.js"></script>
②在Js代码区域，创建Vue核心对象，定义数据模型
new Vue({
el:"#app" ,/* 这是vue接管的区域 */
data: {/* 定义vue对象 */
message:"hello vue"
}
})
③编写视图
<!-- ③定义视图 -->
<div id="app">
<!-- //通过指令v-model与数据模型massage绑定 -->
<input type="text" v-model="message">
{{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>
<!-- ①引入vue.js -->
<script src="../JS/vue.js"></script>
</head>
<body>
<!-- ③定义视图 -->
<div id="app">
<!-- //通过指令v-model与数据模型massage绑定 -->
<input type="text" v-model="message">
{{message}}
<!-- 在界面直接将数据模型message展示出来 -->
</div>
</body>
<script>
/*②定义Vue对象 */
new Vue({
el:"#app" ,/* 这是vue接管的区域 */
data: {/* 定义vue对象 */
message:"hello vue"
}
})
</script>
</html>
最终效果：通过修改输入框的数据，也能修改框外的数据。
插值表达式：
形式：{{表达式}}。内容可以是：变量，三元运算符、函数调用、算术运算。
四、Vue常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同属性。
（一）v-bind
为HTML标签绑定属性值，如设置href,css样式等。一旦通过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>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com"
}
})
</script>
</html>
（二）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>
（三）v-on
为HTML标签绑定事件。
<!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>
（四）v-if和v-show
<!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">年轻人(35岁以下)</span>
<span v-else-if="age > 35 && age <=50">中年人(35-60)</span>
<span v-else>老年人(60岁以上)</span>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
age:49
},
methods: {
},
})
</script>
</html>
对比：
<!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">年轻人(35岁以下)</span>
<span v-else-if="age > 35 && age <=50">中年人(35-60)</span>
<span v-else>老年人(60岁以上)</span>
<br><br>
年龄：<input type="text" v-model="age">
<span v-show="age <= 35">年轻人(35岁以下)</span>
<span v-show="age > 35 && age <=50">中年人(35-60)</span>
<span v-show="age>60">老年人(60岁以上)</span>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
age:49
},
methods: {
},
})
</script>
</html>
（五）v-for
列表渲染，遍历容器的元素或者对象的属性
<!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="(adders, index) in adders" >{{adders}}</div>
<hr>
<div v-for="(adders, index) in adders" >{{index}}</div>
<hr>
<div v-for="(adders, index) in adders" >{{index}}:{{adders}}</div>
<hr>
<div v-for="(adders, index) in adders" >{{index+1}}:{{adders}}</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
adders:["北京","上海","西安","成都","深圳"]
},
methods: {
},
})
</script>
</html>
结果：
五、生命周期
一个对象从创建到销毁的整个过程，只需要管mounted
<script>
new Vue({
el:"#app",
data:{
},
mounted() {
console.log("Vue挂载完成，发送请求获取数据");
},
methods: {
},
})
</script>
六、案例实践
通过Vue完成表格数据的渲染展示
<!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">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(users, index) in users" :key="index">
<td>{{index + 1}}</td>
<td>{{users.name}}</td>
<td>{{users.age}}</td>
<td>
<span v-if="users.gender==1">男</span>
<span v-else>女</span>
</td>
<td>{{users.score}}</td>
<td>
<span v-if="users.score >=80">优秀</span>
<span v-else-if="users.score <80 && users.score >=60">合格</span>
<span style="color: red;" v-else>不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
/* 1:男2：女，>85优秀，>60及格，否则不及格 */
users:[{
name:"Tom",
age:20,
gender:1,
score:78
},{
name:"Rose",
age:18,
gender:2,
score: 86
},{
name:"Jerry",
age:26,
gender:1,
score: 90
},{
name:"Tony",
age:30,
gender:1,
score: 52
},]
},
methods: {
},
})
</script>
</html>
结果：
