JavaWeb前端05(Vue工程化,Vue组件两种风格:组合式API 和 选项式API)及简单案例) - 详解

前言

一直在学习B站黑马程序员苍穹外卖。现在已经学的差不多了,但是我学习一直是针对后端开发的,前端也没太注重去学(他大部分都给课程资料嘻嘻),但我还是比较感兴趣,准备先把之前学JavaWeb(黑马程序员新推出的哦,视频讲的非常好许可去看看)时跳过的前端内容学一下,然后再用苍穹外卖前端内容补上。

前面写了Vue的基本语法、表达式、指令,并基于Vue的核心包,还有Vue的案例,但还是比较简单,在项目中的应用会更难一点。

嗯,这里大概概况一下Vue项目创建

大概分为:

  • 环境准备(NodeJS安装–配置npm的全局安装路径)
  • Vue项目创建
    • 创建一个工程化的Vue项目,执行命令:npm create vue@3.3.4
    • 采用VsCode直接打开这个Vue项目

我们来看看Vue方案结构

1.先来了解目录结构:

在这里插入图片描述
前端工程化方式的开发,主要包括如下4个特点:

在这里插入图片描述

  • 模块化:将js和css等,做成一个个可复用模块
  • 组件化:我们将UI组件,css样式,js行为封装成一个个的组件,便于管理
  • 规范化:我们提供一套标准的规范的目录接口和编码规范,所有开发人员遵循这套规范
  • 自动化:项目的构建,测试,部署全部都是自动完成

2.那研发时,大家应该在哪个文件中写代码呢?来看看项目编写流程:

在这里插入图片描述
其中*.vue是Vue项目中的组件文件,在Vue项目中也称为单记录组件(SFC,Single-File Components)。Vue 的单文件组件会将一个组件的逻辑 (JS),模板 (HTML) 和样式 (CSS) 封装在同一个档案里(*.vue)

在这里插入图片描述
再来看看我们前面学习HTML、CSS、JS、Axios、Vue等技术时的工程界面:

在这里插入图片描述
通过两相对比就能够看出上述开发模式存在如下挑战:

  • 从零开始,比较麻烦就是不规范:每次开发都
  • 难复用:多个页面中的组件共用性不好
  • 难维护:js、图片等资源没有规范化的存储目录,没有统一的标准,不方便维护

所以Vue工程化在企业级的前端项目开发中,**把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。**从而统一编写规范、提升开发效率,降低编写难度、提高复用等等。就是,就

最后我们来看看员工列表数据怎么用Vue工程化来实现

在这里插入图片描述
代码:

<script setup>
  // 引入
  import { ref, onMounted
  } from 'vue';
  import axios from 'axios';
  // 定义响应式数据
  const name = ref('');
  const gender = ref('');
  const job = ref('');
  const userList = ref([]);
  // 定义查询方法
  const search = async() =>
  {
  //基于axios发送异步请求,请求https://web-server.itheima.net/emps/list,根据条件查询员工列表
  const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${name.value
  }&gender=${gender.value
  }&job=${job.value
  }`)
  userList.value = result.data.data;
  }
  //定义钩子函数
  onMounted(() =>
  {
  search();
  })
</script>
<template>
    <div id="center">
      姓名: <input type="text" name="name" v-model="name">
      性别:
        <select name="gender" v-model="gender">
      <option value="1"></option>
      <option value="2"></option>
      </select>
      职位:
        <select name="job" v-model="job">
      <option value="1">班主任</option>
      <option value="2">讲师</option>
      <option value="3">其他</option>
      </select>
        <input class="btn" type="button" value="查询" @click="search">
      </div>
      <table>
        <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
        </tr>
        <!-- v-for 用于列表循环渲染元素 -->
            <tr v-for="(user, index) in userList" :key="user.id">
          <td>{{index + 1}}</td>
          <td>{{user.name}}</td>
          <td> <img :src="user.image"> </td>
            <td>
            <span v-if="user.gender == 1"></span>
            <span v-else-if="user.gender == 2"></span>
            <span v-else>其他</span>
            </td>
            <td>
            <span v-if="user.job == 1">班主任</span>
            <span v-else-if="user.job == 2">讲师</span>
            <span v-else-if="user.job == 3">学工主管</span>
            <span v-else-if="user.job == 4">教研主管</span>
            <span v-else-if="user.job == 5">咨询师</span>
            <span v-else>其他</span>
            </td>
          <td>{{user.entrydate}}</td>
          <td>{{user.updatetime}}</td>
          </tr>
        </table>
      </template>
        <style scoped>
        table,th,td {
        border: 1px solid #000;
        border-collapse: collapse;
        line-height: 50px;
        text-align: center;
        }
        #center,table {
        width: 60%;
        margin: auto;
        }
        #center {
        margin-bottom: 20px;
        }
        img {
        width: 50px;
        }
        input,select {
        width: 17%;
        padding: 10px;
        margin-right: 30px;
        border: 1px solid #ccc;
        border-radius: 4px;
        }
        .btn {
        background-color: #ccc;
        }
      </style>

小白啊!!!写的不好轻喷啊如果觉得写的不好,点个赞吧(批评是我写作的动力)

…。。。。。。。。。。。…

…。。。。。。。。。。。…请添加图片描述

posted @ 2025-08-23 11:59  yfceshi  阅读(10)  评论(0)    收藏  举报