Vue实战：简易布局Dome

一、show

1、介绍

• 组件：App、MyHeader、Mybody、MyNav、MyMain、MyFooter（App是所有的父组件，Mybody是 MyNav和MyMain 的父组件）

• 数据data：[{name: ‘bty’, age: 12}, {name: ‘张三’, age: 13}, {name: ‘oppen’, age: 14}]

• 传值：将全局数据data传给App组件、App再传给MyBody组件、MyBody再传给MyNav组件，并在其中把传来的数据展示出来。

2、展示

点击显示数据后，导航栏显示数据：

二、code

dome.html

./src/js/index.js

let MyHeader = {
	template: `
我是头部
`,
};

let MyNav = {
	template: 
		`

			我是导航栏

			点我显示数据
			

				
{{index}}、{{item.name}} ：{{item.age}}
			
		
`,
	data() {
		return {dataShow: false};
	},
	methods: {
		changeShow() {
			this.dataShow = !this.dataShow;
		}
	},
	props: ['data'],
};

let MyMain = {
	template: `
我是正文
`,
};

let MyBody = {
	components: {
		'my-nav': MyNav,
		'my-main': MyMain,
	},
	template: 
		`

			
			
		
`,
	props: ['data'],
};

let MyFooter = {
	template: `
我是底部
`,
};

let App = {
	components: {
		'my-header': MyHeader,
		'my-body': MyBody,
		'my-footer': MyFooter,
	},
	template: 
		`

			
			
			
		
`,
	props: ['data'],
};

let vm = new Vue({
	el: document.getElementById('app'),
	components: {
		'app': App,
	},
	template: '',
	data() {
		return {
			data: [{name: 'bty', age: 12}, {name: '张三', age: 13}, {name: 'oppen', age: 14}]
		};
	}
});

./src/css/index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#header,
#body,
#footer {
	width: 100%;
	border: 1px solid #000;
}
#header,
#body,
#nav,
#footer {
	float: left;
}
#header {
	height: 60px;
}
#body {
	margin: 10px 0;
	height: 400px;
}
#nav,
#main {
	display: inline-block;
	height: 100%;
}
#nav {
	width: 25%;
	border: 2px solid blue;
}
#main {
	width: 70%;
	float: right;
	border: 2px solid red;
}
#footer {
	height: 50px;
}