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

青旅半醒 2022-05-10 08:20 292阅读 0赞

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>