重点是vue3的学习
前言
- 下载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>
总结
- 简单的入了个门，转换了思维模式，既然要做后端，既然要做项目，前端也应该去学习。
学习了node.js是vue的依赖环境，常用的node命令来启动vue工程，学习了vue的基本结构，通过一个简单的例子实现了前端工程，明白了OptionsAPI与Composition的区别。