vue中Template 制作模版

本文介绍了Vue.js中三种不同的模板写法:直接写在构造器的template选项内、使用<template>标签定义模板、以及通过<script>标签以x-template类型声明模板。这些方法有助于开发者灵活地组织和维护Vue应用。

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

一、直接写在选项里的模板

直接在构造器里的template选项后边编写。这种写法比较直观,但是如果模板html代码太多,不建议这么写。

javascript代码:

var app=new Vue({
     el:'#app',
     data:{
         message:'hello Vue!'
      },
     template:`
        <h1 style="color:red">我是选项模板</h1>
     `
})

这里需要注意的是模板的标识不是单引号和双引号,而是,就是Tab上面的键。

二、写在<template>标签里的模板

这种写法更像是在写HTML代码,就算不会写Vue的人,也可以制作页面。

   <template id="demo2">
             <h2 style="color:red">我是template标签模板</h2>
    </template>
 
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            template:'#demo2'
        })
    </script>

三、写在<script>标签里的模板

这种写模板的方法,可以让模板文件从外部引入。

   <script type="x-template" id="demo3">
        <h2 style="color:red">我是script标签模板</h2>
    </script>
 
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            template:'#demo3'
        })
    </script>

这节课我们学习了Template的三种写法,以后学习到vue-cli的时候还会学到一种xxx.vue的写法。

来源:http://jspang.com/2017/03/14/vue2_02/

转载于:https://www.cnblogs.com/sxgxiaoge/p/9187081.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值