关于Vue里的template标签的一个测试

zsyyugong

已于 2023-05-08 18:38:14 修改

阅读量92

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-05-08 18:17:07 首次发布

本文链接：https://blog.csdn.net/zsyyugong/article/details/130564438

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、vue实例中的template属性

将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。
如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素）；
*<div id="root"> </div>被覆盖。

个人理解：

Vue里的el属性：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标；

但是如果vue实例中有template属性，它会替换掉vue实例绑定的元素（即el绑定的那个元素）。

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>我被template覆盖了</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：孙悟空</h2>	
					<h2>学生年龄："500"</h2>	
				</div>
			`,
		})

		//创建vm
		new Vue({
			template:'<student></student>',
			el:'#root',
			//注册组件（局部）
			components:{student}
		})
	</script>

可以看出：<div id="root"> </div>被覆盖：

2、template标签在vue实例绑定的元素内部

它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。
*<div id="root"> </div>没有被覆盖。

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>我没有被template覆盖</h1>
			<student></student>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：孙悟空</h2>	
					<h2>学生年龄："500"</h2>	
				</div>
			`,
		})

		//创建vm
		new Vue({
			el:'#root',
			//注册组件（局部）
			components:{student}
		})
	</script>

可以看出：<div id="root"> </div>没有被覆盖：