axios的基本介绍 | Serena = 阳光果苏 = 自律给我自由

# axios -vue 的 ajax 版

假设用 vue 来获取数据，不是使用原生的 JS 方式获取，也不需要使用 jquery 的方式，而是用 axios。axios 目前是 vue 的官方推荐的 ajax 方式。axios 是第三方的基于 ES6 的 promise 封装的 ajax 方式。特色：支持浏览器、Nodejs 环境。语法类似于 jquery 的 ajax 方法。支持链式操作。官网： https://github.com/axios/axios 。不是 vue 自带，如果要使用，需要额外下载。

安装


//在当前项目中，执行以下指令
cnpm i axios -D

使用


//核心代码
this.$axios({
    method:"get|post",
    url:"xxx/xxx.json"
})
.then((res)=>{
    //获取数据成功后会执行的方法，数据在res中
})
.catch((err)=>{
    //获取数据失败后会执行的函数
})

// a. 只在某个组件中使用
<script>
    //在组件中，比如home.vue中导入
    import axios from 'axios'
</script>
// b. 全局在项目任意文件都可以使用

何时获取数据

a. 点击了后执行，则将 axios 代码放在 methods 中。

b. 想要加载组件就获取数据，就需要将 axios 放在 vue 的声明周期的钩子函数中，比如 created。

# Vue 的生命周期函数

生命周期：变量从出生到销毁这段时间。

局部：函数执行完就销毁。

全局：页面关闭就销毁。

vue：从 new 实例开始到 Ctrl+C 终止项目。

什么是生命周期。通俗讲，指的是 Vue 中实例或者组件从创建到消灭中间经过的一系列过程。就类似于一个人从出生到死亡。或一个变量从创建到销毁。这一过程中会发生很多什么时候做什么的事情，比如实例创建，元素绑定，视图渲染，vue 函数被执行等等。在该生命周期不同阶段会触发不同的函数，就称之为生命周期钩子函数。

钩子函数、回调函数与普通函数的区别。

比如 created 是钩子函数，当 vue 模板还没渲染成 HTML 前就会被调用，钩子函数与回调函数的区别在于，钩子函数只要满足了某个状态，比如消息捕获了，页面载入进来了就会触发，而回调函数则是完成了上面一个动作再执行，比如动画完成后再执行回调，普通函数则一般是通过调用执行。


//我们学过的钩子函数
onreadychange=function(){
    if(readyState==4){}
} 

//我们学过的回调函数：
$("div").click(function(){});
$.animate("样式","时间","运动方式",function(){});

# axios 全局使用

在 main.js 中操作


// 导入axios，需要启用
import axios from 'axios';

// 需要挂载到vue的实例中，变成Vue的全局方法
Vuee.prototype.$axios=axios;

在组件任意地方使用


this.$axios.get().then().catch();
//或
this.$axios({
    url:""
}).then().catch();

# props 的验证

如果不验证，那么使用父组件传进来的数据是这样使用：props:[‘自定义属性’] 。验证的目的：将从父组件传进来的数据类型进行验证，如果不符合要求，则会报错。

基本用法：
语法：


props:{
   // 自定义属性：数据的原始类型
}
// 比如：
props:{
	seller：Object
}
// 如果要验证多种数据类型需要使用数组将多个类型放在一块。比如：
props:{
    seller：[Object,Number]
}
//常见的数据类型为：
String
Number
Boolean
Function
Object
Array
Symbol  该类型为ES6引入的新类型，表示是独一无二的值，Symbol 值通过Symbol函数生成

设置默认值。比如：

   
props: {
         selectedFoods: {
           type: Array, //当类型是Array或Object时，default就是一个函数
           default () {
             return [];
           }
         },
         deliveryPrice: {
           type: Number,
           default: 0
         }
       }

设置必填项。比如：

   
//必填且传进来的必须是字符串
seller: {
    type: String,
    required: true
}

# vue 中的 ref 属性和 this.$refs

在 Vue 的模板中，我们可以在模板中的任何元素中添加 ref 属性，这样就可以在 Vue 实例中引用这些元素。更具体地说，可以访问 DOM 元素。
在 Vue 实例上使用 this.$refs 属性可以通过 ref=' 属性值’来引用这个按钮，得到的是一个匹配到该属性值的 DOM 数组。
在 vue 的自定义标签代表的组件上添加 ref=“属性值”，得到的是该组件实例，意味着可以访问该实例的所有属性和方法。

注意：如果只是写 this.$refs ，那么得到的是在 this 内所有的有 ref 属性的 DOM 节点对象和组件实例对象。


// 例子1：
// HTML模板中：
<ul>
  <!-- 添加ref属性，这样就可以在vue的实例中访问该元素，从而可操作该元素 -->
    <li v-for='item,index in seller.supports' ref="list" @click='hello(index)'>{{item.description}}</li>
</ul>

// vue实例的methods方法中：
methods:{
  hello(i){
      /*通过在元素上绑定事件，可以通过this.$refs访问DOM,他是一个对象，是所有在DOM上使用了ref属性的数组元素的集合，可以通过数组下标得到具体的那个DOM，如果是循环，传入index即可*/
      console.log(this.$refs.list[i]);
      this.$refs.list[i].innerText='我被点击了';
  }
}

// 例子2：
// 导入详情页模板
import vdetails from '@/components/details'
<!-- 在template中使用了该目标 -->
<vdetails ref="showFlag"></vdetails>
<!--可以在当前组件通过  -->

this.$refs.showFlag访问vdetails组件实例（所有方法和属性）
也就是如果在自定义组件标签中添加的ref，那么得到的就是该组件实例，也就可以通过该组件实例访问组件实例的所有方法和属性

# 调试 JS 代码的几种方式

使用 console.log (变量)
在 source 面板中设置断点
在代码中使用写 debugger
假设用的是 vue，则有个 Vue 的工具可以查看或者开启 Vue 的开发者模式

axios