在定义Vue组件时，组件的模板template选项需要的是一个字符串，当其内容较复杂需要换行时，需要简单处理一下，具体有五种方式：

方式一：使用 \ 转义换行符

<!DOCTYPE html>

<html>

    <head>

        <meta charset=utf-8>

        <title>Test page</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app">

            <my-header></my-header>

        </div>

        <script>

            new Vue({

                el : "#app",

                components : {

                    'my-header' : {

                        template : '<div>\

                                        <h1>hello</h1>\

                                        <h2>world</h2>\

                                    </div>'

                                    }

                }

            })

        </script>

    </body>

</html>

方法二：使用ES6的 ` 模板字符串

<!DOCTYPE html>

<html>

    <head>

        <meta charset=utf-8>

        <title>Test page</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app">

            <my-header></my-header>

        </div>

        <script>

            new Vue({

                el : "#app",

                components : {

                    'my-header' : {

                        template : `<div>

                                        <h1>hello</h1>

                                        <h2>world</h2>

                                    </div>`

                                    }

                }

            })

        </script>

    </body>

</html>

方法三：使用template模板标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset=utf-8>

        <title>Test page</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app">

            <my-header></my-header>

        </div>

        <template id="temp">

            <div>

                <h1>hello</h1>

                <h2>world</h2>

            </div>

        </template>

        <script>

            new Vue({

                el : "#app",

                components : {

                    'my-header' : {template : "#temp"}

                }

            })

        </script>

    </body>

</html>

方法四：使用<script type="text/x-template">

<!DOCTYPE html>

<html>

    <head>

        <meta charset=utf-8>

        <title>Test page</title>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>

    <body>

        <div id="app">

            <my-header></my-header>

        </div>

        <script type="text/x-template" id="temp">

            <div>

                <h1>hello</h1>

                <h2>world</h2>

            </div>

        </script>

        <script>

            new Vue({

                el : "#app",

                components : {

                    'my-header' : {template : "#temp"}

                }

            })

        </script>

    </body>

</html>

方法五：使用单独的vue模块文件

在前端工程化后，可以将组件放在独立的vue文件中，这样就可以直接在模板中写html代码了。

Vue组件template模板字符串几种写法的更多相关文章

  1. Angular 向组件传递模板的几种方法

    最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时 ...

  2. vue 组件通讯方式到底有多少种 ?

    前置 做大小 vue 项目都离不开组件通讯, 自己也收藏了很多关于 vue 组件通讯的文章. 今天自己全部试了试, 并查了文档, 在这里总结一下并全部列出, 都是简单的例子. 如有错误欢迎指正. 温馨 ...

  3. Vue el与data的两种写法 && Object.defineProperty方法

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  4. vue模板的几种写法及变化

    第一种: 2+版本支持,1+版本支持 <script> <template id="aaa"> <h1>我是组件2</h1> < ...

  5. Vue组件之间通信的三种方式

    最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...

  6. vue中toggle切换的3种写法

    前言:查看下面代码,在任意编辑器中直接复制粘贴运行即可 1:非动态组件(全局注册2个组件,借用v-if指令和三元表达式) <!DOCTYPE html> <html> < ...

  7. vue组件之间通信的8种方式

    对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...

  8. vue组件属性中字符串如何拼接变量？

    不得不说,对于水平只有jquery的vue初学者来说,vue的图片加载实现确实挺坑的,在文档中也没有看到说明.经过百度之后终于知道了什么情况. 首先: 这样是没问题的: <img src=&qu ...

  9. 在vscode中，自定义代码片段，例vue组件的模板

    1---- 2----  输入vue,  选 vue.json 3----  在vue.json中编辑, 有说明 a.  tab符,要用空格, 也可以转义 4----   新建vue文件, 输入自定义 ...

随机推荐

  1. 2018--Linux面试题

    1.企业场景面试题:buffer与Cache的区别. 2.企业场景面试题:redhat与CentOS的区别. 3.企业场景面试题:  描述RAID 0 1 5 10的特点. 4.企业场景面试题:32位 ...

  2. 部署 Helm【转】

    本节我们将安装和部署 Helm 客户端和 Tiller 服务器. Helm 客户端 通常,我们将 Helm 客户端安装在能够执行 kubectl 命令的节点上,只需要下面一条命令: curl http ...

  3. 微信小程序支付功能前端流程

    只是分享一下小程序支付功能的前端流程和代码, 仅供参考(使用的是uni app). handleCreate () { /** 第一步:前台将商品数据发送到后台,后台创建订单入库并返回订单id等信息 ...

  4. nodejs 编译时对项目进行配置

    1.启动项目设置配置信息 2.读取项目配置文件 3.根据配置的文件读取自定义属性 4.根据相关属性配置其他差异 5.其他

  5. oracle通用帮助类

    需要的dll( EntityFramework.6.0.0Oracle.ManagedDataAccess.12.1.2400System.Configuration.dllEmitMapper.1. ...

  6. 实验吧-web-Once More(php ereg()漏洞)！！！

    题目:啊拉?又是php审计.已经想吐了. hint:ereg()函数有漏洞哩:从小老师就说要用科学的方法来算数. 给我们提示:1)ereg()函数漏洞 2)科学计数法 viewsource: < ...

  7. Java容器--Queue

    ConcurrentLinkedQueue 参考 https://www.cnblogs.com/leesf456/p/5539142.html ConcurerntLinkedQueue一个基于链接 ...

  8. SpringBoot 系列教程之事务隔离级别知识点小结

    SpringBoot 系列教程之事务隔离级别知识点小结 上一篇博文介绍了声明式事务@Transactional的简单使用姿势,最文章的最后给出了这个注解的多个属性,本文将着重放在事务隔离级别的知识点上 ...

  9. Azure Container Registry-基于开源 Docker Registry 的专用 Docker 注册表服务

    本文语雀知识库:https://www.yuque.com/seanyu/azure/acr 概述 Azure 容器注册表(Azrue Container Registry,简称ACR)是 Azure ...

  10. Python 中 对logging 模块进行封装，记录bug日志、日志等级

    是程序产生的日志 程序员自定义设置的 收集器和渠道级别那个高就以那个级别输出 日志和报告的作用: 报告的重点在于执行结果(执行成功失败,多少用例覆盖),返回结果 日志的重点在执行过程当中,异常点,哪里 ...