在使用vue的过程中,数据过多的情况下我们写在vue文件中就显得有些累赘,所以我们需要把这些数据单独写在一个json文件中。
json文件可以存放在src下,也可以存放在static目录下。当json文件在src目录下的情况我们可以使用如下方法进行获取。
通过import引入然后再data中进行赋值。如果json文件在static中使用如下方法
其中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.使用
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);
});;