-
Next.js 12.0.5 版本发布，React 应用后端渲染框架
Next.js v12.0.5 发布了！Next.js 是一个用于在服务端渲染 React 应用程序的简单框架，此升级完全向后兼容，建议所有版本低于 12.0.5 的用户使用，此补丁到 Next.js 11 的后向移植版本为 11.1.3。此版本带来以下变化：核心变化添加 swc 转换以移除console.*呼叫：#31449支持 ESLint v8：#29865修复：允许ne...
-
vue3.0+vite+typescript+element-plus搭建项目（一）
随着vue3.0的越来越受欢迎，开始有许多公司和个人开始学习并使用vue3开发项目。我从接触学习并使用vue2，到现在的vue3，一直是vue的忠实粉丝和追随者。vue3也发布很长时间了，目前vue3+vite+ts再结合一些优秀的UI框架，如Element plus，Ant design，Naive UI，移动端的Vant UI，成为了较为流行的前端技术之一。那么今天就带大家...
-
vue 3 学习笔记 (七)——vue3 中 computed 新用法
vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式API，所以可以直接使用 vue2的写法，这篇文章主要介绍 vue3 中 computed 的新用法，对比 vue2 中的写法，让您快速掌握 vue3 中 computed 的新用法。组合式 API 中使用 computed 时，需要先引入：import { computed } from "v...
-
从使用到自己实现简单Vue Router看这个就行了
Vue Router 基础让我们先来了解下Vue Router的简单使用吧，先了解怎么使用，之后再去想办法怎么去实现1.简介路由：本质上是一种对应关系分类分为前端路由和后端路由后端路由比如node.js 的路由是 URL的请求地址和服务器上面的资源对应，根据不同的请求地址返回不同的资源前端路由在SPA（单页应用）中根据用户所触发的事件改变了URL 在无需刷新的前提下 显示不同的...
-
如何手动解析vue单文件并预览？
开头笔者之前的文章里介绍过一个代码在线编辑预览工具的实现（传送门：快速搭建一个代码在线编辑预览工具），实现了css、html、js的编辑，但是对于demo场景来说，vue单文件也是一个比较好的代码组织方式，至少笔者就经常在写vue项目的同时顺便写写各种demo，但是分享不太方便，因为单文件不能直接运行看效果，基于此，笔者决定在之前的基础上再增加一个vue单文件的编辑及预览功能。...
-
搞懂现代Web端即时通讯技术一文就够：WebSocket、socket.io、SSE
1、引言有关Web端即时通讯技术的文章我已整理过很多篇，阅读过的读者可能都很熟悉，早期的Web端即时通讯方案，受限于Web客户端的技术限制，想实现真正的“即时”通信，难度相当大。传统的Web端即时通讯技术从短轮询到长连询，再到Comet技术，在如此原始的HTML标准之下，为了实现所谓的“即时”通信，技术上可谓绞尽脑汁，极尽所能。自从HTML5标准发布之后，WebSocket这类...
-
Vuex 学习笔记
1.1 vuex的核心概念State （驱动应用的数据源）Mutation （以声明方式将 state 映射到视图）Action（响应在 view 上的用户输入导致的状态变化）Getter （对 Store 中的数据进行加工处理形成新的数据）1.1.1 Startstart 提供唯一的公共数据源，所以共享的数据要统一放到Store 的 Stare 中进行存储。// 创建 sto...
-
Vue.js 3.2 关于响应式部分的优化
Vue 3 正式发布距今已经快一年了，相信很多小伙伴已经在生产环境用上了 Vue 3 了。如今，Vue.js 3.2 已经正式发布，而这次 minor 版本的升级主要体现在源码层级的优化，对于用户的使用层面来说其实变化并不大。其中一个吸引我的点是提升了响应式的性能:More efficient ref implementation (~260% faster read / ~5...
-
JavaScript 中的事件委托
JavaScript 中一个重要的方法就是事件委托（又叫事件代理）。事件委托将事件侦听器添加到一个父级元素上，这样就只用添加一次事件侦听器，可以避免向 （父级元素内）很多特定的 DOM 节点添加多个事件侦听器，减少了内存消耗，从而优化程序性能。而这个添加在父元素上的事件侦听器通过事件冒泡的事件流机制以分析查找子元素的匹配项。事件委托的概念解释并不复杂，但很多人不明事件委托到底是...
-
尤雨溪凌晨官宣：Vue 3.2 已发布
今日凌晨，尤雨溪在微博平台官宣 Vue 3.2 已发布，并表示：<script setup> + TS + Volar = 真香Vue 3.2 版本包括许多重要的新功能和性能改进，但并不包含重大更改。新的单文件组件功能：`<script setup>` 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。`&l...
-
Vue之MVVM模型和MVC模型
MVVMMVVM简介核心思想：分而治之（不同业务代码放到不同业务模块当中，通过特定逻辑组织到一块）MVVM其实是 M、V、VM，即 Model-View-ViewModel 的缩写。它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。Vue.js 是...
-
总结50个Vue知识点，全都会你就是神
1. Vue的优点？Vue的缺点？优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长2. 为什么说Vue是一个渐进式框架？渐进式：通俗点讲就是，你想用啥你就用啥，咱也不强求你。你想用component就用，不用也行，你想用vuex就用，不用也可以3. Vue跟React的异同点？相同点：1.都使...
-
分享20款响应式CSS框架，你平时开发用的是哪一款？
使用 CSS 框架是当前大部分前后端开发人员都会选择的，CSS框架的好处是帮开发人员节省了开发时间，提高了工作效率，改善用户体验，并且能很好的解决各种浏览器之间的兼容性问题。当然也会存在代码冗余，影响网站打开速度，但是对于好处来说这些问题都不是问题。接下去我会分享我所知道的所有的CSS框架，尽量把网络上现有的框架都收集起来，方便网友们的选择和比较。（框架顺序不代码框架的好坏）B...
-
一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue
介绍PrimeVue是一个在Github上开源的，功能强大、易于使用、多功能、高性能的 Vue UI 组件库，可帮助Web开发者构建高性能的UI页面，在当前Vue3生态的生态下（PrimeVue全面支持Vue2和Vue3），是对Vue3生态的一个极大的补充和促进！我们来简单地看一看PrimeVue有何过人之处！Githubhttps://github.com/primeface...
-
一些不好记却很好用的 CSS 属性
前言在写过一段时间 CSS 之后，大家对于常见的属性应该都很熟悉，例如最基本的 display、position、padding、margin、border、background 等等，在写 CSS 的时候不需要特别查什么东西，很顺的就可以写出来。这些属性之所以常见，是因为许多地方都用得到，而有些 CSS 属性只能使用在某些特定的地方，或者只有在某个特定的情境之下才会出现。我经...
-
H5项目适配系统深色模式方案
一、背景随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比,还能 提供更好的可视性和沉浸感。如何切换深色模式iOS：“设置”--“显示与亮度”--“外观”，选择“深色”Android：“系统设置”--“显...
-
使HTML 5数字输入仅接受整数
这两年我看到很多关于这方面的文章和帖子，这的确是一个非常方便的东西。但是，太多的实现还是有漏洞，残缺不全的实现，等等。整体概念是合理的：使用HTML 5属性来限制可以发送到服务器的内容，然后使用Javascript增强它，以限制用户可以在第一个地方输入的内容。所以让我们来看看这些问题，并更好地实现它。问题1，不好的脚本最常见的缺陷是缺乏适当的降级功能。 如果您要在“electr...
-
jQuery3.6.0终于来了！全新版本有不同？
时隔将近一年， jQuery团队终于揭开了等待已久的3.6.0发布版的神秘面纱，带来了全新的、精简过的选项，以及新的主要功能、改进和bug的修复。更新后的jQuery有哪些特点？又给我们带了什么样的全新体验？今天的文章小渡就为你一探究竟！1、什么是jQueryjQuery简写jq，Query是查询的意思，jQuery顾名思义就是一个让JavaScript更加方便的查询和控制页面...
-
Vue 中 强制组件重新渲染的正确方法
有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。这是一个非常简单的解决方案。当然，你可能会对其他方式会更感兴趣...
-
前端开发-VantUI的Tab标签页组件
VantUI是移动端h5开发比较火的一个ui框架// 网站地址 https://vant-contrib.gitee.io/vant/#/zh-CN/今天介绍Tab标签页的使用引入import Vue from 'vue'; import { Tab, Tabs } from 'vant'; Vue.use(Tab); Vue.use(Tabs);基本使用通过 v-model ...
-
链接是Web的核心元素
链接是HTML的基础元素，因为Web的设计初衷就是想把一组文档彼此链接起来组成信息分享网络。HTML的超文本（Hyper Text）部分定义了链接的类型即：超文本链接（hypertext links）,也就是超链接（hyperlinks）。在HTML中，链接是内联元素，使用<a>标签。href（hypertext reference） 属性用来定义链接的目标地址（当...
-
你真的了解ES6函数特性么？
前言 函数是所有编程语言中重要的组成部分，在Es6出现之前 JavaScript的函数语法一直没有太大的变化，从而遗留了很多问题和隐晦的做法，导致实现一些功能需要编写很多代码。函数形参默认值 JavaScript函数有一个特别的地方，就是无论在函数形参里定义了多少参数，都可以传入任意数量的参数，但是有的情况下，我们的参数只是可填，这样的话我们还在函数体呢写一堆逻辑从而导致代码冗...
-
Vue nextTick彻底理解
前言含义和使用nextTick的官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。啥意思呢，即我们对Vue中data数据的修改会导致界面对应的响应变化，而通过nextTick方法，可以在传入nextTick的回调函数中获取到变化后的DOM，讲起来可能还是有点梦幻，下面我们直接使用nextTick体验一下效果。比如我们有...
-
tiptap - 基于 vue 的优雅流畅的富文本编辑器
一款专为 vue.js 打造，设计优雅，体验流畅舒服的现代富文本编辑器。关于 TiptapTiptap 是一款专为 vue 打造的简洁明快的富文本编辑器，通过简单的设置能为用户提供多种优秀的文字编辑体验。Tiptap 官网基于 vue.js 的富文本编辑器Tiptap 最大的特点是预置的渲染，没有任何 CSS，用户可以更全面地控制段落标记和样式视觉设计以及交互动效简洁明快，能够...
-
用HTML5构建一个流程图绘制工具
在我们的开发工程中经常会使用到各种图，所谓的图就是由节点和节点之间的连接所形成的系统，数学上专门有一个分支叫图论（Graph Theroy）。利用图我们可以做很多工具，比如思维导图，流程图，状态机，组织架构图，等等。今天我要做的是用开源的HTML5工具来快速构造一个做图的工具。工具选择工预善其事，必先利其器。第一件事是选择一件合适的工具，开源时代，程序员还是很幸福的，选择很多。...
-
Js震撼人心的超酷人体模型类库Mannequin.js
简要介绍mannequin.js是一款可以通过JavaScript实现控制人体关节模型的超酷类库。mannequin.js基于经典的Three.js库，官网所展现的Demo效果令人惊奇到掉了下巴，真的是震撼！接下来说下细节。首先，它可以选择创建Male、Female、Child三种人体模型。其次，每种模型可以细分到头部、颈部、躯干、骨盆。上肢可以细分为手臂、肘部、腕部和手指，下...
-
这4个问题可以检测出你JavaScript水平的高低
准备JavaScript面试时应了解的事项。JavaScript现在是一种非常流行的编程语言，基于该语言，派生了大量库和框架。 但是，无论高层生态系统如何发展，离不开原始的JavaScript。 在这里，我选择了4个JavaScript面试问题来测试程序员使用普通JavaScript的技能。1.实现Array.prototype.map如何手动实现Array.prototype...
-
js 手动实现bind方法，超详细思路分析
在模拟bind之前，我们先了解bind的概念，这里引入MDN解释：bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。说的通俗一点，bind与apply/call一样都能改变函数this指向，但bind并不会立即执行函数，而是返回一个绑定了this的新函数，你需...
-
怎么在javascript中灵活运用 this
this 是什么Javascriptthis关键词指的是他所属的对象，它拥有不同的值，具体取决于使用的位置和调用方式。使用方式在方法中，它指向这个方法的拥有者在函数中，它是全局对象window严格模式下在函数中，它是undefined单独使用时，它是全局对象window在事件中，它指向触发事件的目标对象e.target不同执行模式下的差异化javascript 中的this不同...
-
Vuex 4 正式发布：打包现在与 Vue 3 一致
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 采用集中式存储管理应用的所有组件组件的状态。换句话说，Vuex 就是帮开发者存储多个组件共享的数据，方便开发者对其读取的更改的工具。Vuex 4 正式版本现已正式发布。Vuex 4 的改进重点是兼容性。Vuex 4 支持 Vue 3，并提供了与 Vuex 3 完全相同的 API，因此用户可以在 Vue ...
