Template制作模版

简介: Template制作模版

1.直接写在选项里的模版



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


javascript代码:

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


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


2.写在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>


3.写在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>


目录
相关文章
|
Prometheus 监控 Cloud Native
夜莺自定义告警模板
夜莺自定义告警模板
|
Web App开发 索引
正则表达式匹配域名、网址、url
DNS规定,域名中的标号都由英文字母和数字组成,每一个标号不超过63个字符,也不区分大小写字母。标号中除连字符(-)外不能使用其他的标点符号。级别最低的域名写在最左边,而级别最高的域名写在最右边。由多个标号组成的完整域名总共不超过255个字符。
30920 0
|
存储 C语言 C++
【c语言】文件操作
【c语言】文件操作
86 0
|
缓存 NoSQL Redis
小米一面:电商系统开发遇到了哪些问题?
在昨晚的直播中,讨论了电商系统开发中的常见问题,包括高并发、库存管理、弱网支付、黄牛刷单和重复订单。解决高并发可采用缓存、限流和熔断策略,如使用Redis、Sentinel等。库存问题通过限流、分布式锁和Redis Lua脚本防止超卖,少卖则依赖及时对账和人工补偿。弱网支付需确保支付状态同步,可借助回调和定时任务。防止刷单可使用图形验证码和IP黑名单。重复订单通过幂等性和数据库唯一约束处理。欢迎在评论区分享更多经验和相关代码实现。
172 0
|
存储 应用服务中间件 调度
Dockerfile(12) - HEALTHCHECK 指令详解
Dockerfile(12) - HEALTHCHECK 指令详解
508 0
Dockerfile(12) - HEALTHCHECK 指令详解
|
SQL Java 数据库连接
基于MyBatis注解扩展,实现无需配置就可拥有增删改
一、使用篇       如果项目本身基于SpringMVC+Mybatis构建,不需添加任何配置Mapper类只需继承 BaseMapper,即拥有增删改方法操作,无需任何配置文件     package com.
|
机器学习/深度学习
|
2天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1072 0
|
11天前
|
人工智能 运维 安全
|
9天前
|
人工智能 测试技术 API
智能体(AI Agent)搭建全攻略:从概念到实践的终极指南
在人工智能浪潮中,智能体(AI Agent)正成为变革性技术。它们具备自主决策、环境感知、任务执行等能力,广泛应用于日常任务与商业流程。本文详解智能体概念、架构及七步搭建指南,助你打造专属智能体,迎接智能自动化新时代。