Mapping between Vue and MVVM

Vue is inspired by MVVM, so what are the similarities? And the corresponding relationship?

MVVM(Model-view-viewmodel)

MVVM also has a mode, Model-View-Binder, that simplifies event-driven programming for user interfaces

MVVM can be divided into four parts

• Model: Model
• View: View
• -Leonard: The ViewModel
• Binder: Binder

The main form isModel-ViewModel-View

Model: refers to the domain model (object-oriented) that represents the real state content, or the data access layer (data-centric) that represents the content. View: Is the structure, layout, and appearance (UI) view model that users see on the screen: A view abstraction that exposes common properties and commands. Communication between views and data is enabled by a binder binder: declarative data and command binding

The relationship between Vue and these four parts

Correspondence:

• View: corresponds to real HTML and CSS
• Viewmodel: Template syntax for Vue
• Binder: corresponding to v-bind V-model@click :prop and other binding data syntax
• Model: Those properties in an instance of Vue
  Datamethods $computed and so on

In a.vue file,

is responsible for the view model and binders.

Is responsible for the view’s CSS. The Vue instance defined in the Vue is responsible for the data management of the model and the binder logic

How to interpret model-viewmodel-view in terms of Vue?

The ViewModel – View phase

The ViewModel is converted to the view, that is, the template syntax in the Vue is converted to the actual HTML and CSS. This part is mainly automated by the Vue, and we developers mainly deal with the Model-ViewModel phase.

The Model – the ViewModel stage

This is where we instantiate the Vue object, add data,methods, and bind the data to the template.

<template>
  <div class='test' @click='add'>{{count}}</div>
</template>Copy the code

// <script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    add (e) {
      this.count += 1
    }
  }
}Copy the code

ViewModel: Is abstract syntax, mainly the template syntax of Vue, binding data, and then Vue will convert it into real HTML

Since ViewModel and Model are mainly bound, that is, data and view are bound, what kind of data you have determines what kind of view, so we generally call Vue data driven framework. So a lot of times, if you just know how the data relates to the ViewModel, you know what the UI looks like, and then you just manipulate the structure of the data, and you manipulate the view.

<template>
  <ul class='list'>
    <li class='item' v-for='(v, index) in arr' :key='index'>{{v}}</li>
  </ul>
</template/>Copy the code

export default {
  data () {
    return {
      arr: [1, 2, 3, 4, 5]
    }
  },
  created() {// Change the data structure of data arr, add a new value this.arr. Push (6)}}Copy the code

Model and ViewModel:

Arr is bound to the

The data structures used in the above example are arrays, but there are many more. Once the Model is bound to the ViewModel, the data structure of the Model is basically determined. In this case, we only need to add, delete and modify the data structure of the Model. The other thing is that there are multiple bindings in vUE, v-if v-for, etc., a ViewModel has only one Model data structure, but the same View can have multiple viewModels such as this View

, There are multiple viewModels that can generate this, there are multiple viewModels which means there are multiple models

<template>
  <div>{{data}}</div>
  <div>{{obj.data}}</div>
  <div>{{arr[0]}}</div>
</template>Copy the code

export default {
  data () {
    return {
      data: 'hello',
      obj: {
        data: 'hello'
      },
      arr: ['hello']}}}Copy the code

There are 3 viewModels and 3 models but the View generated is the same