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>

View Code

方法二：使用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>

View Code

方法三：使用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>

View Code

方法四：使用<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>

View Code

方法五：使用单独的vue模块文件

在前端工程化后，可以将组件放在独立的vue文件中，这样就可以直接在模板中写html代码了。