第一种注册全局组件
<body>
<div id="app">
//使用组件
<hello-com></hello-com>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
//注册全局组件
Vue.component('hello-com',
{
template:'<h1>你好啊</h1>',
})
另一种方式创建组件
<html>
<head>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 在#app外面，使用template元素，定义组件html结构 -->
<template id='temp1'>
<div>
<h1>这是通过template元素，在外面定义的组件</h1>
<h4>用起来方便！</h4>
</div>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
//注册全局组件
Vue.component('mycom3',{
template:'#temp1',
})
let app = new Vue({
el:'#app',
data:{
},
// components:{
// hello1:hello,
// }
})
</script>
</html>
私有组件 components来定义
<html>
<head>
</head>
<body>
<div id="app">
<mycom3></mycom3>
</div>
<!-- 在#app外面，使用template元素，定义组件html结构 -->
<template id='temp1'>
<div>
<h1>这是通过template元素，在外面定义的组件</h1>
<h4>用起来方便！</h4>
</div>
</template>
</body>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
},
// 私有组件
components:{
//
mycom3:{template:'#temp1'},
}
})
</script>
</html>