Vuejs Eighth Vuejs Component Definition Instance parsing _javascript techniques

This article refers to the official document collation of a more detailed code more secure for beginners to read Learning Bar tutorial.

This information is available in the Official document:

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

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.

Definition of Component

The role of the ① component:

"1" expands HTML elements to encapsulate reusable code;

The "2" component is a custom element, and the Vuejs compiler can add special features to it;

"3" In some cases, a component can be in the form of a native HTML element and is extended in the way of IS.

② to write a standard component:

is divided into the following steps:

"1" where the component is mounted, it needs to be an HTML element rendered by the Vue instance, specifically, such as the <div id= "app" ></div> HTML element and his child nodes;

"2" defines a component that uses

The var variable name = Vue.extend ({Template: "Here is the template content for HTML"})
is created in such a form as:

//define a component 
var btn = vue.extend ({ 
template : "<button> This is a button </button>" 
})

"3" registers the defined component on the Vue instance, which allows the specified label to be replaced by the contents of the component.

such as code:

Register him on the Vue instance 

Specifically, each of the following tags (within the scope of the root instance of Vue)

Will be

Replaced.

"4" above method is global registration (each Vue instance's Add-button label will be replaced by our definition);
The solution is to register locally.

such as code: (This is to set the template property, or in the absence of this property, in the <div id= "app" ></div> tag, place <add-button></add-button> Label

<div id= "App" > 
</div> 
<script> 
//define a component 
var btn = vue.extend ({ 
Template: " <button> This is a button </button> " 
}" 

vue.component ("Add-button", BTN); 

Create the root instance, that is, let Vue take effect on this root 
var vm = new Vue ({ 
el: ' #app ', 
Template: "<add-button></add-button> " 
}); 

③ Local Registration component:

To put it simply, only one instance of the Vue is in effect, by the way of the registration step, skip;

Then, when declaring the Vue instance, it is added to the components attribute (he is an object, placed in kv) (note that the word is one more s)

such as code:

<div id= "App" > 
</div> 
<script> 
//define a component 
var btn = vue.extend ({ 
template : "<button> This is a button </button>" 
}) 
//Create root instance, that is, let Vue take effect on this root 
var vm = new Vue ({ 
el: ' #app ', 
Template: "<add-button></add-button>", 
components: { 
"Add-button": btn 
} 
) ; 

Note:

According to the official tutorial, this method (refers to local registration) also applies to other resources, such as directives, filters, and transitions.

④ Step Simplification:

The "1" definition component and the registration component are combined to complete one step:

Define a component 
vue.component ("Add-button", { 
Template: "<button> This is a button </button>" 

"2" local registration, define and register one step complete:

Create the root instance, that is, let Vue take effect on this root 
var vm = new Vue ({ 
el: ' #app ', 
Template: "<add-button></add-button>", 
components: { 
"Add-button": { 
Template: "<button> This is a button </button>" 
} 
} 
}); 

⑤data Property

It is not possible to add the data property directly to the component (invalid);

The reason is that if you do this, then the component's Data property may be an object, and the object may be imported externally (for example, declaring an object first, then the object as the value of data), which may cause all copies of the component to share an object (the externally incoming), This is clearly not the right thing to do.

Therefore, the data property should be a function and then have a return value, which is the value of the Data property.

And the return value should be an entirely new object (i.e., deep copy, avoiding multiple components sharing an object);

such as code:

var vm = new Vue ({ 
el: ' #app ', 
Template: "<add-button></add-button>", 
components: { 
" Add-button ": { 
Template:" <button> This is a button {{btn}}</button> ", 
data:function () {return 
{btn:" 123 "}}}} 
 

In addition, if so, the BTN values are the same (because they actually share an object)

<div id= "App" > 
</div> 
<div id= "app2" > 
</div> 
<script> 
var obj = { BTN: "123"}; 
var vm = new Vue ({ 
el: ' #app ', 
Template: "<add-button></add-button>", 
components: { 
" Add-button ": { 
Template:" <button> This is a button {{btn}}</button> ", 
data:function () {return 
obj ; 
} 
} 
} 
}); 
OBJ.BTN = "456"; 
var vm2 = new Vue ({ 
el: ' #app2 ', 
Template: "<add-button></add-button>", 
components: { 
"Add-button": { 
Template: "<button> This is a button {{btn}}</button>", 
data:function () { 
return obj; 
}}} 
); 

Note:

The El attribute must also be a function when used in Vue.extend ().

⑥is Features:

"1" according to the official tutorials, some HTML elements have limitations on what elements can be placed in it;

But actually I did not find the problem on my own test, so I do not understand.

"2" to a URL bar, if there is a problem, I go back to study.

http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790

The above is a small set to introduce the VUEJS eighth Vuejs components of the definition of an example, 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!