目录前言:实现基础功能表格进一步定制化总结前言:对于一个业务前端来讲,工作中用的最多的组件我觉得大概率是table组件了,只要是数据展示就不可避免地用到这个组件。用久了就有点熟悉,就来锻炼自己的封装能力,为了更好的搬砖,封装table组件。首先,我们要思考我们封装一个怎样的表格,怎样的形式更加方便。先定一个大概目标,往前走,剩下慢慢去完善。一般来说,我们更倾 ......
464
0
0
2023-07-08
目录前言官网文档步骤下载依赖和配置编写页面本人项目播放视频代码实际效果常用回调结语前言在我的一个项目中,需要进行播放视频,于是进行研究,那么本次也是将我怎么用vue-video-player插件进行播放视频的步骤进行讲解官网文档在进行正式讲解的时候,我觉得还是应该把它官网的文档进行发出来,因为我这边只是讲我有使用到的方法和属性,但是实际上,你们正式需要用到的 ......
179
0
0
2023-07-08
目录一、前言二、新的方案1. 缘由2. Proxy 和 Reflect1) Proxy2) Reflect3. reactive1) createReactiveObject() 函数2) mutableHandlers() 函数 -> 对象类型的 handlers3) mutableInstrumentations() 函数 -> Map Se ......
195
0
0
2023-07-07
目录响应式原理手写实现1、实现Reactive2、实现依赖的收集和触发effect影响函数收集/添加依赖触发依赖3、移除/停止依赖衍生类型1、实现readonly2、实现shallowReadonly3、实现ref4、实现computed工具类响应式原理利用ES6中Proxy作为拦截器,在get时收集依赖,在set时触发依赖,来实现响应式。手写实现1、实现R ......
169
0
0
2023-07-06
目录Vue Demi是什么基本原理v2版本v2.7版本v3版本Vue Demi是什么如果你想开发一个同时支持Vue2和Vue3的库可能想到以下两种方式:1.创建两个分支,分别支持Vue2和Vue32.只使用Vue2和Vue3都支持的API这两种方式都有缺点,第一种很麻烦,第二种无法使用Vue3新增的组合式 API,其实现在Vue2.7+版本已经内置支持组合式 ......
199
0
0
2023-07-06
目录计算属性键盘事件监视属性绑定样式class样式style样式条件渲染v-ifv-show列表渲染v-for指令vue监测data中的数据收集表单数据计算属性定义:要用的属性不存在,要通过已有属性计算得来原理:底层借助了Objcet.defineProperty方法提供的getter和setterget函数什么时候执行?(1).初次读取时会执行一次(2). ......
179
0
0
2023-07-02
目录Vue简介模板语法数据绑定el与data的两种写法Vue中的MVVM数据代理事件处理Vue简介让Vue工作,就须创建一个Vue实例,且要传入一个配置对象demo容器里的代码符合html规范,只不过混入了一些特殊的Vue语法demo容器里的代码被称为【Vue模板】Vue实例和容器是一一对应的真实开发中只有一个Vue实例,并且会配合着组件一起使用{{xxx} ......
175
0
0
2023-07-02
目录前言一、获取当前时间Ⅰ. 格式:年-月-日 时-分-秒(yyyy-MM-dd HH-mm-ss)Ⅱ.格式:标准时间Ⅲ.格式:时间戳二、时间格式之间的转换Ⅰ.年-月-日 时-分-秒格式转换成标准时间Ⅱ.标准时间转换成年-月-日 时-分-秒格式Ⅲ.年-月-日 时-分-秒格式转换成时间戳补充:vue中将任意格式的日期转换为年月日形式(yyyy-MM- ......
385
0
0
2023-07-02
目录什么是模板引擎实现 Scanner 类根据模板字符串生成 tokens在 index.js 引入 parseTemplateToTokens实现 tokens 的嵌套One More Thingtokens 结合数据解析为 dom 字符串定义 lookup 函数定义 renderTemplate 函数什么是模板引擎模板引擎是将数据变为视图最优雅的解决方案 ......
169
0
0
2023-07-02
目录vue自定义实现Tree组件和拖拽功能vue2 + js版vue2 + ts 版总结vue自定义实现Tree组件和拖拽功能实现功能:树结构、右键菜单、拖拽效果图vue2 + js版/components/drag-tree/utils/utils.jslet _treeId =; /** * 初始化树 * @param {Array} tree ......
294
0
0
2023-07-02
目录Vue代理报错404问题第一种路径拼接 /api 情况第二种路径不变情况注意点新增说明:配置多个代理怎么搞?总结Vue代理报错404问题问题描述:代理后出现404:第一种路径拼接 /api 情况const path = require('path'); function resolve(dir) { return path.resolve ......
200
0
0
2023-06-29
目录一、组件化诞生的历史二、为什么业务组件越开发越难维护人的问题技术问题2.1 项目现状2.2 理想目标三、举一个实际的例子3.1 需求背景3.2 开发之前: 前端设计文档数据流向图目录结构逻辑控制拆分的原则3.3 受控组件和非受控组件3.4 开发进行: 逻辑变量和UI变量四、持续的优化五、可能的问题五、实践是学习前端的捷径总结组件化是一种思维的表现,这种技 ......
211
0
0
2023-06-28
目录在Vite项目中配置Mock服务器Vite项目的创建与目录结构配置Vite将Vite插件的设置进行分离配置Mock的接口文件目录结构工具函数编写Mock接口在组件中使用在Quasar项目中使用Mock初始化项目修改Quasar中的Vite配置创建Mock的相关文件在组件中使用在前端开发中,如果需要模拟后端数据,而又不想开发一个后端服务器, 则可以借助mo ......
261
0
0
2023-06-28
目录1 概述2 el:与DOM元素绑定3 data:定义双向绑定的数据4 computed:计算属性5 methods:定义Vue实例的方法6 Vue中的三种模板6.1 html模板6.2 字符串模板6.3 render函数模板7 watch属性8 模板渲染8.1 条件渲染8.2 列表渲染总结1 概述Vue.js是通过new Vue({...})来声明一个实 ......
207
0
0
2023-06-28
目录引言将API传入到runtime-core中createRenderer 初始化createApp 内部实现runtime-corecreateAppAPIcerateVNode 创建组件虚拟节点类型表示虚拟节点创建render 虚拟节点渲染到容器中引言我们知道runtime-dom内部功能其实是 将渲染时所需要节点操作的 API (即rendererO ......
175
0
0
2023-06-24