vue数据渲染

在webpack.dev.conf.js里它后面const portfinder = require('portfinder'),加入

const express = require('express')
const app = express()   //创建express应用程序
var goodsData = require('../mock/goos.json')//加载本地数据文件
var result = goodsData.result//获取对应的本地数据
var apiRoutes = express.Router()  // 获取一个 express 的路由实例
app.use('/goods', apiRoutes)
//数据请求end

在devServer里加入

 before(app) {
  app.get('/goods', (req, res) => {
  res.json({
    errno: 0,
    data:result,
  })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
})
},

在GoodList.vue里引入import axios from '../../node_modules/axios',

定义一个周期函数

mounted:function () {
    this.getGoodsList();
},

方法

methods:{
  getGoodsList(){
    axios.get("/goods").then((result)=>{
      var res= result.data;
      console.log(res.data);
      this.goodsList=res.data;

    })
  }
}

在html里

<ul>
  <li v-for="(item,index) in goodsList">
    <div class="pic">
      <a href="#"><img v-bind:src="'/static/'+item.productImg" alt=""></a>
    </div>
    <div class="main">
      <div class="name">{{item.productName}}</div>
      <div class="price">{{item.productPrice}}</div>
      <span style="display: none">{{item.productId}}</span>
      <div class="btn-area">
        <a href="javascript:;" class="btn btn--m">加入购物车</a>
      </div>
    </div>
  </li>
</ul>

返回一个data数据

data(){
    return{
    goodsList:[]
    }
  },

json数据

{
  "status":"0",
  "msg":"",
  "result":[
    {
    "productId":"100001",
    "productName":"小米4",
    "productPrice":2499,
    "productImg":"1.jpg"
    },
    {
      "productId": "100002",
      "productName": "小米2",
      "productPrice": 2494,
      "productImg": "2.jpg"
    },
    {
      "productId":"100003",
      "productName":"小米3",
      "productPrice":24,
      "productImg":"3.jpg"
    }
  ]
}