mockjs+vue页面直接展示数据的方法

下面是关于“mockjs+vue页面直接展示数据的方法”的详细讲解，它包含以下几个步骤：

1. 安装mockjs模块

在开始使用mockjs之前，我们需要先安装该模块。可以使用npm来安装，命令如下：

npm install mockjs --save-dev

1. 编写mock数据

我们可以在项目里新建一个mock文件夹，用于存放mock数据。在该文件夹下新建一个js文件，比如我们可以新建一个mock-data.js文件。在该文件中，我们可以编写mock数据。下面是一个mock数据的示例：

const Mock = require('mockjs')

const data = Mock.mock({
  'list|1-10': [{
    'id|+1': 1,
    'name': '@cname(2,4)',
    'age|20-30': 25,
    'email': '@EMAIL',
    'phone': /^1[3456789]\d{9}$/,
    'address': '@county(true)',
    'description': '@cparagraph'
  }]
})

module.exports = data

以上代码使用mockjs生成了一个列表，列表中包含10个元素，每个元素都包含id、name、age、email、phone、address、description等七个属性。其中，id属性是自增长的数字，name属性是随机的中文名字，age属性是20到30岁之间的随机值，email属性是随机的邮箱地址，phone属性是11位随机的手机号码，address属性是随机的按照省、市、县分层的地址信息，description属性是随机的段落。

1. 配置mock拦截

在开发环境下，我们需要配置mock拦截，使得Ajax请求被拦截后可以返回我们预定义的mock数据。这里以vue-cli 3.x项目为例，可以在vue.config.js文件中进行mock拦截配置。代码如下：

const mockData = require('./mock/mock-data.js')
module.exports = {
  // ...
  devServer: {
    before(app) {
      app.get('/api/list', (req, res) => {
        res.json(mockData)
      })
    },
    // ...
  },
  // ...
}

以上代码指定了在访问/api/list接口时，返回我们预先定义的mock数据。

1. 编写Vue组件代码

现在我们已经有了mock数据和mock拦截配置，接下来我们可以用Vue编写一个组件来展示模拟数据。下面是代码示例：

<template>
  <div>
    <h2>User List:</h2>
    <ul>
      <li v-for="item in userList" :key="item.id">
        {{item.id}}. {{item.name}}, {{item.age}}, {{item.email}}, {{item.phone}}, {{item.address}}, {{item.description}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: []
    }
  },
  created() {
    this.loadUserList()
  },
  methods: {
    loadUserList() {
      const apiUrl = '/api/list'
      this.$http.get(apiUrl).then(res => {
        this.userList = res.data.list
      })
    }
  }
}
</script>

以上代码是Vue的一个组件，用于展示用户列表。在该组件中，我们使用了$.ajax方法从/api/list接口中获取数据，并将用户列表数据绑定在页面上进行展示。

1. 运行代码，查看效果

在完成以上所有步骤之后，我们可以运行代码，查看效果。可以使用以下命令运行代码：

npm run serve

这个命令会启动一个开发服务器，并打开浏览器访问该服务器，在浏览器中查看我们刚才编写的Vue组件展示的模拟数据。

上述步骤示例包含了以上使用mockjs+Vue直接展示数据的完整攻略。另外，我们也可以根据自己的需求在以上步骤基础上进行扩展，使得应用更加灵活和高效。