Home > Article > Web Front-end > What is vue.js component

What is vue.js component

coldplay.xixiOriginal: 2020-11-10 16:34:182235browse

vue.js component is a custom HTML tag used to complete specific functions. It is divided into global components and local components. Global components can be used in any hung tags. Local components are defined in On a certain vue instance.

[Related article recommendations: vue.js]

Components are used to complete specific functions A custom HTML tag

For example:

<body>
    <mytag></mytag>
</body>

Note: mytag is a component, which must give mytag certain functions through Vue

Component Function

Component is an encapsulation of feature code (html, css, js). The code in the component can be reused through the name of the component.

Component classification :

Global components and local components

Note: The component's template must have one and only one root tag (all content must be enclosed by one tag).

Global component

1. Syntax of global component:

Vue.component("自定义标签的名字",{配置对象})

2. Characteristics of global component:

Global component can Used in any hanging tag.
The configuration object of the global component must contain the template attribute
Local component-is defined in

on a certain vue instance 1. Local syntax:

var app = new Vue({
    el: "#app",
    data: {},
    components : {
       　"局部组件的名字1" : {组件的配置对象}
       　　 "局部组件的名字2" : {组件的配置对象}
    }
});

2. Characteristics of local components

Local components can only be used in mounted tags.

Related free learning recommendations: JavaScript(Video)

The above is the detailed content of What is vue.js component. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css vue.js html 封装 JS 对象

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to solve v-for running error problem in Vue.jsNext article：How to solve v-for running error problem in Vue.js

See more

What is vue.js component

Related articles