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

vue-study（1）

news 来源：原创 2025/7/1 19:48:15

黑马智数项目

黑马智数是一个数字化园区管理项目，该项目后台可以在线管理园区内的楼宇、企业、车辆和一体杆等资源，可视化大屏通过园区3D模型实时展示园区概况。通过该项目能学到如何用qiankun搭建微前端架构、用Echarts进行数据可视化、以及前沿的3D模型展示等技术方案。
在这里插入图片描述

在这里插入图片描述

p和div区别

在这里插入图片描述

const count = ref(1) 不是定义常量吗

在这里插入图片描述

=》

在这里插入图片描述

没有函数名的函数怎么调用哇

在这里插入图片描述

const count = ref(1)
const double = computed(() => count.value * 2)

const list = [
{ name: ‘苹果’, quantity: 2 },
{ name: ‘香蕉’, quantity: 3 }
]

const total = list.reduce((sum, item) => sum + item.quantity, 0)
// sum 最初是 0，然后加上每一项的 quantity
// => 0 + 2 + 3 = 5

vue变量在这里插入图片描述

在这里插入图片描述

reduce

在这里插入图片描述

js对象：

作用域

事件

在这里插入图片描述
js添加事件

resize

在这里插入图片描述

onMounted

在这里插入图片描述
vue
Vue 就是一套写网页的“超级工具包”，它能让你写网页更快、更清晰、更高级 ✨

在这里插入图片描述
vue结构

vue入门：

好的，这些指令是用来创建和运行一个 Vue 项目的。让我来简单解释一下每个指令的作用：

1. `npm create vue@latest`

这个指令是用来创建一个新的 Vue 项目。它会自动帮你生成一个包含基本文件和配置的项目框架。

npm 是一个包管理工具，用来安装和管理项目依赖。
create vue@latest 是一个命令，告诉 npm 使用最新的 Vue 创建工具来生成项目。
运行这个指令后，它会提示你输入项目名称，然后生成一个文件夹，里面包含了 Vue 项目的基本结构。

2. `cd <your-project-name>`

这个指令是让你进入刚才创建的项目文件夹。

cd 是“change directory”的缩写，意思是切换目录。
<your-project-name> 是你刚才创建的项目文件夹的名字。比如你的项目叫 my-vue-app，就写 cd my-vue-app。
这一步是为了让你在命令行中进入项目的根目录，方便后续操作。

3. `npm install`

这个指令是用来安装项目依赖的。

Vue 项目需要一些额外的工具和库来运行，比如 Vue 本身、构建工具等。
运行 npm install 会根据项目根目录下的 package.json 文件，自动下载并安装所有需要的依赖。
这一步是必须的，否则项目无法正常运行。

4. `npm run dev`

这个指令是用来启动开发服务器的。

npm run 是用来运行 package.json 文件中定义的脚本。
dev 是一个脚本名称，通常用于启动开发服务器。
运行这个指令后，Vue 项目会在本地启动一个开发服务器，你可以通过浏览器访问 http://localhost:3000（或其他端口）来查看项目运行效果。
开发服务器还有一个好处：当你修改代码时，它会自动重新加载页面，方便调试。

总结

这些指令的流程是：

创建一个 Vue 项目。
进入项目目录。
安装项目依赖。
启动开发服务器，查看项目运行效果。

希望这些解释清楚了！如果你还有疑问，随时问我哦。

为什么不在app.vue里面写代码，而是在HTML文件里写代码，VUE文件和HTML文件的区别
在这里插入图片描述

<!-- HTML 文件结构 -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Vue 应用示例</title>
</head>
<body><div id="app">{{ message }}</div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script>const { createApp } = VuecreateApp({data() {return {message: '你好，Vue！'}}}).mount('#app')</script></body>
</html>