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>
小白啊!!!写的不好轻喷啊如果觉得写的不好,点个赞吧(批评是我写作的动力)
…。。。。。。。。。。。…
…。。。。。。。。。。。…