<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<hello></hello>
</div>
<div id="app2" style="width:500px;height:500px;border:1px solid red">
<hello></hello>
</div>
<script>
// 局部的组件只能在固定的 vue对象里使用
var obj={
template:`
<div>
<h2 style="color:red">我是hello标签</h2>
<div>{{msg}}</div>
<button @click="showMessage">显示信息</button>
</div>
`,// 在组件里数据是以函数进行返回
data:function(){
return {
msg:"李李"
}
},
methods:{
showMessage(){
alert('小哥哥呀')
}
}
}
var app = new Vue({
el:"#app",
// hello组件的使用范围只能是在 id="app"的div中,一旦超出范围就报错了
components:{
"hello":obj
}
})
var app2 = new Vue({
el:"#app2",
})
</script>
</body>
</html>