<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
</head>
<body>
<div id='app'>
<h-p></h-p>
<h-p></h-p>
<h-p></h-p>
</div>
<script src='./vue.js'></script>
<script>
// 两类+三步
// 全局
// 1. 定义 (组件名,组件选项所在对象)
// 注意: 组件名命名, abc childA child-a
// 2. 写选项
// 注意: template 一个根元素 + data的值必须return{}的函数
// 3. 使用
// 自定义标签名
Vue.component("h-p", {
template: `
<div>
<h3>{{msg}}</h3>
<p>neirong </p>
</div>`,
data() { return { msg: "abc" } }
});
new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
