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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset=utf-8>
  5.         <title>Test page</title>
  6.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <my-header></my-header>
  11.         </div>
  12.  
  13.         <script>
  14.             new Vue({
  15.                 el : "#app",
  16.                 components : {
  17.                     'my-header' : {
  18.                         template : '<div>\
  19.                                         <h1>hello</h1>\
  20.                                         <h2>world</h2>\
  21.                                     </div>'
  22.                                     }
  23.                 }
  24.             })
  25.         </script>
  26.     </body>
  27. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset=utf-8>
  5.         <title>Test page</title>
  6.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <my-header></my-header>
  11.         </div>
  12.  
  13.         <script>
  14.             new Vue({
  15.                 el : "#app",
  16.                 components : {
  17.                     'my-header' : {
  18.                         template : `<div>
  19.                                         <h1>hello</h1>
  20.                                         <h2>world</h2>
  21.                                     </div>`
  22.                                     }
  23.                 }
  24.             })
  25.         </script>
  26.     </body>
  27. </html>

方法三：使用template模板标签

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset=utf-8>
  5.         <title>Test page</title>
  6.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <my-header></my-header>
  11.         </div>
  12.  
  13.         <template id="temp">
  14.             <div>
  15.                 <h1>hello</h1>
  16.                 <h2>world</h2>
  17.             </div>
  18.         </template>
  19.  
  20.         <script>
  21.             new Vue({
  22.                 el : "#app",
  23.                 components : {
  24.                     'my-header' : {template : "#temp"}
  25.                 }
  26.             })
  27.         </script>
  28.     </body>
  29. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset=utf-8>
  5.         <title>Test page</title>
  6.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <my-header></my-header>
  11.         </div>
  12.  
  13.         <script type="text/x-template" id="temp">
  14.             <div>
  15.                 <h1>hello</h1>
  16.                 <h2>world</h2>
  17.             </div>
  18.         </script>
  19.  
  20.         <script>
  21.             new Vue({
  22.                 el : "#app",
  23.                 components : {
  24.                     'my-header' : {template : "#temp"}
  25.                 }
  26.             })
  27.         </script>
  28.     </body>
  29. </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. SQL添加列、非空、默认值

    use MarcoBarcode go alter table [dbo].[WorkOrderRepairSheet] ADD needRepair int go ALTER TABLE [dbo] ...

  2. Linux镜像源 国内列表

    (一).企业站 1.搜狐:http://mirrors.sohu.com/ 2.网易:http://mirrors.163.com/ 3.阿里云:http://mirrors.aliyun.com/ ...

  3. Day 28：SAX解析原理

    SAX解析 回顾DOM解析 DOM解析原理:一次性把xml文档加载进内存,然后在内存中构建Document树. 缺点: 不适合读取大容量的xml文件,容易导致内存溢出. SAX解析原理: 加载一点,读 ...

  4. FC 与 FB 与 OB 的区别，时间标记冲突与一致性检查 有详细的步骤

    关键字1 组织块的程序是由用户自己编写. 关键字2 时间标记冲突与一致性检查 有详细的步骤. 关键字3 FC 与 FB 与 OB 的区别?   (一)功能 功能块 区别 ? FB 和FC均为 用户编写 ...

  5. netty权威指南学习笔记二——netty入门应用

    经过了前面的NIO基础知识准备,我们已经对NIO有了较大了解,现在就进入netty的实际应用中来看看吧.重点体会整个过程. 按照权威指南写程序的过程中,发现一些问题:当我们在定义handler继承Ch ...

  6. linux下安装jdk&&Tomcat环境

    linux系统 Centos6 下部署应用服务 jdk-1.7 环境安装:(切换到root用户下操作)1. 在 /usr/local 目录下创建jdk7文件 mkdir /usr/local/jdk7 ...

  7. 基于springboot实现Java阿里短信发送

    1.接口TestController import java.util.Random; import com.aliyuncs.DefaultAcsClient; import com.aliyunc ...

  8. js generator的两个实际应用

    generator作为一个用来操作异步的状态机, 遇到yield停止, 通过调用next()来继续操作.  今天就用generator来举例两个实际开发中的应用. 1,抽奖 function draw ...

  9. 3.2Adding custom methods to mappers（在映射器中添加自定义方法）

    3.2Adding custom methods to mappers(在映射器中添加自定义方法) 有些情况下,我们需要实现一些MapStruct无法直接自动生成的复杂类型间映射.一种方式是复用其他已 ...

  10. 第二阶段scrum-9

    1.整个团队的任务量: 2.任务看板: 会议照片: 产品状态: 消息收发在制作