5-vue-template模板制作

最新推荐文章于 2025-05-23 06:00:00 发布

mao_mao37

最新推荐文章于 2025-05-23 06:00:00 发布

阅读量309

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE.js

本文链接：https://blog.youkuaiyun.com/mao_mao37/article/details/88994753

VUE.js 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了Vue.js中创建模板的三种不同方法：直接在构造器中定义、使用template标签以及通过script标签定义。每种方法都有其适用场景，适用于不同大小和复杂度的组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有四种方法制作模板，下边先将前三种制作模板。

注意：模板组件里面第一行只能有一个标签，并且结束标签必须在最后一行，否则结束标签之后的html是无法显示的；

一：直接在构造器中制作模板，构造器模板

    <script>
        new Vue({
            el:'#ele',
            data:{
                message:"",
            },
            template:`
            <h3 style='color:red'>this is the first template</h3>
            `
        })
    </script>

第二种写法，template标签模板，直接在html中进行书写：（相较于第一种模板，第一种模板比较适合比较小的组件）

   <div id='ele'>  
        <h2>template的第二种写法</h2><!--不会显示-->
        <p v-text="message"></p>
    </div>
    <template id='temp2'>
            <h3 style='color:red'>this is the second template</h3>
    </template>

    <script>
        new Vue({
            el:'#ele',
            data:{
                message:"",
            },
            template:"#temp2"
        })
    </script>

第三种写法：script标签template

    <div id='ele'>  
        <h2>template的第三种写法</h2><!--不会显示-->
        <p v-text="message"></p>
    </div>
    <script type="x-template" id='temp3'>
            <h3 style='color:red'>this is the third script template</h3>
    </script>

    <script>
        new Vue({
            el:'#ele',
            data:{
                message:"",
            },
            template:"#temp3"
        })
    </script>