本文章主要介绍组件模板的书写方式
以下为实现页面效果
以下为html代码和js代码的集合
<body>
<div id="app">
<!--使用外部模板-->
<v-com></v-com>
<!--使用js内部模板-->
<v-header></v-header>
<v-content></v-content>
<v-footer></v-footer>
<v-rua></v-rua>
</div>
<!--外部编写模板-->
<template id="vmm" v-if="false">
<div>
<h1>我是外面的模板</h1>
<p>我是外面的内容</p>
</div>
</template>
</body>
<!--加载vue-->
<script src="js/vue.js"></script>
<script>
//1.构造结构
let header=Vue.extend({
template:"<h1>我是一个小组件</h1>"
});
let content=Vue.extend({
template:"<h1>我是一个小组件内容</h1>"
});
let footer=Vue.extend({
template:"<h1>我是一个小组件尾巴</h1>"
});
//2.注册为组件
Vue.component("vHeader",header);
Vue.component("vContent",content);
Vue.component("vFooter",footer);
//3.构造和注册同时使用
Vue.component("vRua",{
template:"<p>我是语法糖构造出来的</p>"
});
//4.使用html构造结构编写
Vue.component("vCom",{
template:"#vmm"
});
new Vue({
el:"#app",
})
</script>