Vue2 -- axios、过渡动画、兄弟组件传值

axios

axios是一个基于promise的http库,目的是实现异步请求,返回promise对象,可用.then和.catch来处理结果
使用前要先在js文件引入axios

1.发送get请求的原生写法

• 不带参数

 axios.get('请求地址').then((res)=>{
	//请求成功回调函数
	}).catch((err)=>{
	//请求失败回调函数
})

• 带参数

//url传参
 axios.get('请求地址?参数名=参数').then((res)=>{
	//请求成功回调函数
	}).catch((err)=>{
	//请求失败回调函数
})



//params方式传参
axios.get('请求地址',{params:{参数名:参数}}).then((res)=>{
	//请求成功回调函数
	}).catch((err)=>{
	//请求失败回调函数
})

2.发送post请求的原生写法

axios.post('请求地址',{参数对象}).then((res)=>{
	//请求成功回调函数
	}).catch((err)=>{
	//请求失败回调函数
})

3.axios({配置}) – axios常见写法
配置参数
1.url: 用于请求的服务器 URL,必填

2.method:创建请求时使用的方法，默认为get

3.params:即将与请求一起发送的 URL 参数,用于get方法

4.data:作为请求主体被发送的数据,用于post方法

5.baseURL:自动加在 url 前面的基地址，除非 url 是一个绝对路径
可以用 axios.defaults.baseURL
或者

const 自定义名称 = axios.create({ baseURL: 'http://localhost:3000'}) 

export default 自定义名称

来设定基地址.设定基地址后,url填写基地址后面的url即可

事例

//myaxios.js

import axios from 'axios'

/* const obj = axios.create({
    baseURL: 'http://localhost:3000'
}) 

export default obj
*/

axios.defaults.baseURL = 'http://localhost:3000'

export default axios

______________________________

//index.vue

<script>
import axios from '@/utils/myaxios.js'
methods:{
//发送get请求
	sendGetAxios(){
		axios(
			url:'/get_post',
			params:{ id:1 }
		)
		.then(res=>{
			//请求成功处理函数
			})
		.catch(err=>{
			//请求失败处理函数
			})
	},
//发送post请求
	sentPostAxios(){
		axios(
			method:'POST',
			url:'/login',
			data:{
				username:'admin',
				password:123456
			}
		)
			.then(res=>{
			//请求成功处理函数
			})
		.catch(err=>{
			//请求失败处理函数
			})
	}

}
</script>>

过渡动画

用作渲染v-show/v-if的显示和消失之间的过渡

添加方式 – 原生写法
1.把元素包裹在<transition></transition>标签中
2.在6个时机自定义样式

• v-enter:准备进入(设置元素显示前的状态
• v-enter-active:进入的过程(设置过渡参数,如过渡时间,速度等 transition: all 5s ease //过渡元素 时间 速度变化
• v-enter-to:进入完毕(设置元素显示完毕后的状态
• v-leave:准备离开(设置元素消失前的状态
• v-leave-active:离开的过程(设置过渡参数,如过渡时间,速度等 transition: all 5s ease //过渡元素 时间 速度变化
• v-leave-to:离开完毕(设置元素消失完毕后的状态

因为不一定只有一个过渡元素,一般在transition标签中设定过渡元素的名称 <transition name="handlerClass"></transition>
设定名称后,设定样式v要改为该名称 .handlerClass-enter…等

因为原生写起来代码较多比较麻烦,而且复杂的样式写起来较难,一般使用第三方动画库,如 animate.css 等

兄弟组件间的传值

1. 子传父传子
2. 用vuex传值
3. 用事件总线eventBus传值
   
   

用事件总线eventBus传值
原理: 子传父用的是this.$emit,由于兄弟组件没有使用关系,所以不能直接用this来直接emit事件,但可通过另外创建一个Vue实例来实现事件的发送和监听

//eventBus.js

import Vue from 'vue'

//默认暴露一个Vue实例
export default Vue() 

----------------------

//eventBus拿到的是一个Vue实例,所以不是用this而是用eventBus来发送和监听

//comnponent1.vue 
//用$emit方法发送值给兄弟组件comnponent2
import eventBus from '@/utils/eventBus.js'


methods:{
	sendMsgToBor(){
		eventBus.$emit('msgFromBro','Hello bro')
	}
}

----------------------

//comnponent2.vue
//用$on方法监听来自兄弟组件comnponent1发送过来的值
import eventBus from '@/utils/eventBus.js'

mounted(){
	eventBus.$on('msgFromBro',(data)=>{
		console.log(data) //'Hello bro'
		}
	)
}