前端实验（一）初识Vue

原创已于 2025-09-26 19:40:34 修改 · 982 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2025-09-17 21:15:55 首次发布

前端开发技术专栏收录该内容

32 篇文章

订阅专栏

该文章已生成可运行项目，

实验目的

了解在网页中的使用方法
理解什么是Vue的模版语法
掌握Vue调试工具Vue-devtool的安装
掌握调试程序的使用

实验步骤

创建工作目录
在D盘创建目录d:\worksapce\demo1，存放实验代码
下载Vue
在浏览器中输入网址：https://unpkg.com/vue@3/dist/vue.global.js，打开vue.global.js代码。全选复制代码，保存为名为Vue.js文件，存入d:\worksapce\demo1\utils目录。
创建网页
在d:\worksapce\demo1目录下，创建网页vue-demo.html。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一次实验：在网页中使用vue</title>
	</head>
	<body>
		<!-- 通过CDN在线使用 -->
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<!-- 本地引入使用 -->
		<!-- <script src="./utils/vue.js"></script> -->
		
		<h1>原生的HTML代码，在此代码中不能使用Vue的模版语法</h1>
		
		<!-- 将创建的Vue对象，挂载到html中div标签，在此标签内可以使用Vue的模版语法 -->
		<div id="app">
			<div class="demo">
				{{ message }}
			</div>
			<form action="">
			 <label>姓名：</label>	<input type="text" v-model="userName"/>
			 <input type="button" value="确认"  @click="sayHello" />
			</form>
		</div>
		
		<script>
		  const { createApp } = Vue
		  
		  createApp({
		    data() {
		      return {
		        message: 'Hello Vue!',
						userName: '张三'
		      }
		    },
				
				methods: {  
			     sayHello() { 
			        alert('Hello ' + this.userName + '!')  
			     }  
			 }  
		  }).mount('#app')
		</script>
		
		<style>
			h1{
				color: red;
				text-align: center;
			}
			.demo{
				font-size: 2em;
			}
		</style>
	</body>
	
</html>

这里将html、css、javaScript代码进行集中管理，大幅提升了代码的可维护性。

Vue调试工具Vue-devtool安装
访问极简插件官网搜索devtools，下载插件，如图：

在这里插入图片描述
下载文件是压缩文件，解压后文件存在一个扩展名为crx文件：如：nhdogjmejiglipccpnnnanhbledajbpd.zip。打开google浏览器，选取菜单栏中扩展程序。，如图：

选择右上侧的“开发者模式”，并将解压后的crx文件拖入浏览器中，完成调试工具安装。如下图：
在这里插入图片描述
安装完成后，点击图标上详情，启用扩展程序固定到toolbar上及允许文件访问，如下图：

完成后，在浏览器输入文件地址“file:///G:/workspace3/vue-demo-2025/vue-demo-2025/demo1/demo.html”（注意：不能选中html文件，右键选择google浏览器打开文件，Vuetools激活不了，不知道为什么？），可以看到toolbar上的Vue图标变亮，按F12键。可以看到调试栏Vue图标。如下图
在这里插入图片描述
修改右下角的数据，观察页面数据的变化；修改页面数据，观察代码中data数据的变化，体验数据绑定的概念

本文章已经生成可运行项目