vue.js入门（20）实战demo（组件嵌套）

模拟一个网页，有头部，内容，尾部，

先对头部进行编码（并进行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代码说明

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名