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

JavaWeb全链路学习：3、Vue

article 2025/2/22 22:01:24

1、概述

Vue是一款用于构建用户界面的渐进式的JavaScript框架（官方网站：https://cn.vuejs.org）。

在上面的这句话中呢，出现了三个词，分别是：构建用户界面、渐进式、框架。

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提供的核心包、插件进行工程化开发，也就是做整站开发。

那上面的这两种Vue的使用形式，我们都会学习，今天我们先来学习第一种方式，就是使用Vue来完成局部模块改造。

3). 框架

框架：就是一套完整的项目解决方案，用于快速构建项目。这是我们接触的第一个框架，那在我们后面的学习中，我们还会学习很多的java语言中的框架，那通过这些框架呢，就可以来快速开发java项目，提高开发效率。
优点：大大提升前端项目的开发效率。
缺点：需要理解记忆框架的使用规则。（参照官网）

2、入门程序

1). 准备工作：

准备一个html文件，并在其中引入Vue模块（参考官方文档，复制过来即可）【注意：模块化的js，引入时，需要设置 type="module"】
创建Vue程序的应用实例，控制视图的元素
准备元素（div），交给Vue控制

这是三步准备工作，是我们使用Vue时，都需要做的，是固定步骤。这样我们就搭建好了一个基本的Vue的结构了。

2). 数据驱动视图：

准备数据。在创建Vue应用实例的时候，传入了一个js对象，在这个js对象中，我们要定义一个data方法，这个data方法的返回值就是Vue中的数据。
通过插值表达式渲染页面。插值表达式的写法：{{...}}

注意：

Vue中定义数据，必须通过data方法来定义，data方法返回值是一个对象，在这个对象中定义数据。
插值表达式中编写的变量，一定是Vue中定义的数据，如果插值表达式中编写了一个变量，但是在Vue中未定义，将会报错。
Vue应用实例接管的区域是 '#app'，超出这个范围，就不受Vue控制了，所以vue的插值表达式，一定写在 <div id="app">...</div> 的里面

3、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标签绑定事件

3.1 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 指令。

<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>

3.2 v-bind

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

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

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

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

动态的为标签的属性绑定值，不能使用插值表达式，得使用v-bind指令。且绑定的数据，必须在data中定义。

3.3 v-if & v-show

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

v-if：

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

   <!-- 基于v-if/v-else-if/v-else指令来展示职位这一列 -->
  <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>

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

v-show：

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

<!-- 基于v-show指令来展示职位这一列 -->
<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样式，来决定元素是展示还是隐藏。查看结果如下：

3.4 v-model

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

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

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

<input type="text" name="name" placeholder="姓名" v-model="searchEmp.name" />
<select name="gender" v-model="searchEmp.gender">
<select name="job" v-model="searchEmp.job">

  searchEmp: {
              name: '',
              gender: '',
              job: ''
            },

3.5 v-on

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

语法：

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

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

4.Ajax

4.1 概述

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

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

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

与服务器进行数据交互

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

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

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

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

4.2 同步异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。

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

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

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

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

4.3 Axios

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

Axios的使用比较简单，主要分为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>Axios入门程序</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(err) {
      console.log(err);
    })
  }

//POST请求
document.querySelector('#postData').onclick = function() {
  axios({
    url:'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
    method:'post'
  }).then(function(res) {
    console.log(res.data);
  }).catch(function(err) {
    console.log(err);
  })
}
  </script>
  </body>
  </html>

知识小贴士：在使用axios时，在axios之后，输入 thenc 会自动生成成功及失败回调函数结构。

请求方法别名

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);
})

使用示例

示例 1：发送简单的 POST 请求

axios.post('https://example.com/api/data', {
  name: '张三',
  age: 25
})
  .then(response => {
    console.log('响应数据：', response.data);
  })
  .catch(error => {
    console.error('请求失败：', error);
  });

示例 2：发送带配置的 POST 请求

axios.post('https://example.com/api/data', {
  name: '李四',
  age: 30
}, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  timeout: 5000, // 超时时间 5 秒
  params: {
    userId: 123 // URL 查询参数
  }
})
  .then(response => {
    console.log('响应数据：', response.data);
  })
  .catch(error => {
    console.error('请求失败：', error);
  });

示例 3：发送 FormData

const formData = new FormData();
formData.append('name', '王五');
formData.append('age', 28);
formData.append('file', fileInput.files[0]); // 上传文件

axios.post('https://example.com/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log('上传成功：', response.data);
  })
  .catch(error => {
    console.error('上传失败：', error);
  });

示例 4：处理响应

axios.post('https://example.com/api/data', {
  name: '赵六',
  age: 22
})
  .then(response => {
    console.log('状态码：', response.status);
    console.log('状态文本：', response.statusText);
    console.log('响应头：', response.headers);
    console.log('响应数据：', response.data);
  })
  .catch(error => {
    if (error.response) {
      // 请求已发出，但服务器响应状态码不在 2xx 范围内
      console.error('响应错误：', error.response.data);
      console.error('状态码：', error.response.status);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('请求错误：', error.request);
    } else {
      // 其他错误
      console.error('错误信息：', error.message);
    }
  });

如果使用axios中提供的.then(function(){....}).catch(function(){....})，这种回调函数的写法，会使得代码的可读性和维护性变差。而为了解决这个问题，我们可以使用两个关键字，分别是：async、await。

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

代码修改前：

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

代码修改后：

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.4 Vue生命周期

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

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

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