Vue 组件间的通信方式

2022-09-28
阅读 10 分钟
991
在 Vue 组件库开发过程中,Vue 组件之间的通信一直是一个重要的话题,虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问题,但是在组件库内部使用 Vuex 往往会比较重,本文将系统的罗列出几种不使用 Vuex,比较实用的组件间的通信方式,供大家参考。

前端该如何优雅地 Mock 数据

2022-08-09
阅读 3 分钟
1.1k
一、什么是 MockMock 在软件开发领域,我们将其理解成 “模拟数据”、“虚假数据”。二、Mock 的好处好处有很多,一句话概括,有了 Mock,前后端人员只需要定义好接口文档就可以开始并行工作,互不影响。三、实现 Mock1.安装 node.js2.安装其他依赖包

mixin-- 混入

2022-06-10
阅读 2 分钟
1.2k
mixin 是 vue 组件复用功能的技术之一 他可以把多个组件中重复出现的属性和方法进行封装方便多次调用使用混入就是把组件多次使用的属性和方法等内容进行封装新建一个 mixin 的文件夹用来容纳混入的封装 {代码...} 调用全局混入 --mixin慎用可能会造成代码的污染、 {代码...} ​局部混入 --mixins {代码...} Vue 生命周期...

Vue 中 JSX 的基本用法

2022-06-08
阅读 8 分钟
1.7k
基本用法首先需要约定一下,使用 JSX 组件命名采用首字母大写的驼峰命名方式,样式可以少的可以直接基于 vue-styled-components 写在同一个文件中,复杂的建议放在单独的_Styles.js_文件中,当然也可以不采用 CSS-IN-JS 的方式,使用 Less/Sass 来写,然后在文件中 import 进来。

三分钟让你了解 vue 中的父子通讯

2022-05-23
阅读 3 分钟
1.1k
封装的思想 , 把页面上可以重复使用的部分封装成为一个组件,从而方便项目的开发和维护一个页面,可以拆分成一个个组件,一个个组件就是一个独立的整体,可以拥有自己的结构。样式和行为.

vue 自从使用了组件,工作量减去了一半

2022-05-11
阅读 2 分钟
795
知识付费使用 script 标签引入 Vue.js。在项目中也可以使用组件,完成一些公共业务。以 H5 登录弹窗为例,对在知识付费中使用组件进行说明。

前端 “一键换色“ 的几种方案

2022-05-06
阅读 2 分钟
1.8k
现在越来越多的网站都提供了更换主题功能,如ElementUI,既是为了迎合用户需求,或是为了凸显自己特点,因此提供了个性化定制功能。最近刚好做了这个功能,主要通过以下几种方式实现:CSS样式覆盖核心通过切换CSS选择器得方式实现主题样式的切换:1.在组件中保留不变的样式,将需要变化的样式进行抽离2.提供多种样式,给...

vue中使用element-resize-detector

2022-04-22
阅读 1 分钟
3k
如图,当浏览器窗口发生变化时,但此时的echarts并不能执行自适应效果,这是因为切换菜单展示效果并没有触发window.onresize,所以为解决类似此问题,我们可使用element-resize-detector

教你VUE中的filters过滤器2种用法

2022-04-01
阅读 3 分钟
1.5k
前言Vue.js 允许我们自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号({undefined{ }})插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。

实现简易的 Vue 响应式

2022-03-23
阅读 12 分钟
1.1k
我们首先封装一个响应式处理的方法 defineReactive,通过 defineProperty 这个方法重新定义对象属性的 get 和 set 描述符,来实现对数据的劫持,每次 读取数据 的时候都会触发 get ,每次 更新数据 的时候都会触发 set ,所以我们可以在 set 中触发更新视图的方法 update 来实现一个基本的响应式处理。

金三银四的 Vue 面试准备

2022-03-21
阅读 25 分钟
1.9k
每次看别人的博客,都会不自主的去看答案,为了方便检验自己的掌握程度,我特意将答案折叠起来,大家可以先看题目,在脑海中想象一下如果你被问到会怎么回答,然后再展开答案看看和自己的答案有什么不同。

在页面中直接嵌入vue-sfc的方法

2022-03-17
阅读 6 分钟
4.1k
但是,我们在学习和练习的时候,如果想要用非常简单的方式在一个常规的HTML文件,或者简单的Playground(比如JSBin或者CodePen)里面使用Vue的SFC方式,是不太容易的。

petite-vue源码剖析-双向绑定`v-model`的工作原理

2022-03-15
阅读 9 分钟
1.2k
前言双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。

用 vite 2 平滑升级 vue 2 + webpack 项目实战

2022-03-10
阅读 11 分钟
3.6k
目录Vite vs. Webpack完整迁移实战Vite vs. Webpack指标对比经过实际运行,在同一项目中、采用几乎相同的设置,结果如下:

Vue 状态管理与与SSR详解

2022-03-01
阅读 25 分钟
1.3k
1、vuex简介1、定义在vue项⽬中,每个组件的数据都有其独⽴的作⽤域。当组件间需要跨层级或者同层之间频繁传递的时候,数据交互就会⾮常繁琐。vuex的主要作⽤就是集中管理所有组件的数据和状态以及规范数据修改的⽅式。

做了一份前端面试复习计划,保熟~

2022-02-08
阅读 27 分钟
1.1k
前言以前我看到面试贴就直接刷掉的,从不会多看一眼,直到去年 9 月份我开始准备面试时,才发现很多面试经验贴特别有用,看这些帖子(我不敢称之为文章,怕被杠)的过程中对我的复习思维形成影响很大,所以我现在把之前自己好好整理的面试计划分享出来,希望能帮到接下来要找工作的朋友,不喜勿喷哈~

SpringBoot:如何优雅地进行参数传递、响应数据封装、异常处理?

2022-01-19
阅读 5 分钟
1.7k
</dependency>复制代码2 统一封装返回数据在web项目中,接口返回数据一般要包含状态码、信息、数据等,例如下面的接口示例:

前后端数据校验和接口测试就没我 JSON Schema 干不了的活!

2022-01-06
阅读 3 分钟
2.2k
前端表单设计 -> 客户端校验数据(更人性化的提示) -> API 请求 -> 服务端校验数据(更强壮的逻辑) -> 数据库

Vue-一些常用的工具类

2021-12-21
阅读 7 分钟
2k
1.验证码如下图,一般的后台管理系统都会在登录的时候设计一个验证码,这个验证码是前端生成的,点击canvas可以切换验证码。二维码的类型是数字或者字母自己可以根据需要设置,

在Vue-cli中使用mock.js

2021-12-20
阅读 2 分钟
3.7k
1、mock.js 拦截ajax请求,生成随机数据新学到的东西,以我的方式分享一下,我们在开发中,需要后端提供api接口,然后拿到接口去遍历生成数据,渲染到页面上显示。在有的时候,还没拿到后端提供的接口时,前端可以自己模拟后台制作简单的json格式数据进行开发工作

我是如何把vue项目启动时间从70s优化到7秒的

2021-12-17
阅读 5 分钟
2.4k
可怕的启动时间公司的产品是一个比较大的后台管理系统,而且使用的是webpack3的vue模板项目,单次项目启动时间达到了70s左右启动个项目都够吃一碗豆腐脑了,可是没有豆腐脑怎么办,那就优化启动时间吧!考虑到升级webpack版本的风险还是比较大的,出了一点问题都得找我,想想还是先别冒险,稳妥为主,所以我选择了通过插...

10个常见的前端手写功能,你全都会吗?

2021-12-16
阅读 6 分钟
1.5k
万丈高楼平地起,地基打的牢,才能永远立于不败之地。今天给大家带来的是10个常见的 JavaScript 手写功能,重要的地方已添加注释。有的是借鉴别人的,有的是自己写的,如有不正确的地方,欢迎多多指正。

VUEX的store用法

2021-12-15
阅读 2 分钟
1.6k
重新搭建项目进入以个文件夹:cd vuewebpackapp初始化这个项目:vue init webpack vuexapp一系列的选择确认后就会创建好文件在搭建好的环境中操作父组件传递数据给子组件在components新建parent.vue(父组件)和一个son.vue子组件;在父组件内引入子组件import son from './son',并传msg给子组件

如何优雅地在Vue页面中引入img图片

2021-12-13
阅读 2 分钟
4.5k
<img src="../assets/images/avatar.png" width="100%">复制代码但是这样会有2个弊端:

你以为Vue3封装一个弹框组件很简单?

2021-12-09
阅读 3 分钟
3.4k
Tipes: 封装弹框组件使用了Teleport,避免了组件嵌套可能导致的定位层级的隐患,还使用了defineProps,defineEmits,插槽增加了组件的拓展性。

vue单页面和多页面的区别?

2021-12-06
阅读 1 分钟
2.4k
定义SPA单页面应用(SinglePage Web Application) ,指只有一个主页面的应用(一个html页面),一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅仅刷新局部资源。

几道蛮有意思的前端面试题

2021-12-02
阅读 2 分钟
1.3k
1.Object.is()与原来的比较操作符“==”、“===”的区别?两等号判等,会在比较时进行类型转换;三等号判等(判断严格),比较时不进行隐式类型转换,(类型不同则会返回false) ;Object.is()在三等号判等的基础上特别处理了NaN、-0和+0,保证-0和+0不再相同,但Object.is(NaN,NaN)会返回true。Object.is()应被认为有其特殊的用途...

Vue前端开发规范

2021-11-27
阅读 9 分钟
1.4k
基于Vue官方风格指南整理一、强制组件名为多个单词组件名应该始终是多个单词的,根组件 App 除外。正例:export default { name: 'TodoItem', // ...}复制代码反例:export default { name: 'Todo', // ...}复制代码组件数据组件的 data 必须是一个函数。当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),...

Vue都使用那么久了,还不了解它的生命周期吗

2021-11-24
阅读 6 分钟
1.2k
但是我们得卷啊,不卷怎么脱颖而出😥,我还记得在今年的蓝桥杯群里,有一同届的还不知道哪个大学的哥们,已经在读Vue/React/Node的源码了.....作为小菜鸡的我看着大佬侃侃而谈,在群角落里瑟瑟发抖。

你不知道的$nextTick

2021-11-23
阅读 2 分钟
1.4k
funcion callback(){ //等待Dom更新,然后搞点事。}$nextTick(callback);复制代码官方文档对nextTick的解释是: