<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div id="app">
    <mycpn1></mycpn1><!--使用自定义的组件名称-->
    <mycpn1></mycpn1><!--使用自定义的组件名称-->
    <mycpn1></mycpn1><!--使用自定义的组件名称-->
</div>
<body>
<!--&lt;!&ndash;1 script标签，注意类型必须是:text/x-template&ndash;&gt;-->
<!--<script type="text/x-template" id="cpn">-->
<!--    <div><h2>我是标题1</h2><p>我是内容</p><p>我是安徽</p></div>-->
<!--</script>-->
<!--2template标签-->
<template id="cpn1">
    <div>
        <h2>{{title}}</h2>   <!--组件内部不能访问实例里的数据，Vue组件应该有自己保存数据的地方-->
        <p>我是内容</p><p>我是安徽</p>
    </div>
</template>
<script src="vue.js"></script>
<script>
    //全局注册的语法糖的实现
    Vue.component("mycpn1",{
        template:'#cpn1',
        //    组件的数据不能是对象类型，而应该是函数类型，从而返回实例的值
        //在组件当中，组件的对象有data属性，methods等属性，
        // 只是data 必须是一个函数
        //而且这个函数必须要返回一个对象，对象内部保存着数据。
        data(){
            return {
                title:'abc'
            }
        }
    });
    const app=new Vue({         /*看成root组件*/
        el:'#app',

    })
</script>
</body>
</html>