ES6之模板引擎&&字符串模板x-template

字符串模板的用途及理解

在js里面，经常需要使用js往页面中插入html内容
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接，如果html很短还好说，但是遇到描述里面的这么大段，直接用字符串存储会很困难，因为不光要处理单引号，还需要很多「+」号把字符串一个个连接起来，十分的不方便。
比如有的时候需要使用弹出框的时候手动使用字符串拼接起来各种数据再渲染出来… …

因为上面的这种写法太恶心人了，但是在前端渲染数据又是一个刚需，这个时候怎么办，想一个办法将JS和HTML分离开来。
举个简单例子，页面加载完毕后HTML初始模板如下所示

要求：点击按钮时，将新元素添加至id为showArea元素下。显示到页面里，点击按钮后HTML模板如下

解决方案：

<script type=”text/x-template”>就是在一定程度上解决这种问题的，放在type=”text/x-template”中的内容将不会被浏览器解析，不被执行，不被显示，它只是默默地隐藏到页面里，也不会进行编译显示。
但是可以在另一个script里面通过获取插入到页面中。这样就把大段的HTML操作从js里面分离开了

作用：
从逻辑上而言，放到text/x-template中的内容不是给浏览器解析的，是用来在页面加载完成后，主要是二次捕获渲染用的。这个渲染的过程通常是使用各种模板引擎来完成的。

代码如下：

<!-- HTML代码 -->
		<button id="btn">按钮</button>
		<div id="heZi"></div>
<!-- js代码 -->
	<script type="text/template" id="neiRong">
		<div>
			<div>头部</div>
			<div>主体</div>
			<div>内容底部</div>
		</div>
	</script>
	<script type="text/javascript">
			$("#btn").click(function(){
				  $("#heZi").html($("#neiRong").html());				
			})
	</script>

vue之x-template

除了上述写法外，也可以使用JS的字符串模板即type=“text/x-template”，写法如下所示

<!-- HTML代码 -->
		<div id="demo">
			<my-aaa></my-aaa>
		</div>
<!-- vue代码 -->
	<script type="text/template" id="neiRong">
		<div style="width: 400px;height: 300px;border: 1px solid  greenyellow">
			<p>这是文本标题</p>
			<p>这是文本内容</p>
			<p>这是作者信息</p>
		</div>
	</script>
	<script type="text/javascript">
		Vue.component('my-aaa',{
			template:"#neiRong"
		})	
		var demo=new Vue({
			el:"#demo"
		})
	</script>

解析

< script>”中type是x-template是一种比较有用的功能。如果在声明一个组件时，在template中定义模板，如果要换行的话，要加上一个“\”，如果是比较简单的模板还好，如果比较多的话，就会感觉眼花缭乱的，因此我们有一个看起来舒服的方式：x-template。
只要写出< script type="text/x-template" id="x-template" >< /script> 在其中间就可以愉快的写HTML代码了。不用考虑换行等问题。这里注意，要加一个id名称，并将其赋给template，然后在声明的组件中加一个

	Vue.component('my-aaa',{
			template:"#neiRong"
		})	

vue字符串模板single单个根元素限制：

限制：
<script type="text/template" id="neiRong">中根元素必须只能有一个
原因：
因为template定义的模板，一定要用一个根元素包裹起来，每个组件必须只有一个根元素，比如上例中，如果去掉< div>标签，那么就相当于有多个根元素。