Vue汇总

一、axios

• 使用axios的好处：可以返回一个Promise实例，支持服务端和客户端。
• 安装：yarn add axios
• 导入：import axios from 'axios'
• 使用

  axios({
    method: '请求方式', // get post
    url: '请求地址',
    data: {    // 拼接到请求体的参数,  post请求的参数
      xxx: xxx,
    },
    params: {  // 拼接到请求行的参数, get请求的参数
     	xxx: xxx 
    }
  }).then(res => {
    console.log(res.data) // 后台返回的结果
  }).catch(err => {
    console.log(err) // 后台报错返回
  })

二、$nextTick和$refs

• 作用：获取原生的Dom元素

<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
  </div>
</template>

<script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1
    }
}
</script>

<style>

</style>
        return {
            count: 0
        }
    },
    methods: {
        btn(){
            this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)
            console.log(this.$refs.myP.innerHTML); // 0

            // 原因: Vue更新DOM异步
            // 解决: this.$nextTick()
            // 过程: DOM更新完会挨个触发$nextTick里的函数体
             this.$nextTick(() => {
                console.log(this.$refs.myP.innerHTML); // 1
            })
        }
    }
}
</script>

<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
  </div>
</template>

<script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1
    }
}
</script>

<style>

</style>

三、reduce方法的使用

• reduce()方法接收一个函数作为累加器，reduce为数组中的每一个元素依次执行回调函数，接收四个参数：初始值（上一次回调返回的值），当前元素，当前索引，原数组。（简单来说就是用来求和的）
• 语法：reduce（callback， [initialValue]

• callbck包含四个参数：1.previousvalue：上一次回调函数的返回值，或者提供的初始值（initialValue） 2.currentValue: 数组中当前被处理的元素  3.index： 当前索引  4.array： 原数组