axios听课笔记

axios听课笔记

前言

时长：2h

01动态路由匹配

vue-router

掘金

//当使用路由参数时，如从timeliness/frontend导航到timeline/backend，原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
var ComDesc={
data(){return{msh:''}},
template:'
我是{{msg}}
',
created(){//发ajax
console.log(1);
this.msg='前端';},
//在当前的组件内部，监听路由信息的变化
watch:{
'route'(to,from){
console.log(to);
console.log(from);
//发送ajax请求
this.msg=to.params.id;
}}};

var TimeLine={
template:'
<div id='timeline'>
<router-link :to="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
<router-link :to="{name:'comDesc',params:{id:'backend'}}">后端</router-link>
<router-view></router-view>
</div>'
}

var Pins={
template:'
我是沸点
'
}

var router=new VueRouter({
routes:[{
path:'/timeline',
component:Timeline,
children:[{
name:'comDesc',
//动态路由参数，以冒号开头
path:'/timeline/:id',
component:ComDesc
}],
}],
})

var App={
template:'<div>
<router-link to='/timeline'>首页</router-link>
<router-link to='/pins'>沸点</router-link>
<router-view></router-view>
</div>'
}

02keep-alive在路由中的使用v

keep-alive用于缓存。作用是保存组件状态或避免重新渲染。

官网介绍keep-alive

var App={
template:'
<div>
<router-link to='/timeline'>首页</router-link>
<router-link to='/pins'>沸点</router-link>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
'
}

03meta的使用-权限控制

官网介绍meta

methods:{
loginHandler(){
//登录
localStorage.setItem('user',{name:this.name,pwd:this.pwd});
//跳转到博客页面 编程式导航
this.$router.push({
name:'blog'
});
}
}


var router=new VueRouter({
routes:[
{
path:'/',redirect:'/home'
},
{
path:'/home',component:Home
},
{
path:'/blog',component:Blog,name:'blog',
//给未来的路由 做权限控制
meta:{
//证明 用户访问该组件的时候需要登录
auth:true
},
{
path:'/login',component:Login,
}
]
});
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);

if(to.meta.auth){
//用户点击了博客链接， 该用户需要登录
if(localStorage.getItem('user')){
//如果localStorage存储不为空 表示用户登录完成直接放行
next()
}else{
//用户需要登录
next({path:'/login'})
}
}else{
//直接放行
next();//如果不调用next()会卡住
}

})

04axios的基本使用

axios官网文档

methods:{
sendAjax(){
//发送HTTP请求
this.$axios.get('http://127.0.0.1:8888/')
//获取HTTP响应
.then(res=>{
console.log(res.data.msg);
})
//获取失败的反馈
.catch(err=>{
console.log(err)
})
}
}

05并发请求

methods:{
sendAjax(){
this.$axios.default.baseURL='http://127.0.0.1:8888/';
var r1=this.$axios.get('');
var r2=this.$axios.post('add','a=1');

this.$axios.all([r1,r2])

.then(this.$axios.spread((res1,res2)=>{
this.res1=res1.data;
this.res2=res2.data;
}))
.catch(err=>{
console.log(err)
})
}
}

v-for中key的作用

v-for中：key的作用总结

$emit和$on进行组件之间的传值

$emit 和 $on 进行平行组件之间的传值

vue-router的导航完成后获取数据

vue-router进阶数据获取

vue-router的导航完成前获取数据

vue-cli2.x脚手架的使用

Vue2全家桶之一：vue-cli（vue脚手架）超详细教程

vue-cli3.x脚手架的使用

06config

总结

之前学vue的时候只是关注了vue的全家桶：vue CLI、vue router、vuex。然后最近在使用vue的时候发现请求很重要，现在使用请求一般是axios。

之前还写了一点axios的小笔记：axios初次笔记（axios、promise是什么）