1.【Vue3】前端开发引入、Vue 简介

1. 前端开发引入

1.1 前端开发前置知识

通过之前的学习,已经通过 SpringBoot 和一些三方技术完成了大事件项目的后端开发。接下来开始学习大事件项目的前端开发,前端部分借助两个框架实现:

  • Vue3(一个 JS 框架)
  • 基于 Vue3 实现的页面组件库 Element-Plus

回忆 HTML、CSS、JS:

  • HTML:负责网页的结构(标签: form/table/a/div/span)
  • CSS:负责网页的表现(样式: color/font/background/width/height)
  • JavaScript:负责网页的行为(交互效果)

1.2 JS 导入导出机制

为了更好地学习 Vue3 相关知识点,补充 JS 中一个有关模块化的知识点------导入导出。

使用 script 标签导入 JS 文件时,会将 JS 文件中的全部内容都导入进来,这样就会造成性能上的损失。

而 JS 提供的导入导出机制可以实现按需导入,即:需要什么就导入什么,无需导入 JS 文件中的全部内容。下面介绍从 JS 中导入内容的三种方式:

方式1 :

  • JS 文件中,在定义函数的地方用 export 关键字完成导出
  • HTML 文件中,在 script 标签内用 import 关键字完成导入,格式:import {需要导入的内容} from 'JS文件的位置',注意 script 标签的 type 属性值必须是 module

在 VSCode 中右键➡Open with Live Server

可以看到浏览器中的按钮,点击后,控制台输出文字

方式 2:

方式 1 演示了 JS 导入导出最基本的使用,这种方式在 JS 文件中的函数过多时就不太适用了,需要在每个函数前面添加 export。因此,JS 提供了批量导出的方式来简化,在 JS 文件中通过 export 关键字来批量导出:export{要导出的所有内容},JS 文件中的内容无需改动。

导入或导出时,可以给函数起别名

从 JS 中导入函数后,给函数起别名:

从 JS 中导出函数时,给函数起别名:

方式 3:

如果 JS 文件中导出的内容很多,我们在 HTML 中将所需内容导入时是记不住名字的。为了解决该问题,JS 还提出了默认导出的方式。要完成默认导出,只需在导出时的 {} 前面加 default 关键字。有了默认导出,如果在 HTML 中需要导入这种默认导出的内容,就不需要写 {} 了,而是给导出的内容随便起个名字,如 messageMethods,它就代表了 JS中所有的默认导出内容。接下来,就可以利用 messageMethods. 来调用默认导出的函数:

2. Vue 简介

Vue 是一款用于构建用户界面渐进式的 JavaScript 框架。(官方:https://cn.vuejs.org/)

举个例子:购物网站上会展示各种各样的数据,这些数据都不是写死的,需要访问后台接口去获取这些数据,假如我们现在通过 ajax 异步请求拿到了这些数据,那这些数据如何才能展示到页面上呢?此时就可以用 Vue 来处理。

  • Vue 提供了非常便捷的方式,可以根据数据来渲染页面
  • Vue 提供的功能非常丰富,官方提供的 Vue 核心包中包含了"声明式渲染"和"组件系统"两大功能,基于这个核心包,又以插件的形式提供了"客户端路由"、"状态管理"等功能,当然还提供了专门构建 Vue 工程的构建工具。Vue 提供了这么多功能,我们在开发时都要使用吗?显然不是。我们可以只使用核心包提供的功能,对项目进行局部改造,也就是说,我们的项目中只有部分功能使用 Vue。当然也可以整个工程全部使用 Vue 提供的功能,不仅使用核心包提供的功能,同时使用它的各种插件功能进行工程化开发。正是因为 Vue 既可以进行局部改造,也可以进行整站开发,所以被称为"渐进式框架"。

【附】 Vue 环境搭建:https://blog.csdn.net/weixin_69553582/article/details/129584587

3. VSCode 使用

新建文件:

在文件中写 html,会有提示:

选 html:5,能够自动生成如下 html 标签:

相关推荐
前端太佬2 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
若愚679211 分钟前
Vue3 + OpenLayers 开发教程 ( 三 ) 交互与空间分析
arcgis·vue·交互
京东零售技术11 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
前端大白话27 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys29 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话30 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
cg501741 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬42 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb20041 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼1 小时前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html