什么是Vue?
Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写
基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。官网:https://v2.cn.vuejs.org/
Vue快速入门
![](https://img-blog.csdnimg.cn/direct/f4d2e1dcd6df4f2d898be95109fa6f11.png)
![](https://img-blog.csdnimg.cn/direct/675524be74074d7b85a15dc8a9f51341.png)
打开页面,可以看到输入框中内容即为绑定的vue对象中的message内容,输入框外的内容为message内容,如果改变输入框中内容,相应的后面的内容也会改变,即完成双向绑定
![](https://img-blog.csdnimg.cn/direct/5175023aef5d41ce99522924c3f1e8df.png)
常用指令
指令:HTML标签上带有 V-前缀 的特殊属性,不同指令具有不同含义。例如:v-if,v-for...
常用指令
![](https://img-blog.csdnimg.cn/direct/82996b3ecde54dd39711b6dda086e37e.png)
v-bind
为HTML标签绑定属性值,如设置href,css样式等
![](https://img-blog.csdnimg.cn/direct/a99ef129984340f881417ce864844256.png)
将a标签中的地址href绑定上vue对象中url的值
![](https://img-blog.csdnimg.cn/direct/76203a01252949acbe54b2ad5db6d0d4.png)
v-model
在表单元素止创建双向数据绑定,案例即上述快速入门中的案例
![](https://img-blog.csdnimg.cn/direct/be99f95fbafe49fd86aafcb72673b93b.png)
v-on
为HTML标签绑定事件
![](https://img-blog.csdnimg.cn/direct/df50e1bb7c814db58ce61b84d3a76e1f.png)
v-if、v-else-if、v-else、v-show
![](https://img-blog.csdnimg.cn/direct/2ae38c9cd28d4be8a9cbbf3a24209bfe.png)
v-if
![](https://img-blog.csdnimg.cn/direct/3477632508ef4f9ea1d21b25771cba30.png)
v-show
![](https://img-blog.csdnimg.cn/direct/d9b6667f29934ed8975981e77cbb37a4.png)
将一个输入框的内容与vue对象的age值双向绑定,然后根据这个值判断,为年轻人,还是中老年人去渲染内容显示。
![](https://img-blog.csdnimg.cn/direct/40787b352e7648688b05f5b349d44397.png)
输入框中此时为20,则渲染出年轻人的文本内容。更改文本框的年龄,会对应的显示出不同的内容
![](https://img-blog.csdnimg.cn/direct/0888d5c1c8294811b8d6a09e08a893b1.png)
![](https://img-blog.csdnimg.cn/direct/ea13a7a6fe1a4a83ae60c86934f679f6.png)
v-show也是类似的操作,不过该方式条件不成立时在页面源码中还有相应的文本内容,只不过是通过display属性为none而让相应的文本不显示,v-if是条件不符合直接不渲染,页面源码中就没有相应内容
![](https://img-blog.csdnimg.cn/direct/6f995c23b56f4b6ebaab0a5eb36d480b.png)
![](https://img-blog.csdnimg.cn/direct/aefb5c5b200a428ab97d4b176f185089.png)
v-for
列表渲染,遍历容器的元素或者对象的属性
![](https://img-blog.csdnimg.cn/direct/a76b93c59fa3457f99911f265f36f1f2.png)
v-for可以把vue中addrs数组遍历一下,每个用addr接并显示在文本中
遍历的时候索引也可以接住,顺便显示出每个元素的索引
![](https://img-blog.csdnimg.cn/direct/69596c7b7a6b42c9bec1e86255894a8e.png)
![](https://img-blog.csdnimg.cn/direct/800f1789514a4b848fba381d6dad9b45.png)
案例:通过Vue完成表格数据的渲染展示
![](https://img-blog.csdnimg.cn/direct/bbf89c7302aa4f209c0441b7d664d1b3.png)
表格html代码
![](https://img-blog.csdnimg.cn/direct/406263cd51b549f4be2394ab85885a6b.png)
要渲染的数据在vue对象中的users对象中
![](https://img-blog.csdnimg.cn/direct/a09b5532a1174681a6305972fd33d0dc.png)
表格未渲染数据前的样子
![](https://img-blog.csdnimg.cn/direct/d2f2328880784d8690cd08284d7e7eac.png)
在tr标签中对users数据进行遍历
![](https://img-blog.csdnimg.cn/direct/e46587a797b8453980628108bac2dfa1.png)
渲染完数据后的表格
![](https://img-blog.csdnimg.cn/direct/c729cd50649c44169e644443219e39fa.png)
生命周期
生命周期:指一个对象从创建到销毁的整个过程。。
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)。
![](https://img-blog.csdnimg.cn/direct/c3abb1245c9f4c288de00763cea924a2.png)
![](https://img-blog.csdnimg.cn/direct/c41acdd4336a4615b31240c606714b1f.png)
mounted:挂载完成,Vue初始化成功,HTML页面染成功。(发送请求到服务端,加载数据)
Ajax
概念:Asynchronous JavaScript And XML,异步的JavaScript和XML.
●作用:
数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
![](https://img-blog.csdnimg.cn/direct/8c55594c646b46519531ec8dfddd0b98.png)
原生Ajax
1.准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list
2.创建XMLHttpRequest对象:用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
用该网址制造一些服务器能提供的数据,当请求这个网址时,可以模拟对后端相应接口请求后获取到相应数据。
![](https://img-blog.csdnimg.cn/direct/9147264b58024036a5e42c6b74baa34f.png)
![](https://img-blog.csdnimg.cn/direct/cb9706ffdd29457bba41cb8edc2fe78f.png)
![](https://img-blog.csdnimg.cn/direct/d1d3b405802645c585f5aa5f12bce53e.png)
Axios
介绍:Axios 对原生的Ajax进行了封装,简化书写,快速开发。
Axios入门
![](https://img-blog.csdnimg.cn/direct/56d50a4fe4ef4c34be6b1658f09c00a2.png)
![](https://img-blog.csdnimg.cn/direct/8187d974344b4ed7ac658d272e6034d4.png)
也可用一种更简化的方式发送请求
![](https://img-blog.csdnimg.cn/direct/aeb00954d35b48aca7efa7ea8a8ec1b1.png)
案例:基于Vue及Axios完成数据的动态加载展示
1.数据准备的url: http://yapi.smart-xwork.cn/mock/169327/emp/list
2.在页面加载完成后,自动发送异步请求,加载数据,染展示页面(性别:1代表男,2代表女)。
![](https://img-blog.csdnimg.cn/direct/7043bcc4484d40c3a46ca1096208c8a4.png)
先把vue和axios的js文件引入页面
![](https://img-blog.csdnimg.cn/direct/f7e3cc5383b64867b415d3793a1a3158.png)
创建一个vue对象与该表格进行绑定
![](https://img-blog.csdnimg.cn/direct/f6c1b04462184cecafbb14753a32a2f0.png)
原始表格
![](https://img-blog.csdnimg.cn/direct/3c51504ea0a34477bf70d49154d08fa0.png)
在钩子函数中用axios发送数据请求,结果用emps对象接着,该请求在vue完成绑定时就发起了
![](https://img-blog.csdnimg.cn/direct/34c7c50af5934ca8836eadb5bcff5ea7.png)
遍历emps内容,将相应信息填到表格中去
![](https://img-blog.csdnimg.cn/direct/e7e02a051c104ae88a78f4b0be06e787.png)
请求到数据后,表格被渲染后的样子
![](https://img-blog.csdnimg.cn/direct/5514d893333f423cadcbea2753e6351e.png)