The correspondence between Vue learning 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 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

<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