Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 使用 - Axios
目录
Axios
Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。
axios是第三方的东西，需要下载和引入。
请求方法
axios.get()
axios.post()
axios.put()
axios.delete()
功能
从浏览器中创建 XMLHttpRequest
从 node.js 中创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持防止 XSRF 攻击
安装
使用命令npm i axios，官网如下图：
使用CDN
如果不安装的话，也可以使用CDN方式直接引用使用。
如下图：
引入axios
把CDN网址的js文件下载到本地。
示例如下：
<script src="../lib/vue.js"></script>
<script src="../lib/axios.min.js"></script>
使用axios
在按钮上绑定点击事件，在点击事件中使用axios请求json数据。
示例如下：
<div id="box">
<button @click="handleClick">ajax-axios</button>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
handleClick() {
axios.get("./json/ebook.json").then(res => {
console.log(res.data)
})
}
}
})
</script>打印获取的数据，如下：
赋值
修改事件中的处理，改为赋值并在按钮的下方循环渲染列表。
示例如下：
<div id="box">
<button @click="handleClick">ajax-axios</button>
<ul>
<li v-for="item in datalist">
<div>
<img :src="item.cover" alt="" width="30px">{{item.title}}
</div>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
handleClick() {
axios.get("./json/ebook.json").then(res => {
this.datalist = res.data.data.data
})
}
}
})
</script>效果：
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 使用 - Axios