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

黑马JAVAWeb -Vue工程化-API风格 - 组合式API

news 2025/11/12 7:35:46

1.Vue
在这里插入图片描述

以上统一叫做工程化

2.Vue的工程化
NodeJs安装
下载安装,一路next就行了

C:\Windows\System32>npm config set prefix "E:\Java\NodeJS"C:\Windows\System32>npm config set registry https://registry.npmmirror.comC:\Windows\System32>

2.Vue项目创建
在这里插入图片描述

VsCode打开工程文件
Vue项目启动

3.Vue项目的开发流程
初始界面 - index.html（入口页面文件）
这是 Vue 应用的页面入口，是一个标准的 HTML 文件，负责提供 Vue 应用的挂载容器。
#app #代表id选择器
main.js（应用入口逻辑文件）
这是 Vue 应用的逻辑入口，负责初始化 Vue 应用并配置核心依赖。
vue界面
.vue 文件是 Vue 框架特有的单文件组件（Single-File Component，简称 SFC），它的核心作用是将一个组件的模板（HTML）、逻辑（JavaScript）、样式（CSS）封装在同一个文件中，从而实现 “组件化开发” 的思想。
.vue 文件解决了组件化封装和复用的问题，而 HTML、CSS、JS 独立文件解决了应用入口、全局资源共享的问题。它们在 Vue 项目中是分工协作的关系：
Vue 单文件组件方式(ApiDemo.vue)

<!-- 定义JS,控制模板部分的数据和行文(JS) -->
<script setup></script><!-- 模板部分,控制页面结构(HTML) -->
<template><h1>Hello Money</h1>
</template><!-- 样式部分,控制页面样式(CSS) -->
<style scoped></style>

在这里插入图片描述

main.js中引入了全局CSS-main.css
script setup部分（逻辑层）
import { ref } from ‘vue’：引入创建响应式的工具
ref 是 Vue 3 提供的一个函数，专门用于创建 “响应式数据”。你可以把它理解成一个 “魔法包装器”—— 通过它处理的数据，会具备 “自动同步更新” 的能力。
const message = ref(‘Hello Vue3’)：创建响应式变量
响应式的含义是：当 message 的值发生变化时，页面中使用它的地方会自动更新（无需手动操作 DOM）。
style scoped：scoped 是一个特殊属性，它让这里的 CSS 样式仅对当前组件生效（不会污染其他组件的样式）。
简单来说，index.html 是 “物理载体”（提供页面挂载位置），main.js 是 “逻辑引擎”（初始化并启动 Vue 应用），两者配合完成 Vue 工程的启动和渲染。
.vue 文件是 Vue 框架特有的单文件组件（Single-File Component，简称 SFC），它的核心作用是将一个组件的模板（HTML）、逻辑（JavaScript）、样式（CSS）封装在同一个文件中，从而实现 “组件化开发” 的思想。
API风格
ApiDemo.vue
script setup 关键字表示该脚本会在组件创建前执行，内部的变量和函数可以直接在模板中使用，无需额外暴露。
ref：Vue 提供的响应式数据创建函数，用于将基本类型（如数字、字符串）转换为响应式对象（修改时会触发视图更新）。
onMounted：Vue 的生命周期钩子函数，在组件挂载到 DOM 后执行。
button @click=“increment”>count:{{count}}</button 这是一个按钮（button）元素，包含两部分核心逻辑：事件绑定和数据展示。
直接运行,是不会执行最新页面的,因为main.js是引入App.vue
需要把AppDemo.vue 导入到App.vue中,才可以运行
运行后,点击数字会自动增加
小结

4.项目案例
前端页面 EmpList.vue
import axios from ‘axios’ 是在 Vue（或其他 JavaScript 项目）中导入 Axios 库，用于在前端发起 HTTP 请求（如获取数据、提交表单等）。
在 Vue 中，v-model 是一个语法糖，用于实现表单元素（如输入框、复选框等）与响应式数据的双向绑定。它的核心作用是：
数据同步到视图：当响应式数据（如 name）的值变化时，表单元素的显示内容会自动更新。
视图同步到数据：当用户在表单元素中输入内容时，响应式数据（如 name）的值会自动被更新。

<script setup>
// ref 是 Vue 3 提供的响应式数据创建函数，主要用于将基本类型数据（如字符串、数字、布尔值）转换为响应式数据
import { ref } from 'vue'
import axios from 'axios'//声明响应式数据
const name = ref('');
const gender = ref('');
const job = ref('');const userList = ref([]);
//声明函数 ->箭头函数
function search() {// 基于axios发送异步请求,请求服务器加载数据axios.get('http://localhost:8080/emp/list');
}
</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: 80%;margin: auto;
}/* #center {margin-bottom: 20px;
} */#center {display: inline-block;display: flex;align-items: center; /* 垂直居中 */gap: 25px; /* 元素之间的间距 */
}img {width: 50px;
}input, select {width: 17%;padding: 10px;margin-right: 30px;border: 1px solid #ccc;border-radius: 4px;
}.btn{background-color:#ccc
}
</style>