前端实验（二）初识Vue
实验目的
- 了解在网页中的使用方法
- 理解什么是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 } = VuecreateApp({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数据的变化，体验数据绑定的概念