分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

配置vuejs加载模拟数据

发布时间:2023-09-06 01:20责任编辑:顾先生关键词:jsvuejs配置

【个人笔记,非技术博客】

1.使用前确保安装axios插件,vuejs官方推荐,当然使用其他插件也可以

2、配置dev-server.js

var router = express.Router();var bookData = ?require(‘./../mock/book.json‘);//加载json数据router.get("/book",function (req,res,next) { ?res.json(bookData);});app.use(router);

  

3、导入axios

4、访问数据

import NavHeader from "./../components/header/header.vue" ?import NavFooter from "./../components/footer/footer.vue" ?import NavBread from ?"./../components/navBread/navBread.vue" ?import axios from ‘axios‘ ?export default{ ?????data(){ ????????return { ????????????bookList:[] ????????} ?????}, ???components:{ ???????NavHeader, ???????NavFooter, ???????NavBread ???}, ???mounted:function () { ?????this.getGoodsList(); ???}, ???methods:{ ?????????getGoodsList(){ ?????????????axios.get("/book").then((result)=>{ ?????????????????var res = result.data; ?????????????????this.bookList = res.result; ?????????????}) ?????????} ???} ?}

5、使用数据

<div> ?????<ul> ???????<li v-for="(item,index) in bookList"> ?????????<img v-bind:src="‘/static/images/‘+item.bookImg"/> ?????????<div>{{item.bookName}}</div> ?????????<div>{{item.bookAuthor}}</div> ???????</li> ?????</ul> ???</div>

配置vuejs加载模拟数据

原文地址:http://www.cnblogs.com/supe/p/7739923.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved