Home > Developer > Web Develop
These two days to learn vue.js sensory components This place a lot of knowledge points, and very important, so, today add a little bit of notes.
First, the use of the Vue component has 3 steps, creating the component constructor, registering the component, and using 3 aspects of the component.
The code demonstrates the following:
<! DOCTYPE html><Html><Body><DivId="App" ><!--3. #app是Vue实例挂载的元素, components should be used within the range of Mount elements--<My-component></My-component></Div></Body><script src= "js/vue.js" ></ script> <script> //1. Create a Component Builder var mycomponent = Vue.extend ({ Template: <div>this is my first component!</div> '}) //2. Register the component and specify the component's label, and the HTML tag for the component is <my-component> vue.component ( ' my-component ', mycomponent) new Vue ({el: ' #app '}); </script></ HTML>
2. Understanding the creation and registration of components
We use the following steps to understand the creation and registration of components:
1.Vue.extend()Vue.extend()Vue.extend()templateVue.component()Vue.component()Please note that 5th, the following code uses <my-component> tags in 3 places, but only the <my-component> tags under #app1 and #app2 play a role.
<! DOCTYPE html><Html><Body><DivId="App1" ><My-component></My-component></Div><DivId="APP2" ><My-component></My-component></Div><!--the component is not rendered-<My-component></My-component></Body><Scriptsrc="Js/vue.js" ></script> <script> var mycomponent = Vue.extend ({ Template: ' <div>this is a component!</div> '}) vue.component (' my-component ', mycomponent) var App1 = New Vue ({el: ' #app1 '}); var app2 = New Vue ({el: ' #app2 '}) </script></html>
Global registration and local registration
Vue.component()when you invoke the registration component, the registration of the component is global, which means that the component can be used under any Vue sample.
If global registration is not required, or if the component is used within other components, Local registration can be implemented with the components of the option object .
The above example can be changed to a partial registration method:
<! DOCTYPE html><Html><Body><DivId="App" ><!--3. My-component can only be used under #app<My-component></My-component></Div></Body><script src= "js/vue.js" ></ script> <script> //1. Create a Component Builder var mycomponent = Vue.extend ({ Template: <div>this is my first component!</div> '}) new Vue ({el: ' #app ', components: { 2. Register the MyComponent component under the Vue instance ' my-component ': MyComponent}}); </script></ HTML>
Because the My-component component is registered under the Vue instance corresponding to the #app element, it cannot be used under other Vue instances.
<id="app2" > <!--cannot use the My-component component because my-component is a local component that belongs to #app--> <my-component></my-component></div><script>' # App2 '}); </script>
< Span class= "Hljs-attribute" > If you do this, the browser will prompt an error.
/span>
< Span class= "Hljs-title" >< Span class= "Hljs-title" >
Vue.js Components-Global components and local components
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
