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文件, 输入自定义 ...
随机推荐
- 宏碁发布两款全A平台笔记本：良心价
导读 8月3日消息,在全球数码互动娱乐盛会ChinaJoy上,宏碁推出全新两款全A平台笔记本——暗影骑士4 锐龙版酷冷游戏本和蜂鸟Swift3锐龙版金属轻薄本. 此次发布的宏碁暗影骑士4 锐龙版笔记本 ...
- element设置headers添加token
<template> <div> <el-upload action="http://localhost:3000/picture&qu ...
- android中的简单animation(三)accelerate(加速),decelerate（减速）,anticipate，overshoot,bounce
animation_3.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...
- 解决上传代码到GitHub报错Push rejected: Push to origin/master was rejected
最近在 push 代码到 github 时,IDEA报错 Push rejected: Push to origin/master was rejected 在网友找了一圈,发现都不是想要的答案 于是 ...
- 数据库建模工具pd的使用
- DNS and Bind
DNS : 工作在应用层 DNS 作用 : 完成域名到IP的解析过程 FQDN --> IP 例如 : www.ifeng.com --> 123.103.122.24 D ...
- Vuex源码分析(转)
当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-stop
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- POJO，JavaBean，entity的理解
POJO本质是就是JavaBean JavaBean JavaBean实际上是指一种特殊的Java类,它通常用来实现一些比较常用的简单功能,并可以很容易的被重用或者是插入其他应用程序中去.所有遵循“一 ...
- python学习笔记2018-9-18
1.可选参数传递 此处m=1并不是写定m必为1,而是m为可选参数,当不对其进行赋值时,其默认值为1. 2.函数的返回值 return可以传递0个返回值,也可以传递任意多个返回值 3.局部变量与全局变量 ...