在使用vue的過程中,數(shù)據(jù)過多的情況下我們寫在vue文件中就顯得有些累贅搁痛,所以我們需要把這些數(shù)據(jù)單獨寫在一個json文件中长搀。
json文件可以存放在src下宇弛,也可以存放在static目錄下鸡典。當json文件在src目錄下的情況我們可以使用如下方法進行獲取。
通過import引入然后再data中進行賦值枪芒。如果json文件在static中使用如下方法
其中mounted是vue的鉤子函數(shù):
1.鉤子函數(shù)
每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如彻况,需要設置數(shù)據(jù)監(jiān)聽、編譯模板舅踪、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等纽甘。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù),這給了用戶在不同階段添加自己的代碼的機會抽碌。
2.相對于前端來講
對于前端來說悍赢,鉤子函數(shù)就是指再所有函數(shù)執(zhí)行前,我先執(zhí)行了的函數(shù),即 鉤住 我感興趣的函數(shù)左权,只要它執(zhí)行皮胡,我就先執(zhí)行。
3.vue中的mounted
在這發(fā)起后端請求赏迟,拿回數(shù)據(jù)屡贺,配合路由鉤子做一些事情
類型: Function
詳細:
el被新創(chuàng)建的 vm.el替換,并掛載到實例上去之后調(diào)用該鉤子锌杀。如果root實例掛載了一個文檔內(nèi)元素甩栈,當mounted被調(diào)用時vm.el替換,并掛載到實例上去之后調(diào)用該鉤子糕再。如果root實例掛載了一個文檔內(nèi)元素量没,當mounted被調(diào)用時vm.el 也在文檔內(nèi)
該鉤子在服務器端渲染期間不被調(diào)用。
axios使用:
Axios 是一個基于 promise 的 HTTP 庫亿鲜,可以用在瀏覽器和 node.js 中允蜈。
1.它主要有如下特性:
瀏覽器端發(fā)起XMLHttpRequests請求
Node端發(fā)起http請求
支持Promise API
攔截請求和響應
轉化請求和響應(數(shù)據(jù))
取消請求
自動轉化json數(shù)據(jù)
客戶端支持抵御XSRF(跨站請求偽造)
2.Vue項目中使用如下命令安裝
npm install axios --save
3.使用
1).get請求
// 為給定 ID 的 user 創(chuàng)建請求
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);
});
// 發(fā)送 POST 請求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});;