VueJS Concise Guide (B) of the Component

Component (Component) Vue is one of the most powerful features. HTML elements that could be extended, the package reusable code. At a high level, the components are custom element, Vue compiler to add special features to it.
In some cases, the components can also be expressed as been expanded with native HTML elements is characteristic.
All components of the Vue Vue are also instances, it is possible to accept the same options objects (except for some root level-specific options) and provide the same life cycle hook.

A foundation

These are the official definition VUE components, let me say bluntly, such as <button>Click</button>this html buttons can be understood as a component because it will demonstrate to write such a button in the interface.

So if I write <button-demo>Click</button-demo>the interface will not have any display, because the browser does not know this <button-demo>this component, html syntax is not defined.

So VUE components so that we have through existing browser-approved custom components such as a <button-demo>display of such components and internal operational logic.

For chestnut:

Vue.component('button-demo',{ template:'<button>Hello here!</button>' }) 

By Vue register called 'button-demo' components, custom component is <button>Hello here!</button>composed.

It can be understood, registered the 'button-demo' future, <button-demo></button-demo>is equivalent to<button>Hello here!</button>

Look at the demonstration effect

It should be noted here, the components can only be registered by Vue scope of registration with Vue, as the demo inside, must be <div id="app"></div>used inside.

Two Advanced

VUE component course not only can a combination of html tags, each pair corresponding to a component VUE VUE example, a method may be defined within the assembly, data, and even you can reference other components

//定义button-counter组件
Vue.component('button-counter',{ //定义数据 data:function(){ return { count: 0 } }, //定义方法 methods:{ clickAdd: function(){ this.count++ } }, template:'<button @click="clickAdd">You clicked me {{count}} times</button>' }) 

Look at the demonstration effect

It should be noted that datanot provide a direct objects like this:

data: {
    count: 0
} 

Instead, data options must be a component of a function, so each instance can be returned object maintains a separate copy (remember not read enough, after slowly understanding):

data: function(){ return { count: 0 } } 

Three global registration and partial registration

Sign up above us is a global component, which is registered in the entire root example VUE, the call can also be understood as a static method of VUE registration, registration of such components can be used in any VUE instance.

But it will also bring trouble scope of conflict, for example, I were signed up for a front-end HOMEcomponent and a back-end ADMINcomponent, want to register two HEADcomponents were used in HOMEand ADMINcomponents inside, representing different foreground to background header, this time if it is a global registration in order to distinguish the different HEADcomponents, I might need to play two names as they were called HOME_HEAD, and ADMIN_HEAD.

However, the sub-assembly to allow the user to register custom components limit the scope of the parent VUE example:

//component-a是一个全局组件
Vue.component('component-a',{ template:'<div><p>这里是全局组件</p><component-b></component-b></div>', //使用components在父组件中注册局部组件 components:{ 'component-b': { template:'<button>这是一个局部组件</button>' }, } }) 

We can see that we put in component-ause the component in the keyword componentsregistration of a local assembly component-band embedded component-asyntax template.

The complete code

Note that four issues

Single root element

Note that the above examples of local components, assemblies global component-atemplate string is a <div>label completely wrapped up, because VUE provisions of each component must have only one root element , so no matter how much your assembly consists of sub-elements, the outermost layer there are only one and only one element.

Rational organization of the code structure

That is also an example of a local assembly, and if so to write the following will be more clearly understood some of them:

//定义component-b组件变量
component-b = {
    template: '<button>这是组件B</button>' } //定义component-a组间变量，并引用component-a变量 component-a = { template : '<div><p>这是组件A</p><component-b></component-b></div>' components: { 'component-b':component-b } } //在Vue实例中注册component-a局部组件 //虽然component-a实在Vue实例中注册，但是如果此Vue实例 //是整个程序的跟实例，那也component-a也相当于进行了全局注册 new Vue({ el: '#components-demo', components: { 'component-b': component-a } }) 

The above code will be the code assigned to each component of the different variables, so if there is a component change, only modify the variable, all without the need to modify the method of this variable to achieve a loosely coupled programming ideas.

Special elements of special treatment

Some HTML elements, such as <ul>, <ol>, <table>and <select>for which elements can appear inside it is strictly limited. And some elements, such as <li>, <tr>and <option>can only occur within certain other specific elements.

This can cause some problems when we use these elements have constraints. E.g:

<table>
  <blog-post-row></blog-post-row> <!--table元素中只允许包含<th>,<tr>等元素--> </table> 

The custom component <blog-post-row>will be promoted as an invalid content to the outside, and the results led to the final rendering error. Fortunately, this particular approach is characteristic gives us an alternative:

<table>
  <tr is="blog-post-row"></tr> </table> 

So <blog-post-row>this custom component will be normal rendering.

If you use a single file, then the component (that is, .vuefile suffix), this one can be ignored

to sum up

JS as a lightweight front-end frame,

I think both chapters covering using VUE has been the core of grammar and think.

Again, learning a framework, the most effective way is to practice, you do not need to go over all the documents to see a written procedure, because the time to write a real program, you will also look at the countless times framework document.

Until now, when I wrote the VUE program, is editor of the left side of the screen, the screen is VUE official document of the right.

1. Data Binding
2. Event binding
3. User input acquisition
4. Component definition and use

The above four points have been enough to support knowledge we write a similar program of VUE.

Would later explain, respectively:

1. Node.js and NPM, modern front-end development essentials
2. Webpack, front-end code Strapping Tools
3. vue-router, single-file front-end program essentials

With the above basis of these kind of things, you can set out to develop a one-page program of the ^_

Transfer Author: Kageyuki _ white limit

Link: https: //www.jianshu.com/p/bb4a347b903a
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.