Home > Developer > Web Develop
The component system is an important concept of vue. He allows us to use separate, reusable widgets to build large, complex applications that any application can look at as a component tree. Components can be seen as custom HTML code. Extensible HTML that encapsulates reusable HTML.
The use of components is divided into three steps
Create a component constructor, call Vue.extend () to create, which is an extension of the Vue constructor. He has an option object. The option object has a template property that defines the HTML that the component will render
Registration component, vue.compontent () registration
Using components (using components within the scope of the Vue instance, must be mounted under the instance, otherwise it will not take effect)
Example
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Body> <DivID= "App1"> <my-component></my-component> </Div> <DivID= "App2"> <my-component></my-component> </Div> </Body> <Scripttype= "Text/javascript"src= "Https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"> </Script> <Script> varMyComponent=vue.extend ({Template:'<div> ah ah, Heaven Earth </div>' }); varApp1= NewVue ({el:'#app1', components: {'my-component': MyComponent}}) //The following is not effective varApp1= NewVue ({el:'#app2', }) </Script></HTML>My-component is registered under the #app1. So it cannot be used under other Vue instances. using other components in a component constitutes a parent-child component relationship. To be continued ....
Vue.js Quick Start (iii) ~ Components Getting Started ~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
