Demo研习社的博客_flutter,react,vue,前端,微信小程序,Centos

Vue或者Html快速实现文件夹上传

快速实现文件夹上传 webkitdirectory1、加上该属性后，点击上传效果，如下图：2、点击弹窗上传后，效果如下图：3、最后代码实现很简单：<input type='file' webkitdirectory/>

文件夹上传

Vue

前端

上传

代码实现

原创点赞2 阅读120 收藏0 评论0 2022-04-11

#yyds干货盘点# 前端构建新玩法：Vite 与你的开端

Vite 的定义Vite 是面向现代浏览器的一个更轻、更快的 Web 应用开发工具，核心基于 ECMAScript 标准原生模块系统（ES Modules）实现。表象功能上看，Vite 可以取代基于 Webpack 的 vue-cli 或者 cra 的集成式开发工具，提供全新的一种开发体验。具体细节往下看。Vite 的由来在此之前，如果我们所开发的应用比较复杂（代码量偏大），使用 Webpack

vue.js

bundle

服务器

vite

原创点赞2 阅读123 收藏0 评论0 #yyds干货盘点# 2022-02-18

复杂数据处理 · 结构转换

9.1 Any ↔ 字符串在开发数据应用的时候，有大部分的数据都不会是由 JavaScript 或用户的操作实时生成的，更多的是直接从服务端的数据存储设施中提取出来，然后通过网络协

javascript

前端

网络协议

json

数组

原创点赞1 阅读33 收藏0 评论0 2022-01-12

#yyds干活盘点#微信小程序架构及其实现机制

小程序 VS HTML5小程序并不是 HTML5 应用，而是更偏向于传统的 CS 架构，它是基于数据驱动的模式，一切皆组件（视图组件）。下面是小程序与普通 Web App 的对比。普通 HTML5 都是执行在浏览器的宿主环境，浏览器提供 window、document 等 BOM 对象，但小程序没有 window、document，它更像是一个类似 Node.js

小程序

webview

图层

原创点赞1 阅读110 收藏0 评论0 2021-12-31

#yyds干活盘点# 小程序开发基础知识

准备工作小程序开发要先注册小程序账号，有了小程序账号才可以使用开发者工具。小程序是一种特殊的开发形式，里面的 API 和组件都是自己定制的，因此在普通的浏览器中不能预览，要预览功能和页面就需要使用开发者工具。注册小程序账号先准备一个没有注册过公众号的邮箱，然后访问小程序介绍页面并点击底部的「前往注册」按钮，再按照提示填写个人信息，最后进入邮箱激活账号即可。详细流程请参考官方文档。安

小程序

开发者工具

xml

原创点赞1 阅读59 收藏0 评论0 2021-12-30

#yyds干活盘点#动态数据应用 · 使用 Vue.js 为数据流添加动态转换过滤器

1、基于数据的动态转换过滤器在上一节中我们通过一个既定的typeSet来模拟一个不断产生数据的流式数据集，而在我们使用Vue.js进行构建的数据应用中，也是根据这个typeSet来提前生成了一个用于过滤数据的过滤器。但有的时候前端的数据应用并不知道来自其他数据服务的数据内容究竟有哪些过滤项，那么我们便需要根据数据应用所得到的实际数据来生成过滤器。functionmockDataSource(typ

数据集

数据

字段

原创点赞1 阅读61 收藏0 评论0 2021-12-29

#yyds干活盘点# javascript基本数据处理 · 字符串和数字

无论在任何的现代编程语言中，最基本的数据格式都会是字符串和数字。字符串用于表达人类文明的自然语言，数字用于表达量化世界的各种数值。2.1字符串字符串在自然世界中充当着非常重要的角色，所有的自然语言（比如汉语、英语等）都由多个字符组成，比如经典的“HelloWorld”这句话则由11个字符组成：H,e,l,l,o,<space,W,o,r,l,d。而当我们在希望使用计算机程序来理解我们平常所说的自然

字符串

javascript

ico

原创点赞0 阅读173 收藏0 评论0 2021-12-28

#yyds干活盘点# webpack 的概念和基础使用

webpack 的概念和基础使用我们在小册介绍中提到，webpack 是一个 JS 代码模块化的打包工具，藉由它强大的扩展能力，随着社区的发展，逐渐成为一个功能完善的构建工具。相信开始学习这个小册的同学们多多少少都能够理解为什么前端开发中会使用到 webpack，我们不再详细介绍 webpack 的使用背景，直奔本小节的主题。安装和使用我们使用 npm 或者 yarn 来安装 webpack，可以

node.js

css

字段

原创点赞1 阅读71 收藏1 评论0 2021-12-27

#yyds干活盘点# 基本数据处理 · 字符串和数字

无论在任何的现代编程语言中，最基本的数据格式都会是字符串和数字。字符串用于表达人类文明的自然语言，数字用于表达量化世界的各种数值。2.1 字符串字符串在自然世界中充当着非常重要的角色，所有的自然语言（比如汉语、英语等）都由多个字符组成，比如经典的 “Hello World” 这句话则由 11 个字符组成：H,e,l,l,o,,W,o,r,l,d。而当我们在希望使用计算机程序来理解我们平

字符串

ico

javascript

原创点赞0 阅读115 收藏0 评论0 2021-12-26

#yyds干活盘点# 基本数据处理 · 数组

基本数据处理 · 数组让我们再次把目光放回我们在第 2 节中提出的大数据中的 “Hello World” 词频统计上。在前面的章节中，我们将 MIT 开源协议中的一部分文本进行了预处理，并将这个文本切割成以字符串为元素的数组。那么我们就可以开始学习如何处理数组、更强的数组以及使用数组完成我们的案例。4.1 数组数组在数学中也可以称为“数列”，也就是以数字或其他类型内容为元素的有序集合。// 整

数组

javascript

数据

原创点赞0 阅读91 收藏0 评论0 2021-12-24

#yyds干活盘点#你需要了解的包管理工具与配置项（大西安封城，居家办公的第一天，加油）

大西安封城，居家办公的第一天，加油?构建基础篇：你需要了解的包管理工具与配置项任何一个项目的构建离不开工具和统一的管理标准，在项目开发和维护过程中，我们需要了解安装包的相应工具和配置文件，以此来有效的进行项目的迭代和版本的更新，为项目提供基本的运行环境。本文将详细介绍构建 Vue.js 项目相关的依赖包安装工具和相应的配置文件，为大家提供参考。介绍相信大家对于包管理工具的使用一定不会陌生，毕竟它

json

依赖包

安装包

原创点赞0 阅读86 收藏0 评论0 2021-12-23

#yyds干活盘点# 本地存储——从 Cookie 到 Web Storage、IndexDB

随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。我认为，WebApp 就是我们前端性能优化的产物，是我们前端工程师对体验不懈追求的结果，是 Web 网页在性能上向 Native 应用的一次“宣战”。 WebApp 优异的性能表现，要归功于浏览器存储技术的广泛应用

数据

数据库

本地存储

原创点赞0 阅读171 收藏0 评论0 2021-12-22

#yyds干活盘点# 前端页面--响应式页面开发

响应式页面开发响应式页面开发的能力可以定义为：利用一套代码实现页面的布局和排版以适配不同分辨率的设备。响应式页面开发要求我们解决两大问题：为不同特性（如横屏还是竖屏等）的浏览器视窗使用不同的样式代码让页面元素的尺寸能够依据浏览器视窗尺寸变化而平滑变化本小节的学习目标是学会解决上述问题并能够开发这样一个经典的移动端响应式页面：我们分 3 个步骤来实现这样一个响应式页面。步骤 1 - 添加 viewp

响应式

css

移动端

原创点赞0 阅读95 收藏0 评论0 2021-12-21

#yyds干活盘点# env 文件与环境设置

env 文件与环境设置在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的功能呢？这里就需要引入环境的概念。一般一个项目都会有以下 3 种环境：开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）测试环境（测试阶段，上线前版本，除了

配置文件

环境变量

json

原创点赞0 阅读102 收藏0 评论0 2021-12-20

#yyds干活盘点# 批量异步更新策略及 nextTick 原理

批量异步更新策略及 nextTick 原理为什么要异步更新通过前面几个章节我们介绍，相信大家已经明白了 Vue.js 是如何在我们修改 data 中的数据后修改视图了。简单回顾一下，这里面其实就是一个“setter -> Dep -> Watcher -> patch -> 视图”的过程。假设我们有如下这么一种情况。<template> &

vue.js

数据

新视图

原创点赞0 阅读53 收藏0 评论0 2021-12-19

#yyds干货盘点# 优化首屏体验——Lazy-Load 初试

Lazy-Load 初相见Lazy-Load，翻译过来是“懒加载”。它是针对图片加载时机的优化：在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！但我们再想，用户真的需要这么多图片吗？不对，用户点开页面的瞬间，呈现给他的只

加载

html

懒加载

原创点赞0 阅读69 收藏0 评论0 #yyds干货盘点# 2021-12-18

#yyds干货盘点# webpack 在VUE CLI 3 中的应用

构建基础篇：webpack 在 CLI 3 中的应用webpack 作为目前最流行的项目打包工具，被广泛使用于项目的构建和开发过程中，其实说它是打包工具有点大材小用了，我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。而在 Vue 的项目中，webpack 同样充当着举足轻重的作用，比如打包压缩、

css

html

配置项

原创点赞0 阅读177 收藏0 评论0 #yyds干货盘点# 2021-12-17

#yyds干货盘点# 具有数据校验功能的表单组件

具有数据校验功能的表单组件——Form之前有介绍了组件间的两种通信方法：provide / inject 和 dispatch / broadcast，前者是 Vue.js 内置的，主要用于子组件获取父组件（包括跨级）的状态；后者是自行实现的一种混合，用于父子组件（包括跨级）间通过自定义事件通信。本小节则基于这两种通信方法，来实现一个具有数据校验功能的表单组件——Form。Form 组件概览（以I

表单

数据

缓存

原创点赞0 阅读113 收藏0 评论0 #yyds干货盘点# 2021-12-16

#yyds干货盘点# 找到任意组件实例——findComponents 系列方法

组件的通信：找到任意组件实例——findComponents 系列方法概述前面的小节我们已经介绍了两种组件间通信的方法：provide / inject 和 dispatch / broadcast。它们有各自的使用场景和局限，比如前者多用于子组件获取父组件的状态，后者常用于父子组件间通过自定义事件通信。本节将介绍第 3 种组件通信方法，也就是 findComponents 系列方法，它并非 V

vue.js

递归

数组

原创点赞0 阅读76 收藏0 评论0 #yyds干货盘点# 2021-12-15

#yyds干货盘点# 派发与广播——自行实现 dispatch 和 broadcast 方法

组件的通信：provide / inject上一节中我们说到，ref 和 $parent / $children 在跨级通信时是有弊端的。当组件 A 和组件 B 中间隔了数代（甚至不确定具体级别）时，以往会借助 Vuex 或 Bus 这样的解决方案，不得不引入三方库来支持。本小节则介绍一种无依赖的组件通信方法：Vue.js 内置的 provide / inject 接口。什么是

ide

vue.js

数据

原创点赞0 阅读165 收藏0 评论0 #yyds干货盘点# 2021-12-14

#yyds干货盘点# 组件通信（组件传值）

组件的通信 1：provide / inject上一节中我们说到，ref 和 $parent / $children 在跨级通信时是有弊端的。当组件 A 和组件 B 中间隔了数代（甚至不确定具体级别）时，以往会借助 Vuex 或 Bus 这样的解决方案，不得不引入三方库来支持。本小节则介绍一种无依赖的组件通信方法：Vue.js 内置的 provide / inject 接口。什么是

ide

vue.js

数据

ajax

伪代码

原创点赞0 阅读392 收藏0 评论0 #yyds干货盘点# 2021-12-13

#yyds干货盘点# 更灵活的组件：Render 函数与 Functional Render

更灵活的组件：Render 函数与 Functional RenderVue.js 2.x 与 Vue.js 1.x 最大的区别就在于 2.x 使用了 Virtual DOM（虚拟 DOM）来更新 DOM 节点，提升渲染性能。一般来说，我们写 Vue.js 组件，模板都是写在内的，但它并不是最终呈现的内容，template 只是一种对开发者友好的语法，能够一眼看到 DOM 节点，容易维护，在

Vue

组件

原创点赞0 阅读168 收藏0 评论0 #yyds干货盘点# 2021-12-12

#yyds干货盘点# 树形控件(组件)——Tree

树形控件——Tree本小节基于 Vue.js 的递归组件知识，来开发一个常见的树形控件—Tree。 Tree 组件是递归类组件的典型代表，它常用于文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。本节要实现的 Tree 组件具有以下功能：节点可以无限延伸（递归）；可以展开 / 收起子节点；节点可以选

数据

递归

子节点

字段

数组

原创点赞0 阅读221 收藏0 评论0 #yyds干货盘点# 2021-12-11

#yyds干货盘点# Vue递归组件和动态组件的认识

递归组件与动态组件递归组件递归组件就是指组件在模板中调用自己，开启递归组件的必要条件，就是在组件中设置一个 name 选项。比如下面的示例：<template> <div> <my-component></my-component> </div></template><script> expor

递归

缓存

vue.js

字段

正则表达式

原创点赞1 阅读255 收藏0 评论0 #yyds干货盘点# 2021-12-10

#yyds干货盘点# Vue.js 运行机制全局概览

Vue.js运行机制全局概览全局概览这一节笔者将为大家介绍一下Vue.js内部的整个流程，希望能让大家对全局有一个整体的印象，然后我们再来逐个模块进行讲解。从来没有了解过Vue.js实现的同学可能会对一些内容感到疑惑，这是很正常的，这一节的目的主要是为了让大家对整个流程有一个大概的认识，算是一个概览预备的过程，当把整本小册认真读完以后，再来阅读这一节，相信会有收获的。首先我们来看一下笔者画的内部流

vue.js

初始化

新视图

响应式

字符串

原创点赞1 阅读197 收藏0 评论0 #yyds干货盘点# 2021-12-09

#yyds干货盘点# Vuex 状态管理的工作原理

Vuex状态管理的工作原理为什么要使用Vuex当我们使用Vue.js来开发一个单页应用时，经常会遇到一些组件间共享的数据或状态，或是需要通过props深层传递的一些数据。在应用规模较小的时候，我们会使用props、事件等常用的父子组件的组件间通信方法，或者是通过事件总线来进行任意两个组件的通信。但是当应用逐渐复杂后，问题就开始出现了，这样的通信方式会导致数据流异常地混乱。!(https://use

响应式

github

数据

vue.js

工作原理

原创点赞0 阅读174 收藏0 评论0 #yyds干货盘点# 2021-12-08

#yyds干货盘点# 剖析 Vue.js 内部运行机制--template 模板是怎样通过 Compile 编译的

template模板是怎样通过Compile编译的Compilecompile编译可以分成parse、optimize与generate三个阶段，最终需要得到renderfunction。这部分内容不算Vue.js的响应式核心，只是用来编译的，笔者认为在精力有限的情况下不需要追究其全部的实现细节，能够把握如何解析的大致流程即可。!(https://usergoldcdn.xitu.io/2017/

html

正则

字符串

for循环

标签属性

原创点赞0 阅读143 收藏0 评论0 #yyds干货盘点# 2021-12-07

#yyds干货盘点# CSS中的经典使用

经典双飞翼布局先看效果!image.png(https://s2.51cto.com/images/20211206/1638770103455601.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5na

html

css

边距

双飞翼布局

html页面

原创点赞1 阅读247 收藏0 评论0 #yyds干货盘点# 2021-12-06

#yyds干活盘点# JavaScript的继承方式及其优缺点

第一种：原型链继承利用原型链的特点进行继承jsfunctionParent(){this.name='王大锤';this.type='JS','HTML','CSS','Vue';}Parent.prototype.Say=function(){console.log(this.name);}functionSon(){};Son.prototype=newParent();son1=newSon

构造函数

html

实例化

css

原型对象

原创点赞0 阅读90 收藏0 评论0 2021-11-25

#yyds干货盘点# React 基础知识汇总

1、创建单页面应用程序命令：npxcreatereactappmyappcdmyappnpmstart2、JSX：JSX，是一个JavaScript的语法扩展。我们建议在React中配合使用JSX，JSX可以很好地描述UI应该呈现出它应有交互的本质形式。JSX可能会使人联想到模版语言，但它具有JavaScript的全部功能。3、为什么使用JSX？React认为渲染逻辑本质上与其他UI逻辑内在耦合，

生命周期

网络请求

构造函数

调用顺序

初始化

原创点赞1 阅读366 收藏0 评论0 #yyds干货盘点# 2021-11-24

官方博客	意见反馈	了解我们	全部文章
在线客服	网站地图	热门标签

51CTO博客

Demo研习社の博客

Vue或者Html快速实现文件夹上传

#yyds干货盘点# 前端构建新玩法：Vite 与你的开端

复杂数据处理 · 结构转换

#yyds干活盘点#微信小程序架构及其实现机制

#yyds干活盘点# 小程序开发基础知识

#yyds干活盘点#动态数据应用 · 使用 Vue.js 为数据流添加动态转换过滤器

#yyds干活盘点# javascript基本数据处理 · 字符串和数字

#yyds干活盘点# webpack 的概念和基础使用

#yyds干活盘点# 基本数据处理 · 字符串和数字

#yyds干活盘点# 基本数据处理 · 数组

#yyds干活盘点#你需要了解的包管理工具与配置项（大西安封城，居家办公的第一天，加油）

#yyds干活盘点# 本地存储——从 Cookie 到 Web Storage、IndexDB

#yyds干活盘点# 前端页面--响应式页面开发

#yyds干活盘点# env 文件与环境设置

#yyds干活盘点# 批量异步更新策略及 nextTick 原理

#yyds干货盘点# 优化首屏体验——Lazy-Load 初试

#yyds干货盘点# webpack 在VUE CLI 3 中的应用

#yyds干货盘点# 具有数据校验功能的表单组件

#yyds干货盘点# 找到任意组件实例——findComponents 系列方法

#yyds干货盘点# 派发与广播——自行实现 dispatch 和 broadcast 方法

#yyds干货盘点# 组件通信（组件传值）

#yyds干货盘点# 更灵活的组件：Render 函数与 Functional Render

#yyds干货盘点# 树形控件(组件)——Tree

#yyds干货盘点# Vue递归组件和动态组件的认识

#yyds干货盘点# Vue.js 运行机制全局概览

#yyds干货盘点# Vuex 状态管理的工作原理

#yyds干货盘点# 剖析 Vue.js 内部运行机制--template 模板是怎样通过 Compile 编译的

#yyds干货盘点# CSS中的经典使用

#yyds干活盘点# JavaScript的继承方式及其优缺点

#yyds干货盘点# React 基础知识汇总