Simple Talk about Vue templates all kinds of data binding _ Other

"The World martial arts, only fast does not break" √, this has been the pursuit of Kung Fu attainments, although for this is not the slightest, but also to treat the real work of unremitting thirst, and even demanding. Because this is not hidden practice, but the work of the workplace, the only way to quickly solve the demand, can grab more filling time to delve into the technical mechanism to make it stronger, stronger and better than fast, so good circulation to form. And then, as the front er, at one point, the birth of this Vue, like a handle against days, its easy to start, write and run are very efficient, very let people fondle admiringly, but this easy to start, not equal to easy to master, quite a lot of things need to learn, practice, understanding, can be freely.

In the use of Vue development, the Dom based template is always unavoidable to encounter, but also a gratifying existence. The vue.js template is not only a valid HTML that can be parsed, and through a number of special features to enhance, which makes a lot of first, the need to use JQuery and other classes in the logic of the part of the manipulation, already can be done in the template, have to say this makes a certain extent, the DOM structure becomes clearer. Therefore, this part, if used properly, for the Vue component of the preparation of great benefits; Although Vue official has a very good document ~ data binding syntax, but still can be a discussion of this piece, after all, Vue data binding, its actual function than the visual document described more powerful.

Micro Note: This blog is also based on Hexo Drive, its visual does not support a number of curly braces rendering, so here has to be temporarily escaped with the. In addition, in order to facilitate the computer to read, since there is a page to add the ENTER key to monitor, to switch show/hide sidebar.

In the document, we can easily know that Vue for data, Class, Style, form control binding, property calculations, conditions, list rendering, methods, event handling, etc. provide a number of convenient methods; so we can write the template very succinctly, for example;

<span>bindind message Using mustache (double curly braces): {{msg}}</span>
<span>this'll Never Change ( Mustache with *): {\{* msg}\}</span>
<div>bing htmltext using three mustache label like this: {\{\{html Text}\}\}</div>
<div id= "item-{\{ID}\}" >html Attributes Using mustache</div>
<div> {\{message.split ("). Reverse (). Join (")}\}</div> <div class=
"{\{className}\}" >binding class using Mustache label</div>

The binding of this data involves several kinds of Symbolic ®, for example: Mustache syntax tag {\{}\}, three mustache tags, quotes (single and double), brackets (), objects {}, even array []; Initially used, it is easy to confuse, if not read the document carefully; after a long time , back to read the document, have the following sentiment, if there is not accurate, please kindly correct:

The three mustache tags, which are used to parse the data into HTML to update the InnerHTML of the element, are clear and common; internally, it is compiled as a v-html instruction on the anchor node.

Mustache {\{}\} is to parse the data into plain text to update the textcontent of the element, which is used most and widely; internally, it is compiled as a v-text instruction of Textnode.

Quotes (including a single pair), which is a Vue that can be used to host strings to map the various objects (number, Boolean, string, data, object, etc.) and methods defined in the corresponding instance, and also to parse specific syntax: For example: V-for= "Item in Items" can also support part of the simple expression: v-if= "Math.random () > 0.5"; When multiple quotes are involved, different quotes are applied to each other, typically with double quotation marks, such as:<div :style="{ fontSize: fontSize + 'px' }"></div> ；

Parentheses (), this used place, such as v-for= "(Index, item) in items", and then for example: <a href= "#" @click = "Onxxclick (param)" ></a>;

When it comes to parsing class, style, originally this kind of attribute is HTML to have to have quotes, so to use mustache to bind words, is this: class="xx-{\{ className }\} ;

For the previous one, Vue warm consideration to string concatenation trouble and error, so for class and style binding, in addition to supporting strings, but also an additional enhancement so that they can support objects or arrays, so you can have the following usage:

<div class= "Static" v-bind:class= "{' class-a ': IsA, ' class-b ': IsB}" ></div>

<div v-bind:class= "[ ClassA, CLASSB] ">

Above this write a few, have use jsfiddle do a small Demo to explain, this is also a part of special writing a small record;

<div :style="{'width': `${100 / this.count}%`}">Text Desc</div>


This dynamic notation, though not very elegant, it is not very convenient to use, but it is a usage, which also uses the ES6 grammar, but the use of this type of writing is very frustrating, even with Babel conversion, some times can not be the right to parse, Vue The following warning is given:

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

When you write it, hang it okay this part has still not been able to understand, listed here, but also to remind themselves to do a lot of in-depth research under the Vue; In addition, Vue in the analysis of expressions, there are very important places to note (do not support the regular), the author provided the computed property , so it's also a suggestion that involves the dynamic part of style, or a function solution, written in templete, even if it can, but it also makes its style structure look intricate.

Of course, most of the cases, not very sure of the various classes, style manipulation, placed in the Template, even if the use of jade and other template language aids, will make the entire DOM structure look, not so clear, can be easily cut class to achieve, preferably in this way, Simplicity is beautiful after all. But there are always some slightly more complex needs, instead of looping through the logic to manipulate the Dom to change dynamically, manipulating the style in the template is more elegant; we already know that the mustache syntax allows you to parse an expression, which can be mapped in String to an array of objects, Presumably you can also correspond to the methods in its instance, try it?

As the example above shows, sure enough, Vue is really intimate; Remember the last time to do a seemingly somewhat complex needs, the trial of this method, will judge the logic of fixed methods, removed from the helplessness of traversing again, very elegant to solve the problem. How could it not be joyful? What's more, Vue also offers a number of other very humane treatment options, such as:

<a href= "javascript:;" @click = "Onxxxclick (param)" ></a>
<!--Prevent Click event bubbling-->
<a @ click.stop= "Dothisfunc" ></a>
<!--modifiers can be concatenated-->
<a v-on:click.stop.prevent= "Dothat" >

<div Slider (@mouseover = "Pause && pauseplay ()", @mouseout = "Pause && goplay ()" ></div> )
<input v-on:keyup.13= "Submitfuncname" >
<input v-on:keyup.enter= "Submitfuncname" >// Provide aliases for the most commonly used keys

<!--use the V-model directive to create bidirectional data binding on form control elements-->
<input type= "checkbox" id= "checkbox" V-model= " Checked ">
<label for=" checkbox ">{\{checked}\}</label>

<!--updated in" change "instead of" input "event- ->
<input v-model= "MSG" lazy>

As for Vue, the document is clearly written out, so there is no need for extra verbose. However, the use of the time after all involved in a lot of plug-ins, libraries, components and so on, involving a number of different mechanisms, for not very familiar with the part, occasionally get into some trouble; for this also occasionally will encounter these problems, do a collation record in the Vue FAQ.

A long time ago, Xun Zi "quanxue" There is a saying: The gentleman born is also good false in the matter also, mediastinal Millennium Wanzai, great reason. In front of this big six months, Shipi thanks to have Vue such apparatus exist, make the total produce a feeling, there is this sharp weapon exists, any demand is not empty. According to the theory of learning, then the first word to this, edge to learn with the edge of emotion.