Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios
什么是Vue?Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化誊写
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。官网:https://v2.cn.vuejs.org/
Vue快速入门
https://i-blog.csdnimg.cn/blog_migrate/1e04aca594749d998bfbc6ca91306bb1.png
https://i-blog.csdnimg.cn/blog_migrate/2f25f10f3bf1685b8fbd658f987bde06.png
打开页面，可以看到输入框中内容即为绑定的vue对象中的message内容，输入框外的内容为message内容，如果改变输入框中内容，相应的背面的内容也会改变，即完成双向绑定
https://i-blog.csdnimg.cn/blog_migrate/a3cc581c1f3a9060fb53bfc153a433c8.png
常用指令
指令:HTML标签上带有 V-前缀 的特殊属性，不同指令具有不同含义。比方:v-if，v-for...
常用指令
https://i-blog.csdnimg.cn/blog_migrate/b45c13076b0c3ec2bdb76fe00579bfc5.png
v-bind
为HTML标签绑定属性值，如设置href，css样式等
https://i-blog.csdnimg.cn/blog_migrate/ab84a817000154d30eaf95ed5e5dc70b.png
将a标签中的地点href绑定上vue对象中url的值
https://i-blog.csdnimg.cn/blog_migrate/82510282a5ae8886ea3dbef0d3351c71.png
v-model
在表单位素止创建双向数据绑定，案例即上述快速入门中的案例
https://i-blog.csdnimg.cn/blog_migrate/c1fee2b358498ba1daacfdd4cbc279c3.png
v-on
为HTML标签绑定变乱
https://i-blog.csdnimg.cn/blog_migrate/7bb2ef1190cd188b95a0e77f9f3fb28c.png
v-if、v-else-if、v-else、v-show
https://i-blog.csdnimg.cn/blog_migrate/d18e1203a81dd1a1ad76ea084d9c4684.png
v-if
https://i-blog.csdnimg.cn/blog_migrate/ea2759ec039af04c0a0637ce3c35f197.png
v-show
https://i-blog.csdnimg.cn/blog_migrate/1ca40868f4051774469ee68e01230a30.png
将一个输入框的内容与vue对象的age值双向绑定，然后根据这个值判断，为年轻人，还是中老年人去渲染内容体现。
https://i-blog.csdnimg.cn/blog_migrate/5016466a81172f40e4e40d95ce21ad66.png
输入框中此时为20，则渲染出年轻人的文本内容。更改文本框的年龄，会对应的体现出不同的内容
https://i-blog.csdnimg.cn/blog_migrate/7b879ca368f56fd7117399f1ca7ce66c.png
https://i-blog.csdnimg.cn/blog_migrate/8dc65e8047db6213fc59564c853d4692.png
v-show也是类似的操作，不过该方式条件不成立时在页面源码中还有相应的文本内容，只不过是通过display属性为none而让相应的文本不体现，v-if是条件不符合直接不渲染，页面源码中就没有相应内容
https://i-blog.csdnimg.cn/blog_migrate/ab985b3163ca22d2be6f1c5a13f36d4c.png
https://i-blog.csdnimg.cn/blog_migrate/8c52a72719bb99a37065ccc99167c1da.png
v-for
列表渲染，遍历容器的元素或者对象的属性
https://i-blog.csdnimg.cn/blog_migrate/bbbfa8196af1abcba5968636a7b0ce08.png
v-for可以把vue中addrs数组遍历一下，每个用addr接并体现在文本中
https://i-blog.csdnimg.cn/blog_migrate/ecfac2276f7ce6a7c5918b4d5564ae20.pnghttps://i-blog.csdnimg.cn/blog_migrate/e36cef0790399099e242750179e97e87.png
遍历的时间索引也可以接住，顺便体现出每个元素的索引
https://i-blog.csdnimg.cn/blog_migrate/480c8fecff6ddbbf22d8a52ffedb8451.png
https://i-blog.csdnimg.cn/blog_migrate/9e54add9faa8bce3c25653b54866eb4d.png
案例：通过Vue完成表格数据的渲染展示
https://i-blog.csdnimg.cn/blog_migrate/9bc79bd40153c47a04535c164f9b805f.png
表格html代码
https://i-blog.csdnimg.cn/blog_migrate/391bef1ef29492b361a58a62ead019f8.png
要渲染的数据在vue对象中的users对象中
https://i-blog.csdnimg.cn/blog_migrate/0710ccab0ca97ef06e19fe379e4b6d9a.png
表格未渲染数据前的样子
https://i-blog.csdnimg.cn/blog_migrate/c4fe1c123293db7eda21c6ab7c3dee1a.png
在tr标签中对users数据举行遍历
https://i-blog.csdnimg.cn/blog_migrate/028a2bf73ca5b95d8f8db7289e6f7575.png
渲染完数据后的表格
https://i-blog.csdnimg.cn/blog_migrate/f15f771ca50e24521e6c01344b24244f.png
生命周期
生命周期:指一个对象从创建到烧毁的整个过程。。
生命周期的八个阶段:每触发一个生命周期变乱，会主动执行一个生命周期方法(钩子)。
https://i-blog.csdnimg.cn/blog_migrate/983e0280f9bc1e77226c8ff57e51ae0e.png
https://i-blog.csdnimg.cn/blog_migrate/16f317be1fd756bcf012c9c793aca6df.png
mounted:挂载完成，Vue初始化乐成，HTML页面染乐成。(发送请求到服务端，加载数据)
Ajax
概念:Asynchronous JavaScript And XML，异步的JavaScript和XML.
●作用:
数据交换:通过Ajax可以给服务器发送请求，并获取服务器相应的数据。
异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜刮联想、用户名是否可用的校验等等。
https://i-blog.csdnimg.cn/blog_migrate/9eb3a8c41b5c80502bd3e956dafff972.png
原生Ajax
1.准备数据地点:http://yapi.smart-xwork.cn/mock/169327/emp/list
2.创建XMLHttpRequest对象:用于和服务器交换数据
3.向服务器发送请求
4.获取服务器相应数据
用该网址制造一些服务器能提供的数据，当请求这个网址时，可以模拟对后端相应接口请求后获取到相应数据。
https://i-blog.csdnimg.cn/blog_migrate/f5bceeb7f0004741ae90ca32bd54413b.png
https://i-blog.csdnimg.cn/blog_migrate/cdc345cd3660850f4eea05c4e329caf1.png
https://i-blog.csdnimg.cn/blog_migrate/72f66073a09e55df263d272e5cf9098b.png
Axios
介绍:Axios 对原生的Ajax举行了封装，简化誊写，快速开发。
官网:https://www.axios-http.cn/
Axios入门
https://i-blog.csdnimg.cn/blog_migrate/69edd0e9bc9b20631109eda14c4cd07b.png
https://i-blog.csdnimg.cn/blog_migrate/08e70f5be0dfb7367e86ec404ec3eb4d.png
也可用一种更简化的方式发送请求
https://i-blog.csdnimg.cn/blog_migrate/2686fbaf8a173821ba574928c8debe93.png
案例：基于Vue及Axios完成数据的动态加载展示
1.数据准备的url: http://yapi.smart-xwork.cn/mock/169327/emp/list
2.在页面加载完成后，主动发送异步请求，加载数据，染展示页面(性别:1代表男，2代表女)。
https://i-blog.csdnimg.cn/blog_migrate/7c8397e2500ea72c11d69eb04059cdbf.png
先把vue和axios的js文件引入页面
https://i-blog.csdnimg.cn/blog_migrate/ea6faa5fbadb822380f617165f755caf.png
创建一个vue对象与该表格举行绑定
https://i-blog.csdnimg.cn/blog_migrate/7ec4918fd26405aa67eb03d5017a4f6c.png
原始表格
https://i-blog.csdnimg.cn/blog_migrate/78852e0571e023b632ef88dc14b66d79.png
在钩子函数中用axios发送数据请求，效果用emps对象接着，该请求在vue完成绑定时就发起了
https://i-blog.csdnimg.cn/blog_migrate/b7cf8b05da9684bcf25159d30758741c.png
遍历emps内容，将相应信息填到表格中去
https://i-blog.csdnimg.cn/blog_migrate/69052f127c9944f84b617832cee7ca20.png
请求到数据后，表格被渲染后的样子
https://i-blog.csdnimg.cn/blog_migrate/ed466c83486214074c56a96dae15b8e1.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]