Vue学习之x-template

最新推荐文章于 2024-04-10 08:40:27 发布

菜鸟猪猪侠yy

最新推荐文章于 2024-04-10 08:40:27 发布

阅读量721

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41743601/article/details/119806542

版权

本文介绍了Vue学习中关于x-template的使用，包括如何通过x-template解决多行template字符串的书写问题，提高代码可读性。

摘要由CSDN通过智能技术生成

Vue学习之x-template

文章目录

Vue学习之x-template
- 1.书写多行语句的template字符串：
- 2.x-template的使用

如果没有x-template：就会像下面这样多行书写，且需要‘\’连接符，会阅读困难
template:'<div>hello world\
				<p>p标签</p>\
				</div>'	

1.书写多行语句的template字符串：

Vue.component('my-component', {
				多行字符串的连接：可以通过反斜杠‘\’来进行连接，每行都需要
				template:'<div>hello world\
				<p>p标签</p>\
				</div>'			
			});
			var vm = new Vue({
				el: '#app'
			})

2.x-template的使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<my-compo