<body>
<div id="app">
<cpn1></cpn1>
</div>
<template id="cpn1">
<div>
<!-- <h2> {{ title }} </h2> 组件内部不能访问 Vue实例对象里面的数据的
如果要动态绑定数据 要在注册组件内部调用里面的 data数据
-->
<p> {{ title }} </p>
<h3>如果可以忘记不好的过去</h3>
<h2>那该多好 我希望你一直快乐 没有烦恼</h2>
</div>
</template>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
Vue.component('cpn1', {
template: "#cpn1",
data() { // 组件里面的data是一个函数 书写格式是返回一个对象 里面保存需要的数据
return {
title: '两只老虎'
}
}
})
const app = new Vue({
el: '#app',
data: {
titel: "门前大桥下"
}
})
</script>
</body>
