vue的X-Templates

最新推荐文章于 2025-09-08 13:00:00 发布

原创最新推荐文章于 2025-09-08 13:00:00 发布 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue基础专栏收录该内容

2 篇文章

订阅专栏

当组件模板内容冗长复杂时，在JavaScript里拼接字符串效率低。Vue提供在< script >标签里使用text/x-template类型并指定id，将id赋给template的方式定义模板，可在< script >标签里愉快写html代码，无需考虑换行等问题。

当你写的组件模板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代码而不用考虑换行等问题了