Vue学习系列（二）：Vue的第一个实例

最新推荐文章于 2023-07-27 15:57:22 发布

次时代小羊

最新推荐文章于 2023-07-27 15:57:22 发布

阅读量235

点赞数 1

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

本文链接：https://blog.csdn.net/qq_45193304/article/details/106586294

版权

前端专栏收录该内容

35 篇文章 2 订阅

订阅专栏

Vue学习系列：
上一篇：Vue学习系列（一）：无法加载文件，因为在此系统上禁止运行脚本。

vue.js下载路径：https://vuejs.org/js/vue.js
vue.min.js下载路径：https://vuejs.org/js/vue.min.js

其中vue.js是开发版本，具有代码开发提示功能，而vue.min.js是生产环境的vue版本，该版本经过代码压缩，去掉了多余的空格和代码开发提示功能，更适用于生产环境使用。

项目目录结构：
在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		  <p>{{ message }}</p>
		</div>
	</body>
	<script>
		const app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello,Vue'
		  }
		})
	</script>
</html>