Vuejs 13th Component-Miscellaneous _javascript Tips

What is a component?

Component (Component) is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, the component is a custom element, and the Vue.js compiler adds special features to it. In some cases, a component can also be in the form of a native HTML element, which is extended in the IS attribute.

This article is a small series of reference to the official document based on a more detailed description of the code more complete, very suitable for beginners to learn.

Official documents:

Http://cn.vuejs.org/guide/components.html

Components-Miscellaneous details are shown below:

① Components and V-for

Simply put, the component is reused multiple times;

For example, a line in the form, such as the display of a commercial window (a single window), can be reused components;

As long as you write one of these as a component and then make the data source an array (or an object, but the individual feels it is best to be an array), through the v-for traversal, each instance of the component can get an item in the array to generate all the components.

and data transmission, because of multiplexing, so need to use props, will traverse the result I, and props bound data binding, binding method and ordinary form, binding in the template.

Sample code:

<div id= "App" > 
<button @click = "Toknowchildren" > Click to make subassembly display </button> 
<table> 
<tr> 
<td> index </td> 
<td>ID</td> 
<td> description </td> 
</tr> 
<tr is= "the-tr" v-for= "I in Items" v-bind:id= "I": index= "$index" ></tr> 
</table> 
< /div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
data: { 
items: [1, 2, 3, 4] 
}, 
methods: { 
toknowchildren:function () {//Toggle component Displays 
Console.log (this. $children); 
} 
}, 
Components: { 
THETR: {//First subassembly 
Template: "<tr>" + 
"<td>{{index}}</td>" + 
" <td>{{id}}</td> "+ 
" <td> here are subcomponents </td> "+ 
</tr>", 
props: [' id ', ' index ' ] 
} 
} 
}); 

Description

"1" Remember the data that will be passed on in the props!

"2" binds index and index $index because the index starts at 0, so the column that contains the index is from 0, and the ID is bound to the I that traverses the items, so the ID starts with 1.

"3" can be used in the parent component to get subassemblies through this. $children (but more cumbersome, especially when components are more difficult to locate);

② to write reusable components:

In simple terms, a one-time component (used here only and not reused) is OK to be tightly coupled with other components, but reusable components should define a clear, open interface. (How else do people use it?) ）

Reusable components are basically interacting with the outside, while one component and externally exposed interfaces are:

"1" props: Allow the external environment data to pass to the component;

"2" event: Allows the component to trigger the action of the external environment, that is, to trigger the parent component's methods by adding the v-on instruction at the mount point, while the events of the subassembly are triggered;

"3" slot: distribution, which allows the contents of the parent component to be inserted into the view structure of the child component.

such as code:

<div id= "App" > 
<p> This is the first parent component </p> 
<widget 
: the-value= "Test" 
@some = "Todo" > 
<span> "First parent component Insert Content" </span> 
</widget> 
</div> 
<div id= "APP2" > 
<p> This is the second parent component </p> 
<widget @some = "Todo" > 
</widget> 
</div> 
< script> 
vue.component ("widget", { 
Template: "<button @click = ' dosomething ' ><slot></ Slot> This is a reusable component, click on his {{thevalue}}</button> ", 
methods: { 
dosomething:function () {this 
. $emit ("some"); 
} 
, 
events: { 
some:function () { 
console.log (widget click); 
} 
, 
props: [' Thevalue '] 
}) 
var vm = new Vue ({ 
el: ' #app ', 
data: { 
test: "Test" 
}, 
methods: { 
todo:function () { 
Console.log ("This is the first parent component")}} 
); 
var vm_other = new Vue ({ 
el: ' #app2 ', 
data: { 
name: "A" 
}, 
methods: { 
todo:function ( { 
Console.log ("This is another parent component")}} 
); 

Description

"1" uses the distribution slot in the first parent component, using props to pass the value (the value of test is passed to the thevalue of the subassembly);

"2" in two components, after clicking, the subassembly calls the DoSomething method in methods and executes the some event in the events. The some event of the subassembly and the Todo method of the parent component are bound together by the @some= "Todo" of the mount point.

Therefore, after clicking on the subassembly, the parent component's Todo method is eventually executed.

"3" Changes the values that are passed to the subassembly in the parent component, synchronizing the values of the subcomponents (that is, the data binding);

③ Asynchronous components:

In my understanding, in simple terms, a large application, he has multiple components, but some components do not need to load immediately, so be split into multiple components (such as the need to load immediately, do not need to load immediately);

Need to be loaded immediately, obviously in the same file is better (or the same batch of requests);

And do not need to load immediately, can be placed in other files, but when necessary, and then Ajax to the server request;

These subsequent requests are asynchronous components;

The function of this asynchronous function is Vue.js, which allows you to define a component as a factory function and dynamically parse the definition of the component.

Can be used in conjunction with Webpack.

As for how to use, I still do not understand, the tutorial is not clear, the first set aside when necessary to study.

Link:

Http://cn.vuejs.org/guide/components.html

④ Resource Naming conventions:

Simply put, HTML tags (like div and div) and attributes (such as instructions to write v-on rather than von) are case-insensitive.

Resource names are often written in hump style (such as CamelCase hump), or in the form of uppercase letters (e.g. pascalcase, I don't know what to call this, but this is rarely said).

Vue.component ("MyTemplate", {
//...) Abbreviated
})

Vue.js can automatically recognize this and convert it,

<my-template></my-template>

The above template can automatically replace this label.

⑤ Recursive component:

In simple terms, a recursive component is the template in which the component embeds itself.

Component wants to be recursive, requires the Name property, and vue.component the name attribute.

That's about the way it is,

<div id= "App" > 
<my-template></my-template> 
</div> 
<script> 
Vue.component ("MyTemplate", { 
Template: "<p><my-template></my-template></p>") 

This is infinite recursion, certainly is not. Therefore, you need to control the number of layers that he recursively, such as controlling recursion through data, and stopping recursion when the data is empty.

The sample code is as follows:

<ul id= "App" > 
<li> 
{{b}} 
</li> 
<my-template v-if= "a": A= "A.A": b= "A.B" > </my-template> 
</ul> 
<script> 
vue.component ("MyTemplate", { 
Template: ' <ul ><li>{{b}}</li><my-template v-if= "A": A= "A.A": b= "a.b" ></my-template></ul> ", 
props: ["A", "B"] 
}) 
var data = {A: {A: { 
a:0, 
b:3 
}, 
b:2 
}, 
b:1 
} 
var vm = new Vue ({
   el: ' #app ', 
Data:data, 
methods: { 
todo:function () { 
this.test = "!"; 
Console.log (this.test); 
} 
} 
); 

Description

When "1" is passed down, the value of a and the value of B are passed through the props, where the value of a is the data source of the value of A and B of the recursive component;
It then determines whether the value of a of the component passed to the recursive assembly exists, and continues recursively if it exists;
If the value of a does not exist, the recursion is stopped.

⑥ Fragment instance:

In short, the so-called fragment instance, is the component template is not under a root node:

Fragment Instance code:

Vue.component ("MyTemplate", { 
Template: ' <div>1</div> ' + 
' <div>2</div> '), 

Non-fragment instance:

Vue.component ("MyTemplate", { 
Template: ' <div> ' + 
' <div>1</div> ' + 
' <div>2< /div> ' + 
' </div> ', 

The following attributes of a fragment instance are ignored:

Non-process Control directives on the "1" component element (for example, v-show directives that are controlled by the parent component, such as those written on the mount point), but note that the v-if belongs to the Process Control instruction);

"2" Props characteristics (note that props will not be ignored, in addition props is written on the mount point);

The "3" transition (which is transition this attribute, will be ignored);

More references to official documents:

Http://cn.vuejs.org/guide/components.html

⑦ inline Template

Reference: http://cn.vuejs.org/guide/components.html

The above is a small set to introduce the Vuejs of the 13th part of the components-Miscellaneous, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!