Vue and MVVM correspondence

The correspondence 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 pattern model-view-binder , which is mainly used to simplify the event-driven design of user interfaces

MVVM can be divided into four parts

• Model:模型
• View:视图
• ViewModel:视图模型
• Binder:绑定器

The main form is still Model-ViewModel-View

Model: refers to the domain model (object-oriented) that represents the real state content, or refers to the data access layer (data-centric) that represents the content View: is the structure, layout, and appearance (UI) view model

that the user sees on the screen

: View abstraction that exposes public properties and commands. Let the view and the data communicate, rely on the binder

Binder: declarative data and command binding

The relationship between Vue and these four parts

Correspondence:

• View: corresponding to real html and css
• View model: corresponding to Vue's template syntax
• Binder: corresponding to v-bind v-model @click :prop and other binding data syntax
• Model: those properties in Vue's instance $data $methods $computed etc.

In one .vuefile, we will see 3 parts <template /> <script /> <style />

<template />responsible for the view model and the binder

<style /> responsible for the Vue instance defined in the CSS of the view responsible for the data management of the model and the logic of the binder

<script />

How to explain Model-ViewModel-View with Vue ?

ViewModel-View phase

The view model is converted into a view, that is, the template syntax in Vue is converted into actual HTML and CSS. This part is mainly implemented automatically by Vue. Our developers mainly deal with the Model-ViewModel stage.

Model-ViewModel stage

This stage is when we instantiate the Vue object, add data, methods and other operations, and bind the data to the template.

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

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

Model: Define the data function to manage the data count, and define the add function to control the change of the count data.

ViewModel: It is an abstract syntax, mainly Vue's template syntax, binding data, and then Vue will convert it into real HTML

Since ViewModel and Model are mainly bound , that is, data and views are bound, and what kind of data you have determines what kind of view, so we generally call Vue a data-driven framework.

So many times, as long as we know the relationship between the data and the ViewModel, we also know what the UI looks like. At this time, we only need to manipulate the structure of the data and then manipulate the view.

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

export default {
  data () {
    return {
      arr: [1, 2, 3, 4, 5]
    }
  },
  created () {
    // 改变数据arr的数据结构，添加新的数值
    this.arr.push(6)
  }
}

The relationship between Model and ViewModel:

arr <li>is bound to a label, there are as many arr elements as there are. After an element is <li>

added to arr 6, there should be 6 at this time <li>. This is the binding of data and view. From the structure of the data, we can deduce the appearance of the view.

So we have to think more from the perspective of manipulating data, of course, the premise is that you have determined the binding relationship between Model and ViewModel. At this time, we only need to operate the Model.

The data structure used in the above example is an array, of course there are many other data structures. After the Model and ViewModel are bound, the data structure of the Model is basically determined. Then, at this time, we only need to add, delete and modify according to the data structure of this Model.

Another point is that there are multiple binding methods 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 <div>hello</div>, and multiple ViewModels can be To generate this, there are multiple ViewModels, that is, there are multiple Models (data structures)

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

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

There are 3 ViewModels and 3 Models above, but the generated Views are all the same<div>hello</div>