前戏
如果你是使用vscode软件进行开发前端项目，进行ajax调试的时候，建议安装liveServer插件。这样我们打开一个文件的时候，会以服务的方式打开。
vue中常用的ajax库有两个，一个是vue-resource，这个是在vue1.x中广泛使用的插件。还有一个是axios，在vue2.x中，官方强烈推荐的第三方ajax请求库。
vue-resource
参考文档：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
在Vue的生命周期中，我们知道created()是最早可以获取到data数据的，所以我们一般都是在created()里写ajax请求
因为vue-resource是第三方库，所以我们需要先进行安装，才能使用
npm install vue-resource
创建一个json文件，假设我的叫name.json
[
{"name":"张三","age":18},
{"name":"李四","age":66}
]
有json文件了，我们使用vue-resource请求数据
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="./node_modules/vue/dist/vue.js">script>
<script src="./node_modules/vue-resource/dist/vue-resource.js">script>
head>
<body>
<div id="app">
<h1>{{ message }}h1>
div>
<script>
new Vue({
el: "#app",
data: {
message: [] // 声明一个数组,后面用ajax请求的值重新赋值
},
// 发送异步请求
created(){
this.$http.get("http://127.0.0.1:5500/vue-01-core/name.json").then(response=>{
// 回调函数需要使用箭头函数（this Vue实例，不然this代表window）
// 获取到的数据存在response.data中
console.log(response.data)
this.message = response.data
},response=>{ // 错误时的回调函数
console.log(response.statusText)
})
}
})
script>
body>
html>
这样我们的name.json里的数据就都在h1标签里了
axios
在vue2.x里，官方推荐我们使用axios，参考文档：https://github.com/axios/axios/blob/master/README.md
首先来安装
npm install axios
我们还是使用上面的name.json文件，使用axios发送ajax请求
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="./node_modules/vue/dist/vue.js">script>
<script src="./node_modules/axios/dist/axios.js">script>
head>
<body>
<div id="app">
<h1>{{ res }}h1>
div>
<script>
new Vue({
el: "#app",
data: {
res: [] // 声明一个数组,后面用ajax请求的值重新赋值
},
// 发送异步请求
created(){
axios.get("http://127.0.0.1:5500/vue-01-core/name.json")
.then(response=>{
// 成功的回调函数
// 成功的数据也在response.data里
console.log(response.data)
this.res = response.data
})
.catch(error=>{
// 失败时的回调函数
// 失败的数据在error.message里
console.log(error.message)
})
.finally(()=>{
// 始终都会执行的回调函数，也可以不写
console.log('finally')
})
}
})
script>
body>
html>
注意：一定要使用箭头函数，如果没有参数时，小括号不能舍去，如果有一个参数时，小括号可以舍去