一.Vue初识1.1 Vue概述一个完整的html页面包括了视图和数据,数据是通过请求从后台获取的,那么意味着我们需要

1.1 Vue概述

一个完整的html页面包括了视图和数据,数据是通过请求从后台获取的,那么意味着我们需要将后台获取到的数据呈现到页面上,很明显,这就需要我们使用DOM操作.正因为这种开发流程,所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想,即让我们开发者更加关注数据,而非数据绑定到视图这种机械化的操作.

MVVM:3个单词的缩写

Model:数据模型,特指前端中通过请求从后台获取的数据
View:视图,用于展示数据的页面,可以理解成我们的html+css搭建的页面,但是没有数据
ViewModel:数据绑定到视图,负责将数据(Model)通过JavaScript的DOM技术,将数据展示到视图(View)上

如图所示就是MVVM开发四星的含义:

基于上述的MVVM思想,其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分,可以使用ElementUI框架来替代html+css来更加方便的搭建View.

在更加复杂的DOM操作中,vue只会变得更加的简单!在上述的代码中,我们看不到之前的DOM操作,因为VUE全部帮我们封装好了.

接下来就介绍一下vue:

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注图层,并且非常容易学习,非常容易与其他库或已有项目整合. Vue.js的目标是通过尽可能简单的API视线响应的数据绑定和组合的视图组件

框架即是一个半成品软件,是一套可重用的通用的软件基础代码模型. 基于框架进行开发,更加快捷更加高效

1.2 快速入门

接下来我们通过一个vue的快速入门案例，来体验一下vue。

第一步：在VS Code中创建名为Vue-快速入门.html的文件，并且在html文件同级创建js目录，将资料/vue.js文件目录下得vue.js拷贝到js目录，如下图所示：

图片.png

第二步：然后编写 <script> 标签来引入vue.js文件，代码如下：

<script src="js/vue.js">

 </script>

第三步：在js代码区域定义vue对象,代码如下：

<script>
    // 定义Vue对象
    new new Vue({
      el:"#app", // Vue对象挂载的元素
      data:{
        message:"hello vue"
      }
    })
  </script>

在创建Vue对象时,有几个常用的属性:

el:用来制订哪些标签受Vue管理.该属性取值#app中的 app需要是受管理的标签的id属性值

data:用来定义数据模型

methods:用来定义函数.

第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的

<body>
  <div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>
</body>

效果如下:

图片.png

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-快速入门</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>
</body>

<script>
  // 定义Vue对象
  new new Vue({
    el:"#app", // Vue对象挂载的元素
    data:{
      message:"hello vue"
    }
  })
</script>
</html>

1.3 Vue指令

指令:HTML 标签上带有 v- 前缀的特殊属性,不同指令具有不同含义.

在Vue中,通过大量的指令来实现数据绑定到视图的,一些Vue的常用指令如下表所示:

指令	作用
v-bind	为HTML标签板顶属性值,如设置 href,css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素,区别在于切换的是display属性的值
v-for	列表渲染,遍历容器的元素或者对象的属性

1.3.1 v-bind和v-model

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定

v-bind:为HTML标签绑定属性值,如设置 href , css样式等.当Vue对象中的数据模型发生变化时,标签的属性值随之发生变化

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>2.v-bind和v-model</title>

  <script src="js/vue.js"></script>

</head>

<body>

  <div id="app">

     <a>链接1</a>

     <a>链接2</a>

  


     <input type="text">

  


  </div>  

</body>

  


<script>

  // 定义Vue对象

  new Vue({

    el:"#app",  // Vue对象挂载的元素

    data: {

      url:"https://www.baidu.com"

    }

  })

</script>

</html>

在上述的代码中，我们需要给 <a> 标签的href属性赋值，并且值应该来自于vue对象的数据模型中的url变量。所以编写如下代码：

   <a v-bind:href="url">链接1</a>

在上述的代码中，v-bind指令是可以省略的，但是:不能省略，所以第二个超链接的代码编写如下：

<a :href="url">链接2</a>

浏览器打开，2个超链接都可以点击，然后跳转到百度去！通过浏览器的开发者工具,进入到查看器页面,找到2个超链接的源码,发现href属性值绑定成功

图片.png

v-model:在表单元素上创建双向数据绑定.
- 什么是双向
- 1. vue对象的data属性中的数据变化,视图展示会一起变化
- 1. 视图数据发生变化,vue对象的data属性中的数据也会随着变化.

data属性中数据变化,我们知道可以通过赋值来改变,但是视图数据为什么会发生变化呢?只有表单标签!所以双向绑定一定是使用在表单项标签上的.

<input type="text" v-model="url">

图片.png

通过上图我们发现，我们只是改变了表单数据，那么我们之前超链接的绑定的数据值也发生了变化，为什么？

就是因为我们双向绑定，在视图发生变化时，同时vue的data中的数据模型也会随着变化。那么这个在企业开发的应用场景是什么？

双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

整体代码:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>2.v-bind和v-model</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>

  // 定义Vue对象

  new Vue({

    el:"#app",  // Vue对象挂载的元素

    data: {

      url:"https://www.baidu.com"

    }

  })

</script>

</html>

1.3.2 v-on

v-on:用来给html标签绑定事件的,

v-on语法给标签的事件绑定的函数,必须是vue对象声明的函数
v-on语法绑定事件时,事件名相比较js中的事件名,没有on

eg：在js中，事件绑定demo函数

```
<input onclick="demo()">
```

vue中，事件绑定demo函数

```
<input v-on:click="demo()">
```

接下来我们通过代码演示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue-指令-v-on</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:{
        handle:function(){
          alert("你点了我一下")
        }
      },
      methods: {

      },
    })

  </script>

</html>

1.3.3 v-if和v-show

指令	描述
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta charset="UTF-8">  
<title>4.Vue指令-vi-if和v-show</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<=60">中年人(35-60)</span>  
<span v-else>老年(60岁以上)</span>  
  
<br>  
<br>  
v-show  
<br>  
年龄<input type="text" v-model="age">经判定,为:  
<span v-show="age<=35">年轻人(35岁及以下)</span>  
<span v-show="age>35 && age<=60">中年人(35-60)</span>  
<span v-show="age>60">老年(60岁以上)</span>  
</div>  
</body>  
<script>  
new Vue({  
el: "#app",  
data: {  
age: 20  
},  
methods: {}  
})  
</script>  
</html>

v-show和v-if的作用效果是一样的，只是原理不一样

浏览器呈现的效果是一样的，但是浏览器中html源码不一样。v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

1.3.4 v-for

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。

有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

<!doctype html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport"  
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
<meta http-equiv="X-UA-Compatible" content="ie=edge">  
<title>vue 指令-v-for</title>  
<script src="js/vue.js"></script>  
</head>  
<body>  
<div id="app">  
<div>  
第一种遍历  
<div v-for="addr in addrs">{{addr}}</div>  
</div>  
<hr>  
<div>  
第二种遍历  
<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>  
</div>  
  
</div>  
</body>  
<script>  
new Vue({  
el:"#app",  
data:{  
addrs:["北京","上海","重庆","云南","成都","深圳","杭州","武汉"]  
},  
methods:{}  
})  
</script>  
</html>

图片.png

1.3.5 案例

users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta charset="UTF-8">  
<title>6.案例</title>  
<script src="js/vue.js"></script>  
</head>  
<body>  
<div id="app">  
<div v-for="(user,index) in users">{{index+1}} : {{user.name}}</div>  
<br>  
<br>  
<table border="1" cellpadding="0" width="60%">  
<tr>  
<th>编号</th>  
<th>姓名</th>  
<th>性别</th>  
<th>年龄</th>  
<th>成绩</th>  
<th>等级</th>  
</tr>  
  
<tr align="center" v-for="(user,index) in users">  
<td>{{index+1}}</td>  
<td>{{user.name}}</td>  
<td>  
<span v-show="user.gender==1">男</span>  
<span v-show="user.gender==2">女</span>  
</td>  
<td>{{user.age}}</td>  
<td>{{user.score}}</td>  
<td>  
<span v-if="user.score>=85">优秀</span>  
<span v-else-if="user.score>=60">及格</span>  
<span style="color:red" v-else>不及格</span>  
</td>  
</tr>  
</table>  
  
  
</div>  
</body>  
<script>  
new Vue({  
el:"#app",  
data:{  
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>

图片.png

1.4 生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
<meta charset="UTF-8">  
<title>7.Vue生命周期</title>  
<script src="js/vue.js"></script>  
</head>  
<body>  
<div id="app">  
</div>  
</body>  
  
<script>  
new Vue({  
el:"#app",  
data:{  
  
},  
methods:{  
  
},  
mounted(){  
alert("Vue挂载完成,发送请求到服务端")  
}  
})  
</script>  
</html>

浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂载，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。

图片.png