目录一、组件化诞生的历史二、为什么业务组件越开发越难维护人的问题技术问题2.1 项目现状2.2 理想目标三、举一个实际的例子3.1 需求背景3.2 开发之前: 前端设计文档数据流向图目录结构逻辑控制拆分的原则3.3 受控组件和非受控组件3.4 开发进行: 逻辑变量和UI变量四、持续的优化五、可能的问题五、实践是学习前端的捷径总结组件化是一种思维的表现，这种技
......
453
0
0
2023-06-28
目录组件生命周期创建阶段beforeCreate阶段created阶段beforeMount阶段mounted阶段运行阶段beforeUpdate阶段updated阶段销毁阶段beforeDestroy阶段destroyed阶段总结组件生命周期生命周期(Life Cycle)是指一个组件从 创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时
......
306
0
0
2023-06-22
目录背景介绍使用方法源码分析背景介绍近期业务开发，会想起之前做的两个组件的通信，社区推荐使用一个迷你库miit (200b), 因为vue3开发中没有了 EventBus 跨组件通信，这个替代的方案 mitt.js，原理还是 EventBusEventBus在多个组件之间进行事件通信的场景下还是比较有用的，通过监听事件和触发事件，可以在订阅者和发布者之间解耦
......
377
0
0
2023-06-22
目录前言思考实践定义参数定义一个开始函数核心方法配置项功能组件前言最近开发有个需求需要酷炫的文字滚动效果，发现vue2版本的CountTo组件不适用与Vue3,没有轮子咋办，那咱造一个呗。其实大多数版本更替导致公共组件不可用，最简单的做法就是在原版本的基础上进行修改调整，总体来讲花费的时间成本以及精力成本最低。思考先看下效果，明确需求，然后开始搬砖。明确基础
......
310
0
0
2023-06-18
目录一、前端项目目录结构二、vue单文件组件格式三、js导入语法四、父组件和子组件五、父组件往子组件中传数据（组件属性）实现步骤六、子组件往父组件中传数据（组件事件）实现步骤：拓展总结一、前端项目目录结构二、vue单文件组件格式注意1： scoped表示对当前组件生效<style scoped></style>这个是设置组件中html
......
286
0
0
2023-06-17
目录基础用法禁用状态尺寸继承原生 input 属性可清空密码框 show-password带 Icon 的输入框文本域可自适应高度文本域复合型输入框总结源码地址本篇文章将为我们的组件库添加一个新成员:Input组件。其中Input组件要实现的功能有:基础用法禁用状态尺寸大小输入长度可清空密码框带Icon的输入框文本域自适应文本高度的文本域复合型输入框每个功能
......
447
0
0
2023-06-15
目录前言1、 props / $emit2、ref / $refs3、eventBus事件总线（$emit / $on）4、依赖注入（provide / inject）5、$parent / $children6、$attrs / $listeners总结1、父子组件间通信2、跨代组件间通信3、兄弟组件间通信4、任意组件间通信前言组件是 vue.js最强大的
......
284
0
0
2023-06-12
目录前言1 悬浮窗1.1 使用display1.2 使用visibility（☆）2 全屏只能点击登录组件原理代码前言 本文整理了实现悬浮窗以及聚焦登录组件的功能。 为的是方便大家和自己的学习。 省流：可以只看1.2 和 2的代码即可1 悬浮窗现在各大流行视频网站的平台都在使用这种悬浮显示的效果，我就想这种东西是怎样搞出来的呢！几经尝试，终于找到了一个
......
426
0
0
2023-06-11
目录计算属性监听属性组件介绍和定义父子通信父传子子传父ref属性动态组件插槽vue-cli计算属性计算属性关键字：computed每次页面刷新都会重新加载数据，而我们有时候退出页面再返回页面后希望保持原来选择商品的价格总价，这是就可以运用到计算属性：只有涉及到计算属性中使用的变量发生变化它才会重新运算<body>
<div id="app
......
299
0
0
2023-06-10
目录1. 前言2. 整体思路开始3. 钩子函数3.1 获取偏移初始位置的像素值3.2 获取开始滚动和结束滚动的钩子函数4. 完整代码1. 前言对于列表类型的大量数据，前端展示往往采用 分页 和 无限滚动 的方式来展示，对于用户来说，鼠标滚轮和触控屏使滚动行为要比点击更快更容易。 element-plus 组件库提供了简单的 vue 指令，就可以轻易的实现但是
......
402
0
0
2023-06-08
目录前情提要初始化组件(1).setupComponent(2).initProps(3).initSlots额外内容总结前情提要上文我们分析了挂载组件主要调用了三个函数: createComponentInstance(创建组件实例)、setupComponent(初始化组件)、setupRenderEffect(更新副作用)。并且上一节中我们已经详细讲解
......
350
0
0
2023-06-04
目录前情提要1. Mount函数2. 创建虚拟节点的几个方法(1) createVNode:用于创建组件的虚拟节点(2) createElementVNode:用于创建普通tag的虚拟节点如<div></div>(3) createCommentVNode:用于创建注释的虚拟节点(4) createTextVNode:用于创建文本的虚
......
329
0
0
2023-06-04
目录前情提要mountComponent创建组件实例总结前情提要上文我们讲解了执行createApp(App).mount('#root')中的mount函数，我们分析了创建虚拟节点的几个方法，以及setRef的执行机制、本文我们继续讲解mountComponent，挂载组件的流程。本文主要内容createComponentInstance发生了什么？如何标
......
343
0
0
2023-06-04
目录前言继承原有组件接口v-model插槽组件更抽象总结前言在我们的业务里，我们通常会二次封装一些高频业务组件，比如弹框，抽屉，表单等这些业务组件，为什么要二次封装？我们所有人心里的答案肯定是，同样类似的代码太多了，我想复用组件，或者原有组件可能达不到我想要的效果，我想基于原有组件自定义一些自己的接口，那么此时就需要二次封装了。二次封装虽好，但同时也会带来一
......
286
0
0
2023-05-31
1.前端集成axios，npm安装，前后端交互 asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-cevent-source-cloudcenter/cevent-source-cloudcenter/cevent-ymcms-adm
......
411
0
0
2023-05-25