vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式
vue 2.0 從接口中獲取數(shù)據(jù)
<template>
<div id="admins">
<h1>I am a title.</h1>
<a> written by {{ author }} </a>
<div v-for="admin in users">
{{admin.name}}<br>{{admin.password}}
</div>
</div>
</template>
<script type="text/javascript">
import axios from 'axios'
export default {
name: 'admins',
data () {
return {
author: "there is nonthing",
users:[]
}
},
mounted(){
this.getAdminList()
},
methods:{
getAdminList(){
var vm=this;
axios.get('/api/admins')
.then(function(response){
vm.users=response.data
})
}
}
}
</script>
<style>
</style>
解決axios發(fā)起http請(qǐng)求遇到跨域的問(wèn)題
修改 config/index.js
proxyTable: {
'/api': {
target: 'http://127.0.0.1:8080',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': ''//這里理解成用‘/api'代替target里面的地址，后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add'，直接寫(xiě)‘/api/user/add'即可
}
}
},
配置router
new Router({
mode:'history',
base:__dirname,
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/admins',
name: 'admins',
component: admins
}
]
})
加載組件
import admins from '@/components/HelloWorld'
export default {
name: 'App',
data () {
return {
Msg: "there is nonthing",
seen:false
}
},
componets:{
HelloWorld
}
}
心得：vue相當(dāng)于 和可以自定義html中的標(biāo)簽 和 屬性。
在開(kāi)發(fā)過(guò)程中，首先容易出現(xiàn)的是標(biāo)點(diǎn)符號(hào)問(wèn)題，其次是缺少引用的js，或者組件。
感覺(jué)看視頻中的寫(xiě)法和網(wǎng)絡(luò)上流傳的寫(xiě)法有些地方差別很大，特別是調(diào)用http接口獲取數(shù)據(jù)，還是參考網(wǎng)上使用axios解決跨域問(wèn)題，比較好，此外，官網(wǎng)視頻中使用的是在create里面發(fā)請(qǐng)求獲取數(shù)據(jù)，但是會(huì)報(bào)錯(cuò)，使用mounted不會(huì)報(bào)錯(cuò)。當(dāng)然使用npm進(jìn)行管理的話，首先要了解一下整個(gè)項(xiàng)目的目錄結(jié)構(gòu)。了解完之后再進(jìn)行開(kāi)發(fā)，才會(huì)避免摸不著頭腦的情況
以上這篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開(kāi)發(fā),路由配置方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章給大家介紹了Vue.js 表單控件操作的相關(guān)知識(shí)，本文通過(guò)實(shí)例演示了input和textarea元素中使用v-model的方法，本文給大家介紹的非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
vue?elementui?實(shí)現(xiàn)搜索欄子組件封裝的示例代碼
這篇文章主要介紹了vue?elementui?搜索欄子組件封裝,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關(guān)于如何利用VUE創(chuàng)建視頻流應(yīng)用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe分頁(yè)組件實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Vue+Element實(shí)現(xiàn)表格編輯、刪除、以及新增行的最優(yōu)方法
這篇文章主要為大家詳細(xì)介紹了Vue+Element實(shí)現(xiàn)表格的編輯、刪除、以及新增行的最優(yōu)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了vue中this.$createElement方法的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue通過(guò)Object.defineProperty來(lái)實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法） 實(shí)現(xiàn)數(shù)據(jù)劫持。下面簡(jiǎn)單記錄一下，vue監(jiān)聽(tīng)數(shù)據(jù)變化的原理2023-01-01
v-for循環(huán)中使用require/import關(guān)鍵字引入本地圖片的幾種方式
在做項(xiàng)目的過(guò)程中,模版相同,可是不標(biāo)題和圖片不同,循環(huán)標(biāo)題我們知道可以用v-for循環(huán),可是該怎么引入本地圖片呢？下面這篇文章主要給大家介紹了v-for循環(huán)中使用require/import關(guān)鍵字引入本地圖片的幾種方式,需要的朋友可以參考下2021-09-09
一文搞明白vue開(kāi)發(fā)者vite多環(huán)境配置
Vue是一款流行的JavaScript框架,用于開(kāi)發(fā)動(dòng)態(tài)單頁(yè)應(yīng)用程序,本地安裝和環(huán)境配置是學(xué)習(xí)和使用Vue的第一步,下面這篇文章主要給大家介紹了關(guān)于vue開(kāi)發(fā)者vite多環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue3?pinia管理數(shù)據(jù)的3種方式代碼
在Vue3中Pinia是一個(gè)狀態(tài)管理庫(kù),它提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)管理應(yīng)用程序的狀態(tài),這篇文章主要給大家介紹了關(guān)于Vue3?pinia管理數(shù)據(jù)的3種方式,需要的朋友可以參考下2024-04-04