<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>杂七杂八</title> </head> <body> <div id="parent"> <user ref="profile"></user> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('user',{ template:'<p>你好，蔡蔡</p>' }) var vm=new Vue({ el:'#parent', data:{ } }) var child=vm.$refs.profile //取得这个组件的实例： </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>杂七杂八</title> </head> <body> <div id="parent"> <user ref="profile"></user> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('user',{ template:'<p>你好，蔡蔡</p>' }) var vm=new Vue({ el:'#parent', data:{ } }) var child=vm.$refs.profile //取得这个组件的实例： </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步组件</title> </head> <body> <div id="box"> <z-jian></z-jian> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('zJian',function(cana,canb){ //组件名称可定义为zJian z-jian ZJian 这几种 但在html里区分大小写 全部写成z-jian 在templates 模版里可写成与组件名一样的格式 setTimeout(function(){ cana({ template:'<div> hello caicai !</div>' }) },1000) }) new Vue({ el:'#box', data:{} }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异步组件</title> </head> <body> <div id="box"> <z-jian name="stack-overflow"></z-jian> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('z-jian',{ name:'stack-overflow', template:'<div><stack-overflow>哈哈哈哈</stack-overflow></div>' }) new Vue({ el:'#box', data:{} }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>静态组件</title> </head> <body> <div id="box"> <terms-of-service></terms-of-service> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> Vue.component('terms-of-service', { template: ' <div v-once> <h1>Terms of Service</h1> ... a lot of static content ... </div> ' }) new Vue({ el:"#box", }) //你可以在模板内部使用v-once，这样可以生成缓存，节约不少性能； </script> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>x-template</title> </head> <body> <div id="box"> <zjname></zjname> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/x-template" id="zj"> <p>对于html内容比较多的模板，你可以把模板定义在外面：</p> </script> <script type="text/javascript"> Vue.component('zjname',{ template:"#zj" }) new Vue({ el:'#box', }) </script> </html>