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>


目录
相关文章
|
8月前
|
存储 算法 编译器
【C++入门到精通】C++入门 —— 模版(template)
模板是C++中的一种编程工具,它允许使用通用代码来定义函数和类,以适应多种类型或值的需求,从而实现代码的复用和泛化。模板实质上是一种参数化的类型或值的规范。
99 0
|
8月前
树链剖分模板
树链剖分模板
54 0
|
2月前
|
编译器 C++
【c++】模板详解(1)
本文介绍了C++中的模板概念,包括函数模板和类模板,强调了模板作为泛型编程基础的重要性。函数模板允许创建类型无关的函数,类模板则能根据不同的类型生成不同的类。文章通过具体示例详细解释了模板的定义、实例化及匹配原则,帮助读者理解模板机制,为学习STL打下基础。
33 0
|
4月前
|
JavaScript 前端开发 编译器
模板编译template的背后,究竟发生了什么事?带你了解template的纸短情长
该文章深入探讨了Vue.js中从模板(template)到渲染(render)过程中的编译机制,解释了模板是如何被转化为可执行的渲染函数,并最终呈现为用户界面的全过程。
|
7月前
|
Python
模板
【6月更文挑战第29天】模板。
31 2
|
8月前
|
C++
C++模板 - 模板的使用
C++模板 - 模板的使用
38 0
|
8月前
|
自然语言处理 编译器 C语言
一文搞懂模板(template)
背景引入: 想象一下,我们要实现一个整数相加,浮点数相加的函数,如果按C语言的思路,我们需要写两个函数名不同的函数,来完成相加;如果C++语言,则可以通过函数重载的特性,写两个函数名相同,但参数列表不同的函数,来完成任务。
143 0
|
8月前
|
Java 编译器 程序员
C嘎嘎模板
C嘎嘎模板
71 0
|
编译器 C++
【C++】初识模板
【C++】初识模板
38 0
|
JavaScript 小程序
微信小程序自定义模板template
使用ES6...展开运算符,...person可以自动展开对象属性,这里的person对象在js里自己定义,:
223 0

相关实验场景

更多