vue3响应式Proxy与Reflect的理解及基本使用实例详解
目录正文理解Proxy与ReflectProxyReflect实践示例 正文
在第四章中,作者讲述了Vue.js中响应式系统的设计与实现,这一块其实是整个框架的基石,也是MVVM中,ViewModel(VM)的重要组成部分。 其实在上一章中我已经感觉很难了,有一些操作作者也只是几笔带过,却很值得...[2022/8/2]
vue3响应式Object代理对象的读取示例详解
目录正文读取属性xx in objfor ... in 正文
从这一章开始,作者将更新深入的讲解响应式,尤其是vue3响应式的具体的实现。其实在前面一章,如果你仔细阅读,你是可以实现一个简单的响应式函数的,类似于@vue/reactive,当然那只是个demo,是个玩具,我能不能在生产环境上去使...[2022/8/2]
Vue数据更新视图不更新的几种解决方案小结
目录Vue数据更新视图不更新的几种解决知识拓展对象属性的添加或删除异步更新队列Object.a ign方法vue多层循环Vue更改了数据但是视图却没有更新 Vue数据更新视图不更新的几种解决
知识拓展
在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或...[2022/8/2]
vue响应式Object代理对象的修改和删除属性
目录正文setdelete 正文
上一篇文章我们学习了如何代理对象的读取,下面我们学习如何代理对象的修改和删除属性。
set
set就是修改代理的属性,按照我们之前写的reactive,它大概是这样的
const ITERATE_KEY=symbol()
const p = new...[2022/8/2]
vue实现table表格里面数组多层嵌套取值
目录vue table表格里面数组多层嵌套取值表格部分methods里面定义方法vue 多层数组嵌套循环,动态取值匹配 vue table表格里面数组多层嵌套取值
我现在是在表格里拿到级联选择器的多选的id,然后要根据这个id来匹配一个嵌套了三层的数组的第三层id,来拿名字渲染
表格部分
...[2022/8/1]
vue3在自定义hooks中使用useRouter报错的解决方案
目录自定义hooks中使用useRouter报错useRouteruseRoute使用Vue.use()报错“Cannot read property ‘use‘ of undefined”原因正解 自定义hooks中使用useRouter报错
随...[2022/8/1]
Promise改写获取萤石云直播地址接口示例
目录改写原因技术选择源码 改写原因
通常情况下,萤石云的直播地址都是在服务端进行获取,然后存储到数据库中,但是萤石云官方默认同一个ip最多只能使用5个appKey,否则会爆出appKey数量超出安全限制的错误提示。
因此改为前端进行api的调用,来分散ip和appKey之间的绑定(这一点对开...[2022/8/1]
React Native 中添加自定义字体的方法
目录添加字体定义 a ets 目录执行 link 命令在样式中使用字体示例 在 React Native 中,如何添加自定义字体呢?React Native 提供了便捷的命令行工具来帮助我们。
添加字体
在项目根目录下创建 a et fonts 文件夹,把字体文件放到这个文件夹下。
如图...[2022/8/1]
关于ES6中的箭头函数超详细梳理
目录一、箭头函数的介绍1.1 什么是箭头函数1.2 基本语法1.3 箭头函数的参数1.4 箭头函数的函数体二、箭头函数的this指向规则三、箭头函数的arguments规则3.1 箭头函数没有自己的arguments3.2 可以用rest替代,rest参数获取函数的多余参数3.3 箭头函数不支持重复...[2022/8/1]
Ajax异步请求的五个步骤及实战案例
目录前言1.建立xmlHttpRequest异步对象2.创建HTTP请求(设置请求方法和URL)3.发送数据4.设置回调函数5.在回调函数中对不同的响应状态进行处理案例实现总结 前言
AJAX(Asynchronous JavaScript and XML):是指一种创建交互式网页应用的网页开发...[2022/8/1]
在?React?Native?中使用?CSS?Modules的配置方法
目录安装依赖和配置使用示例 有些前端工程师希望也能像开发 web 应用那样,使用 CSS Modules 来开发 React Native。本文将介绍如何在 React Native 中使用 CSS Modules。
安装依赖和配置
首先安装 react-native-sa -tr...[2022/8/1]
vue中关于@media媒体查询的使用
目录关于@media媒体查询使用1.vue需要安装sa -loader和node-sa 2个插件来使用2.直接在每个页面中使用使用@media媒体查询失效问题vue媒体查询失效原因 关于@media媒体查询使用
1.vue需要安装sa -loader和node-sa 2个插件来使用
①安装s...[2022/8/1]
Vuei18n 在数组中的使用方式
目录Vuei18n 在html页面表单和js数组中使用Vue使用i18n实现国际化如何实现国际化vue-i18n 数据渲染的模板语法Element UI组件库与vue-i18n的兼容问题路由与面包屑导航国际化的语法问题 Vuei18n 在html页面表单和js数组中使用
html的结构:
&...[2022/8/1]
Vue3项目中的hooks的使用教程
目录hooks 特点hooks 基本使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用,其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的,学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉,就算没用过也一定了解过,也就是混入,通过 mixin 混入来分发 v...[2022/8/1]
vue中echarts关系图动态增删节点以及连线方式vue中echarts关系图动态增删节点以及连线方式
目录echarts关系图动态增删节点及连线echarts关系图vue完整代码 echarts关系图动态增删节点及连线
首先,echarts的关系图有个非常坑的地方,就是节点的id必须连续,否则增删之后节点无法连接!
下面是简单的演示实现,实际要用动态增删的话,要复杂的多得多。
我是用的关...[2022/8/1]
基于JS实现点击图片在弹出层显示大图效果
Javascript是个好东西。
Jquery是基于这个好东西的一个强大的库。
今天要实现的功能是基于这两个玩意儿的。
点击图片,在弹出层显示原图。
大概效果是这样的:
上代码:
先是html部分:
<div style="text-align:center...[2022/8/1]
vue父组件监听子组件数据更新方式(hook)
目录vue父组件监听子组件数据更新this.$on(‘hook : 生命周期钩子’, () => {})@hook:生命周期钩子=“触发的函数”监听子组件内数据变化,父组件绑定change事件子组件父组件大功告成 vue父组件监听子组件数据更新
...[2022/8/1]
vue?element-ui动态横向统计表格的实现
目录element-ui动态横向统计表格关于element-ui表格问题表格图片显示问题表格中多出一条线 element-ui动态横向统计表格
表格结构
<el-table
:data="AllData"
style="width: 100%">
...[2022/8/1]
vue引用public目录下文件的方式详解
有时候我们在开发h5时候,会有需要绑卡授权操作,这个时候需要同意某些协议并且这些协议是可以点击打开的,这种该怎么做呢?其实这就是一个链接,前端能够打开链接并且常用的也就是a标签喝vue自带的router-link,当然其他还有,通常来说a标签就够了
关于协议的存储,这里简单说下,在实际开发中,...[2022/8/1]
vue中关于_ob_:observer的处理方式
目录关于_ob_:observer的处理vue中[__ob__: Observer]问题 关于_ob_:observer的处理
在使用this.list.push()后,会出现_ob_:oberver这样的对象。
网上很多地方说使用这个方法:
JSON.parse(JSON.string...[2022/8/1]
JavaScript前端分页实现示例JavaScript前端分页实现示例
目录初窥前端分页前言需求分析实现目标:解决思路:开工,上代码:转折: 初窥前端分页
前言
近日接到了一个关于前端分页的需求,某系统仓储模块的分页功能,由于以前分页都是后端处理的,第一次接到这种需求,借此记录一下。
需求分析
应用场景简述:在商品出库以及退回时,需要通过接口获取商品列表...[2022/7/19]
JS模板编译的实现详情
目录前言模板编译的简单实现模板编译1、构建模板生成函数2、正则替换 前言
编译是一种格式变成另一种格式的过程。编译会导致好的结果,比如书写简单的代码,编译出来复杂的代码;或者提高代码的使用性能。
这里只聊聊模板编译。
模板编译的简单实现
写一个最简单的模板
<p>He...[2022/7/19]
JavaScript前端实现小说分页功能示例
目录先让我找找我的思路在哪里思路已至,码来!结束 先让我找找我的思路在哪里
在小说读书APP中,都会有分页的功能,那么前端如何实现这个功能呢?
因为没有什么思路,那就只能在前辈的项目中寻找思路了。
这不,直接打开起点的页面,按下那个传说中的F12键,开始我传奇生涯!...不好意思,串台了...[2022/7/19]
Node.js?与并发模型的详细介绍
目录进程线程内核态线程用户态线程轻量级进程(LWP)小结协程I/O 模型阻塞 I/O非阻塞 I/O同(异)步 I/ONode.js 的并发模型总结 前言:
Node.js 现在已成为构建高并发网络应用服务工具箱中的一员,何以 Node.js 会成为大众的宠儿?本文将从进程、线程、协程、I/O 模...[2022/7/19]
JS前端性能优化解决内存泄漏页面崩溃
目录发生什么事了?咋了?这是咋了?死去的页面突然攻击我?陷入僵局垂死病中惊坐起勿以善小而不为修改参考 发生什么事了?
一个与往常一样的上午,当我沉浸在业务需求中不可自拔时,突然被拉入到一个事故大群。一脸懵逼的我还以为和之前的每次线上bug一样仅仅是个小问题时,殊不知是我简单了...
看...[2022/7/19]
一定有你会用到的JavaScript一行代码实用技巧总结一定有你会用到的JavaScript一行代码实用技巧总结
目录引言一、日期处理1. 检查日期是否有效2. 计算两个日期之间的间隔3. 查找日期位于一年中的第几天4. 时间格式化二、字符串处理1. 字符串首字母大写2. 翻转字符串3. 随机字符串4. 截断字符串5. 去除字符串中的HTML三、数组处理1. 从数组中移除重复项2. 判断数组是否为空3. 合并两...[2022/7/19]
JavaScript前端构建工具原理的理解
目录前言构建工具的前世今生YUI Tool + AntGrunt / GulpWebpack / Rollup / ParcelVite / Esbuildjs 模块化的发展史和构建工具的变化青铜时代白银时代黄金时代结束语 前言
最近有幸在前端团队里面做了一次关于 webpack 的技术分享。在...[2022/7/19]
JavaScript详解使用Promise处理回调地狱与async?await修饰符JavaScript详解使用Promise处理回调地狱与async?await修饰符
目录Promise回调地狱Promise简介Promise简单使用async和await 修饰符小结 Promise
Promise能够处理异步程序。
回调地狱
JS中或node中,都大量的使用了回调函数进行异步操作,而异步操作什么时候返回结果是不可控的,如果我们希望几个异步请求按照顺序...[2022/7/19]
JavaScript前端实用的工具函数封装
目录1.webpack里面配置自动注册组件2.自定义指令图片懒加载3.图片文件转base64格式(实现预览)4.数组转为tree型结构(递归实现)5.递归深拷贝6.将数组里面的对象转换成我们需要的键值对 1.webpack里面配置自动注册组件
第一个参数是匹配路径,第二个是深度匹配,第三个是匹配...[2022/7/19]
JavaScript同步与异步任务问题详解
目录js会出现异步问题场景标题延时操作开关涵数jQuery异步请求设置为同步请求 js会出现异步问题场景
延时操作数据请求同异步promise 异步回调涵数(最常见多内置涵数支持接收回调涵数来异步代码 )事件监听 如,click事件等异步订阅与发布
今天遇到的问题是,请求数据时间太长,会先执行...[2022/7/19]
函数式组件劫持替代json封装element表格
目录背景思路想法与实践el-table-column获取如何渲染表格操作表格组件代码表格函数式组件问题点与优化hf-table.vuetable.js后话 背景
系统有个整改需求,要求系统内的所有表格支持本地动态列显隐,拖拽排序列位置,固定列功能,涉及的页面很多
上效果图:
思路
...[2022/7/19]
jQuery事件注册的实现示范
目录jQuery 事件注册事件处理 jQuery 事件注册
事件注册on优势1:多个事件绑定
on()方法可以在匹配元素上绑定一个或多个事件处理函数
语法:element.on(events,[selector],fn)
events:一个或多个用空格分隔的事件类型 例如:click,k...[2022/7/19]
JavaScript?API?ResizeObserver使用示例
目录写在前面API介绍浏览器兼容性用法unobserve()disconnect() 写在前面
今天在看同事代码的时候看见这个API,出于好奇就去了解了一下。
这是一个实验中的功能 此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档...[2022/7/19]
vue.js基于ElementUI封装了CRUD的弹框组件
目录前言开始封装json对象如下所示table表头作为列表传入,数据结构如下在子组件中循环渲染出表头在父组件中调用 前言
代码写得不好,为什么不封装一下呢,如果用的是ElementUI框架,也可以在此基础上进行二次封装。譬如说,这个用来对列表数据进行增删改查的弹框。
开始封装
原本...[2022/7/4]
代号为Naruto的Vue2.7正式发布功能详解
目录 引言 向后移植的功能 注意事项 与 Vue 3 的行为差异 升级指南 Vue CLI / webpack Vite Volar 兼容性 Devtools 支持 2.7 版本的影响 额外细节 引言 Vue 正式发布了 2.7 版本, 版本名称为 Naruto,即火影忍者。 尽管现在 Vue 3 ...[2022/7/4]
ES6的内置对象扩展实现示例
目录一、Array的扩展方法1.扩展运算符(展开语法)2、扩展运算符的应用1.合并数组2. 将伪数组转换为真正的数组3.构造函数方法:Array.from()4.实例方法 :find() 5.findIndex()6.includes() 一、Array的扩展方法
1.扩展运算符(展开...[2022/7/4]
2022发布ECMAScript新特性盘点
目录引言1. Top-level Await2. Object.hasOwn()3. at()4. error.cause5. 正则表达式匹配索引6. 类的实例成员(1)公共实例字段(2)私有实例字段、方法和访问器(3)静态公共字段(4)静态私有字段和方法(5)类静态初始化块 引言
2022 年...[2022/7/4]
JS实现简单拖动模态框案例
本文实例为大家分享了JS实现简单拖动模态框的具体代码,供大家参考,具体内容如下
需要实现的效果:
①点击“点击,弹出登录框”后模态框和遮挡层就会显示出来
②点击关闭按钮,模态框和遮盖层就会隐藏起来
③页面拖拽
功能分析:
首先给上面...[2022/7/4]
Jquery实现下拉菜单案例
本文实例为大家分享了Jquery实现下拉菜单的具体代码,供大家参考,具体内容如下
需要实现的结构如下图:
关于布局:
布局采用ul里面包含4个li,li里面包含a标签(微博)以及ul(下面的下拉菜单),采用hover改变移动到下拉菜单后背景变色。
关于功能:
首先利用jq...[2022/7/4]
js实现京东快递单号查询
本文实例为大家分享了js实现京东快递单号查询的具体代码,供大家参考,具体内容如下
1.实现效果:
当文本框中输入文字时,上面有一个放大文字的框中显示文本框内容。失去焦点时,放大文字的框消失,获得焦点时,放大文字的框显示。
2.案例分析
3.代码实现
<!DOC...[2022/7/4]
详解Vue3中setup函数的使用教程
目录vue2 和 vue3 开发的区别使用 setup 原因setup 用法setup 可以接受哪些参数setup 详解setup 函数自动执行setup 函数定义变量setup 创建方法动态更新数据 vue2 和 vue3 开发的区别
首先,目前来说 vue3 发布已经有一段时间了,但是呢,由...[2022/7/4]
js实现模态框的拖拽效果
本文实例为大家分享了js实现模态框拖拽效果的具体代码,供大家参考,具体内容如下
之前学习js遇到了这样的需求:鼠标按下后,移动鼠标,模态框随鼠标移动,鼠标松开,模态框也不会随鼠标移动。<完整的代码在最后哦>
分析思路:
1.点击弹出层,模态框和遮挡层就会显示出来。di...[2022/7/4]
JS实现拖动模态框案例
本文实例为大家分享了JS实现拖动模态框的具体代码,供大家参考,具体内容如下
效果图:
需求分析:
点击登录后登录表单和遮罩层显示,点击关闭按钮隐藏。输入密码时可以明文查看或者隐藏。在表单的头部按下鼠标后可以拖拽表单。鼠标弹起拖拽结束。
话不多说,我们直接上代码:
...[2022/7/4]
用JS实现贪吃蛇游戏用JS实现贪吃蛇游戏
本文实例为大家分享了JS实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下
效果图:
完整代码如下:
html:
<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta char...[2022/7/4]
js实现拖动模态框效果
本文实例为大家分享了js实现拖动模态框效果的具体代码,供大家参考,具体内容如下
1.实现效果:
点击链接,弹出模态框。点击关闭,关闭模态框。
点击标题部分,可以随意移动模态框的位置。
主要是获取鼠标位置。
2.思路:
3.代码:
<!DOCTYPE h...[2022/7/4]
用js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下
1.实现功能:
2.实现思路:
(1)鼠标放到图片上,显示箭头,用display来做。
(2)动态生成小圆圈。
(3)小圆圈的排他思想
(4)点击小圆圈滚动图片
设...[2022/7/4]
vue实现简单的购物车功能vue实现简单的购物车功能
本文实例为大家分享了vue实现简单购物车功能的具体代码,供大家参考,具体内容如下
1.实现效果:
2.涉及到的知识点:
toFixed函数、过滤器、reduce高阶函数、v-bind:disabled、v-if
3.代码:
<!DOCTYPE html>
&...[2022/7/4]
js实现淘宝固定侧边栏
本文实例为大家分享了js实现淘宝固定侧边栏的具体代码,供大家参考,具体内容如下
1.实现效果:
当页面运行到banner区域时,右边侧边栏改为固定定位,当页面运行到主体区域时,右边侧边栏显示返回到顶部。
2.思路:
(1)给document加scroll事件。
(2)获取...[2022/7/4]
js仿京东放大镜
本文实例为大家分享了js仿京东放大镜的具体代码,供大家参考,具体内容如下
1.实现效果:
移动遮挡框,右边的图片响应的放大并移动。
2.实现思路:
(1)鼠标移动到图片上,遮罩层和右边盒子显示。鼠标移出,遮罩层和右边盒子消失。
(2)黄色遮罩层跟随鼠标移动
(3...[2022/7/4]
Golang?中的json.Marshal问题总结(推荐)
目录1.Quiz2.Answer3.ResolvingConclusion 1.Quiz
有如下一个例子:
package main
import (
"encoding/json"
"fmt"
"time"
)
type RecordBrief struct {
...[2022/6/27]