创建第一个Vue实例

最新推荐文章于 2024-08-05 18:19:35 发布

m0_47761892

最新推荐文章于 2024-08-05 18:19:35 发布

阅读量226

点赞数

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

本文链接：https://blog.csdn.net/m0_47761892/article/details/128772940

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

创建第一个Vue实例

为了更好的了解学习Vue的基础知识，通过使用<script>标签引入vue.js文件来构建简单的Vue案例。在实际开发工作中，大多使用构建工具Vue-cli或者Vite来构建项目。

前端开发工具很多，比如webstorm、vscode等等，这里我们使用HBuilder X 软件作为开发工具。

1.启动HBuilderX，创建项目，填写选择相应的内容，如图所示。
在这里插入图片描述

2.创建完成后，会有一个首页index，模板内容如下，默认使用的是Vue3版本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ counter }}
		</div>
		<script>
			const aaa= {
				data() {
					return {
						counter: 0
					}
				}
			};
			Vue.createApp(aaa).mount('#app');
		</script>
	</body>
</html>

3.如果想使用Vue2版本，首先更改引用 <script src="js/v2.6.10/vue.js" ></script>。然后创建Vue实例

<body>
		<div id="aaa">
			{{ counter }}
		</div>
		<script>
				var demo=new Vue({
						el:"#aaa",
						data:{
							title:true,
							str:'fjalajFDAREwqomf;',
						},
						method:{
						},
						watch:{
						}
					})
		</script>
</body>