文章目录
目录
概要
整体架构流程
项目案例
1.如何把html页面改写到vue项目中
2.引入element-plus
3.v-model双向数据绑定
4.表单验证
概要
Vue 3 是 Vue.js 的最新主要版本,它带来了一些重大改进和新特性:
Composition API:提供了更灵活的代码组织方式,特别适合处理复杂逻辑。
性能提升:通过使用 Proxy 作为响应式系统的基础,Vue 3 改善了性能和内存使用。
新内置组件:如 Fragment、Teleport 和 Suspense,增加了开发灵活性。
更好的 TypeScript 支持:适合大型应用开发,提供更强的类型检查。
树摇优化:减少了生产环境的打包体积。
Vue 3 的这些更新使其成为一个适合现代 Web 开发的高效框架。
整体架构流程
前期准备
环境准备:
确保你的开发环境中安装了Node.js和npm或yarn等包管理器。安装Vue CLI,这是一个Vue项目脚手架工具,可以快速生成项目基础结构。创建项目:
使用Vue CLI创建新项目,可以通过命令行选择预设或手动选择特性。或者使用Vite作为更现代的前端构建工具,它提供了更快的启动速度和热模块替换。项目结构:
理解Vue项目的基本结构,包括src
、public
、node_modules
等目录。src
目录通常包含components
、views
、router
、store
等子目录。 依赖安装:
安装项目所需的依赖,如Vue Router用于路由管理,Vuex或Pinia用于状态管理。安装UI框架(如Element Plus、Vuetify等)和其他工具库。项目案例
1.如何把html页面改写到vue项目中
创建Vue组件
对于HTML页面中的每个主要部分,你都可以创建一个Vue组件。代码中有一个头部、一个主体和一个底部,你可以创建三个组件:App.vue、home.vue和login.vue
在Vue项目中,views文件夹通常用于存放视图文件。这些视图文件代表了项目中的不同页面或屏幕。每个视图文件都是一个Vue组件,它们定义了页面的结构、样式和行为。
安装配置vue环境:
1.下载安装node.js https://nodejs.org/en/download/
2.安装vue及脚手架 npm install vue -g或者cnpm install vue -g
3.安装webpack模板 npm install webpack –g
4.安装脚手架vue-cli npm install vue-cli -g
2.引入element-plus
以下是如何在Vue 3项目中全局引入Element Plus的步骤:
1.在Vue项目中全局引入Element Plus通常意味着你希望在整个应用中使用Element Plus的组件,而不需要在每个组件中单独引入。
全局引入通常是在项目的入口文件(如main.js或main.ts)中完成的。
2.使用npm安装:
3.使用组件进行登录注册过程,修改和添加元素,在网页中显示相关样式
3.v-model双向数据绑定
v-model 是 Vue.js 中用于实现表单元素和 Vue 实例数据之间的双向数据绑定的指令。它确保了输入或选择框的值与 Vue 实例的数据保持同步
通过 Vue 的 v-model 指令实现了数据的双向绑定。用户输入的内容会实时更新到 Vue 实例的 loginForm 对象中,同时如果 loginForm 对象中的数据发生变化,输入框的内容也会相应更新。
4.表单验证
表单验证所需事件:
1、所用到的三个事件:onfocus(焦点聚焦事件)、onblur(焦点离开事件)、onclick点击事件)。
2、利用事件触发函数,函数中执行校验的信息。
3、使用butten按钮提交事件
1.设置验证方法和绑定方法,要求密码长度和表单数据绑定。
2.双向绑定和错误信息提示
rules 对象中定义了三个字段的验证规则:username、password 和 confirmPassword。每个字段的验证规则都是一个数组,数组中的每个元素都是一个验证对象,包含 required、message、trigger 以及可能的 min 和 max 属性。
这些属性用于指定字段是否必填、验证失败时的提示信息、触发验证的事件以及验证字段长度的范围。
小结
Vue 3 在性能上相比 Vue 2 有以下几个具体的提升:
更小的打包体积:Vue 3 的核心库被重写为更小的、可按需加载的内部模块,这使得通过 tree-shaking 可以减少高达 41% 的打包体积。
新的 v-memo
指令:Vue 3.2 引入了 v-memo
指令,它允许开发者记忆模板树的一部分,这样可以跳过虚拟 DOM 的 diff 过程,甚至不需要创建新的 VNodes,从而在某些场景下(如大型 v-for
列表)实现最大性能提升。
更好的 TypeScript 集成:Vue 3 的代码库使用 TypeScript 编写,自动生成的类型定义始终保持最新,并且 Composition API 与类型推断协同工作得很好。
参考文章
《vue3实战!登录注册前端》(链接: https://www.bilibili.com/video/BV17d4y1D73W/?share_source=copy_web&vd_source=fc6bbd1d3a8d940c2c204ea179ccba05,作者:小河酱呀)
图片:来自bilibili