1、MVVM

1.1、 What is? MVVM

MVVM(Model-View-ViewModel) It's a software design pattern , From Microsoft WPF( Used in substitution WinForm, This technology was used to develop desktop applications before ) and Silverlight( Be similar to Java Applet, Simply put, it's running on a browser WPF) Architect Ken Cooper and Ted Peters Development , It's an event driven programming that simplifies the user interface . from John Gossman( also WPF and Sliverlight Architect ) And 2005 Published on his blog in .

MVVM From the classic MVC(Model-View-Controller) Pattern .MVVM The core is ViewModel layer , Responsible for the conversion Model Data objects in to make data easier to manage and use . Its functions are as follows :

  • This layer carries out bidirectional data binding with the view layer upward
  • Down and Model Layer through the interface request data interaction

MVVM It's quite mature , Mainly used but not only in network application development . Now popular MVVM Framework has Vue.js,Anfular JS

1.2、 Why use MVVM

MVVM Patterns and MVC Model as , The main purpose is to separate views (View) And models (Model), There are several benefits

  • Low coupling : View (View) Can be independent of Model Changes and modifications , One ViewModel Can be bound to different View On , When View When it changes Model It can be the same , When Model When it changes View It can be the same .
  • Reusable : You can put some view logic in one ViewModel Inside , Let a lot of View Reuse this view logic .
  • Independent development : Developers can focus on the development of business logic and data (ViewMode), Designers can focus on page design .
  • Testable : Interfaces are always difficult to test , And now the test can target ViewModel To write .

 Insert picture description here

View

View Is the view layer , That's the user interface . The front end is mainly composed of HTH L and csS To build , To make it easier to show vi eu to del perhaps Hodel Layer data , Various front-end and back-end template languages have emerged , such as FreeMarker,Thyme leaf wait , The major MV VM The frame is like Vue.js.Angular JS, EJS They also have their own built-in template languages for building user interfaces .

Model

Model Data model , It generally refers to various business logic processing and data manipulation carried out by the back end , Mainly around the database system . The difficulty here mainly lies in the need for unified interface rules with the front end

ViewModel

ViewModel It is the view data layer generated and maintained by the front-end developers . In this layer , Front end developers get from the back end Model Data conversion processing , Make secondary packaging , To generate compliance View Layer uses the expected view data model .
   It should be noted that View Model The encapsulated data model includes two parts: view state and view behavior , and Model Layer's data model is state only

  • For example, what is displayed in this section of the page , What is shown in that block belongs to the view state ( Exhibition )
  • What happens when the page loads in , What happens when you click on this piece , What happens when this piece is scrolling is a view behavior ( Interaction )

View state and behavior are encapsulated in View Model in . Such packaging enables View Model It can be described completely View layer . Thanks to bidirectional binding , View Model The content of will be displayed in real time View layer , It's exciting , Because front-end developers no longer have to manipulate inefficiently and troublesome DOM To update the view .
  MVVM The frame has made the dirtiest and most tired piece , We developers only need to deal with and maintain View Model, Update the data view and it will be updated automatically , Real event driven programming .
  View Layers don't show Model Layer data , It is ViewModel The data of , from ViewModel Responsible for working with Model Layer interaction , This is completely decoupled View Layer and the Model layer , This decoupling is critical , It is an important part of the implementation of the front and rear end separation scheme .

2、Vue

Vue( pronunciation /vju/, Be similar to view) Is a progressive framework for building user interfaces , Published on 2014 year 2 month . Unlike other large frameworks , Vue Designed to be applied layer by layer from the bottom up .Vue The core library focuses only on the view layer , Not only easy to get started , It's also easy to work with third-party libraries ( Such as :vue-router,vue-resource,vue x) Or integration of existing projects .

2.1、MVVM Pattern implementer

  • Model: The model layer , Here it means JavaScript object
  • View: View layer , Here it means DOM(HTML Element of operation )
  • ViewModel: Middleware connecting views and data , Vue.js Namely MVVM Medium View Model Layer implementers

stay MVVM Architecture , Data and views are not allowed to communicate directly , Only through ViewModel To communication , and View Model Is to define a Observer The observer

  • ViewModel Be able to observe changes in data , And update the content of the view
  • ViewModel Be able to monitor changes in the view , And be able to notify data changes

thus , We'll see , Vue.js It's just one. MV VM Implementer , His core is to achieve DOM Listening and data binding

2.2、MVVM Pattern implementer

  • Model: The model layer , Here it means JavaScript object
  • View: View layer , Here it means DOM(HTML Element of operation )
  • ViewModel: Middleware connecting views and data , Vue.js Namely MVVM Medium View Model Layer implementers

stay MVVM Architecture , Data and views are not allowed to communicate directly , Only through ViewModel To communication , and View Model Is to define a Observer The observer

  • ViewModel Be able to observe changes in data , And update the content of the view
  • ViewModel Be able to monitor changes in the view , And be able to notify data changes

thus , We'll see , Vue.js It's just one. MV VM Implementer , His core is to achieve DOM Listening and data binding

2.3、 Why use Vue.js

  • Lightweight , Small size is an important indicator .Vue.js After compression, there are only 20 many kb(Angular After the compression 56kb+,React After the compression 44kb+)
  • Mobile first . More suitable for mobile terminals , For example, mobile terminal Touch event
  • Easy to use , The learning curve is smooth , The documentation is complete
  • Absorbed Angular( modularization ) and React( fictitious DOM) Strengths , And has its own unique function , Such as : Compute properties
  • Open source , High community activity
  • ……

3、 first Vue Program

【 explain 】IDEA Can install Vue Plug in for !
   Be careful :Vue I won't support it IE 8 Up to , because Vue Used IE 8 Unable to simulate ECMAScript 5 characteristic . But it supports all compatibility ECMAScript 5 Browser .

3.1、 Download address

  • Development version
    • Includes full warning and debug mode :https://yuejs.org/js/vue.js
    • Removed warning , 30.96KBmin+gzip:https://vuejs.org/js/vue.min.js
  • CDN
    • <script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
    • <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

3.2、 Code writing

Vue.js The core of this is the realization of MVVM Pattern , Her role is View Model layer , So the so-called first application is to show her data binding function , The operation process is as follows :

  1. Create a HTML file

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body></body></html>
  2. introduce Vue.js

    <!--1. Import Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
  3. Create a Vue example

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            /*Model: data */
            data:{
                message:"hello,vue!"
            }
        });
    </script>

    explain :

  • el: '#vue': Bound element ID
  • data:{message:'Hello Vue!'}: One of the data objects is called message Properties of , And set the initial value Hello Vue!

Bind data to page elements

<!--view layer , Templates -->
<div id="app">
    {{message}}
</div>

explain : Just use double curly braces in the bound element to Vue Created with the name message Property wrapped up , The data binding function can be realized , And that's what happened View Model The desired effect of the layer , Is it right? EL Expressions are very much like ?

3.3、 complete HTML

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--view layer , Templates --><div id="app">{{message}}</div><!--1. Import Vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script><script type="text/javascript">var vm = new Vue({el:"#app",/*Model: data */data:{message:"hello,vue!"}});</script></body></html>

3.4、 test

For a more intuitive experience Vue Bring data binding capabilities , We need to test it in the browser , The operation process is as follows :

  1. Run the first one on the browser Vue Applications , Enter developer tools

  2. Input at the console vm.message=‘HelloWorld’, And then go back , You will find that the content displayed in the browser will directly become HelloWorld

  3. At this point, you can directly input vm.message To modify the value , The middle can be omitted data Of , In this operation , We didn't take the initiative DOM, Let the content of the page change , That's what it's all about Vue Implementation of data binding function based on ; MV VM The pattern requires View Model Layer is to use observer mode to monitor and bind data , In order to achieve the rapid response of data and view .