vue3第二篇本地引入vue之HelloWorld

最新推荐文章于 2024-06-01 12:27:05 发布

EOPG

最新推荐文章于 2024-06-01 12:27:05 发布

阅读量516

点赞数 1

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

本文链接：https://blog.csdn.net/qq_40247570/article/details/119277229

版权

vue3 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

学习目标：

1、通过本地引入vue.js
2、通过vue输出HelloWorld

学习内容：

步骤1：新建HTML文件并引入vue

新建一个空的js文件，然后在浏览器中输入https://unpkg.com/vue@next

复制显示的代码粘贴到刚刚建的js文件中。在新建的html文件中引入刚刚的js文件

<script src="../js/vue.js"></script>

步骤2：输出HelloWorld

<script>
		const jpxsr = {
			template: "<h2>你好</h2>"
		}
		const app = Vue.createApp(jpxsr);
		app.mount("#app")
	</script>

步骤3：查看效果

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="../js/vue.js"></script>
	<body>
		<div id="app">
			
		</div>
	</body>
	<script>
		const jpxsr = {
			template: "<h2>你好</h2>"
		}
		const app = Vue.createApp(jpxsr);
		app.mount("#app")
	</script>
</html>

EOPG

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue3第二篇本地引入vue之HelloWorld

学习目标： 1、通过本地引入vue.js2、通过vue输出HelloWorld学习内容：步骤1：新建HTML文件并引入vue新建一个空的js文件，然后在浏览器中输入https://unpkg.com/vue@next复制显示的代码粘贴到刚刚建的js文件中。在新建的html文件中引入刚刚的js文件<script src="../js/vue.js"></script>步骤2：输出HelloWorld<script> const jpxsr =
复制链接

扫一扫