本文章主要介紹組件模板的書寫方式
以下爲實現頁面效果
以下爲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>