vue基础五

axios的使用：

• 下载axios包 yarn add axios
• 引入axios import axios from 'axios'
• get请求：
• 语法：axios（{method：'GET',url：'url地址',params:{ }}）.then（res=>console.log（res））
• post请求：
• 语法：axios（{method：'POST',url：'url地址',data:{ }}）.then（res=>console.log（res））
• params查询字符串方式，data请求体中传输

axios全局配置：

• axios.defaults.baseURL='url前缀基地址'

更多官网查阅

vue全局挂载方法：main.js中，Vue.prototype.$axios = axios（$axios为自定义名，axios为引入的axios对象）

label标签的for属性值和input的id值相等，增大点击范围

$refs

利用ref和$refs可以用于获取dom元素

 mounted() {
       console.log( document.getElementById('p'));
       console.log(this.$refs.pf);
       let demoobj = this.$refs.de
       demoobj.fn()
   },

$refs可以获取组件对象，调用组件对象里的方法

vue更新dom是异步的

$nextTick的使用：$nextTick里的函数体会等dom更新完再触发

$nextTick()原地返回Promise对象，可以用await取代回调，函数要async修饰

 methods: {
        async btn(){
            this.isShow = true;
            // this.$refs.myInp.focus()
            // 原因: data变化更新DOM是异步的
            // 输入框还没有挂载到真实DOM上
            // 解决:
            // this.$nextTick(() => {
            //     this.$refs.myInp.focus()
            // })
            // 扩展: await取代回调函数
            // $nextTick()原地返回Promise对象
            await this.$nextTick()
            this.$refs.myInp.focus()
        }
    }

可以用组件的name属性注册组件的名字。

 components: {
       demo,
      [nextTick.name]:nextTick
   },
------------------------------
    name:'my',
    data () {
        return {
            isShow:false
        }
    },

props用法扩展：

props: {
  background:String,//数据类型
  color:{
    type:String,
    default:'#fff'//默认值
  },
  title:{
    type:String,
    required:true//必传项
  },
  arr: {
            type: Array,
            required: true,
            validator(value) {
                //验证器，自定义验证，value就是传过来的数组
                if (value.length >= 2 && value.length <= 5) {
                    return true
                } else {
                    return false
                }
            },
        },
}