<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="demo.css" /> </head> <body> <!--this is my View--> <div id="app"> <parent-component></parent-conponent> </div> <div id="app2"> <my-component></my-conponent> </div> <my-component></my-conponent> </body> <script src="vue.min.js"></script> <script> var Child = Vue.extend({ template: '<p> This is child component</p>' }) var myComponent = Vue.extend({ template: '<div> This is my first component.</div>' }); Vue.component('parent-component', { template: '<div><p> This is Parent component</p><child-component></child-component></div>', components: { 'child-component': Child } }); new Vue({ el: '#app' }) new Vue({ el: '#app2', components: { 'my-component': myComponent } }) </script> </html>
