Vue组件模板

最新推荐文章于 2024-08-14 09:11:14 发布

禁花

最新推荐文章于 2024-08-14 09:11:14 发布

阅读量699

点赞数

本文链接：https://blog.csdn.net/chenzhuozhu/article/details/81701740

版权

本文章主要介绍组件模板的书写方式

以下为实现页面效果

以下为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>