42.Vue组件-CFANZ编程社区

42.Vue组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
		<div id="root">
			<school></school>
		</div>
	</body>
</html>

<script type="text/javascript">
	//定义school组件
	const school = Vue.extend({
		name: 'school',
		data() {
			return { //使用return每次都会重新返回数据
				name: '广职院',
				address: '佛山'
			}
		},
		template: `
		<div>
			<h2>名称:{{name}}</h2>
			<h2>地址:{{address}}</h2>
		</div>
		`,
	});
	console.log(school);
	const vm =new Vue({
		components: {
			school
		},
		el: '#root',
	});
</script>

0 条评论