vue引入假数据

在使用vue的过程中，数据过多的情况下我们写在vue文件中就显得有些累赘，所以我们需要把这些数据单独写在一个json文件中。

图片1.png

json文件可以存放在src下，也可以存放在static目录下。当json文件在src目录下的情况我们可以使用如下方法进行获取。

图片2.png

通过import引入然后再data中进行赋值。如果json文件在static中使用如下方法

图片3.png

其中mounted是vue的钩子函数：

1.钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
2.相对于前端来讲
对于前端来说，钩子函数就是指再所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。

3.vue中的mounted
在这发起后端请求，拿回数据，配合路由钩子做一些事情
类型： Function
详细：
el被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内
该钩子在服务器端渲染期间不被调用。

axios使用：
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1.它主要有如下特性：
浏览器端发起XMLHttpRequests请求
Node端发起http请求
支持Promise API
拦截请求和响应
转化请求和响应（数据）
取消请求
自动转化json数据
客户端支持抵御XSRF（跨站请求伪造）

2.Vue项目中使用如下命令安装
npm install axios --save

3.使用

图片4.png

图片5.png

1).get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

// 可选地，上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2).post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});;