05、Vue-局部组件的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行找的皮卡丘</title>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript" src="js/vue.min.js">
</script>
<script type="text/javascript">
var Vheader = {
data(){
return {
}
},
template: `
<div>
我是头部组件
</dov>
`,
};
var Vaside = {
data(){
return {
}
},
template: `
<div>
我是侧边栏组件
</div>
`,
}
var Vcontent = {
data(){
return {
}
},
template: `
<div>
我是内容组件
</div>
`,
}
var App = {
data(){
return {
}
},
template: `
<div>
<Vheader/>
<div>
<Vaside/>
<div>
<Vcontent/>
</div>
</div>
</div>
`,
components: {
Vheader,
Vaside,
Vcontent
},
};
new Vue({
el: "#app",
data() {
return {
}
},
components: {
App
},
template: `<App/>`,
});
</script>
</html>