Vue.js component usage and development example tutorial

Components

Components can extend HTML elements and encapsulate reusable code. At a high level, components are custom elements. The compiler of vue.js adds special functions to it. In some cases, components can also It is in the form of a native HTML element, extended with the is attribute.

Vue.js components can be understood as ViewModel classes with predefined behaviors. A component can predefine many options, but the core ones are the following:

Template (template): The template declares the mapping relationship between the data and the DOM that is ultimately displayed to the user.

Initial data (data): the initial data state of a component. For reusable components, this is usually private state.

Accepted external parameters (props): Data is transferred and shared between components through parameters. Parameters are bound one-way (top to bottom) by default, but can also be explicitly declared two-way.

Methods: Modification operations on data are generally performed within the methods of components. User input events and component methods can be bound through the v-on directive.

Lifecycle hooks: A component will trigger multiple lifecycle hook functions, such as created, attached, destroyed, etc. In these hook functions, we can encapsulate some custom logic. Compared with traditional MVC, it can be understood that the logic of the Controller is dispersed into these hook functions.

Private resources (assets): In Vue.js, user-defined instructions, filters, components, etc. are collectively called resources. Since globally registered resources can easily lead to naming conflicts, a component can declare its own private resources. Private resources can only be called by the component and its subcomponents.

In addition, components within the same component tree can also communicate through the built-in event API. Vue.js provides a complete API for defining, reusing and nesting components, allowing developers to use components to build the entire application interface like building blocks.

Components greatly improve the efficiency, maintainability and reusability of code.

Use component

Register

1. Create a component constructor:

var MyComponent = Vue.extend({
//选项
})

2. Use the constructor as a component and register it with Vue.component(tag,constructor):

Vue.component('my-component',MyComponent)

3. Use it in the module of the parent instance as a custom element :

<div id = "example">
<my-component></my-component>
</div>

Example:

<div id="example">
<my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
template: &#39;<div>A custom component!</div>&#39;
})
// 注册
Vue.component(&#39;my-component&#39;, MyComponent)
// 创建根实例
new Vue({
el: &#39;#example&#39;
})

Rendered as:

<div id = "example">
<div>A custom component!</div>
</div>

Component’s The template replaces the custom element, which only serves as a mount point. You can use the instance option replace to decide whether to replace.

Partial registration

Register with the instance option components. There is no need to register each component globally. The component can only be used in other components:

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父组件模板内
&#39;my-component&#39;: Child
}
})

This kind of encapsulation is also suitable for other resources, such as instructions, Filters and transitions.

Registration syntactic sugar

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: &#39;<div>A custom component!</div>&#39;
})
// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
&#39;my-component&#39;: {
template: &#39;<div>A custom component!</div>&#39;
}
}
})

Component option issue

Most options passed into the Vue constructor can also be used in Vue.extend(), except for data and el, if you simply use an object as the data option Passed to Vue.extend(), all instances will share the same data object, so we should use a function as the data option and let this function return a new object:

var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})

Template parsing

Vue The template is a DOM template that uses the browser's native parser, so it must be a valid HTML fragment. Some HTML elements have restrictions on what elements can be placed in it. Common restrictions are:

a cannot contain other interactive elements. (Such as buttons, links)

ul and ol can only directly contain li

select can only contain option and optgroup

table can only directly contain thead, tbody, tfoot, tr, caption, col, colgroup

tr can only Including th and td directly

In practice, these restrictions can lead to unexpected results. Although it may work in simple cases, you cannot rely on the result of a custom component's expansion before the browser validates it. For example

... is not a valid template, even though the my-select component eventually expands to ...< /select>.

Another result is that custom tags (including custom elements and special tags, such as ,