Vue Basics: template syntax

1. Template syntax

1.1 overview of template syntax

Vue.js uses an HTML based template syntax that allows developers to declaratively bind the DOM to the data of the underlying Vue instance. All Vue JS templates are legal HTML, so they can be parsed by standard browsers and HTML parsers.

In the underlying implementation, Vue compiles the template into a virtual DOM rendering function. Combined with the response system, Vue can intelligently calculate how many components need to be re rendered and minimize the number of DOM operations.

If you are familiar with virtual DOM and prefer the original power of JavaScript, you can also write render functions directly without templates and use optional JSX syntax.

1. What are the ways to render strings to the page?
Splicing strings using native js
Using template engine splicing
Using Vue interpolation syntax
Document fragment document createDocumentFragment
Use es6 ` ` backquotes to splice strings
2. What template syntax have we used?
Interpolation syntax

1.2 instructions

API query: https://cn.vuejs.org/v2/api/

Directives are special attributes with a v-prefix. The value of the directive attribute is expected to be a single JavaScript expression (v-for is the exception). When the value of an expression changes, the function of the instruction is to apply its associated influence to the DOM responsively.

1.2.1 v-cloak instruction

The interpolation expression has the problem of flashing. It will load the interpolation label first and refresh the data after reading the data. Generally, we can't find it unless the network fluctuates, but we can't let this happen, so we need to use the v-cloak instruction.

The principle of this instruction is to hide the interpolation label, replace the value, and then display the final value.

Official description:

Prevent page loading from flashing:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue Basic use of</title>
</head>
<body>
    <div id="app">
    <div v-cloak>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-cloak Instruction usage
      1,supply a model
        [v-cloak]{
          display: none;
        }
      2,Add the v-cloak instruction to the label where the interpolation expression is located

      Principle behind: first hide the content through the style, then replace the value in memory, and then display the final result
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
  </script>
</body>
</html>

The effect can't be simulated. Let's make it up by ourselves.

1.2.2 data binding instruction

v-text:

v-html:  

v-pre:

Don't we have interpolation expressions? Why do we need these data binding instructions?

It must have its own characteristics,

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue Basic use of</title>
</head>
<body>
    <div id="app">
    <div>{{msg}}</div>
    <div v-text='msg'></div>
    <div v-html='msg1'></div>
    <div v-pre>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      1,v-text The instruction is used to fill the data into the label, which is similar to the interpolation expression, but there is no flicker problem
      2,v-html Directive is used to fill HTML fragments into tags, but there may be security issues
      3,v-pre Used to display original information
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        msg1: '<h1>HTML</h1>'
      }
    });
  </script>
</body>
</html>

Effect of execution:

v-text is more concise than interpolation expression. v-html can ensure that HTML tags are read, v-pre displays original information and skips the compilation process, which are conducive to performance optimization.  

1.2.3 data response

What is responsive?

Response in html5 (the change of screen size leads to the change of style).

Data response (the change of data leads to the change of page content).

What is data binding?

Populate the label with data.

We can use v-once to perform one-time interpolation, which can improve the server performance. Later, when the data changes, the content at the interpolation will not continue to be updated.

The usage of this case is the same as before. The effect is not easy to show, so I won't put the code.  

1.2.4 bidirectional data binding

What is bidirectional data binding?
When the data changes, the view changes
When the view changes, the data changes synchronously

How do we implement two-way binding? This requires the instruction label v-model.

(1) v-model instruction

Usage scenario of bidirectional binding:
v-model is an instruction, which is limited to < input >, < Select >, < textarea >, and components.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue Basic use of</title>
</head>
<body>
    <div id="app">
      <div>{{msg}}</div>
      <div>
        <input type="text" v-model='msg'>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      /*
        Bidirectional data binding
        1,From page to data
        2,From data to page
      */
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'Hello Vue'
        }
      });
    </script>
</body>
</html>

Effect of execution:

We type VM. In the console MSG, you can see that the current value is Hello Vue.

Then we add the text Hello Java in the text box and print it on the console again.

It can be seen that the content of our binding changes at the same time, which proves that our two-way binding is successful.  

(2) MVVM design idea

MVVM is short for model view ViewModel. It is essentially an improved version of MVC. MVVM abstracts the state and behavior of the view. Let's separate the view UI from the business logic. Of course, ViewModel has done these things for us. It can take out the data of the model and help deal with the business logic involved in the view due to the need to display content. Microsoft's WPF has brought new technology experience, such as Silverlight, audio, video, 3D, animation... Which leads to more detailed and customizable software UI layer. At the same time, at the technical level, WPF also brings new features such as Binding, Dependency Property, Routed Events, Command, DataTemplate, ControlTemplate and so on. The origin of MVVM (model view ViewModel) framework is a new architecture framework developed when MVP (Model View Presenter) mode is combined with WPF. It is based on the original MVP framework and integrates the new features of WPF to cope with the increasingly complex needs of customers.

M. What do V and VM stand for?
m model
The data layer in Vue is placed in data
v view view
Vue view is our HTML page
The vm (view model) controller connects the data to the view layer
vm is an instance of Vue

 

Tags: Front-end Vue

Posted by imagenesis on Thu, 19 May 2022 06:55:08 +0300