This article refers to the official documents to compile a more detailed code and is more secure tutorial for beginners to read and learn.
This article comes from the official document:
http://cn.vuejs.org/guide/components.html
What are components?
Component is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, components are custom elements, and Vue.js' compiler adds special features to it. In some cases, components can also be in the form of native HTML elements, extended with the is feature.
Component definition
① Function of components:
【1】Extend HTML elements and encapsulate reusable code;
【2】Components are custom elements, and Vuejs' compiler can add special functions to them;
【3】In some cases, components can be in the form of native HTML elements, extending in an is-like manner.
② Write a standard component:
It is divided into the following steps:
[1] The place where the component is mounted needs to be the html element rendered by the Vue instance. Specifically, for example, the html element such as <div id=”app”></div> above and its child nodes;
【2】Define a component, use
var variable name = Vue.extend({template:"Here is the template content of html"}) is created in the form of "var btn = Vue.extend({ template: "<button>This is a button</button>" })【3】Register the defined component to the Vue instance, which will allow the specified tag to be replaced by the content of the component.
As code:
//Register him to Vue.component("add-button", btn);Specifically, each of the following tags (within the scope of the root instance of Vue)
<add-button></add-button>
Will be
<button>This is a button</button>
Replaced.
[4] The above method is global registration (the add-button tag of each Vue instance will be replaced by what we define);
The solution is local registration.
For example, code: (This is the template attribute is set. You can also place the <add-button></add-button> tag in the <div id="app"></div> tag when this attribute is not available.
<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 a root instance, that is, let Vue take effect on this root var vm = new Vue({ el: '#app', template: "<add-button></add-button>" }); </script>③ Local registration components:
Simply put, it only takes effect on this Vue instance. The specific method is to skip the registration step;
Then when declaring the Vue instance, it will be added to the components property (it is an object, placed in KV form) (note that this word has one more s)
As code:
<div id="app"> </div> <script> //Define a component var btn = Vue.extend({ template: "<button>This is a button</button>" }) //Create a 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 } }); </script>Note:
According to the official tutorial, this method (referring to local registration) is also applicable to other resources, such as directives, filters, and transitions.
④Simplify steps:
【1】Defining components and registering components are completed in one step:
//Define a component Vue.component("add-button", { template: "<button>This is a button</button>" });【2】During local registration, the definition and registration step is completed:
//Create a 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 attributes
It is not possible to directly add data attributes to the component (invalid);
The reason is that if this is done, the data attribute of the component may be an object, and this object may also be passed in externally (for example, declare an object first, and then the object is the value of data), which may cause all copies of the component to share an object (that externally passed in), which is obviously wrong.
Therefore, the data attribute should be a function, and then there is a return value, which is the value of the data attribute.
And this return value should be a brand new object (that is, deep copy, avoiding multiple components sharing an object);
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"}; } } } });Also, if this is the case, the value of btn is 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; } } } }); </script>Note:
When the el attribute is used in Vue.extend(), it must also be a function.
⑥is features:
[1] According to the official tutorial, some HTML elements have restrictions on what elements can be placed in it;
But in fact, I didn't find any problem with my own test, so I don't understand.
【2】Give me a URL, if something really happens, I will study it back.
http://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790
The above is an example analysis of the definition of Vuejs component in the 8th chapter of Vuejs introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!