Vue组件template模板字符串几种写法
在定义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模板字符串几种写法的更多相关文章
- Angular 向组件传递模板的几种方法
最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时 ...
- vue 组件通讯方式到底有多少种 ?
前置 做大小 vue 项目都离不开组件通讯, 自己也收藏了很多关于 vue 组件通讯的文章. 今天自己全部试了试, 并查了文档, 在这里总结一下并全部列出, 都是简单的例子. 如有错误欢迎指正. 温馨 ...
- Vue el与data的两种写法 && Object.defineProperty方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- vue模板的几种写法及变化
第一种: 2+版本支持,1+版本支持 <script> <template id="aaa"> <h1>我是组件2</h1> < ...
- Vue组件之间通信的三种方式
最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...
- vue中toggle切换的3种写法
前言:查看下面代码,在任意编辑器中直接复制粘贴运行即可 1:非动态组件(全局注册2个组件,借用v-if指令和三元表达式) <!DOCTYPE html> <html> < ...
- vue组件之间通信的8种方式
对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...
- vue组件属性中字符串如何拼接变量？
不得不说,对于水平只有jquery的vue初学者来说,vue的图片加载实现确实挺坑的,在文档中也没有看到说明.经过百度之后终于知道了什么情况. 首先: 这样是没问题的: <img src=&qu ...
- 在vscode中，自定义代码片段，例vue组件的模板
1---- 2---- 输入vue, 选 vue.json 3---- 在vue.json中编辑, 有说明 a. tab符,要用空格, 也可以转义 4---- 新建vue文件, 输入自定义 ...
随机推荐
- P1061 判断题
P1061 判断题 转跳点:
- Windows环境下的32位汇编语言程序设计
一个逆向的告诉我可以尝试学一下8086处理器,再回头看一看自己学过的会有提高学呗,8086处理器怎么学....然后就学了8086的汇编, 好友就分享了琢石成器——Windows环境下的32汇编语言设计 ...
- jackson处理json
原文连接 工具下载: jackson-core-2.2.3.jar 核心jar包,下载地址 jackson-annotations-2.2.3.jar 该包提供Json注解支持,下载地址 jackso ...
- 记一次 springboot 参数解析 bug调试 HandlerMethodArgumentResolver
情况描述 前端输入框输入中文的横线 -- ,到后台接收时变成了 &madsh;$mdash 正常应该显示成这样: bug调试思路记录 最开始完全没有向调试源码方面想,试了不少方法,都没解决,没 ...
- J - Worker
Avin meets a rich customer today. He will earn 1 million dollars if he can solve a hard problem. The ...
- 02 DML(DataManipulationLanguage)
1.插入记录 基本语法 : INSERT INTO tbl_name (col_name ,col_name1,..,col_nameN) VALUES (val1,val2, ...
- Python基础week1
本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...
- UVA - 1600 Patrol Robot （巡逻机器人）（bfs）
题意:从(1,1)走到(m,n),最多能连续穿越k个障碍,求最短路. 分析:obstacle队列记录当前点所穿越的障碍数,如果小于k可继续穿越障碍,否则不能,bfs即可. #pragma commen ...
- Metasploitable学习（一）
划红线的是执行语句,对已知的服务器的IP地址进行扫描.嗅探
- 微服务中springboot启动问题
log4j:WARN No appenders could be found for logger (org.springframework.web.context.support.StandardS ...