SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE> 
<html lang="ZH-cn">
	<head>
		<meta charset="utf-8" >
		<title>标题</title>
		<meta name="keywords" content="关键字" />
		<meta name="description" content="内容描述" />
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
        <div id="app">
            <my-cpn></my-cpn>
        </div>
        <!-- 全局组件 -->
        <div id="app-2">
            <my-cpn ></my-cpn>
        </div>
        <!-- 局部组件 -->
        <div id="app-3">
            <my-cpn2></my-cpn2>  
        </div>
	</body>
</html>
<script>
    //1.创建组件构造器
    const myComponent = Vue.extend({
        template:
        `
        <div>
            <h2>组件标题</h2>
            <p>我是组件中的一个段落内容</p>
        </div>
        `
    })
    const myComponent2 = Vue.extend({
        template:
        `
        <div>
            <h2>组件标题2</h2>
            <p>我是组件中的一个段落内容</p>
        </div>
        `
    })

    //2.注册组件，并定义组件标签的名称
    Vue.component('my-cpn',myComponent)
    Vue.component('my-cpn2',myComponent2)
    //3.渲染组件
    let app = new Vue({
        el:'#app'
    })
    let app2 = new Vue({
        el:'#app-2'
    })
    let app3 = new Vue({
        el:'#app-3',
        components:{
            'my-cpn':myComponent
        }
    })
</script>