vue学习day three

vue学习day three

自定义事件可以在组件中反向传递数据，prop可以将数据从父组件传递到子组件，反向操作得依靠自定义事件实现==$emit==

<template>
	<h3>单文件组件</h3>
	<button @click="sendHandle">发送数据</button>
</template>

<script>
export default{
	name:"MyComponent",
	methods:{
		sendHandle(){
			this.$emit("onCustom","数据")//两个参数：1.字符串 2.传递的数据
		}
	}
}
</script>

组件的生命周期

每个组件在被创建时搜需要经过一系列的初始化过程–例如，需要设置数据监听、编译模板、将实例挂在到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期的函数，这给了用户在不同阶段添加自己代码的机会

8个生命周期

1. 创建时：beforeCreate、created
2. 渲染时：beforeMount、mounted
3. 更新时：beforeUpdate、updated
4. 卸载时：beforeUnmount、unmount

Vue引入第三方

Swiper:开源、免费、强大的触摸滑动插件 是一个纯js打造的滑动特效插件、面向各种移动终端 可以实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果

swiper官方文档

https://swiperjs.com/vue

引入第三方：学会找资源文档 看资源（Swiper官网 Github vue官网）

npm install --save swiper(--save 可以将“swiper”安装到package.json中)

<template>
	<div class='hello'>
		<swiper class='mySwiper'>
			<swiper-slide>1</swiper-slide>
			<swiper-slide>2</swiper-slide>
			<swiper-slide>3</swiper-slide>
		</swiper>//在swiper当中放swiper-slide
	</div>
</template>

<script>
	import{ Swiper,SwiperSlide } from 'swiper/vue'
	import 'swiper/css'//引入css样式！！！ 不然无法使用
</script>

添加指示器

<template>
	<div class='hello'>
		<swiper class='mySwiper' ：modules='modules' :pagination='{clickable:true}'>
			<swiper-slide>1</swiper-slide>
			<swiper-slide>2</swiper-slide>
			<swiper-slide>3</swiper-slide>
		</swiper>//在swiper当中放swiper-slide
	</div>
</template>

<script>
	import{ Pagination } from 'swiper';
	import{ Swiper,SwiperSlide } from 'swiper/vue';
	import 'swiper/css'//引入css样式！！！ 不然无法使用;
	import 'swiper/css/pagination';
	
export default {
	name:'Hello',
	data(){
		return{
			modules:[Pagination]
		}
	},
	component:{
		Swiper,
		SwiperSlide
	}
}
</script>

Axios网络请求

Axios是一个基于promise的网络请求库

安装：Axios的应用是需要独立安装的

npm install --save axios

引入：

1. 组件中引入：import axios from “axios” （每一个需要网络请求的组件都需要引用）

2. 全局引用：(使用率比较高)

   import axios from "axios"//在 main.js 中写
   
   //将axios挂载到全局
   const app = createApp(App)//创建app对象
   app.config.globalProperties.$axios = axios//挂载对象
   app.mount('#app')
   
   //在组件中调用
   this.$axios
   

   网络请求基本示例

   1. get请求

      axios({
      	method: "get",
      	url:
      }).then(res=>{
      	console.log(res.data)
      })
      

   2. post请求方式

      axios({
      	method:"post",
      	url:"http://iwenwiki.com/api/blueberrypai/login.php",
      	data:qs.stringify({
      		user_id:"iwen@qq.com",
      		password:"iwen123",
      		verfication_code:"crfvw"
      	})
      }).then(res =>{
      	condole.log(res.data);
      })
      

      注意事项：post请求参数是需要额外处理的

      1. 安装依赖：npm install --save querystring
      2. 转换参数格式（参数格式只允许字符串）：qs.stringify({})

axios网络请求封装

在日常应用过程中，一个项目的网络请求会很多，此时一般采取的方案是将网络请求封装起来

1. 先下载所需要的组件，再启动项目

   npm install --save axios
   npm install --save querystring
   

2. 再在src目录下创建文件夹utils，并创建文件request.js，用来存储网络请求

3. 在request.js中导入 axios querystring

4. 在request.js中创建属于自己的网络请求对象（instance）在里面带哦用create方法

   const instance = axios.create({
   	//网络请求的公共配置
   	timeout:5000//如果时间超过5秒则终止请求
   })
   

   axios参考文档：https://www.kancloud.cn/yunye/axios/234845

但是在网络请求中，最常用的是拦截器的应用，用户在发送数据之前和接收数据之前都需要对数据进行拦截（例如我们可以想通过post方法请求网络的话，可以将data拦截，通过querystring.stringify将data变为字符串）

1. 发送数据前

instance.interceptors.request.use(//里面包含两个函数 请求正确或者错误
	config =>{
		if(config.method === "post" ){
			config.data = querystring.stringify(config.data)
		}
		return config;
	}	
	error =>{
		return Promise.reject(error)
	}
)

2. 获取数据之前

   instance.interceptors.response.use(
   	response =>{//正确的请求
   		return response.status === 200 ? Promise.resolve : Promise.reject(response)
   	},
   	error =>{//错误的请求
   		const { response } = error;//把错误的信息存储到response中
   		errorHandle(response.status,response.info)
   	}
   )
   

   • 对于各种状态码的监听

const errorHandle = (status,info) => { //status 状态码信息  info具体的错误信息
	switch(status){
		case 400:
			console.log("语义有误");
			break;
		case 401:
			console.log("服务器认证失败");
			break;
		case 403:
			console.log("服务器拒绝访问");
			break;
		case 404:
			console.log("地址错误");
			break;
		case 500:
			console.log("服务器遇到意外");
			break;
		case 502:
			console.log("服务器无响应");
			break;
		default:
			console.log(info);
			break;
	}
}

utils文件中存储的只是api的方法

src文件夹下面一般放我们的api文件夹 api文件夹又由path.js（放路径）和index.js组成

path.js中放路径（公共加具体的路径）

const base = {
	baseUrl:"http://iwenwiki.com", //公共路径
	chengpin:"/api/blueberrypai/getChengpinDetails.php"
}

export default base;

index.js

import axios from "../utils/request"
import path from "./path"

const api = {
	getChengpin(){
		return axios.get(path.baseUrl + path.Chengpin)
	}
}

component.vue

import api from "../api/index"

export default{
	mounted(){
		api.getChengpin().then(res =>{
			console.log(res.data);
		})
	}
}