随笔分类 - Vue
摘要：引言 在现代前端应用中，模态框(Modal)是最常用的UI组件之一。然而，随着应用规模的增长，模态框的状态管理往往会变得混乱。本文将介绍一种基于 Pinia 和 Vue 3 Composition API 的类型安全模态框管理方案，帮助你优雅地处理应用中的各种模态框状态。 核心概念解析 1. Pin
阅读全文
摘要：node-sass 不支持 >>> 语法，推荐改用 /deep/。后来，node-sass 被 deprecated，推荐使用 dart-sass。但 dart-sass 又和 /deep/ 有冲突。所以，如果你使用 vue2 同时又使用 dart-sass，只剩一种选择 ::v-deep。 <st
阅读全文
摘要：<component :is="isGroup ? 'TransitionGroup' : 'Transition'"></component> 如果 :is 的值为字符串而不是导入的组件时，需要手动注册组件。 <script> import { Transition, TransitionGrou
阅读全文
摘要：🎁 点击这里 获取国庆头像。通过 Vue3 + Vant（组件库） + Vite 构建。 应用的流程 在做之前，先思考它的流程： 上传头像 选择头像模板 保存新头像 进入应用放出节日祝福与简单的使用介绍。 开始仅显示一个上传头像按钮。这样做的好处是，直接固定第一步操作。如果将模板和保存按钮显示出来
阅读全文
摘要：摘要 在单文件组件样式中支持使用组件状态驱动的 CSS 变量（ CSS 自定义属性）。 基础示例 <template> <div class="text">hello</div> </template> <script> export default { data() { return { colo
阅读全文
摘要：vue script setup 已经官宣定稿。本文主要翻译了来自 0040-script-setup 的内容。 摘要 在单文件组件（SFC）中引入一个新的 <script> 类型 setup。它向模板公开了所有的顶层绑定。 基础示例 <script setup> //imported compon
阅读全文
摘要：npm i -D mockjs 根目录新建 mock 文件夹 mock/utils.js const fs = require('fs'); const path = require('path'); module.exports = { getJsonFile:function (filePath
阅读全文
摘要：使用步骤 1.安装 npm i --save @fortawesome/fontawesome-svg-core Using Vue 2.x $ npm i --save @fortawesome/vue-fontawesome@latest Using Vue 3.x npm i --save @
阅读全文
摘要：使用步骤 npm i amfe-flexible postcss-px2rem -D /vue.config.js const px2rem = require('postcss-px2rem') module.exports = { // ... css: { loaderOptions: { p
阅读全文
摘要：为什么需要 Teleport？ 以 Dialog 组件为例，通常需要在一个组件中引入 Dialog 组件。然而，有时一部分逻辑属于 Dialog 所在的组件中，从技术角度来看，最好将这一部分移动到根节点之外的位置。 另外一个问题， 当 Dialog 组件使用 position: absolute 相
阅读全文
摘要：什么是 DOM？ 如果我们把这个 HTML 加载到浏览器中，浏览器创建这些节点，用来显示网页。所以这个HTML映射到一系列DOM节点，然后我们可以使用JavaScript进行操作。例如： let item = document.getElementByTagName('h1')[0] item.te
阅读全文
摘要：前置 从创建一个简单浏览器导航首页项目展开，该篇随笔包含以下内容的简单上手： vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容，限于篇幅，不容易展开叙述。由于项目逻辑简单，只使用了少量 API，我只是写这个小项目过把手瘾，所以对应标题 上手。如果您只是想学习
阅读全文
摘要：前置 点击按钮切换搜索引擎 搜索框跟随切换改变样式 使用 vue 最快了 template 为了方便扩展，使用 v-for 循环渲染出按钮，绑定切换搜索引擎的 method ， 传入不同名称以区别搜索引擎。按钮的样式也动态绑定。 输入框动态绑定样式，在点击按钮切换搜索引擎时，搜索框绑定的样式对应的
阅读全文
摘要：原文链接: https://increment.com/frontend/making-vue-3 在过去的一年里，Vue 团队一直在研究 Vue.js 的下一个主要版本，我们希望在 2020 年上半年发布。这项工作在撰写本文时还在进行中），关于 Vue 新的主要版本的想法是在 2018 年底形成的
阅读全文
摘要：前置 大小 vue 项目都离不开组件通讯, 在这里总结一下vue组件通讯方式并列出, 下面是一些简单的例子。如有错误，欢迎指正。 温馨提示: 下文没有列出 vuex, vuex 也是重要的组件通讯方式。 props 最常用的组件通讯方式 值可以是数组或对象，使用对象时可以配置高级选项，如类型检测、自
阅读全文
摘要：原因： 没有使用catch捕获方法 解决方法： 重写 Router 原型链上的 push、replace 方法
阅读全文
摘要：步骤 ` 原理 是命名空间 编译css module时，会把css中的选择器放到 这个命名空间里
阅读全文
摘要：``` Histort api a,html b,html Hash #a.html #b.html ```
阅读全文
摘要：这个函数不是必须的，除非你想要完美结合 TypeScript 提供的类型推断来进行项目的开发。 这个函数仅仅提供了类型推断，方便在结合 TypeScript 书写代码时，能为 setup() 中的 props 提供完整的类型推断。 import { createComponent } from 'v
阅读全文
摘要：介绍 通过 ref() 还可以引用页面上的元素或组件。 DOM 的引用 <template> <div> <h3 ref="h3Ref">TemplateRefOne</h3> </div> </template> <script> import { ref, onMounted } from '@
阅读全文
浙公网安备 33010602011771号