组件的生命周期、vue2中使用axios、插槽

  axios({
      url: 'http://localhost:8089/students/test',  //远程服务器的url
      method: 'get' //请求方式
    }).then(res=>{
      this.students = res.data
    }).catch(e=>{
      console.log(e)
    })
//缺点：每个使用axios的组件都需要导入

强调：axios对服务器端数据的封装

res.config：响应信息的配置情况

res.data：响应的数据

res.headers：响应头信息（信息的大小、信息的类型）

res.request：异步的请求对象（XMLHttpRequest）

res.status：请求-响应的状态码（200）

res.statusText：请求-响应状态码对应的文本信息

B、在项目的main.js文件中导入axios，将其写入Vue的原型中（推荐使用）

import axios from "axios";
Vue.prototype.$http = axios //在Vue的原型上添加一个$http属性，该属性保存了axios
axios.defaults.baseURL = 'http://localhost:8089'

在组件中通过this.$http的方式来使用

this.$http.get('http://localhost:8089/students/test').then(res=>{
          this.students = res.data
}).catch(e=>{
          console.log(e)
})

缺点：只能在vue2中使用，vue3中不能用

C、将axios单独封装到某个配置文件中（在配置文件中单独封装axios实例）—— （推荐使用）

//配置文件：axiosapi.js
import axios from "axios";
const axiosapi = axios.create({
    baseURL: 'http://localhost:8089', //基础的地址
    timeout: 2000  //连接超时的时间(单位是毫秒)
})
export default  axiosapi  //axiosapi是axios的实例

import $http  from '../config/axiosapi'  //$http是可变的
$http.get('/students/test').then(res=>{
          this.students = res.data
}).catch(e=>{
          console.log(e)
})

优点：既可以在Vue2中使用，也可以在Vue3中使用

3、axios中不同请求方式向服务器提交数据的格式

（1）get方式请求：服务器端通过 req.query.参数名来接收

第一种：直接将请求参数绑在url地址上。

第二种：通过params方式进行提交

（2）post方式请求：服务器端通过 req.body.参数名来接收

（3）put方式请求：和post方式一样

（4）delete方式请求：和get方式一样

三、插槽

1、组件的三大核心：属性（data、props）、事件、插槽

2、插槽（slot）:将子组件和父组件进行组合，可以弥补视图的不足。使组件具有更好的扩展性

<组件的封装方式：抽取共性、保留不同>

3、插槽的使用方式

（1）vue2.6以前的版本：

A、匿名插槽(默认插槽)：一个组件中有且只能有一个

<div>
    <h2>子组件</h2>
    <slot></slot> <!-- 匿名插槽：预留的位置，具体放什么元素由该组件的使用者决定-->
    <p>西安蜗牛学苑</p>
  </div>

B、具名插槽：给插槽命名

C、作用域插槽：父组件显示不同的页面结构，页面中的数据来自于子组件

（2）Vue2.6以后的版本：插槽使用统一的新的语法（v-slot指令），用来取代和slot-scope

A、匿名插槽（默认插槽）：在父组件中使用v-slot指令

B、具名插槽：和原版本相同

C、作用域插槽

须臾不敢忘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件的生命周期、vue2中使用axios、插槽

组件的生命周期vue2中使用axios插槽
复制链接

扫一扫

组件的生命周期、vue2中使用axios、插槽

一、组件的生命周期

1、什么是组件的生命周期

2、生命周期函数

3、生命周期的阶段划分

4、钩子函数

5、keep-alive组件

6、生命周期函数：

二、vue2中使用axios

1、axios：是一个基于Promise的网络请求库。既可以在node.js（服务器端）使用，也可以在浏览器端使用

2、vue中的使用方法

3、axios中不同请求方式向服务器提交数据的格式

三、插槽

1、组件的三大核心：属性（data、props）、事件、插槽

2、插槽（slot）:将子组件和父组件进行组合，可以弥补视图的不足。使组件具有更好的扩展性

3、插槽的使用方式

“相关推荐”对你有帮助么？