一、Vue概述
通过我们学习的html+css+js已经能够开发美观的页面了，但是开发的效率还有待提高，那么如何提高呢？我们先来分析下页面的组成。一个完整的html页面包括了视图和数据，数据是通过请求 从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显， 这就需要我们使用DOM操作。
正因为这种开发流程，所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想，
即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？
MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：
Model: 数据模型，特指前端中通过请求从后台获取的数据
View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展
示到视图（View）上
如图所示就是MVVM开发思想的含义
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架
不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
框架即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。
二、快速入门
1.引入vue.js文件，代码如下：
<script src="js/vue.js"></script>2.在js代码区域定义vue对象,代码如下：
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
message: "Hello Vue"
}
})
</script>在创建vue对象时，有几个常用的属性：
el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data: 用来定义数据模型
methods: 用来定义函数。这个我们在后面就会用到
3.在html区域编写视图，其中{
{}}是插值表达式，用来将vue对象中定义的model展示到页面上
的
<div id="app">
<input type="text" v-model="message">
{
{message}}
</div>三、Vue指令
在上述的快速入门中，我们发现了html中输入了一个没有学过的属性 v-model ，这个就是vue的指
令。
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
在vue中，通过大量的指令来实现数据绑定到视图的，所以接下来我们需要学习vue的常用指令，如下表
所示：
| 指令 | 作用 | 示例代码 |
|---|---|---|
| v - bind | 为HTML标签绑定属性值，如设置href, css样式等 | <a v - bind:href = "url">Link</a>，假设在Vue实例中有data: {url: 'https://example.com'} |
| v - model | 在表单元素上创建双向数据绑定 | <input v - model = "message" type = "text">，Vue实例中有data: {message: ''}，输入框中的值与message双向绑定 |
| v - on | 为HTML标签绑定事件 | <button v - on:click = "handleClick">Click Me</button>，在Vue实例中有methods: {handleClick: function () {console.log('Button clicked');}} |
| v - if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 | <div v - if = "isShow">This div will be rendered if isShow is true</div>，假设在Vue实例中有data: {isShow: true} |
| v - else | 与v - if搭配使用，在v - if条件不成立时渲染 | <div v - if = "isShow">Yes</div><div v - else>No</div>，假设在Vue实例中有data: {isShow: false} |
| v - else - if | 与v - if搭配，用于多个条件判断 | <div v - if = "score >= 90">A</div><div v - else - if = "score >= 80">B</div><div v - else - if = "score >= 70">C</div><div v - else>D</div>，假设在Vue实例中有data: {score: 85} |
| v - show | 根据条件展示某元素，区别在于切换的是display属性的值 | <div v - show = "isVisible">This div will have its display property toggled</div>，假设在Vue实例中有data: {isVisible: true} |
| v - for | 列表渲染，遍历容器的元素或者对象的属性 | <ul><li v - for = "item in items">{
{item}}</li></ul>，假设在Vue实例中有data: {items: ['Apple', 'Banana', 'Cherry']} |
1. v-bind和v-model
我们首先来学习v-bind指令和v-model指令。
v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发
生变化时，标签的属性值会随之发生变化。
接下来我们通过代码来演示。
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" >
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
url: "https://www.baidu.com"
}
})
</script>在上述的代码中，我们需要给<a>标签的href属性赋值，并且值应该来自于vue对象的数据模型中
的url变量。v-bind指令是可以省略的，但是:不能省略。
注意：html属性前面有:表示采用的vue的属性绑定！
v-model： 在表单元素上创建双向数据绑定。什么是双向？
vue对象的data属性中的数据变化，视图展示会一起变化
视图数据发生变化，vue对象的data属性中的数据也会随着变化。
data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有
表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
url: "https://www.baidu.com"
}
})
</script>
修改input框中的内容，链接也会跟着改变，见下图：
| 对比维度 | v-bind | v-model |
|---|---|---|
| 绑定方向 | 单向绑定，将数据从Vue实例同步到页面 | 双向绑定，实现数据在Vue实例和页面之间的双向同步 |
| 使用场景 | 用于将数据绑定到HTML属性、CSS样式、Class类名等 | 主要用于表单元素，实现表单数据的双向绑定 |
| 语法 | v-bind:属性名="表达式" 或 :属性名="表达式" | v-model="表达式" |
| 数据更新 | 数据的更新是单向的，从Vue实例到页面 | 数据的更新是双向的，页面上的修改会同步到Vue实例，Vue实例中的数据变化也会更新到页面 |
| 组件使用 | 可以用于任何组件，用于传递数据和绑定属性 | 主要用于表单组件，用于实现表单数据的双向绑定 |
2.v-on
接下来我们学习一下v-on指令。
v-on: 用来给html标签绑定事件的。需要注意的是如下2点：
v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
v-on语法绑定事件时，事件名相比较js中的事件名，没有on
示例代码：
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
<input type="button" value="点我一下" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
url: "https://www.baidu.com"
},
methods: {
handle: function(){
console.log("你点我了一下...");
}
}
});
</script>
3.v-if和v-show
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
<input type="button" value="点我一下" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">
成绩<input type="text" v-model="grade">经判定,为:
<span v-show="grade < 60">不及格</span>
<span v-show="grade >= 60 && grade < 80">及格</span>
<span v-show="grade >= 80">优秀</span>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
url: "https://www.baidu.com"
,grade: 100
},
methods: {
handle: function(){
console.log("你点我了一下...");
}
}
});
</script>测试结果
4.v-for
v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：
<标签 v-for="变量名 in 集合模型数据">
{
{变量名}}
</标签>需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。
有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：
<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
{
{索引变量 + 1}} {
{变量名}}
</标签> <div v-for="addr in addrs">{
{addr}}</div>
<hr>
<div v-for="(addr,index) in addrs">{
{index + 1}} : {
{addr}}</div>addrs:["北京", "上海", "西安", "成都", "深圳"],
