当前位置：首页 > news >正文

JavaWeb-Vue基础

news 2026/8/29 21:49:25

1. Vue 介绍

1.1. 概述

Vue 是一款用于构建用户界面的渐进式的 JavaScript框架

官方网站：https://cn.vuejs.org/guide/introduction.html

1、构建用户界面：

是指在 Vue 中，可以基于数据渲染出用户看到的界面

我们来举一个例子，比如将来自于服务器端的原始数据返回给前端：

userList: [ {"id": 1, "name": "谢逊", "image": "1.jpg", "gender": 1, "job": "班主任"}, {"id": 2, "name": "韦一笑", "image": "2.jpg", "gender": 1, "job": "班主任"} ]

上面的这些原始数据，用户是看不懂的。而我们开发人员呢，可以使用 Vue 中提供的操作，将原始数据遍历、解析出来，从而渲染呈现出用户所能看懂的界面：

那这个过程，就是基于数据渲染出用户看到的界面，也就是所谓的构建用户界面。

2、渐进式：

渐进式中的渐进呢，字面意思就是 "循序渐进"。

Vue生态中的语法呢是非常多的，比如声明式渲染、组件系统、客户端路由（VueRouter）、状态管理（Vuex、Pinia）、构建工具（Webpack、Vite）等等。

所谓渐进，指的是我们使用 Vue 框架，不需要把所有的组件、语法全部学习完毕才可以使用Vue。而是，学习一点就可以使用一点了，比如：

我们学习了声明式渲染，我们就可以使用Vue来构建用户界面了。
我们再学习了组件系统，我们就可以使用Vue中的组件，从而来复用了。
我们再学习了路由VueRouter，就可以使用Vue中的中的路由功能了。

也就是说，并不需要全部学习完毕就可以直接使用 Vue 进行开发，简化操作、提高效率了。Vue 是一个框架，但其实也是一个生态。

那由此呢，也就引出了Vue中两种常见的开发模式：

基于Vue提供的核心包，完成项目局部模块的改造了。
基于Vue提供的核心包、插件进行工程化开发，也就是做整站开发。

3、框架：

框架就是一套完整的项目解决方案，用于快速构建项目。

1.2. 入门程序

我们需要将准备的数据 message 的值，基于 Vue 渲染展示在页面中，最终呈现的形式如下：

步骤：

1、准备一个html文件，并在其中引入Vue模块（参考官方文档，复制过来即可）【注意：模块化的 js，引入时，需要设置type="module"】

2、创建Vue程序的应用实例，控制视图的元素

3、准备元素（div），交给Vue控制

4、准备数据。在创建Vue应用实例的时候，传入了一个js对象，在这个js对象中，我们要定义一个data方法，这个data方法的返回值就是Vue中的数据。

5、通过插值表达式渲染页面。插值表达式的写法：{{...}}

<body> <!-- 3、准备元素，交给Vue控制 --> <div id="app"> <!-- 5、通过插值表达式渲染页面 --> <h1>{{message}}</h1> </div> <script type="module"> // 1、引入Vue模块 import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' // 2、创建Vue程序的应用实例 createApp({ // 4 准备数据 data() { return { message: "hello Vue" } } }).mount("#app") </script> </body>

2. Vue 指令

指令：指的是HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义，可以实现不同的功能。例如：v-if，v-for…

<p v-xxx="....">.....</p>

常见指令：

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

2.1. 案例

需求：员工列表数据渲染展示。

使用 Ai 生成一个基本的展示页面

AI提示词（prompt）：

基于Vue3中提供的指令，渲染展示employees中的数据，并展示在页面上；

性别gender为1展示为男，性别为2展示为女；
职位job为1展示为班主任，职位为2展示为讲师，职位为3展示为学工主管，职位为4展示为教研主管，职位为5展示为咨询师；
其他的属性直接展示；

页面内容如下：
xxxx

基础代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tlias智能学习辅助系统</title> <style> body { margin: 0; } /* 顶栏样式 */ .header { display: flex; justify-content: space-between; align-items: center; background-color: #c2c0c0; padding: 20px 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* 加大加粗标题 */ .header h1 { margin: 0; font-size: 24px; font-weight: bold; } /* 文本链接样式 */ .header a { text-decoration: none; color: #333; font-size: 16px; } /* 搜索表单区域 */ .search-form { display: flex; align-items: center; padding: 20px; background-color: #f9f9f9; } /* 表单控件样式 */ .search-form input[type="text"], .search-form select { margin-right: 10px; padding: 10px 10px; border: 1px solid #ccc; border-radius: 4px; width: 26%; } /* 按钮样式 */ .search-form button { padding: 10px 15px; margin-left: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } /* 清空按钮样式 */ .search-form button.clear { background-color: #6c757d; } .table { min-width: 100%; border-collapse: collapse; } /* 设置表格单元格边框 */ .table td, .table th { border: 1px solid #ddd; padding: 8px; text-align: center; } .avatar { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; } /* 页脚版权区域 */ .footer { background-color: #c2c0c0; color: white; text-align: center; padding: 10px 0; margin-top: 30px; } .footer .company-name { font-size: 1.1em; font-weight: bold; } .footer .copyright { font-size: 0.9em; } #container { width: 80%; margin: 0 auto; } </style> </head> <body> <div id="container"> <!-- 顶栏 --> <div class="header"> <h1>Tlias智能学习辅助系统</h1> <a href="#">退出登录</a> </div> <!-- 搜索表单区域 --> <form class="search-form" action="#" method="post"> <input type="text" name="name" placeholder="姓名" /> <select name="gender"> <option value="">性别</option> <option value="1">男</option> <option value="2">女</option> </select> <select name="job"> <option value="">职位</option> <option value="1">班主任</option> <option value="2">讲师</option> <option value="3">学工主管</option> <option value="4">教研主管</option> <option value="5">咨询师</option> </select> <button type="submit">查询</button> <button type="reset" class="clear">清空</button> </form> <table class="table table-striped table-bordered"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>头像</th> <th>职位</th> <th>入职日期</th> <th>最后操作时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(emp, index) in empList" :key="index"> <td>{{ emp.name }}</td> <td>{{ emp.gender === 1 ? '男' : '女' }}</td> <td><img :src="emp.image" alt="{{ emp.name }}" class="avatar"></td> <td>{{ emp.job === '1' ? '班主任' : (emp.job === '2' ? '讲师' : (emp.job === '3' ? '学工主管' : (emp.job === '4' ? '教研主管' : (emp.job === '5' ? '咨询师' : '未知')))) }}</td> <td>{{ emp.entrydate }}</td> <td>{{ emp.updatetime }}</td> <td class="btn-group"> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> </tbody> </table> <!-- 页脚版权区域 --> <footer class="footer"> <p class="company-name">江苏传智播客教育科技股份有限公司</p> <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p> </footer> <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' createApp({ data() { return { empList: [ { "id": 1, "name": "谢逊", "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg", "gender": 1, "job": "1", "entrydate": "2023-06-09", "updatetime": "2024-07-30T14:59:38" }, { "id": 2, "name": "韦一笑", "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg", "gender": 1, "job": "1", "entrydate": "2020-05-09", "updatetime": "2023-07-01T00:00:00" }, { "id": 3, "name": "黛绮丝", "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg", "gender": 2, "job": "2", "entrydate": "2021-06-01", "updatetime": "2023-07-01T00:00:00" } ] } } }).mount('#container') </script> </div> </body> </html>

那我们看到，通过AI生成的代码，已经实现了员工列表数据渲染的功能。而这里面呢，就用到了Vue中提供的指令和插值表达式。那接下来，我们就来详细剖析一下Vue中指令的用法。

2.2. v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法：<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>

参数：

items 为遍历的数组
item 为遍历出来的元素
index 为索引/下标，从0开始；可以省略，省略index语法：v-for = "item in items"

key：

作用：给元素添加的唯一标识，便于 vue 进行列表项的正确排序复用，提升渲染性能
推荐使用 id 作为key（唯一），不推荐使用index作为key（会变化，不对应）

注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

2.3. v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：v-bind:属性名="属性值"<imgv-bind:src="item.image"width="30px">

简化：:属性名="属性值"<img :src="item.image" width="30px">

注意：v-bind 所绑定的数据，必须在data中定义/或基于data中定义的数据而来。

2.4. v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if：

语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
其它：可以配合 v-else-if / v-else 进行链式调用条件判断

<tbody> <tr v-for="(emp, index) in empList" :key="index"> <td>{{ emp.name }}</td> <td>{{ emp.gender === 1 ? '男' : '女' }}</td> <td><img :src="emp.image" :alt="emp.name" class="avatar"></td> <td> <span v-if="emp.job === '1'">班主任</span> <span v-else-if="emp.job === '2'">讲师</span> <span v-else-if="emp.job === '3'">学工主管</span> <span v-else-if="emp.job === '4'">教研主管</span> <span v-else-if="emp.job === '5'">咨询师</span> <span v-else>其他</span> </td> <td>{{ emp.entrydate }}</td> <td>{{ emp.updatetime }}</td> <td class="btn-group"> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> </tbody>

注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后。

通过浏览器的开发者工具，我们可以看到如果使用v-if指令来渲染展示，确实是根据条件判断，是否渲染这个元素节点，条件成立才会渲染。

v-show：

语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景

<td> <span v-show="emp.job === '1'">班主任</span> <span v-show="emp.job === '2'">讲师</span> <span v-show="emp.job === '3'">学工主管</span> <span v-show="emp.job === '4'">教研主管</span> <span v-show="emp.job === '5'">咨询师</span> </td>

通过浏览器的开发者工具，我们可以看到如果使用v-show指令来渲染展示，所有元素都会渲染，只不过是通过控制display这个css样式，来决定元素是展示还是隐藏。

2.5. v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model="变量名"
这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。视图中的输入的数据变化，也会影响Vue的数据模型。

注意：v-model 中绑定的变量，必须在data中定义。

为员工列表案例的搜索栏的表单项，绑定数据：

<form class="search-form" action="#" method="post"> <input type="text" name="name" placeholder="姓名" v-model="searchEmp.name"> <select name="gender" id="" v-model="searchEmp.gender"> <option value="">性别</option> <option value="1">男</option> <option value="2">女</option> </select> <select name="job" v-model="searchEmp.job"> <option value="">职位</option> <option value="1">班主任</option> <option value="2">讲师</option> <option value="3">学工主管</option> <option value="4">教研主管</option> <option value="5">咨询师</option> </select> <button type="submit">查询</button> <button class="clear" type="reset">清空</button> </form>

2.6. v-on

作用：为html标签绑定事件（添加时间监听）

语法：

v-on:事件名="方法名"
简写为@事件名="…"
<input type="button" value="点我一下试试" v-on:click="handle">
<input type="button" value="点我一下试试" @click="handle">

这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义。

为员工列表案例的搜索栏中的查询和清空按钮绑定事件：

<button type="submit" v-on:click="search">查询</button> <button class="clear" type="reset" @click="clear">清空</button> methods: { search() { console.log(this.searchEmp) }, clear() { this.searchEmp = { name: "", gender: "", job: "" } } }

注意： methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据。

3. Ajax

3.1. 概述

我们前端页面中的数据，如下图所示的表格中的员工信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？

因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。

Ajax:全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

与服务器进行数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

我们详细的解释一下Ajax技术的2个作用：

与服务器进行数据交互

如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过 Ajax 技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

如下图所示，当我们再百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，在整个过程中，我们的Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高。

XML：（英语：ExtensibleMarkupLanguage）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构。

3.2. 同步异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。

接下来我们介绍一下异步请求和同步请求的区别。

同步请求发送过程如下图所示：

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

异步请求发送过程如下图所示：

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

3.3. Axios

使用原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送 Ajax 请求的技术 Axios 。Axios是对原生的AJAX进行封装，简化书写。

Axios官网是：https://www.axios-http.cn

使用主要分 2 步：

1、引入 Axios 文件（如果网络不通畅，可以使用离线的已经下载好的js文件，资料中已经提供）

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、点击按钮时，使用Axios发送请求

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="getData">GET</button> <button id="postData">POST</button> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> // GET请求 document.querySelector("#getData").onclick = function() { axios({ url: "https://mock.apifox.cn/m1/3083103-0-default/emps/list", method: "get", }).then(function(res) { console.log(res.data) }).catch(function(error) { console.log(error); }) } // POST请求 document.querySelector("#postData").onclick = function() { axios({ url: "https://mock.apifox.cn/m1/3083103-0-default/emps/update", method: "post", }).then(res => { console.log(res.data) console.log("post请求已发送") }).catch(error => { console.log(error); }) } </script> </body> </html>

3.4. 请求方法别名

Axios还针对不同的请求，提供了别名方式的 api ，具体格式如下：

axios.请求方式(url [, data [, config]])

具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

我们目前只关注get和post请求，所以在上述的入门案例中，我们可以将get请求代码改写成如下：

axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then(result => { console.log(result.data); })

post请求改写成如下：

axios.post("https://mock.apifox.cn/m1/3083103-0-default/emps/update","id=1").then(result => { console.log(result.data); })

3.5. 案例-异步获取数据

需求：基于axios动态加载员工列表数据

具体代码实现如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tlias智能学习辅助系统</title> <style> body { margin: 0; } /* 顶栏样式 */ .header { display: flex; justify-content: space-between; align-items: center; background-color: #c2c0c0; /* padding: 20px 20px; */ padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* 加大加粗标题 */ .header h1 { margin: 0; font-size: 24px; font-weight: bold; } /* 文本链接样式 */ .header a { text-decoration: none; color: #333; font-size: 16px; } /* 搜索表单区域 */ .search-form { display: flex; align-items: center; padding: 20px; background-color: #f9f9f9; } /* 表单控件样式 */ /* 同时给多个元素应用统一样式 */ .search-form input[type="text"], .search-form select { margin-right: 10px; padding: 10px 10px; border: 1px solid #ccc; border-radius: 4px; width: 26%; } /* 按钮样式 */ .search-form button { padding: 10px 15px; margin-left: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } /* 清空按钮样式 */ .search-form button.clear { background-color: #6c757d; } .table { min-width: 100%; border-collapse: collapse; } /* 设置表格单元格边框 */ .table td, .table th { border: 1px solid #ddd; padding: 8px; text-align: center; } .avatar { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; } /* 页脚版权区域 */ .footer { background-color: #c2c0c0; color: white; text-align: center; padding: 10px 0; margin-top: 30px; } .footer .copy-name { font-size: 1.1em; font-weight: bold; } .footer .copyright { font-size: 0.9em; } #container { width: 80%; margin: 0 auto; } </style> </head> <body> <div id="container"> <!-- 顶栏 --> <div class="header"> <h1>Tlias智能学习辅助系统</h1> <a href="#">退出登录</a> </div> {{searchEmp}} <!-- 搜索表单区域 --> <form class="search-form" action="#" method="post"> <input type="text" name="name" placeholder="姓名" v-model="searchEmp.name"> <select name="gender" id="" v-model="searchEmp.gender"> <option value="">性别</option> <option value="1">男</option> <option value="2">女</option> </select> <select name="job" v-model="searchEmp.job"> <option value="">职位</option> <option value="1">班主任</option> <option value="2">讲师</option> <option value="3">学工主管</option> <option value="4">教研主管</option> <option value="5">咨询师</option> </select> <button type="button" v-on:click="search">查询</button> <button type="button" @click="clear">清空</button> </form> <table class="table table-striped table-bordered"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>头像</th> <th>职位</th> <th>入职日期</th> <th>最后操作时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(emp, index) in empList" :key="index"> <td>{{ emp.name }}</td> <td>{{ emp.gender === 1 ? '男' : '女' }}</td> <td><img :src="emp.image" :alt="emp.name" class="avatar"></td> <!-- <td> <span v-if="emp.job === '1'">班主任</span> <span v-else-if="emp.job === '2'">讲师</span> <span v-else-if="emp.job === '3'">学工主管</span> <span v-else-if="emp.job === '4'">教研主管</span> <span v-else-if="emp.job === '5'">咨询师</span> <span v-else>其他</span> </td> --> <td> <span v-show="emp.job === '1'">班主任</span> <span v-show="emp.job === '2'">讲师</span> <span v-show="emp.job === '3'">学工主管</span> <span v-show="emp.job === '4'">教研主管</span> <span v-show="emp.job === '5'">咨询师</span> </td> <td>{{ emp.entrydate }}</td> <td>{{ emp.updatetime }}</td> <td class="btn-group"> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> </tbody> </table> <!-- 页脚版权区域 --> <footer class="footer"> <p class="company-name">江苏传智播客教育科技股份有限公司</p> <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p> </footer> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="module"> import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js' createApp({ data() { return { // 定义数据类型，采集员工搜索表单数据 searchEmp: { name: "", gender: "", job: "" }, empList: [] } }, methods: { search() { // 基于axios发送异步请求， // 请求https://web-server.itheima.net/emps/list // 根据条件查询员工列表 axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchEmp.name}&gender=${this.searchEmp.gender}&job=${this.searchEmp.job}`) .then(res => { this.empList = res.data.data }) }, clear() { this.searchEmp = { name: "", gender: "", job: "" } } } }).mount('#container') </script> </body> </html>

如果使用 axios 中提供的.then(function(){....}).catch(function(){....})，这种回调函数的写法，会使得代码的可读性和维护性变差。

而为了解决这个问题，我们可以使用两个关键字，分别是：async、await。

可以通过async、await可以让异步变为同步操作。async就是来声明一个异步方法，await是用来等待异步任务执行。

修改后:

async search() { //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表 const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`); this.empList = result.data.data; },

修改后，代码就变成同步操作了，一行一行的从前往后执行。在前端项目开发中，经常使用这两个关键字配合，使得代码的可读性和可维护性变高。

4. Vue 声明周期

4.1. 介绍

vue的生命周期：指的是vue对象从创建到销毁的过程。

vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后