【易错点】：
1. 组件内html代码片段超过一个标签时必须套一个根元素，即template模板子元素只能是一个。
2. 组件名称采用横杠间隔命名时，第一个字母大写会报错。
写法一：全局组件
<!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>