Vuejs Article 8-definition instance parsing of Vuejs components, vuejs Article 8

Vuejs Article 8-definition instance parsing of Vuejs components, vuejs Article 8

This document provides a more detailed and secure code reference for beginners.

This document is used in official documents:

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

What is a component?

Component is one of the most powerful functions of Vue. js. Components can expand HTML elements and encapsulate reusable code. At a higher level, a component is a custom element, and the Vue. js compiler adds special features to it. In some cases, components can also be in the form of native HTML elements and can be extended with the is feature.

Definition of components

① Role of components:

[1] extends HTML elements and encapsulates reusable code;

[2] A component is a custom element. The Vuejs compiler can add special functions to it;

[3] In some cases, components can be in the form of native HTML elements and can be extended as is.

② Write a standard component:

You can perform the following steps:

[1] The Mount component must be the html element rendered by the Vue instance. Specifically, for example, the preceding html elements such as <div id = "app"> </div> and their subnodes;

[2] define a component and use

Var variable name = Vue. extend ({template: "here is the html template content"}), for example: // defines a component var btn = Vue. extend ({template: "<button> This is a button </button> "})

[3] register the defined component to the Vue instance. This will allow the specified tag to be replaced by the component content.

Such as code:

// Register him with Vue instance Vue. component ("add-button", btn );

Specifically, each of the following labels (within the Vue's root instance range)

<add-button></add-button> 

Will be

<Button> This is a button </button>

.

[4] the above method is global registration (the add-button label of each Vue instance will be replaced by what we define );
The solution is local registration.

For example, Code: (this is to set the template attribute, or when this attribute is not available, place the <add-button> </add-button> label in the <div id = "app"> </div> label

<Div id = "app"> </div> <script> // defines 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 for this root var vm = new Vue ({el: '# app', template: "<add-button> </add-button>"}); </script>

③ Partial registration component:

To put it simply, it only takes effect for this Vue instance. The specific practice is to skip the registration step;

Then, when declaring the Vue instance, add it to the components attribute (which is an object placed in the KV format) (Note: This word has one more second)

Such as code:

<Div id = "app"> </div> <script> // defines a component var btn = Vue. extend ({template: "<button> This is a button </button>"}) // create a root instance, that is to say, let Vue take effect for 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 (local registration) also applies to other resources, such as commands, filters, and transitions.

Step 4 is simplified:

[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 partial registration, the definition and registration are completed in one step:

// Create a root instance, that is, make Vue take effect for 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

Adding the data attribute directly to the component is not allowed (invalid );

The reason is that, in this case, 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, then this object is used as the data value), which may cause all copies of this component to share an object (that external input). This is obviously incorrect.

Therefore, the data attribute should be a function, and then there is a return value, which serves as the value of the data attribute.

And the returned value should be a brand new object (that is, the object is not shared by multiple components );

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, 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 ;}}}); </script>

Note:

The el attribute must also be a function when used in Vue. extend.

⑥ Is features:

[1] According to the official tutorial, some HTML elements have restrictions on what elements can be put in it;

But I did not find any problems in my own test, so I don't understand.

[2] Give a URL. If something really goes wrong, I will try again.

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

The above section describes how to parse the Vuejs component definition instance in Section 8 of Vuejs. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!