<body>
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
</body>
<!-- 方法 1 -->
<!-- 组件和模板分离写法 写在script标签里面 类型是 x-template -->
<script type="x-template" id="cpn1">
<div>
<h3>圣诞节</h3>
<p>要吃苹果呀 好好对待自己 好好照顾自己</p>
</div>
</script>
<!-- 方法 2 -->
<template id="cpn2">
<div>
<h2>门前大桥下</h2>
<p>游过一群鸭 快来快来数一数 2 4 6 7 8</p>
</div>
</template>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
Vue.component('cpn1', {
template: '#cpn1'
});
// Vue.component('cpn2', { // 全局写法
// template: "#cpn2"
// })
const app = new Vue({
el: '#app',
data: {
},
components: {
cpn2: {
template: '#cpn2' // 局部写法
}
}
})
</script>