字符串模板、模板字符串、Vue中使用template等等。

最新推荐文章于 2025-06-13 06:15:00 发布

原创最新推荐文章于 2025-06-13 06:15:00 发布 · 8.9k 阅读

7 ·

CC 4.0 BY-SA版权

JS 同时被 3 个专栏收录

33 篇文章

订阅专栏

JavaScript

22 篇文章

订阅专栏

Vue

15 篇文章

订阅专栏

本文介绍了ES6中的模板字符串特性，包括其基本语法、多行字符串处理及变量嵌入方式。同时，深入探讨了Vue中的字符串模板用法，包括三种不同的模板写法及其应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>