Template 制作模版

最新推荐文章于 2024-12-10 23:03:40 发布

原创最新推荐文章于 2024-12-10 23:03:40 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

前端开发同时被 2 个专栏收录

36 篇文章

订阅专栏

VUE

20 篇文章

订阅专栏

本文介绍了Vue.js中三种不同的模板使用方式：直接写在构造器的template选项里、使用<template>标签定义模板和<script>标签定义模板。每种方式都附带了代码示例，方便读者理解。

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

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

javascript代码：

1
2
3
4
5
6
7
8
9
 var app=new Vue({
     el:'#app',
     data:{
         message:'hello Vue!'
      },
     template:`
        <h1 style="color:red">我是选项模板</h1>
     `
})

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    <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>标签里的模板

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    <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>