VUE study notes (2) In-depth understanding of VUE

1. Introduction to VUE

1. What is VUE?

VUE is a progressive JavaScript framework for building user interfaces. For simple applications, only a lightweight and compact core library is required. For complex applications, various VUE plug-ins can be introduced.

The template engine is the most important and core capability in Vue. When the template engine has not yet appeared, we update the content of the page. The general process is: monitor operation -> get data variables -> use data to splice into HTML template -> Stuff the HTML content into the corresponding place of the page -> bind the click and other events that need to be monitored in the HTML fragment.

It can be seen that a lot of HTML and variable splicing dynamic content need to be maintained. Although jQuery improves the operability of DOM elements, it is still difficult to avoid some problems in code readability and maintainability.

Now using Vue, you can easily use interpolation expressions { {}}and v-bindbinding variables to display in the template. At the same time v-if, with v-forthese built-in instructions, you can easily write code that is very readable and maintainable.

2. What are the characteristics of VUE?

(1), VUE adopts a componentized model to improve the code reuse rate and make the code better maintained

Vue encapsulates similar parts into a module. A module contains html, css, and js codes. The module can be reused anywhere. If the content in the module is modified, it will not affect other modules.

as the picture shows:

insert image description here

(2), Vue uses virtual DOM + Diff algorithm, which can greatly improve efficiency

Vue will first change the data into a virtual DOM. If the data changes, use the Diff algorithm to compare. If the new virtual DOM has the same DOM as the old virtual DOM, it will be reused directly, which can greatly improve efficiency. .

insert image description here

(3), Vue data two-way binding is the essence of Vue

Vue is an MVVM framework with two-way binding of data. The specific performance is: Viewchanges can be Modelmade in real time, and Modelchanges can be updated in real time View. This is also the essence of Vue. Especially when it comes to form processing, Vue's two-way data binding is very convenient.

The v-model in Vue.js is mainly used in the input input box of the form to complete the two-way binding between the view and the data:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>{
   
   {message}}</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        });
    </script>
</body>
</html>

(4), Vue instructions can add special behaviors to binding elements

Vue instructions mainly include built-in instructions and custom instructions, starting with "v-" and acting on HTML elements. Directives provide some special features. When binding a directive to an element, the directive will add some special behavior to the bound element. Such as: v-bind dynamic binding instructions, v-if conditional rendering instructions, v-for list rendering instructions, etc.

For example v-if condition:

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Default Type</div>

We can understand it like this:

function genThisHTML(scopeData) {
  // scopeData 为 Vue 实例里绑定的 data 数据
  if (scopeData.type === "A") {
    return `<div>Type A</div>`;
  } else if (scopeData.type === "B") {
    return `<div>Type B</div>`;
  } else {
    return `<div>Default Type</div>`;
  }
}

VUE study notes (2) In-depth understanding of VUE

Guess you like