<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<my-com1></my-com1> <!--1.3 使用组件直接使用-->
<mycom2></mycom2>
<mycom3></mycom3>
<login></login>
</div>
<!--
在被控制的#app外面，使用template元素，定义组件的html模板结构
-->
<template id="tmpl">
<div>
<h4>外部的组件结构</h4>
</div>
</template>
<script>
var com1=Vue.extend({ /*1.1 Vue.extend创建全局的vue组件*/
template:'<h1>你好世界</h1>'
})
Vue.component('myCom1',com1)/*1.2 使用Vue.component('组件的名称',创建出来的组件模板对象)*/
/*驼峰命名 使用就用 my-com1 */
Vue.component('mycom2',Vue.extend({
template:'<h2>你好世界</h2>'
}))
Vue.component('mycom3',{
template:'<h3>你好世界</h3>'
})
Vue.component('mycom3',{
template:'#tmpl'
})
var vm=new Vue({
el:"#app",
data:{
},
methods:{
},
components:{
login:{ /*定义私有组件*/
template:'<h5>你好世界私</h5>'
}
}
})
</script>
</body>
</html>
