《Vue3实战指南》01-04：Vue应用和根组件实例

AT阿宝哥

已于 2022-02-26 10:35:03 修改

阅读量665

点赞数

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

于 2022-02-24 10:35:06 首次发布

本博客所有内容版权归作者所有，侵权必究！

本文链接：https://blog.csdn.net/goldentec/article/details/123106243

版权

《Vue3》专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨Vue3的应用实例和根组件的创建，通过两个具体案例进行详细讲解，涵盖基础概念和实践操作，适合Vue.js初学者和进阶开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本案例主要讲解两个实例：

Vue应用实例
根组件实例

案例一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue应用和根组件实例</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>

		<div id="app">


		</div>

	</body>

	<script>
		console.log("Vue版本：" + Vue.version);

		//创建Vue应用实例
		const App = Vue.createApp({});

		console.log("App:" + App);


		//挂载根组件并返回其实例
		const vm = App.mount("#app");

		//UncaughtTypeError: Cannot convert object to primitive value
		//console.log("vm：" + vm)
		console.log("vm.$data：" + vm.$data);
	</script>

</html>

案例二：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue应用和根组件实例</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>

		<div id="app">

		</div>

	</body>

	<script>
	
		console.log("Vue版本：" + Vue.version);

		//定义Vue应用实例
		const App = {};

		console.log("App:" + App);
		
		//创建应用，挂载根组件并返回其实例
		const vm = Vue.createApp(App).mount( "#app") ;

		//UncaughtTypeError: Cannot convert object to primitive value
		//console.log("vm：" + vm)
		console.log("vm.$data：" + vm.$data);
		
	</script>

</html>