1:模板字符串
传统的JS语言,输出模板是这样写的:
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
比较繁琐。ES6引入了模板字符串:
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
模板字符串是增强的字符串,使用反引号标识。可以当作普通字符串使用,也可以定义多行字符串,也可以嵌入变量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?
如果要在字符串中使用反引号的话, 需要转义。
如果用模板字符串表示多行字符串,所有的空格和缩进会保留在输出之中。
2:Vue的字符串模板
指的是在Vue实例中的template属性所对应的字符串。如:
new Vue({
el:'#replace',
template:'<p>字符串模板</p>'
})
至于:template:"#xxx"这种引入外部模板的是不是字符串模板,暂时不清楚。
3:vue2.0模板的三种写法
第一种:利用模板字符串。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script type="text/javascript">
var app=new
Vue({
el:"#app",
data:{
},
template:`
<h1 style="color:red">第一种写法</h1>
`
})
</script>
</html>
第二种:是项目中最常见的写法,利用template标签来实现内容的填充,最终通过id或者其他的选择器挂载到template上面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<template id="template">
<h1>我是模板的第二种写法</h1>
</template>
</body>
<script type="text/javascript">
var app=new
Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>
第三种:这种写法是改变了script中的type.变为type="x-template",并且给它id,最终挂载到template中就可以了,使用于内容比较多或有公共的模板,可以使用,引入就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script type="x-template"
id="template">
<h2>我是模板的第三种写法</h2>
</script>
<script type="text/javascript">
var app=new
Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>