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

从java到vue3：第一天

news 2025/7/3 12:44:46

重点是vue3的学习

文章目录

前言
一、vue是什么？
二、使用步骤
- 1.下载node.js
- 2.常用命令及创建vue工程
- 3.初始文件
- 4.一个简单的效果
- - 1.组件包里面的一个组件
  - 2.根组件
总结

前言

下载node.js，node常用命令，初始化工程。学了像ssm、redis等后端技术，需要对前端进行扩展，说白了，你学Java，基本上是全干工程师。收集各方面资料，形成自己的理解，仅供参考。

一、vue是什么？

1.vue是一种前端的用于事件的渐进式框架，用于快速构建用户界面UI和单面应用程序SPA。
2.前端主要四要素：
逻辑： if、for
事件：DOM、BOM操作
视图：HTML、CSS
通信：ajax、axios
3.常见前端框架区别

工具/框架	类型	数据绑定	学习曲线	适用场景
jQuery	DOM 操作库	无	低	传统网站、简单交互
Bootstrap	CSS/UI 框架	无	低	快速搭建响应式页面
React	UI 框架	单向	中	复杂 SPA、高性能需求
Vue	渐进式框架	双向/单向	低-中	灵活项目、快速开发
Angular	全功能框架	双向	高	大型企业应用、强类型需求

4.为什么叫渐进式？
允许开发者根据项目需求逐步采用其功能，而非强制要求一次性全盘接受整套框架，可以像JQuery一样局部使用。
5.学了有什么用？
快速构建动态网站，需要使用事件操作与后端进行交互，与用户交互，快速响应式开发。

二、使用步骤

1.下载node.js

直接搜索node.js进行下载即可，进入官网下载页面后，选择左边的稳定版。
查看是否安装。打开cmd，输入node，弹出版本信息。
vue和vite环境都依赖于node环境。所以我们要下载。

2.常用命令及创建vue工程

在需要进行vue工程的文件夹里打开cmd，如果权限不够需要进行声明权限。

1.查看版本信息：

node

2.创建vue工程：

npm create vue@latest

根据需求选择功能。
在这里插入图片描述

3.进入后需要加载依赖，类似于java的maven导入坐标并加载：

npm i

在这里插入图片描述

4.启动前端工程：
因为设置了通过dev启动，以vite的方式进行启动的，通过在调试下面的dev进行启动。

npm run dev

在这里插入图片描述
5.停止服务器：
在终端中使用快捷键：ctrl+c即可停止服务器。

3.初始文件

在这里插入图片描述

public里面的favicon.ico是页签图标。
index.html它只是一个挂载容器，相当于把启动挂载到入口文件里面去，它是入口文件。
App.vue是一个根组件，类似于springboot的主配置类。
components是组件文件夹。

index.html:

<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

main.ts就相当于springboot的启动类。
main.ts:

// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'
// 启动
createApp(App).mount('#app')

一个简单的App.vue示例：

<template><!-- 写html结构 --><div class="app"><h1>你好啊！</h1></div></template><script lang="ts">
// 写js或ts 推荐ts
export default {name:'App' // 组件名
}
</script><style>
/* 写样式 */
.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>

4.一个简单的效果

注意这里是vue2语法，同样适用于vue3中。

1.组件包里面的一个组件

template里面写HTML：button表示绑定了一个事件，表示点击触发函数。
script里面写js或ts：定义函数，data 函数返回一个对象，包含组件的响应式数据，也就是返回给template中，在template中进行引用。
这是vue2的写法，叫做OptionsAPI，选项式的设计风格，但我站在后端的角度来思考，我觉得这一点都不适应，感觉很别扭，就像我们设计类的时候，有各自的属性与方法，它们是绑定在一起的，而这样分散的设计我个人觉得不满足高内聚，所以vue3优化了，适用了CompositonAPI，通俗的讲可以一坨一坨的写，就像类一样。
style里面写样式：里面是一些css选择器的定义。

<template><!-- 写html结构 --><div class="person"><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showTel">查看联系方式</button></div>
</template><script lang="ts">
// 写js或ts 推荐ts
export default {name:'Person', // 组件名data() {return {name:'张三',age:18,tel:'13888888888'} },methods:{changeName(){this.name = 'zhang-san'},changeAge(){this.age += 1},showTel(){alert(this.tel)}}
}
</script><style scoped>
/* 写样式 scoped表示本文件中写的样式只作用于本文件*/.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}.button {margin: 0 5px;}
</style>

OptionsAPI:

在这里插入图片描述
CompositionAPI:

2.根组件

<template><!-- 写html结构 --><div class="app"><h1>你好啊！</h1><Person/></div></template><script lang="ts">
// 1.导入组件
import Person from './components/Person.vue'
// 写js或ts 推荐ts
export default {name:'App', // 组件名components:{Person} // 2.注册组件
}
</script><style>
/* 写样式 */
.app {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>