件化开发—局部组件的创建
1、在body标签里创建内容模板
<template id="header">
<div>我是头部区域</div>
</template>
2、script里设置局部组件(局部实例)
let myHeader = {
template: `#header`
}
3、将子组件放进components中
let vm = new Vue({
el: '#app',
data: {},
// 3、将子组件放进components中
components: {
myHeader,
myBody,
myFooter,
myNav
}
})
4、使用
<div id="app">
<!-- 4 -->
<my-header></my-header>
<my-nav></my-nav>
<my-body></my-body>
<my-footer></my-footer>
</div>
代码演示:
全代码:
<div id="app">
<!-- 4 -->
<my-header></my-header>
<my-nav></my-nav>
<my-body></my-body>
<my-footer></my-footer>
</div>
<!-- 1、在body标签里创建内容模板 --> <template id="header">
<div>我是头部区域</div>
</template> <template id="nav">
<div class="nav">
<div class="m2">
<nav>
<ul>
<li v-for="(item, index) in menu"><a :href="item.url" target="_blank">{{item.text}}</a></li>
</ul>
</nav>
</div>
</div>
</template> <template id="body">
<div>我是主体区域</div>
</template> <template id="footer">
<div>我是页脚区域</div>
</template>
CSS
* {
margin: 0;
padding: 0;
}
.nav {
height: 50px;
background-color: #336699;
}
.m2 {
width: 1130px;
margin-left: auto;
margin-right: auto;
}
.m2 ul {
display: flex;
align-items: center;
justify-content: space-around;
}
.m2 li {
float: left;
list-style-type: none;
}
a {
text-decoration: none;
color: #fff;
}
JavaScript
let myHeader = {
template: `#header`
}
let myNav = {
template: `#nav`,
data: function () {
return {
menu: [{
id: 1,
text: '首页',
url: 'http://www.wmq.ink'
}, {
id: 2,
text: '全网营销',
url: 'http://www.wmq.ink'
}, {
id: 3,
text: '技术研发',
url: 'http://www.wmq.ink'
}, {
id: 4,
text: '运营管理',
url: 'http://www.wmq.ink'
}, {
id: 5,
text: '客户案例',
url: 'http://www.wmq.ink'
}, {
id: 6,
text: '解决方案',
url: 'http://www.wmq.ink'
}, {
id: 7,
text: '新闻中心',
url: 'http://www.wmq.ink'
}, {
id: 8,
text: '关于我们',
url: 'http://www.wmq.ink'
}]
}
}
}
let myBody = {
template: `#body`
}
let myFooter = {
template: `#footer`
}
// 根实例(根组件)
let vm = new Vue({
el: '#app',
data: {},
// 3、将子组件放进components中
components: {
myHeader,
myBody,
myFooter,
myNav
}
})
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果