39.Vue初识组件

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

			<h1>学校</h1>
			<school></school>
			<hr>
			<h1>学生</h1>
			<student></student>
			<student></student>
			<hello></hello>
		</div>
		<div id="root2">
			<hello></hello>
		</div>
	</body>
</html>

<script type="text/javascript">
	//创建两个组件
	const school = Vue.extend({
		template: `
		

名称:{{schoolName}}

地址:{{address}}

`
, data() { return { schoolName: '广职院', address: '佛山' } }, methods: { showName() { console.log(this.schoolName); } } }); const student = Vue.extend({ template: `

姓名:{{studentName}}

年龄:{{age}}

`
, data() { return { studentName: '张三', age: 18 } } }); const hello = Vue.extend({ template: `

你好啊,{{name}}

`
, data() { return { name: 'Tom' } } }); //全局注册组件 Vue.component('hello', hello); //Vue带school和student两个组件 new Vue({ el: '#root', // 局部注册组件 components: { school, student, // 原来写法student:'student' } }); //没有自己的组件 new Vue({ el: '#root2', }); </script>

你可能感兴趣的:(VUE,vue.js,javascript,前端)