Vue3 + mock.js

Vue CLI 3.0

最新版本的Vue Cli提供了图形化界面(GUI)来创建项目,可以自定义配置项,比如预设功能插件,和配置都通过图形化点击的方式完成,脱离命令行。在创建完工程后可以在图形化界面中完成插件和依赖的下载。

Vue CLI 3.0

npm run dev等命令放到图形化界面中,后台调用CLI命令执行,并显示性能相关参数
Vue CLI 3.0

MockJS

  1. 作用:拦截用户ajax请求,返回预设模拟数据。
// 通过Mock.mock 来模拟数据接口
Mock.mock('./api/goodslist', 'get', {
  status: 200,
  message: '获取商品信息成功',
  data: [1, 2, 3, 4]
})
  1. async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。返回一个promise对象
 async getGoodsList() {
    const { data: res } = await this.$http.get('./api/goodslist') // 解构赋值
    console.log(res)
}
  1. mock中自带生成随机数据的一些api,自动生成一些数据
Mock.mock('./api/goodslist', 'get', {
  status: 200,
  message: '获取商品信息成功',
  'data|5-10': [
    {
      id: '@increment(1)',
      name: '@cword(2, 8)',
      price: '@natural(2, 10)',
      count: '@natural(100, 999)',
      img: '@dataImage(78x78)'
    }
  ]
})
数据
  1. 还可以自定义随机生成数据的模板
Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座',
                              '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', 
                              '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
    constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }

Vue3.0

  1. install:未正式发布之前在Vue2的基础上加一个vue-function-api

    • npm install vue-function-api --save
    • import { plugin } from 'vue-function-api Vue.use(plugin)
  2. API,类似react16Hook函数,以proxy代替之前的Object.defineProperty来实现数据响应。把之前的data、methods等都写在setup函数里面

<template>
  <div class="test">
    <input type="text" v-model="msg"/>
    <p>data: {{ msg }}</p>
    <p>computed: {{ msgWrapper }}</p>
    <button @click="changeMsg()">changeMsg</button>
  </div>
</template>

<script>
// 这里引进来的都是函数(hook) 
import { value, computed, onMounted } from 'vue-function-api'
export default {

  // setup 里面写data methods computed 等

  setup () {
    const  msg  = value('hello world')

    // 计算属性
    const msgWrapper = computed(() => msg.value + '---hgz')

    // 方法
    const changeMsg = () => { msg.value = msg.value == 'hello world' ? 'world peace' : 'hello world' }

    // 生命周期函数,执行顺序 setup =》外部(Vue2)生命周期函数 =》内部生命周期
    onMounted(() => { console.log('zzz') })

    // 只有在 setup 函数里面返回的数据(data,method,computed)才能在页面上使用
    return {
      msg,
      msgWrapper,
      changeMsg
    }
  }

}
</script>>
页面效果

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,241评论 1 4
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 389评论 0 0
  • PS:转载请注明出处作者: TigerChain地址: https://www.jianshu.com/p/218...
    TigerChain阅读 20,567评论 3 65
  • 起床6:50 晨起,吃饭,上班 上午理疗、熏蒸、穴位注射 午休:吃饭,看《都挺好》, 下午:写病历、病人熏蒸。 下...
    七岳一株花阅读 21评论 0 1
  • 过去两天,从要离开家的前一天开始,心里就开始难过,一直到坐上高铁出发的时刻,心里还是有诸多不舍。可是昨天只缓了一下...
    吃木芽的小虫阅读 106评论 0 0