Vue元件模板
阿新 • • 發佈：2018-12-13
本文章主要介紹元件模板的書寫方式
以下為實現頁面效果
以下為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>