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 is still model-view-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: Vue’s instance of those attributes datamethods $computed and so on

In a.vue file, we see three parts

  • <template /> Responsible for the viewmodel and binder
  • <style />Responsible for the view’s CSS
  • <script />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?

In the ViewModel-View stage, the ViewModel is converted to the View, that is, the template syntax in Vue is converted to the actual HTML and CSS. This part is mainly implemented automatically by Vue, and we developers mainly deal with the Model-ViewModel stage. Model-viewmodel phase This phase is where we instantiate the Vue object, add data,methods, and bind 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: abstract syntax, mainly template syntax of Vue, binding data, and then Vue will convert it into real HTML because, ViewModel and Model are mainly bound, that is, data and view are bound, and what kind of data you have determines what kind of view, so we generally call Vue a 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 data arr: [1, 2, 3, 4, 5]}}Copy the code

Model and ViewModel:

Arr is bound to the

  • tag, so there are as many
  • arR elements as there are arR elements, and then arR adds an element 6, so the length of arR is 6, so there should be 6
  • , so that’s the binding of the data to the view, and from the structure of the data we can tell what the view looks like. So we’re going to have to think a little bit more in terms of manipulating data, but of course you’ve got to figure out how the Model is bound to the ViewModel. At this point we just need to manipulate the Model. 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
    Hello

    , 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

    hello