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

JavaWeb前端05（Vue工程化，Vue组件两种风格：组合式API 和选项式API）及简单案例）

java 2025/8/23 16:18:56

前言

一直在学习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的组件有两种不同的风格：组合式API 和 选项式API
我们前面学习HTML、CSS、JS、Axios、Vue等技术时的工程界面就是选项是API：

1. 选项式API：

可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。选项定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

<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 {searchForm: {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.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then(res => {this.empList = res.data.data})},clear() {this.searchForm= {name: '',gender: '',job: ''}}},mounted() {this.search();}}).mount('#container')</script>

组合式API：

是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。代码形式如下：

<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0); //声明响应式变量function increment(){ //声明函数count.value++;
}onMounted(() => { //声明钩子函数console.log('Vue Mounted....'); 
})
</script><template><input type="button" @click="increment"> Api Demo1 Count : {{ count }}
</template><style scoped></style>

注：在Vue中的组合式API使用时，是没有this对象的，this对象是undefined。

最后🎉我们来看看员工列表数据怎么用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>