<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 全局组件 声子 挂子
Vue.component('Vbtn', {
template: `<button>按钮</button>`
});
// 局部组件
var Vheader = {
data() {
return {
}
},
template: `<div>头部</div>`
};
var Vaside = {
data() {
return {
}
},
template: `
<div>
侧边
<Vbtn />
</div>
` // 用子
};
var Vcontent = {
data() {
return {
}
},
template: `
<div>
内容
<Vbtn />
<Vbtn />
<Vbtn />
</div>
`
};
var App = {
data() {
return {
}
},
components: {
Vheader,
Vaside,
Vcontent
},
template:`
<div>
<Vheader />
<Vaside />
<Vcontent />
</div>
`
};
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components: {
App
},
template: `<App />`
});
</script>
</body>
</html>