在定义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代码了。