<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../vue/dist/vue.js"></script>
<style type="text/css">
.primary{
background-color: red;
}
.success{
background-color: green;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
/*全局組件*/
Vue.component('VBtn',{
template:`
<button v-bind:class="type">
<slot></slot>
</button>
`,
props:['type']
});
/*局部組件*/
//頭部組件
var Vhander = {
data(){
return{}
},
template:`
<div>頭部組件
<VBtn type="primary">登錄</VBtn>
<VBtn type="success">註冊</VBtn>
</div>
`,
methods:{}
};
var Vmenu = {
data(){
return{}
},
template:`
<div>菜單欄組件</div>
`,
methods:{}
};
var Vcontent = {
data(){
return{}
},
template:`
<div>內容組件</div>
`,
methods:{}
};
var AppTemp = {
data(){
return{
}
},
components:{
Vhander:Vhander,
Vcontent:Vcontent,
Vmenu:Vmenu
},
template: `
<div>
<Vhander />
<Vmenu />
<Vcontent />
</div>
`
};
new Vue({
el:'#app',
data(){
return{
}
},
components:{
AppTemp:AppTemp
},
template:`<AppTemp />`
});
</script>
</html>
