vue的挂载方式

最新推荐文章于 2024-08-25 10:25:08 发布

花無缺一塊

最新推荐文章于 2024-08-25 10:25:08 发布

阅读量1.3k

点赞数 5

本文链接：https://blog.csdn.net/qq_41943082/article/details/119816207

版权

本文介绍了Vue.js中通过`el`属性和`$mount()`方法进行组件挂载的区别和应用场景。`el`常用于直接在HTML中指定挂载点，而`$mount()`允许延时挂载，特别是在需要先进行其他操作或判断时。示例展示了如何使用`el`和`$mount()`挂载Vue实例，强调两者在实际使用中并无本质不同。

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

Vue两种挂载方式el与$mount

Vue的 $mount() 为手动挂载 , 在项目中可用于延时挂载(例如在挂载之前要进行一些其它操作 , 判断等) , 之后要手动挂载上 . new Vue时 , el和 $mount 并没有本质上的不同

1. el

<div id="root">
	<p id="mount-point">{{ msg }}</p>
</div>

<script>
	new Vue({
		el: "#root",
		data(){
			msg: "Hello Vue!"
		}
	})
</script>

2. $mount

<div id="root">
	<p id="mount-point"></p>
</div>

<script>
	var Profile = Vue.extned({
		template:`
			<div>
				<p>{{ msg }}</p>
			</div>
		`,
		data(){
			return{
				msg: "Hello Vue!"
			}
		}
	})
	new Profile().$mount("mount-point") 或 new Profile({ el: '#mount-point' })
</script>