4.3 组件案例 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
	<style>
		body {
			background: #e2e2e2;
		}

		h3,
		h4,
		p {
			margin: 0;
		}

		.box {
			width: 500px;
			background: #fff;
			padding: 10px 20px 20px;
			margin: 50px;
		}

		.box h3 {
			color: #2cbd53;
			border-bottom: 1px solid #E8ECEE;
			margin-bottom: 20px;
			padding-bottom: 10px;
		}

		.box div {
			overflow: hidden;
		}

		.box div img {
			float: left;
			margin-right: 15px;
		}

		.box div h4 {
			color: #333;
			font-size: 20px;
			line-height: 20px;
			padding: 10px 0 20px 0;
		}

		.box div p {
			color: #8b8b8b;
			font-size: 14px;
			line-height: 22px;
		}
	</style>
</head>

<body>
	<!-- <div class="box">
		<h3>饮食健康</h3>
		<div>
			<img src="images/img_01.jpg" alt="" />
			<div>
				<h4>你的暴饮暴食，是因为饿了吗？</h4>
				<p>在一项调查中发现，有近40％的成人选择以暴饮暴食或吃垃圾食品的方式，来缓解前一个月的压力。而在这些人之中，有近一半的人每周都是如此。</p>
			</div>
		</div>
	</div>
	<div class="box">
		<h3>子女教育</h3>
		<div>
			<img src="images/img_02.jpg" alt="" />
			<div>
				<h4>表扬孩子聪明是害了他吗？</h4>
				<p>大人对小孩儿说话时常常并不会想太多，尤其是在表扬孩子时，总是顺口就赞美孩子说：“你好漂亮、好可爱啊！”“你真聪明！”殊不知对于不懂事的小孩儿来说</p>
			</div>
		</div>
	</div> -->

	<div id="app">
		<article-list></article-list>
		<article-list></article-list>
	</div>

	<template id="box">
		<div class="box">
			<h3>{{boxTitle}}</h3>
			<div>
				<img :src="imgSrc" alt="" />
				<div>
					<h4>{{articleTitle}}</h4>
					<p>{{articleContent}}</p>
				</div>
			</div>
		</div>
	</template>

	<script>
		new Vue({
			el: '#app',
			components: {
				ArticleList: {
					data() {
						return {
							boxTitle: '饮食健康',
							imgSrc: 'images/img_01.jpg',
							articleTitle: '你的暴饮暴食，是因为饿了吗？',
							articleContent: '在一项调查中发现，有近40％的成人选择以暴饮暴食或吃垃圾食品的方式，来缓解前一个月的压力。而在这些人之中，有近一半的人每周都是如此。'
						}
					},
					template: '#box',
				},
			},
			//template:'<ArticleList />'
		});
	</script>
</body>

</html>

　　

posted @ 2022-01-03 15:03  JavaShop  阅读(24)  评论(0)    收藏  举报