vue Study Guide: Part VI (detailed) - Vue assembly component of vue

1. What are the components? There are two explanations

1. The first explanation:

What are the components?

      1 is a reusable component instances of vue, the new Vue () is the largest component vue (root component), has a name, when used in single or double tag label.

      2. Vm = new vue () is the largest component, has a number of practical properties, such as data, methods, computed the like, so that these components are also defined attributes.

 

2. The second explanation:

What are the components?

      1. component is to appear vue Examples of resolution of the amount of code allows us to different components, divided into different functional modules to the future what kind of features we need, corresponding components can then be called.

Components and modular differences?

Modular: from the perspective of code logic, divided in a given modular node, no node interface ui, most used node is modular, the codes are divided according to different functions, to ensure that each modular the value of the single. Convenient code behind the development of separation, to ensure that each value can be a single functional module.

Components of: ui from the perspective of the interface to divide, to facilitate the reuse of components ui

 

3. Definition of components

      1. vue using Vue.component () method definition component, this method has two parameters, the first component is a name, a second options object that there template, data, methods, computed attributes.

      2. template is a template, which is a html format, only one top label.

      3. data is to put the data, return an object that is a function, on the data from the object surface.

Global registration components:

      1. Vue.component first argument, the name of the component in the future when referring to the component is in the form of a label to be introduced to it.

      2. The second parameter: the Vue.extend omitted, directly created} {assembly, html contents template assembly is to be displayed in the future.

Vue.component ( 'mycom3', {
	template:'#tmp1'
})

3. The structure belongs to the assembly, but also conform to the rules defined components, you can only have a single root element

<template id="tmp1">
	<div>
		<H1> template assembly which is defined externally structure, this approach prompted and highlighted code </ h1>
		<H3> useful </ h3>
	</div>
</template>

4. Use our template element attributes defined on the outside of the template structure is controlled #app

<div id="app">
	<mycom3></mycom3>
</div>

These are to create a global component, the component is to create not just the so-called Global, allows you to be able to use app1,

You then create a vue root element can also be used.

  

 

 Plug private components:

 

 

Author: Jin Feixiang

Phone number (micro-channel synchronous): 17812718961

I hope this article can give is learning the front of friends or friends who work and bring the harvest does not like do not spray where it is proposed a lot of proposals thank you!

  

  

 

Guess you like

Origin www.cnblogs.com/jinfeixiang/p/11573343.html