Category: 前端

必备UI组件 图标选择器将用到以下几个组件： Icon 图标 Button 按钮 Message 消息提示 Dialog 对话框 组件设计 ...

目前srcviewsorderConfirmationOrderConfirmation.vue已有超过250行代码。这里将此组件进行拆分。...

必备UI组件 省市区选择组件将用到以下几个组件： Select 选择器 组件设计 修改srcrouterindex.ts /* * @Aut...

弹窗优化 目前进入订单页面后，是直接弹窗，但实际使用效果是点击“提交订单”后再弹窗。 优化如下： srcviewsorderConfirma...

DOM完善 修改srcviewsorderListOrderList.vue 我的订单 某什么码1 已取消 某什么码1 ¥588 共3件 i...

真机联调方式 一种方式是手机和电脑连同一个局域网，也就是同一个WiFi 运行项目会在终端显示ip连接的地址： image.png 因为目前我...

不同设备适配 目前是针对普通手机的屏幕尺寸设计，如果需要适配比如平板电脑，等比例放大，需要进行设备配置。 修改publicindex.htm...

项目说明 本项目非原创项目，是在学习视频的同时，自己跟着写一遍，记录学习内容的系列文章。 所以，第一，代码是仿写；第二，代码是自己写的。 项...

vite创建项目，Win+R，cmd： image.png 输入vite-vue3 image.png 这里我们选择vue image.pn...

搭建vite项目的命令。 npm -v 我的目前是6.14.15，升级一下： npm install -g npm 目前是8.3.0 新建v...

必备UI组件 伸缩菜单将用到以下几个组件： Container 布局容器 Menu 菜单 组件设计 修改路由： srcrouterindex...

随着Vue3 和 Vite 版本的不断更新完善，开发体验有了质的飞跃。因此，越来越多的大厂也逐步拥抱 Vue3。 利用Vite 脚手架工具可...

官网：https://vitejs.cn/ vue3发布时，同时发布了vite，——新一代构建工具。 优点： 开发时效率极高 开箱即用，功能...

为了方便查看，我将上文所有内容总结为一图，如下 10组件的基本使用.png 为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，...

为了方便查看，我将上文所有内容总结为一图，如下 v-model及其修饰符.png 为了方便下载，我将相关的高清思维导图及源文件上传至GitH...

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！ 这是关于组件。看文本篇，你将对组件有个清晰的认识 本文目录结构如下： image...

为了方便查看，我将上文所有内容总结为一图，如下 事件处理.png 为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载...

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！ 这是关于v-model及其修饰符。看文本篇，你将对v-model有个清晰的认识 ...

我仅将列表渲染所有内容汇成一图，如下： 列表渲染v-for.png 为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下...

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！ 本文是关于Vue的事件处理及相关修饰符 看文本篇，你将会对Vue的事件处理有个清...

为了方便查看，我将上文所有内容总结为一图，如下 条件渲染.png 为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载...

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！ 本文是关于Vue的条件渲染指令：v-if和v-show 看文本篇，你将会对条件渲...

为了方便查看，我将上文所有内容总结为一图，如下 绑定class和style.png 为了方便下载，我将相关的高清思维导图及源文件上传至Git...

为了方便查看，我将上文所有内容总结为一图，如下 计算属性和监听器.png 为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可...

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！ 本文是关于Vue中的属性绑定：绑定class和内联样式style 看文本篇，你将...

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！ 本文是关于Vue中的配置选项：计算属性和监听器 看文本篇，你将会对这两个选项有个...

为了方便查看，我将上文所有内容总结为一图，如下 配置选项.png 为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载...

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！ 本文是关于Vue中的配置选项：data和methods。 本文目录结构如下： i...

为了方便查看，我将上文模板语法所有内容总结为一图，如下 image.png 为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，...

前言 这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！ 本文内容是关于Vue的模板语法 基本目录如下： image.png 基本介...

为了方便，我将应用实例和组件实例相关内容总结为一图，如下 image 为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步...

Decorator是装饰器的意思，目前还没有定案 它是一种与类（class）相关的语法，用来注释或修改类和类方法 装饰器是一种函数，写成@ ...

前言 这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！ 本文关于应用实例和组件实例 基本目录如下： image.png 创建一个V...

此处分为以下3个部分讲 image.png 组件名 注册组件时，需要提供一个名作为组件名 在 DOM 中使用组件时，建议组件名的字母全小写，...

此处分为以下5个部分讲 image.png 属性的类型 在组件配置项props中，可以以字符串数组形式列出的组件的属性 举例🌰：添加一个自定...

此处分为以下4个部分讲 image.png 概念 非 Prop 的 Attribute指的是组件中没有定义在 props 或 emits选项...

vue3写法 变量声明改变，不用在创建data函数，使用reactive声明，比如： {{state.name}}//这里直接使用 emit...

模板代码准备 lesson 37

Composition API的计算属性computed 传统的计算属性不做介绍。 如下代码： lesson 38

此处分为以下5个部分讲 image.png 定义自定义事件 可将自定义事件定义在组件 emits 选项中，所有事件名可装在一个数组 举例🌰：...

vue3的特点 更多的API特性 体积更小、速度更快 解决遗留问题（比如对TS不友好、代码组件逻辑复用） createApp表示创建一个Vu...

我们知道，在每个组件在被创建时，要经过一系列的初始化过程，比如，需要设置数据监听、编译模板、实例挂载并在数据变化时触发DOM更新等。 在Vu...

目录 Vue3 的新特性 Vue3 的新特性(二) —— Composition-Api Vue3 的新特性(三) —— 生命周期 Vue3...

我们先来看官方对于reactive的解释，官方的解释也非常简单 返回对象的响应式副本 但从这句话我们可以得到以下信息 reactive接受一...

我们知道，Vue3中提到一个叫Tree-shaking的东西，其实也并不是一个新的东西，有人称之为”摇树优化“，什么...

Vue3中组件可以拥有多根 我们知道，在vue2.x中，每个组件只能有一个根，这意味着我们写每个组件模板时都要套一个父元素。vue3为了更方...

v-on就是用于绑定事件的 例如：有个按钮，当点击的时候执行一些操作 click me 上述代码中，v-on:后面的值是一个方法，可以写成m...

vue3中存在一些具有破坏性的变更，比如Global API改为应用程序实例调用 Vue2中很多全局API会改变vue的行为，全局的API会...

关于ref，官方的解释是： 接受一个内部值并返回一个响应式且可变的 ref对象 https://www.vue3js.cn/docs/zh/...

我们知道，ref函数可以创建一个响应式数据，在数据更新时同时更新UI界面 有的时候，我们希望可以显示的控制依赖追踪和触发响应，那就可以使用c...

在vue2.x中，可以通过给元素添加ref=’xxx’属性，然后在代码中通过this.$refs.xxx获取到对应的元素 然而在vue3中时...

vue3中提供了只读相关的函数：readonly、shallowReadonly和isReadonly 三者用途和区别显而易见： reado...

Teleport，被称为传送门组件，用于提供一种简洁的方式，指定其里面内容的父元素 例如，定义一个模态框，该模态框原本是在一个组件中的，但我...

在setup函数中，我们通过ref和reactive函数创建响应式数据，其特点是，每次修改数据都会更新UI界面，这样的问题是非常消耗性能 所...

这篇我们看下toRef和toRefs的基本使用 我们知道ref可以用于创建一个响应式数据，而toRef也可以创建一个响应式数据，那他们之间有...

泛型可以理解为宽泛的类型，通常用于类和函数 一、泛型类 泛型可以用于类和构造器，例如： class Person{ private _val...

reactive的用法与ref的用法相似，也是将数据变成响应式数据，当数据发生变化时UI也会自动更新。不同的是ref用于基本数据类型，而re...

我们知道setup函数是组合API的核心入口函数，使用时需要注意几点： setup函数的执行时机是在beforeCreate和created...