如果你没有使用webpack、gulp等工具，假如组件的template的内容很冗长，如果都在JavaScript里面拼接脚本，效率是非常低的，因为不能像写HTML那样舒服。Vue提供了另外一种定义模板的方法：
在<script>标签里使用text/x-template类型，并且指定一个id，将这个id赋值给template。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Vue之X-Templates的使用</title>
</head>
<body>
<div id="app">
<my-component></mycomponent>
<script type="text/x-template" id="my-component">
<div>这是组件的内容</div>
</script>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-component',{
template:'#my-component'
});
var app = new Vue({
el:'#app'
})
</script>
</body>
</html>
在<script>标签里，你就可以写HTML代码了，不用考虑换行等问题。