模拟一个网页,有头部,内容,尾部,
先对头部进行编码(并进行css稍微修饰一下),创建一个Header.vue文件
//Header.vue
<template>
<header>
<h1>{{ title }}</h1>
</header>
</template>
<script>
export default {
name: 'appheader',
data () {
return {
title:"vue.js demo"
}
}
}
</script>
header{
background-color:lightgreen;
padding:20px;
}
h1{
color:#222;
text-align:center;
}
<style scoped>
</style>
然后进入App.vue文件,首先,还是要先引入一下Header.vue文件
import User from './components/Header'
并且在components里面注册Header
"appheader":Header,
这里不能给header,不然在标签<header></header>里面会造成冲突
然后这里算是header文件完成了,接下来我们进入到Footer.vue里面,代码类似Header.vue写法
<template>
<footer>
<h1>{{ copyright }}</h1>
</footer>
</template>
<script>
export default {
name: 'appfooter',
data () {
return {
copyright:"copyright vue 2018 demo"
}
}
}
</script>
<style scoped>
footer{
background-color:yellow;
padding:20px;
}
h1{
color:lightgreen;
text-align:center;
}
</style>
然后同理,在App.vue文件中引入并注册Footer组件。然后目前页面如下,头部尾部算是弄好了
这个时候,我们就对中间内容User.app文件进行稍微加工一下
//User.vue
<template>
<div class="user">
<h1>user hello</h1>
<ul>
<li v-for="user in user" v-on:click="user.show=!user.show">
<h2>{{ user.name }}</h2>
<h3 v-show="user.show">{{ user.age }}</h3>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'user',
data () {
return {
user:[
{name:"day1",age:30,show:false},
{name:"day2",age:31,show:false},
{name:"day3",age:32,show:false},
{name:"day4",age:33,show:false},
{name:"day5",age:34,show:false},
{name:"day6",age:35,show:false},
{name:"day7",age:36,show:false},
]
}
}
}
</script>
<style scoped>
h1
{
color:green;
}
.user
{
width:100%;
max-width:1200px;
margin:40px auto;
padding:0 20px;
box-sizing:border-box;
}
ul{
display:flex;
flex-wrap:wrap;
list-style-type:none;
padding:0;
}
li
{
flex-grow:1;
flex-basis:200px;
text-align:center;
padding:30px;
border:solid 1px black;
margin:10px;
}
</style>
这里想对css代码说明
扫描二维码关注公众号,回复:
2192612 查看本文章
ul{
display:flex;//是为了让它排在一排
flex-wrap:wrap;//换行,并且第一行在上面
list-style-type:none;
padding:0;
}
li
{
flex-grow:1;//如果所有项目属性都为1,则它们将等分剩余空间(如果有的话)
flex-basis:200px;//项目将占据固定空间
text-align:center;
padding:30px;
border:solid 1px black;
margin:10px;
}
flex布局教程可参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 作者:阮一峰
图片来源于教程里面,便于理解
最后,呈现出效果图
最后附上App.vue的代码
<template>
<div id="app">
<appheader></appheader>
<user></user>
<appfooter></appfooter>
</div>
</template>
<script>
import User from './components/User'
import Header from './components/Header'
import Footer from './components/Footer'
export default {
name: 'App',
data(){
return{
hello:"helloworld"
}},
components:{
"user":User,
"appheader":Header,
"appfooter":Footer,
}
}
</script>
<style scoped>
</style>
PS:name是什么,调用的标签名就是name名