在定义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. 获取QQ群中的所有群友QQ

    package com.jm.mail.tools; import java.io.BufferedReader; import java.io.IOException; import java.io ...

  2. 在CentOS 7环境下安装 Spark

    1.下载Spark安装包:http://mirror.bit.edu.cn/apache/spark/ 2.解压Spark的安装包并更改名称: (1)tar -zxvf spark-2.4.3-bin ...

  3. Python测试进阶——(4)Python程序监控、存储、分析并可视化CPU和内存利用率

    monitor190617.py 监控cpu和内存利用率信息,组织成json格式,并写入到 record.txt 文件中: import psutil import time import json ...

  4. HiBench成长笔记——(1) HiBench概述

    测试分类 HiBench共计19个测试方向,可大致分为6个测试类别:分别是micro,ml(机器学习),sql,graph,websearch和streaming. 2.1 micro Benchma ...

  5. markdown超链接怎么写?

    效果:我的微博 #上面的效果就是下面这种写法: [ 我的微博 ]( http://weibo.com/5833683560/profile?topnav=1&wvr=6&is_all= ...

  6. 吴裕雄--天生自然java开发常用类库学习笔记:多线程基础编程

    class MyThread implements Runnable{ // 实现Runnable接口,作为线程的实现类 private String name ; // 表示线程的名称 public ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-plus

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. J - Worker

    Avin meets a rich customer today. He will earn 1 million dollars if he can solve a hard problem. The ...

  9. Card Stacking 队列模拟

    题目链接:https://ac.nowcoder.com/acm/contest/993/ABessie is playing a card game with her N-1 (2 <= N ...

  10. java.lang.NumberFormatException: For input string: "F"

    在通过myBatis执行sql时,报错: java.lang.NumberFormatException: For input string: "F" xml中sql内容为: &l ...