<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件的分类</title> <script src="js/vue.js"></script> </head> <body> <div id="itany"> <my-hello></my-hello> <my-world></my-world> </ Div > < Script > / * * * global components, can be used in all instances vue * / Vue.component ( ' My-Hello ' , { Template: ' <H3> {{name}} </ H3> ' , data: function () { // when the data stored in the component must be in a functional form, function returns an object return { name: ' Alice ' } } }); / * * * partial assembly, in the present example only vue use * / var VM = new new Vue({ el:'#itany', data:{ name:'tom' }, components:{ //局部组件 'my-world':{ template:'<h3>{{age}}</h3>', data(){ return { age:25 } } } } }); </script> </body> </html>