<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>template模版</title> <meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no,email=no" name="format-detection"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> <script src="../assets/js/flexible_css.js"></script> <script src="../assets/js/flexible.js"></script> <script src="../assets/js/vue.js"></script> </head> <body> <div id="app"> <cai></cai> <panda></panda> </div> <panda></panda> <div id="box"> <cai></cai> <panda></panda> <!-- 局部组件有显示 只会在id为app元素范围内生效 --> </div> </body> <script type="text/javascript"> //注册全局组件 Vue.component('cai',{ //// 全局组件 cai是组件名 template:`<div style="color:green">全局组件 名字cai</div>` }) var app=new Vue({ el:"#app", data:{ message:"hello 你好", }, components:{ //局部组件定义 只能用在 id为app的元素范围内 "panda":{ template:`<div style="color:blue">局部注册的panda组件，只能在id为app的标签范围内使用</div>` } } }) new Vue({ el:"#box", }) //组件定义两种方法，第一种:注意全局在构造器外面定义 第二种:局部在构造器里面定义 构造器里的components 是加s的，而全局注册是不加s的。 </script> </html>