Vue_day06

1.axios的使用

特点

• 支持客户端发送Ajax请求

• 支持服务端Node.js发送请求

• 支持Promise相关用法

• 支持请求和响应的拦截器功能

• 自动转换JSON数据

• axios 底层还是原生js实现, 内部通过Promise封装的

语法:

axios({
  method: '请求方式', // get post
  
  url: '请求地址',
  
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  
  baseURL: 'https://some-domain.com/api/',
  
  headers: {'X-Requested-With': 'XMLHttpRequest'}, // `headers` 是即将被发送的自定义请求头
  
  timeout: 1000, // 如果请求话费了超过 `timeout` 的时间，请求将被中断
 
  responseType: 'json', // default// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  
  params: {  // 拼接到请求行的参数, get请求的参数
    xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

2.全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

3.Vue全局axios

impotr axios from 'axios'  //引入axios
Vue.proyotype.$axios = axios   //在Vue构造函数的原型对象上挂载
/局部使用
this.$axios({...})

4.和refs知识

作用获取原生DOM获取组件

<h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>   //自定义一个ref属性
this.$refs.myH     //获取DOM
组件同理,可以用习方法父组件调用子组件的方法

5.$nextTick使用

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

语法:

this.$nextTick({})
 // 扩展: await取代回调函数
 // $nextTick()原地返回Promise对象
 methods: {
        async btn(){
            this.isShow = true;
            // this.$nextTick(() => {
            //     this.$refs.myInp.focus()
            // })
            await this.$nextTick()
            this.$refs.myInp.focus()
        }
        }

应用场景:

1.Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。2.当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

3.在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。

6.name

组件name属性使用

import Com from './components/Com'
components:{
  [Com.name]: Com
}
​
​

作用:

1.配合keep-alive对组件缓存做限制(include/exclude='name')

2.组件递归操作

3.在dev-tools中使用