原始方式：使用Vue.extend()方式创建组件
/*1.使用Vue.extend({
template：" HTML结构 "
}) 创建组件,接收一个返回值（创建组件对象）*/
var com = Vue.extend({
template:'<h1>这是使用Vue.extend方式创建的组件</h1>'
});
/*2.使用Vue.component('自定义组件名',创建组件对象)*/
Vue.component('myCom',com);
注意：① . 自定义组件名使用驼峰命名时，在使用的过程中需要改成小写在前面加-
② . 无论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只有一个根元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="app">
<!--3使用方式：用自定义组件名作为元素标签-->
<my-com></my-com>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
/*1.使用Vue.extend({
template：" HTML结构 "
}) 创建组件,接收一个返回值（创建组件对象）*/
// var com = Vue.extend({
// template:'<h1>这是使用Vue.extend方式创建的组件</h1>'
// });
/*2.使用Vue.component('自定义组件名',创建组件对象)*/
/*注意：自定义组件名使用驼峰命名时，在使用的过程中需要改成小写在前面加-*/
// Vue.component('myCom',com);
/*简写*/
Vue.component('myCom',Vue.extend({
template:'<h1>这是使用Vue.extend方式创建的组件</h1>'
}));
var vm = new Vue({
el:'.app',
data:{}
})
</script>
</body>
</html>字面量方式创建组件
<div class="app">
<my-com></my-com>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
/*无论是哪种方式创建出来的组件，组件的template属性指向的模板内容，必须有且只有一个根元素*/
Vue.component('myCom',{
template:'<div><h3>这是字面量的方式创建组件</h3><span>只能有一个根元素</span></div>'
});
var vm = new Vue({
el:'.app',
data:{}
})
</script>
传递一个标识创建组件
<div class="app">
<my-com></my-com>
</div>
<!--在被Vue控制的外部写template模本HTML结构内容-->
<template id="temp">
<div>
<h1>这是使用外部标识传递给Vue提供的template标签创建的组件</h1>
<h4>可以正常的写HTML代码了，good！</h4>
</div>
</template>
<script src="../lib/vue-2.4.0.js"></script>
<script>
Vue.component('myCom',{
/*传递一个标识*/
template:'#temp'
});
var vm = new Vue({
el:'.app',
data:{}
})
</script>
定义私有组件
<div class="app">
<login></login>
</div>
<template id="temp">
<h1>这是一个私有的组件</h1>
</template>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{},
methods:{},
/*定义私有的组件*/
components:{
login:{
template:'#temp'
}
}
})
</script>