<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">
<Demo></Demo> </div> </body> <script src="vue.js"></script> <script> Vue.component("Demo",{ template:"<h3>全局组件</h3>" }) new Vue({ el:"#app" }) </script> </html>
写法二:全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">
<my-temp></my-temp> </div> <template id="DemoTemp"> <h3>全局组件</h3> </template> </body> <script src="vue.js"></script> <script> var Home = { template:"#DemoTemp" }; Vue.component("my-temp",Home) new Vue({ el:"#app" }) </script> </html>
写法三:局部组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <my-temp></my-temp> </div> <template id="DemoTemp"> <h3>局部组件</h3> </template> </body> <script src="vue.js"></script> <script> var Home = { template:"#DemoTemp" }; // Vue.component("my-temp",Home) new Vue({ el:"#app", components:{ "my-temp":Home } }) </script> </html>
原文:http://www.cnblogs.com/hcxy/p/7142459.html