axios与Vue整合

在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求。此时会遇
到如下两个问题:
每个组件中都需要导入axios
每次发请求都需要填写完整的请求路径可以通过全局配置的方式解决上述问题:

配置请求根路径

1
axios.defaults.baseURL = 'http://api.com '

//将axios作为全局的自定义属性,每个组件可以在内部直接访问(vue3)

1
app.config.g1oba1Properties.$http = axios

将axios作为全局的自定义属性,每个组件可以在内部直接访问(vue2)

1
vue.prototype.$http = axios

常用指令

指令 作用
v-bind 为HTML标签绑定属性值,如设置href,CSS样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show 根据条件展示某元素,区别在于切换的是display属性的值
v-for 列表渲染,遍历容器的元素或者对象的属性