vue的X-Templates

2020-12-09 13:29:59 阅读：181 来源： 互联网

标签：Templates vue script app component Vue template id

当你写的组件模板template内容很冗长和复杂时，如果都在JavaScript里拼接字符串，效率是很低的，因为不像直接写html简单。
为了解决这个问题，Vue提供了另一种定义模板的方式，在< script >标签里使用text/x-template类型，并且指定一个id,将这个id赋给template。代码如下

<div id="app">
	<my-component></my-component>
	<script type="text/x-template" id="my-component">
		<div>这是组件的内容</div>
	</script>
</div>
<script>
	Vue.component('my-component',{
		template:'#my-component'
	}),
	vat app = new Vue({
		el:"#app"
	})
</script>

运行效果如下图：
在这里插入图片描述
在< script >标签里，就可以愉快地写html代码而不用考虑换行等问题了

标签：Templates,vue,script,app,component,Vue,template,id
来源： https://blog.csdn.net/webblock/article/details/110920616

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue的X-Templates