- 博客(59)
- 收藏
- 关注
RSS订阅原创 vue3-pinia使用(末尾有彩蛋)
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。之前用的是 vuex，后面 vue 官方团队不维护了，推荐使用 piniaStore 是用 defineStore() 定义的它的第一个参数要求是一个独一无二的名字// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
2024-03-29 22:32:33
1129
原创 阿里云-系统盘-磁盘扩容
如下图表示/dev/vda3 分区的文件系统类型为 ext4，挂载目录为/。注意 我这里扩容的是系统盘 标识就是 vda 文档是数据盘 是 vdb 或者通过 lsblk 命令查看哪个分区待扩容。建议扩容前 为云盘创建快照，防止误操作数据丢失，也就是点下上面创建快照的按钮的事情，然后定义名称即可。正常按照文档，通过上面的检测工具可以生成扩容命令，我这里应该是升级了系统规格导致不能使用这种方式。之前是测试环境磁盘用的默认的有 40G，后面升级到正式的 磁盘怕不够用打算升级到 100G，
2024-02-25 11:35:23
837
原创 Https证书续签-acme.sh-腾讯云之DnsPod
则继续加*申请 比如 *.api.abc.com 则 这样申请的证书 只针对 api.abc.com 是泛解析的适用于 11.api.abc.com 22.api.abc.com 依此类推。比如你要解析的域名是 abc.com 泛域名是 *.abc.com 这样申请下来的证书只对二级有效 比如 11.abc.com 22.abc.com 等等 只针对二级域名可以通用这个泛域名证书。可以把原来 ename 上的解析先导出来 然后导入到 DnsPos 上面解析，为了后面解析可以更快的切换。
2024-02-20 23:57:01
998
原创 vue3-动画技巧
Vue 提供了 <Transition> 和 <TransitionGroup> 组件来处理元素进入、离开和列表顺序变化的过渡效果。但除此之外，还有许多其他制作网页动画的方式在 Vue 应用中也适用。这里我们会探讨一些额外的技巧。
2024-02-19 23:18:19
680
原创 vue3-渲染机制
Vue 编译器自动地会提升这部分 vnode 创建函数到这个模板的渲染函数之外，并在每次渲染时都使用这份相同的 vnode，渲染器知道新旧 vnode 在这部分是完全相同的，所以会完全跳过对它们的差异比对。如果我们有两份虚拟 DOM 树，渲染器将会有比较地遍历它们，找出它们之间的区别，并应用这其中的变化到真实的 DOM 上。举例来说，包含多个根节点的模板被表示为一个片段 (fragment)，大多数情况下，我们可以确定其顺序是永远不变的，所以这部分信息就可以提供给运行时作为一个更新类型标记。
2024-02-18 22:24:24
936
2
原创 vue3-深入响应式系统
这个术语在今天的各种编程讨论中经常出现，但人们说它的时候究竟是想表达什么意思呢？本质上，响应性是一种可以使我们声明式地处理变化的编程范式。一个经常被拿来当作典型例子的用例即是 Excel 表格：这里单元格 A2 中的值是通过公式 = A0 + A1 来定义的 (你可以在 A2 上点击来查看或编辑该公式)，因此最终得到的值为 3，正如所料。但如果你试着更改 A0 或 A1，你会注意到 A2 也随即自动更新了。而 JavaScript 默认并不是这样的。
2024-02-17 11:18:06
1129
原创 vue3-组合式 API
组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
2024-02-16 20:19:31
1287
1
原创 vue3-使用 Vue 的多种方式
如果你的后端框架已经渲染了大部分的 HTML，或者你的前端逻辑并不复杂，不需要构建步骤，这是最简单的使用 Vue 的方式。测试工具 SPA 一般要求后端提供 API 数据接口，但你也可以将 Vue 和如 Inertia.js （https://inertiajs.com/）之类的解决方案搭配使用，在保留侧重服务端的开发模型的同时获得 SPA 的益处。这需要更多的前期 JS 加载和激活成本，但后续的导航将更快，因为它只需要部分地更新页面内容，而无需重新加载整个页面。否则，多页 SSG 将是更好的选择。
2024-02-15 18:54:13
969
原创 vue3-生产部署-性能优化
如果你的用例对页面加载性能很敏感，请避免将其部署为纯客户端的 SPA，而是让服务器直接发送包含用户想要查看的内容的 HTML 代码。Vue 的响应性系统默认是深度的。需要提醒的是，只减少几个组件实例对于性能不会有明显的改善，所以如果一个用于抽象的组件在应用中只会渲染几次，就不用操心去优化它了。通过适当的代码分割，页面加载时需要的功能可以立即下载，而额外的块只在需要时才加载，从而提高性能。当部署到生产环境中时，我们应该移除所有未使用的、仅用于开发环境的代码分支，来获得更小的包体积和更好的性能。
2024-02-14 14:57:11
1243
原创 vue3-应用规模化-路由和状态
客户端 vs. 服务端路由服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。然而，在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。在这类单页应用中，“路由
2024-02-13 10:20:15
1039
原创 vue3-应用规模化-工具链
如果因为某些原因，在有构建步骤时，你仍需要浏览器内的模板编译，你可以更改构建工具配置，将 vue 改为相应的版本 vue/dist/vue.esm-bundler.js。不过只推荐在你已经有一套基于 Jest 的测试集、且想要迁移到基于 Vite 的开发配置时使用，因为 Vitest 也能够提供类似的功能，且后者与 Vite 的集成更方便高效。Vue 的浏览器开发者插件使我们可以浏览一个 Vue 应用的组件树，查看各个组件的状态，追踪状态管理的事件，还可以进行组件性能分析。
2024-02-12 17:38:30
978
原创 vue3-应用规模化-单文件组件
单文件组件 简单来说就是 一个个 .vue 结尾的文件，它改变了我们书写前端代码的方式。将一个逻辑功能或者模板封装在一个文件里面，方便其他组件调用。用多了也就习惯了。。。
2024-02-11 18:28:06
1424
原创 HTTPS证书终于挥下了无情的镰刀-HTTPS证书自动续签方案
ECC 证书：ECC 证书是基于 ECC 算法的 SSL 证书，ECC 证书中文名称为椭圆加密算法，新一代算法趋势主流，一般采用 256 位加密长度，加密速度快，效率更高，对服务器资源消耗低，而且最重要的是更安全，抗攻击型更强。RSA 证书：RSA 证书是基于 RSA 算法的 SSL 证书，RSA 算法是国际标准算法，应用较早，最为普及，比 ECC 算法的适用范围更广，兼容性更好，一般采用 2048 位的加密长度，但是对服务端性能消耗高。之前是免费 1 年的，数量也够用，也就懒得折腾了。
2024-02-10 20:50:21
2378
原创 vue3-内置组件-Suspense
这意味着如果组件关系链上有一个 ，那么这个异步组件就会被当作这个 的一个异步依赖。在挂起状态期间，展示的是后备内容。 组件自身目前还不提供错误处理，不过你可以使用 errorCaptured 选项或者 onErrorCaptured() 钩子，在使用到 的父组件中捕获和处理异步错误。有了 组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。
2024-02-09 17:03:51
1430
原创 vue3-内置组件-Teleport
这类场景最常见的例子就是全屏的模态框。对于此类场景，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。这个组件中有一个 <button> 按钮来触发打开模态框，和一个 class 名为 .modal 的 <div>，它包含了模态框的内容和一个用来关闭的按钮。
2024-02-08 23:36:30
547
原创 vue3-内置组件-KeepAlive
KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。在下面的例子中，你会看到两个有状态的 组件——A 有一个计数器， 而 B 有一个通过 v-model 同步 input 框输入内容的文字展示。 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。这两个钩子不仅适用于 缓存的根组件，也适用于缓存树中的后代组件。
2024-02-07 23:08:25
1085
原创 vue3-内置组件-TransitionGroup
通过在 JavaScript 钩子中读取元素的 data attribute，我们可以实现带渐进延迟的列表动画。上面的示例有一些明显的缺陷：当某一项被插入或移除时，它周围的元素会立即发生“跳跃”而不是平稳地移动。是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。列表中的每个元素都必须有一个独一无二的 key attribute。过渡模式在这里不可用，因为我们不再是在互斥的元素之间进行切换。
2024-02-06 22:56:35
625
原创 vue3-内置组件-Transition
你也可以向 传递以下的 props 来指定自定义的过渡 class：leave-to-class 你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用，比如 Animate.css：安装 animate.css 动画库，(已安装的可以忽略)-- 假设你已经在页面中引入了 Animate.css -->
2024-02-05 22:50:36
1339
原创 vue3-插件
为了更好地理解如何构建 Vue.js 插件，我们可以试着写一个简单的 i18n (国际化 (Internationalization) 的缩写) 插件。我们的 $translate 函数会接收一个例如 greetings.hello 的字符串，在用户提供的翻译字典中查找，并返回翻译得到的值。请谨慎使用全局属性，如果在整个应用中使用不同插件注入的太多全局属性，很容易让应用变得难以理解和维护。让我们从设置插件对象开始。现在，插件用户就可以在他们的组件中以 i18n 为 key 注入并访问插件的选项对象了。
2024-02-04 22:42:27
665
原创 vue3-自定义指令
vue 除了内置的制指令（v-model v-show 等）之外，还允许我们注册自定义的指令。vue 复用代码的方式：组件：主要是构建模块。组合式函数：侧重有状态的逻辑。自定义指令：主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。定义:一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。示例：input 元素自动获取焦点// 在模板中启用 v-focus</script><template></div>效果。
2024-02-03 23:12:30
946
原创 vue3-逻辑复用
无状态逻辑的函数_：它在接收一些输入后立刻返回所期望的输出。比如 时间格式化的函数。有状态逻辑的函数: 有状态逻辑负责管理会随时间而变化的状态。比如 跟踪当前鼠标在页面中的位置。在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。
2024-02-02 21:16:29
923
原创 vue3-深入组件-依赖注入
如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。若使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦，所以被称为“prop 逐级透传”，显然是我们希望尽量避免的情况。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。当提供 / 注入响应式的数据时，建议尽可能将任何对响应式状态的变更都保持在供给方组件中。
2024-02-01 23:26:30
1195
原创 vue3-深入组件-插槽
具名作用域插槽的工作方式也是类似的，插槽 props 可以作为 v-slot 指令的值被访问到：v-slot:name="slotProps"。 元素是一个插槽出口 (slot outlet),，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 节点都被隐式地视为默认插槽的内容。其他非字符串的值会触发警告。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。
2024-01-31 23:37:19
664
原创 win wsl2 Ubuntu-22.04 设置时间为国内时间
使用 wsl2 安装 Ubuntu-22.04 后 时间不正确，主要有两个原因时区设置不正确，国内为京八区。时区正确后，没有同步时间。（大部分人容易忽略这一点）Linux 默认情况下使用 UTC 格式作为标准时间格式，如果在 Linux 下运行程序，且在程序中指定了与系统不一样的时区的时候，可能会造成时间错误。我本身的开发环境是基于这个,所以时间不一致，开发会有问题。桌面版的 Ubuntu 有可视化界面，故而方便设置，但是 Sever 版只能通过命令来设置。
2024-01-30 20:27:36
929
原创 vue3-深入组件-透传属性
template Fallthrough attribute: {{ $attrs }} 这个 $attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。需要注意的是，虽然这里的 attrs 对象总是反映为最新的透传 attribute，但它并不是响应式的 (考虑到性能因素)。如果一个子组件的根元素已经有了 class 或 style attribute，它会和从父组件上继承的值合并。
2024-01-29 22:58:17
619
原创 NodeJs环境安装与配置
最近电脑重装了系统，开发环境啥的都得重装，顺便记录下 nodeJs 的安装与配置，方便需要的同学查看，也方便自己以后查找。
2024-01-28 23:10:25
905
原创 win11 系统 WSL2 备份与还原
win11 系统想要使用 linu 开发环境，除了虚拟机，就是 wsl 好使了。但是 wsl 如过用了一段时间里面环境工程配置迁移麻烦如果重装系统后能直接备份还原就方便了。
2024-01-27 09:52:25
387
原创 vue3-深入组件-组件 v-model
/子组件})</script><template></div></style>//父组件</script><template></div></style>要根据修饰符有条件地调整值的读取/写入方式，我们可以将get和set选项传递给defineModel().这两个选项接收模型引用的 get/set 值，并应返回转换后的值。
2024-01-26 23:31:48
1063
原创 vue3-深入组件-事件
camelCase（小驼峰命名形式)比如：changeStatus在父组件中使用 kebab-case 形式使用和原生 DOM 事件不一样，组件触发的事件没有冒泡机制。你只能监听直接子组件触发的事件。平级组件或是跨越多层嵌套的组件间通信应使用一个外部的事件总线或是使用一个全局状态管理方案。
2024-01-25 22:41:50
458
原创 vue3-深入组件-组件注册和props更多细节
每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。对象形式的 props 声明不仅可以一定程度上作为组件的文档，而且如果其他开发者在使用你的组件时传递了错误的类型，也会在浏览器控制台中抛出警告。所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。在 main.ts 中。全局注册的组件可以在此应用的任意组件的模板中使用，所有的子组件也可以使用全局注册的组件。
2024-01-24 22:53:45
1191
1
原创 win11开机后频繁刷新桌面，任务栏不显示，文件资源管理器explorer报错ntdll.dll
sfc”是“系统文件检测”程序，它是一个在命令提示符下使用的实用程序，只有是管理员才能使用该程序，这个程序的作用就是检测系统文件，如果检测到受保护的文件已经被不正确的文件覆盖，它就从系统文件备份（就是 dllcache）中提取正确的系统文件，替换不正确的文件。除了上面的办法，搞了好久 没有啥好办法，有其他处理办法的朋友，记得留意，拜谢！不知道是安装了什么软件还是系统升级造成的，好长时间不重启电脑了，然后重启了下电脑。最终直接在控制面板输入 explorer 可以直接打开 文件管理器 然后就正常了。
2024-01-23 21:48:12
612
原创 vue3-生命周期
可以很容易的看出 vue3 的钩子函数基本是再 vue2 的基础上加了一个 on,但也有两个钩子函数发生了变化。从创建->初始化数据->编译模版->挂载实例到 DOM->数据变更后更新 DOM ->卸载组件。在各个周期运行时，会执行钩子函数，让开发者有机会在特定阶段运行自己的代码。尤大的介绍是 mount 比 Destroy 更形象，也和 beforeMount 相对应。生命周期简单说就是 vue 实例从创建到销毁的过程。vue 组件实例都有自己的一个生命周期。
2024-01-21 16:24:41
535
原创 vue3-模版引用
使用了 <script setup> 的组件是默认私有的,一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露。ref 属性 允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。一个子组件使用的是选项式 API ,父组件对子组件的每一个属性和方法都有完全的访问权。除了使用字符串作为名字，还可以使用一个函数，函数会在每次组件更新时都被调用。应该注意的是，ref 数组并不保证与源数组相同的顺序。
2024-01-20 23:32:18
1317
2
原创 vue3-侦听器
在 setup() 或 <script setup> 中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。如果你需要侦听一个嵌套数据结构中的几个属性，watchEffect() 可能会比深度侦听器更有效，因为它将只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性。一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。
2024-01-19 21:51:14
385
原创 vue3-表单输入绑定
v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。v-model 还可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合。
2024-01-18 20:38:01
441
原创 vue3-事件处理
与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。在上面的例子中，仅会在 $event.key 为 'PageDown' 时调用事件处理。v-on 提供了事件修饰符。.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
2024-01-17 22:44:17
482
原创 vue3-列表渲染
Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。
2024-01-16 22:35:24
977
原创 vue3-条件渲染
在这种情况下我们可以在一个 <template> 元素上使用 v-if，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素。和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。v-else-if 提供的是相应于 v-if 的“else if 区块”。v-if 指令用于条件性地渲染一块内容。
2024-01-15 23:54:10
552
原创 vue3-类与样式绑定
当你在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们加上相应的前缀。如果浏览器不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。对于只有一个根元素的组件，当你使用了 class attribute 时，这些 class 会被添加到根元素上并与该元素上已有的 class 合并。同样的，如果样式对象需要更复杂的逻辑，也可以使用返回样式对象的计算属性。绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象。Class 的绑定也是同样的效果。
2024-01-14 23:27:23
444
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人