JavaWeb前端03（Vue用法及具体案例）

老虎06272025-08-22 0:01

前言

一直在学习B站黑马程序员苍穹外卖。现在已经学的差不多了，但是我学习一直是针对后端开发的，前端也没太注重去学（他大部分都给课程资料嘻嘻🤪），但我还是比较感兴趣，准备先把之前学JavaWeb（黑马程序员新推出的哦，视频讲的非常好😗可以去看看）时跳过的前端内容学一下，然后再用苍穹外卖前端内容补上，先从最基础的开始复习一下，先来入门一下Vue，之后再讲讲工程化的Vue

🙌先来从概念上大致了解一下Vue

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

在上面的这句话中呢，出现了三个词，分别是：构建用户界面、渐进式、框架。 我们来从这几个方面来具体看看他是干什么的。

  • Vue 是一个"框架"，它为你构建 Web 应用提供了坚实的基础和完整的解决方案。

  • 它的核心目标是"构建用户界面"，通过声明式渲染、组件化和响应式系统，让你能更轻松、高效地创建动态、交互丰富的 UI。

  • 渐进式中的渐进呢，字面意思就是 "循序渐进"。Vue生态中的语法呢是非常多的，比如声明式渲染、组件系统、客户端路由（VueRouter）、状态管理（Vuex、Pinia）、构建工具（Webpack、Vite）等等。意味着你可以自由选择从哪里开始、用多深，可以逐步采用，灵活集成，适应从小到大各种规模和复杂度的项目。

来从一个入门程序来看看它怎么使用

还是先来看看实现（因为是入门程序所也比较简单，主要看一下Vue的结构）：

🤔来看看代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>
<body>

  <div id="app">
    <h1>{{ message }}</h1>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          message: 'Hello World!'
        }
      }
    }).mount('#app')
  </script>

</body>
</html>

1). 准备工作：

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

2). 数据驱动视图：

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

Vue指令

概述

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

形式：

html 复制代码 
<p v-xxx="....">.....</p>

常见指令：

来看看案例：

先看看前端页面（其实跟前面的实现差不多，但我们主要看代码，Vue简化了不少）

来看看代码：

html 复制代码 
<!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">
      <input type="text" name="name" placeholder="姓名" v-model="searchEmp.name" />
      <select name="gender" 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" @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>
          </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 {
            searchEmp: {
              name: '',
              gender: '',
              job: ''
            },
            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"
              }
            ]
          }
        },
        methods: {
          search() {
            console.log(this.searchEmp)
          },
          clear() {
            this.searchEmp = {
              name: '',
              gender: '',
              job: ''
            }
          }
        }
      }).mount('#container')
    </script>

  </div>

</body>
</html>

来看看用到的Vue指令：

✅ 1. v-model：双向数据绑定

html 复制代码 
<input type="text" name="name" placeholder="姓名" v-model="searchEmp.name" />
<select name="gender" v-model="searchEmp.gender">
  ...
</select>
<select name="job" v-model="searchEmp.job">
  ...
</select>
  • 作用：v-model 是 Vue 中最常用的指令之一，用于在表单元素（如 input、select、textarea）和 Vue 实例的数据之间建立双向数据绑定。
  • 解释：
    • 当用户在输入框中输入内容或选择下拉项时，searchEmp.name、searchEmp.gender、searchEmp.job 的值会自动更新。
    • 反之，如果在 JS 中修改了这些值，输入框或下拉框的显示也会同步更新。
  • 特点：它是语法糖，底层结合了 :value 和 @input 事件。

✅ 2. v-for：列表渲染

html 复制代码 
<tr v-for="(emp, index) in empList" :key="index">
  • 作用：用于循环渲染列表或数组中的每一项。
  • 解释：
    • 遍历 empList 数组中的每一个员工对象 emp。
    • 同时获取当前项的索引 index。
    • 每次循环生成一个 表格行。

✅ 3. v-if / v-else-if：条件渲染

html 复制代码 
<td>
  <span v-if="emp.job === '1'">班主任</span>
  <span v-else-if="emp.job === '2'">讲师</span>
  <span v-else-if="emp.job === '3'">学工主管</span>
  <!-- ... -->
</td>
  • 作用：根据表达式的真假值，动态地插入或移除 DOM 元素。
  • 解释：
    • 如果 emp.job === '1' 为真，则只渲染"班主任"这个 。
    • 否则检查下一个条件，直到匹配或都不匹配。
  • 注意：v-else 和 v-else-if 必须紧跟在 v-if 后面。

✅ 4. {{ }}：插值表达式（Mustache Syntax）

html 复制代码 
<td>{{ emp.name }}</td>
<td>{{ emp.gender === 1 ? '男' : '女' }}</td>
  • 作用：将 Vue 实例中的数据动态插入到 HTML 文本中。
  • 解释：
    • {{ emp.name }} 直接显示员工姓名。
    • {{ emp.gender === 1 ? '男' : '女' }} 是一个三元表达式，根据 gender 值显示"男"或"女"。
  • 限制：只能包含单个 JavaScript 表达式，不能写语句（如 if、for）。

✅ 5. @click：事件绑定（v-on 的缩写)

html 复制代码 
<button type="button" @click="search">查询</button>
<button type="button" @click="clear">清空</button>
  • 作用：监听 DOM 事件，触发 Vue 实例中的方法。
  • 解释：
    • @click="search" 是 v-on:click="search" 的简写。
      点击"查询"按钮时，调用 methods 中定义的 search() 方法。
    • 点击"清空"按钮时，调用 clear() 方法。
  • 注意：这里使用 type="button" 是为了避免表单提交刷新页面。

✅ 6. :（冒号）：动态属性绑定（v-bind 的缩写）

html 复制代码 
<img :src="emp.image" alt="emp.name" class="avatar">
  • 作用：将 HTML 属性的值绑定为 Vue 中的动态数据。
  • 解释：
    • :src="emp.image" 是 v-bind:src="emp.image" 的简写。
    • 它会把 emp.image 的值作为图片的 src。

小白啊！！！写的不好轻喷啊🤯如果觉得写的不好，点个赞吧🤪（批评是我写作的动力）

...。。。。。。。。。。。...

...。。。。。。。。。。。...

热门推荐
01UV安装并设置国内源02DeepSeek更新！速览DeepSeek V3.1新特性03KGG转MP3工具|非KGM文件|解密音频04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）07Claude Code VSCode集成开发指南：AI编程助手完整配置08Spring 调试终于不再痛苦了092025最新国内服务器可用docker源仓库地址大全（2025年8月更新）10Linux下V2Ray安装配置指南