"The world's martial arts are only fast and fast"√, this has always been a pursuit of martial arts attainments, although it does not have any intention of this; it is also a constant desire for real work and even demanding. Because this is no longer a hidden practice, but a workplace. Only by quickly solving the needs can we gain more time to delve into the technical mechanism so that we can achieve stronger, stronger and better than faster. Such a good cycle can be formed. Back to the topic, as a front-end ER, I once thought that the birth of Vue was like a powerful weapon that was easy to use, writing and running were very efficient, which made people love it; but it was easy to use it, which does not mean that it was easy to master it. There are quite a few things that require careful study, practice, and understanding in order to be used freely.
During the development process using Vue, the template based on Dom implementation is always inevitable and is also a gratifying existence. Templates are not only parsable and effective HTML, but also enhanced by some special features, which makes many parts that need to be manipulated in logic with the help of class libraries such as jQuery can already be carried out in the template. It has to be said that this makes the Dom structure more clear to a certain extent. Therefore, if this part is used properly, it will be of great benefit to Vue component writing; although Vue has already had very complete documents~ Data binding syntax, we can still discuss this area again. After all, Vue data binding has its actual functions more powerful than those described in the visually tested documents.
Micro note: This blog is also based on Hexo driver, and it is not expected to support multiple brace renderings, so I have to use \ for the time being to escape it. In addition, in order to facilitate computer reading, the web page has been listened to by the Enter key to switch the show / hide sidebar since then.
In the document, we can easily know that Vue provides many convenient methods for data, Class, Style, form control binding; attribute calculation, conditions, list rendering; methods, event processing, etc.; so we can write out templates in a simple way, such as this;
<span>Bindind Message Using Mustache（Double braces）: {{ msg }}</span>
<span>This will never change(mustache with *): {\{* msg }\}</span>
<div>Bing htmlText using three Mustache label Like This : {\{\{ htmlText }\}\}</div>
<div >Html Attributes Using Mustache</div>
<div>{\{ ('').reverse().join('') }\}</div>
<div class="{\{ className }\}">Binding class using Mustache Label</div>
When talking about the binding of this data, there are several types of symbols®, such as: {\{ }\} of Mustache syntax tags, quotation marks (single and even), brackets (), object {}, and even arrays []; it is easy to confuse people when they are initially used. If you don’t read the document carefully, you will read the document again for a long time and have the following insights. If there are any inaccuracies, please give it generously:
The three Mustache tags are used to parse incoming data into HTML, which is used to update elements' innerHTML. This is very clear and very commonly used; internally, it will be compiled into a v-html directive on the anchor node.
Mustache's {\{}\} is a textContent that parses the data into plain text to update the element. This is used most and widely; internally, it is compiled into a v-text directive for textNode.
Quotation marks (including odd and even), which Vue can carry strings and is used to map various objects (Number, Boolean, string, data, objects, etc.) and methods defined in the corresponding instance; it is also used to parse specific syntax: for example: v-for=”item in items”; it can also support some simple expressions: v-if=”() > 0.5”; When there are multiple layers of quotes, different quotes must be applied to each other, and double quotes are generally used to set single quotes; for example:<div :style="{ fontSize: fontSize + 'px' }"></div> ；
brackets () , where this is used, such as v-for="(index, item) in items" , and for example: <a href="#" @click="onXXClick(param)"></a> and so on;
When it comes to parsing class and style, this type of attribute is originally html that needs to have quotes, so if you want to use Mustache to bind it, that's it:class="xx-{\{ className }\} ；
For the previous article, Vue warmly considered that string splicing is troublesome and easy to make mistakes. Therefore, in addition to supporting strings, it also enhances the binding of class and style to support objects or arrays, so it can have the following usage:
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
<div v-bind:class="[classA, classB]">
Here are some points written above, using jsfiddle to make a small demo, which is also a small record of some special writing methods; there are mentioned such writing methods:
<div :style="{'width': `${100 / }%`}">Text Desc</div>
Although this dynamic writing method does not look very elegant and is not very convenient to use, it is still a usage, and the Es6 grammar is also used. However, this writing method is quite frustrating. Even if it is used to convert babel, it cannot get the correct analysis at some point. Vue gives the following warning:
Invalid expression. Generated function body: {‘width': scope.${100/}% }
This part is still not understood when writing OKay. It is listed here, and it is also a reminder to explore vue more deeply. In addition, Vue also needs to pay attention to when analyzing expressions (regularity does not support), and the author provides a computed property; so it is also recommended that the dynamic part involving Style should be solved by using functions and written in temple. Even if it is possible, it also makes its style structure look complicated.
Of course, in most cases, it is not very certain to place various class and style manipulations in a template. Even if you use some template language assistance such as jade, the entire Dom structure will not look so clear and clear, which can be easily implemented by class cutting. It is best to use this method, after all, simplicity is beautiful. However, there are always some slightly complex requirements. Compared to looping through logic and manipulating Dom to change dynamically, it will be more elegant to manipulate style in templates; we already know that Mustache syntax can parse expressions; in expressions, you can map objects and arrays with String, and you can probably also call the methods in their examples accordingly. Let's try it?
As shown in the above example, indeed, Vue is really considerate; I remember that last time I made a seemingly complicated requirement, and tried this method to fix the judgment logic in methods, eliminating the helplessness of traversing again, and solving the problem elegantly. How can this not be joyful? What's more, Vue also provides several other very user-friendly solutions, such as:
<a href="javascript:;" @click="onXxxClick(param)"></a>
<!-- Prevent click events from bubbles -->
<a @="doThisFunc"></a>
<!-- Modifiers can be concatenated -->
<a v-on:="doThat">
<div slider(@mouseover="pause && pausePlay()", @mouseout="pause && goPlay()"></div>)
<input v-on:keyup.13="submitFuncName">
<input v-on:="submitFuncName"> // Provide alias for the most commonly used keys
<!-- use v-model Directive creates two-way data binding on form control elements -->
<input type="checkbox" v-model="checked">
<label for="checkbox">{\{ checked }\}</label>
<!-- exist "change" Instead "input" Updated in events -->
<input v-model="msg" lazy>
Regarding Vue, the document is written clearly, so there is no need to be extra long-winded. However, when using it, many plug-ins, libraries, components, etc. are involved, involving many different mechanisms. For the parts that are not very familiar, you will occasionally get into some trouble; for this reason, you will occasionally organize and record these problems encountered in Vue FAQ solution records.
A long time ago, Xunzi said in "Encouraging Learning": A gentleman is not a different life, but is good at lie in things. Even if he spends thousands of years, it has a lot of reason. In the past six months of walking on the front end, I thanked the existence of Vue, which always made me feel that any need to be inserted is not vain. According to the principle of applying what you have learned, let’s talk about it first, and learn while you are using it.