<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<hr>
<lol2></lol2>
<zu></zu>
</div>
<script>
// 1.创建第一个组件构造器(子组件)
// Vue.component('zu', {
// template: '<h1>houdunren.com</h1>'
// })
// Vue.component('zu', {
// template: `
// <div>
// <h2>我是标题1</h2>
// <p>我是内容, 哈哈哈哈</p>
// </div>
// `
// })
const zu = Vue.extend({
template: `
<div>
<h2>我是子组件</h2>
<p>我是子组件, 哈哈哈哈</p>
<h2>当前计数: {{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
`,
data(){
return{
counter:0
}
},
methods:{
increment(){
this.counter++
},
decrement()
{
this.counter--
}
}
})
Vue.component('zu', zu)
</script>
<!-- 1.script标签, 注意:类型必须是text/x-template-->
<script type="text/x-template" id="lol">
<div>
<h2>我是{{title}}</h2>
<p>我是组件分离1</p>
<llo></llo>
</div>
</script>
<!--2.template标签-->
<template id="cpn">
<div>
<h2>{{title}}</h2>
<p>我是第二种组件分离方式</p>
<lo></lo>
</div>
</template>
<script>
// 1.注册一个全局组件
Vue.component('cpn', {
template: '#cpn',
data() {
return {
title: '我是全局组件'
}
},
components: {
lo: zu
}
})
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
title: '我什么'
},
//注册一个局部组件
components: {
'lol2': {
template: "#lol",
data() {
return {
title: '我是局部组件'
}
},
components: {
llo: zu
}
}
}
})
</script>
</body>
</html>
