Brief Introduction to various types of data binding in Vue templates

The Vue. js template is implemented based on DOM. This means that all Vue. js templates are parsed and valid HTML, and are enhanced through some special features. The Vue template is fundamentally different from the string-based template. Remember this. In the process of using Vue for development, templates implemented based on Dom are always inevitable and an amazing existence. Vue. js templates are not only efficient HTML that can be parsed, but also enhanced through some special features, which makes it a lot of first-in-first-out scenarios that need to be manipulated by class libraries such as jQuery in logic, it can already be done in the template. I have to say that this makes the Dom structure clearer to a certain extent. Therefore, if this part is used properly, it will be of great benefit to Vue componentized writing. Although Vue has a well-developed official documentation ~ The Data Binding syntax can still be discussed. After all, Vue data binding has more powerful functions than described in the visual document.

Note: This blog is also based on the Hexo driver. Its visual view does not support multiple braces rendering, so we have to use \ to escape it for the moment. In addition, to facilitate reading on the computer, you have added the Enter key listener to the webpage to switch the show/hide sidebar.

In this document, we can easily know that Vue is the binding of data, Class, Style, Form Controls, attribute calculation, condition, and list rendering; methods, event processing, and so on provide a lot of convenient methods; therefore, we can write templates very concisely, such as this;

Bindind Message Using Mustache (double braces): {msg} This will never change (mustache with *) :{\{ * msg }\}
Bing htmlText using three Mustache label Like This :{\{\{ htmlText }\}\}
Html Attributes Using Mustache
{\{ Message. split (''). reverse (). join ('')}\}
Binding class using Mustache Label

When talking about the data binding, there are several symbols involved, such as: Mustache syntax tag {\{}\}, three Mustache labels, quotation marks (single and double), Parentheses (), object {}, or even array []; it is very confusing to use it initially. If you have not carefully read the document, after using it for a long time, go back and read the document, if you have any of the following insights, please kindly correct them:

The three Mustache labels are used to parse incoming data into HTML and update the innerHTML of elements. They are clear and clear. They are also very common. Internally, it is compiled as a v-html command on the anchor node.

Mustache {\{}\} refers to parsing data into plain text for updating the textContent of elements. This is the most widely used and internally, it is compiled as a v-text command of textNode.

Quotation marks (including single and double quotes). This is a string that can be carried by Vue. It is used to map various types of objects (numbers, Boolean values, strings, Data, objects, and so on) and methods defined in the instance; it is also used to parse specific syntax: for example, v-for = "item in items". It also supports some simple expressions: v-if = "Math. random ()> 0.5 ". When multiple quotation marks are involved, different quotation marks must be applied to each other. The double quotation marks are generally used to enclose single quotation marks. For example:

;

Parentheses (), where this is used, such as v-for = "(index, item) in items", and then;

When it comes to parsing class and style, this type of attribute is originally included in html and must have quotation marks, so if Mustache is used for binding, it is like this: class = "xx-{\{ className }\};

For the last one, Vue has a warm consideration of the trouble and error in String concatenation. Therefore, for binding class and style, in addition to supporting strings, it also supports extra enhancements to support objects or arrays, therefore, you can use the following methods:

The above points are explained by using jsfiddle for a small Demo, which is also a small record of some special writing methods. Some of them refer to the following writing methods:

Text Desc

Although such a dynamic writing method does not seem very elegant, it is not very convenient to use, but it is a usage, which also uses Es6 syntax; however, this writing method is used, it is quite frustrating. Even if babel conversion is used, it cannot be correctly parsed in some cases. Vue provides the following warning:

Invalid expression. Generated function body: {'width': scope. $ {100/this. count} %}

When writing this code, OKay crashes. This part has not been fully understood yet and is listed here. It also reminds you to explore vue in depth. In addition, Vue is used for parsing expressions, there are also areas that need attention (regular expressions are not supported). The author provides computed property. Therefore, it is also recommended that the dynamic part of the Style should be solved by using functions and written in templete, even if yes, the style structure looks complicated.

Of course, in most cases, it is not very sure that various class and style operations are placed in the Template. Even with the help of some Template languages such as jade, the entire Dom structure will look like this, it is not so clear and can be easily implemented by class switch. It is best to use this method. After all, it is concise and elegant. However, there is always a slightly more complex requirement. Compared to the logic to traverse through loops and perform Dom-Driven Dynamic changes, it is more elegant to manipulate the style in the template; we already know that the Mustache syntax can parse expressions. The expressions can map objects with strings. Arrays can call the methods in their instances. How can this problem be solved?

As shown in the preceding example, Vue is really considerate. I remember the last time I tried this method to solve a seemingly complicated requirement. I tried this method and fixed the judgment logic in methods, saving the helplessness of re-traversal, it is very elegant to solve the problem. Can this be unpleasant? Moreover, Vue also provides several other user-friendly solutions, such:

 
  
)// Provide aliases for the most commonly used buttons
 {\{ Checked }\} 
 

For Vue, it is no longer clear about the documentation, so there is no need for additional code. However, after all, many plug-ins, libraries, components, and so on are involved, involving many different mechanisms. For those that are not very familiar with, they may occasionally fall into some troubles; for this reason, we will occasionally record these problems in the Vue FAQ solution records.

A long time ago, Xun Zi's "Persuasion" said: A gentleman is born of extraordinary, good, fake, and even a thing. It is quite reasonable to say that the secret has been around for thousands of years. During the last six months, I would like to thank you for the existence of Vue-like appliances, which makes it a sense that there is such a powerful tool, and there is no need to plug it in. Based on the principles learned, let's talk about it first, and learn and feel it together.

For more information about Vue template data binding, see PHP!