Vue Axios
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 使用 - Axios目录
Axios
哀求方法
功能
安装
使用CDN
引入axios
使用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，官网如下图：
https://i-blog.csdnimg.cn/direct/3726ba3304184d42b6d5f266ff122251.png
使用CDN
假如不安装的话，也可以使用CDN方式直接引用使用。
如下图：
https://i-blog.csdnimg.cn/direct/fa42336142a2468096d2b2d3616643ce.png
引入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> 打印获取的数据，如下：
https://i-blog.csdnimg.cn/direct/73870846102843bf9730d17f69b843f8.png
赋值
修改变乱中的处理，改为赋值并在按钮的下方循环渲染列表。
示比方下：
<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> 效果：
https://i-blog.csdnimg.cn/direct/26ba627460154a9d905aaa23406cb900.png
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 使用 - Axios
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]