axios:
vue ajax 前端页面和后台数据进行交互 json
vue 库
var Home={
template:`
这是首页内容
}
var Detail={
template:`
这是详情页内容
编号 | 品名 | 单价 | 数量 | 小计 |
---|---|---|---|---|
{{value.num}} | {{value.pname}} | {{value.price}} | {{value.count}} | {{value.sub}} |
` ,
data:function(){
return{
fruList:null
}
},
mounted:function(){
var self=this;
axios({
method:'get',//发送数据的方式
url:'fruit.json'
请求成功
}).then(function(resp)
console.log(resp.data)
self.fruList=resp.data
请求失败
}).catch(function(err){
})
}
}
//3.配置路由
const routes=[
{path:'/',component:Home},
{path:'/home',component:Home},
{path:'/detail',component:Detail}
]
//4.
const router=new VueRouter({
routes:routes
})
//5.
new Vue({
el:"#app",
router:router
})
下载:
npm install axios
访问页面:
网址:127.0.0.1:8080
安装http-server:
npm install http-server -g