A minimalist primer with Vue

1. Vue overview

Vue (pronounced /vjuː/, similar to view ) is a progressive framework for building user interfaces . Unlike other large frameworks, Vue is an implementer of the MVVM pattern and is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. .

What is the MVVM architecture?

MVVM is derived from the classic MVC (Model-View-Controller) pattern. The core of MVVC is the ViewModel layer, which is responsible for transforming the data objects in the Model to make the data easier to manage and use . Its function is as follows:

This layer performs two-way data binding with the View layer upwards;
Data interaction with the Model layer down through interface requests;

Model: Model refers to the data model, which generally refers to various business logic processing and data manipulation performed by the backend, mainly around the database system. The difficulty here mainly lies in the need for unified interface rules with the front-end agreement;
View: View is the view layer, which is the user interface. The front-end is mainly constructed by HTML and CSS. In order to display the data of the ViewModel or Model layer more conveniently, various front-end and back-end template languages have been produced, such as FreeMarker, Thymeleaf, etc., and major MVVM frameworks such as Vue.js, AngularJS, EJS, etc. also have their own built-in template languages for building user interfaces;
ViewModel: Middleware that connects views and data, Vue.js is the implementer of the ViewModel layer in MVVM.

In the MVVM architecture, data and views are not allowed to communicate directly, only through ViewModel, and ViewModel defines an Observer. ViewModel can observe changes in data and update the content corresponding to the view. ViewModel can listen to the view changes, and can notify the data changes. View state and behavior are encapsulated in the ViewModel . This encapsulation allows the ViewModel to completely describe the View layer. Because of the two-way binding, the content of the ViewModel is displayed in the View layer in real time, which is exciting because the front-end developer no longer has to inefficiently and cumbersomely manipulate the DOM to update the view .

Note: The View layer does not display the data of the Model layer, but the data of the ViewModel. The ViewModel is responsible for interacting with the Model layer, which completely decouples the View layer and the Model layer. This decoupling is crucial, it is the front and rear An important part of the implementation of the end separation scheme.

MVVM is quite mature, mainly used but not only in the development of web applications, the current popular MVVM frameworks are Vue.js, AngularJS and so on.

2. Vue program

Let's write the first Vue program. The writing process is as follows:

1. Create HTML files, import Vue.js, and write JS scripts

<div id="app">
    ...
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var vm = new Vue({
      
      
        el:"#app",  //绑定元素的id
        //Model:数据
        data:{
      
      
            "message":"Hello Vue!",
        }
    })
</script>

el:"#app": ID of the binding element;
data:{message:"Hello Vue!"}: There is a property named message in the data object, and the initial value Hello Vue! is set;

2. Bind data to page elements

<!--View 视图层-->
<div id="app">
    <h3>{
   
   {message}}</h3>
</div>

Description: You only need to use double curly braces to wrap the property named message created by Vue in the bound element to realize the data binding function, which also achieves the desired effect of the ViewModel layer.

3. Complete HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
</head>
<body>
    <!--View 视图层-->
    <div id="app">
        <h3>{
   
   {message}}</h3>
    </div>
    
    <!--导入Vue.js-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var em = new Vue({
      
      
            el:"#app",  //绑定元素的id
            //Model:数据
            data:{
      
      
                "message":"Hello Vue!",
            }
        })
    </script>
</body>
</html>

4. Test effect

In order to experience the data binding function brought by Vue more intuitively, we can test it in the browser's developer tools. The test process is as follows:

Run the first Vue app test on the browser, into the developer tools;
Enter in the console vm.message = "Hello World!", and then press Enter to find that the content displayed in the browser will directly change to Hello World!

insert image description here

The core of Vue.js is to implement the MVVM mode, which plays the role of the ViewModel layer. Its core is to implement DOM monitoring and data binding , and dynamically bind data without changing DOM elements or refreshing the page.