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

1.Vue

以上统一叫做工程化

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

java 复制代码

C:\Windows\System32>npm config set prefix "E:\Java\NodeJS"

C:\Windows\System32>npm config set registry https://registry.npmmirror.com

C:\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,控制模板部分的数据和行文(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）的值会自动被更新。

js 复制代码

<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>

import axios from 'axios'
axios 安装依赖 npm install axios
页面展示