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>


目录
相关文章
|
9月前
|
存储 算法 编译器
【C++入门到精通】C++入门 —— 模版(template)
模板是C++中的一种编程工具,它允许使用通用代码来定义函数和类,以适应多种类型或值的需求,从而实现代码的复用和泛化。模板实质上是一种参数化的类型或值的规范。
110 0
|
算法 编译器 C++
C++模版基础
C++模版基础
64 0
|
6月前
|
前端开发 JavaScript 安全
[译] 定制 create-react-app:如何制作自己的模版
[译] 定制 create-react-app:如何制作自己的模版
|
9月前
|
C++
c++模版
c++模版
|
编译器 C++
【C++】模版(一)
泛型编程、模版(一): 1.泛型编程:
47 0
|
前端开发 UED
模板(Template):构建精美界面的设计之道
在现代应用程序开发中,模板是一个至关重要的概念,它用于定义应用程序的用户界面(UI)和布局。模板允许开发人员创建精美的界面,使用户界面设计变得更加可维护和可扩展。在本博客中,我们将深入研究模板的定义、类型和最佳实践,以及如何运用模板来打造出吸引人的应用程序界面。
103 0
|
JavaScript 小程序
微信小程序自定义模板template
使用ES6...展开运算符,...person可以自动展开对象属性,这里的person对象在js里自己定义,:
242 0
|
Dubbo Java 应用服务中间件
DocView 现在支持自定义 Markdown 模版了!
有小伙伴反馈说希望可以自定义 Markdown 模版,这样就可以导出自己想要的样式了!这个功能可以有,毕竟大家不可能都生成一模一样的文档。现在来一起看看如何实现自定义模版吧!
122 0
|
C++
C++模版从精通到精神分裂
这是一个教科书般经典的例子。介绍C++的继承和多态。 这里唯一需要重点强调的是:对函数LetAnimalTalk和vector va 来说,我们可以想象他们是客户。[face=黑体]通过继承把变化封装到基类的后面,这样使用基类接口的客户就不需要改动![/face]对客户来说,无论基类后面怎么变化,你都影响不到我。
6768 0
|
测试技术
故障记录模版
简单故障记录模版
1292 0

热门文章

最新文章