<!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>
