VueJS - 如何制作模特和系列？

Question

我正在尝试学习VueJS,我发现很难理解如何制作模型和集合.

例如,我想拥有一个Employees的集合(或列表),每个Employee都是一个模型.

但我不知道如何在VueJS中实现这一目标

非常感谢

Answer 1

最初创建Vue是为了以反应方式将数据绑定到模板,因此,没有像常规MVC那样的"控制器"或"模型"概念.

Vue只需要普通的javascript对象作为数据,所以如果你的一些数据需要映射到一个模型,那么它不是关于Vue,而是关于...... Javascript.

以下是实施示例(在ES6中):

class UserModel {
  construct(data) {
    this.data = data
  }

  name() {
    return this.data.firstname + ' ' + this.data.lastname
  }

  // and so on, put other methods here
}

var app = new Vue({
  el: '#app',
  data: {
    user: {}
  },
  created() {
    // axios or anything else for your ajax, or a new fetch api
    axios.get('/me')
      .then(response => {
        // of course the "this" here is the Vue instance because i used an es6 arrow function
        this.user = new UserModel(response.data)
      })
  }
})

而已.

如您所见,Vue与我创建的Model类没有关系,我只是将我的ajax数据映射到自定义类,然后将结果映射到Vue实例.

就如此容易.