<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>组件的几个注意点</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
几个注意点
一：关于组件名
1.一个单词组成
第一种写法（首字母小写）:school
第二种写法（首字母大写）:School
2.多个单词组成
第一种写法(Kebab-case命名):my-school 需要加‘’
第二种写法(CameCase命名):MySchool(需要Vue脚手架支持)
备注
(1).组件名尽可能回避HTML中已有的元素名称 例如h2 H2 等
(2).可以使用name配置项指定组件再开发者工具中呈现的名字
二: 关于组件标签
第一种写法:<school></school>
第二种写法:<school/>
备注:不使用脚手架时,<school/>会导致后续组件不能渲染 不使用脚手架时,重复多个<school/>只会展示一个
三：一个简写的形式
const school=Vue.extend(options) 简写为const school = options
-->
<div id="root">
<h1>欢迎学习vue{{name}}</h1>
<!--第一种-->
<!-- <school></school> -->
<!--第二种-->
<!-- <School></School> -->
<my-school></my-school>
</div>
<script type="text/javascript">
//创建组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称{{schoolName}}</h2>
<h2>学校地址{{address}}</h2>
</div>
`,
data() {
return {
schoolName: "洛阳理工",
address: "洛阳",
};
},
});
new Vue({
el: "#root",
data: {
name: "smy",
},
components: {
//school,
//School: school,
"my-school": school,
},
});
</script>
</body>
</html>