03 2018 档案
摘要：1、配置@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // 需要引入 path export default defineConfig({ plug
阅读全文
摘要：一、命名路由 有时我们通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。 我们直接在路由下添加一个 name 即可。 要链接到一个命名路由，可以给 router-link 的
阅读全文
摘要：一、visibilitychange事件 首先说一个h5事件 visibilitychange visibilitychange是浏览器新添加的一个事件，当浏览器当前页面被最小化，或者切换到浏览器的其他标签页，或者从其他页面或应用返回到当前标签页，都会触发这个事件。 document.visibil
阅读全文
摘要：我们说到如果监听的属性是个对象呢？那么这个对象中的其他属性岂不就是监听不了了吗？如下： 倘若user中的name、age属性变化，如何知道它们变化了呢？今儿，就来解决这一问题。 通过走读Vue源码，发现他是利用Observer构造函数为每个对象创建一个Observer对象，来监听数据的，如果数据中的
阅读全文
摘要：问题1：如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？ 问题2：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？ 为了应对如
阅读全文
摘要：一、什么是节流和去抖？ 1、节流 节流就是拧紧水龙头让水少流一点，但是不是不让水流了。想象一下在现实生活中有时候我们需要接一桶水，接水的同时不想一直站在那等着，可能要离开一会去干一点别的事请，让水差不多流满一桶水的时候再回来，这个时候，不能把水龙头开的太大，不然还没回来水就已经满了，浪费了好多水，这
阅读全文
摘要：Vue有一核心就是数据驱动（Data Driven），允许我们采用简洁的模板语法来声明式的将数据渲染进DOM，且数据与DOM是绑定在一起的，这样当我们改变Vue实例的数据时，对应的DOM元素也就会改变了。 通过粗浅地走读Vue的源码，发现达到这一效果的核心思路其实就是利用ES5的defineProp
阅读全文
摘要：一、什么是数据驱动 数据驱动是vuejs最大的特点。在vuejs中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。 比如说我们点击一个button，需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中，对于页面的修改我们一般是这样的一个流程
阅读全文
摘要：Vue能数据驱动视图发生变更的关键，就是依赖它的响应式系统。响应式系统如果根据数据类型区分，对象和数组它们的实现会有所不同；解释响应式原理，如果只是为了说明响应式原理而说，但不是从整体流程出发，不在Vue组件化的整体流程中找到响应式原理的位置，对深刻理解响应式原理并不太好 一、对象响应式数据的创建
阅读全文
摘要：一、vuex/pinia数据为proxy对象时如何获取值 1、问题背景：使用vue3.0时，因为底层是使用proxy进行代理的，所以当我们打印一些值的时候，是proxy代理之后的是Proxy对象，Proxy对象里边的[[Target]]才是真实的对象。 2、那么我们如何获取到其真正的值呢？ 3、第一
阅读全文
摘要：一、vue-resource特点 1、体积小：vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。 2、支持主流浏览器：和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器
阅读全文
摘要：在html中使用元素，会有一些属性，如class,id，还可以绑定事件，自定义组件也是可以的。当在一个组件中，使用了其他自定义组件时，就会利用子组件的属性和事件来和父组件进行数据交流。 父子组件之间的通信就是 props down,events up，父组件通过 属性props向下传递数据给子组件，
阅读全文
摘要：上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。” 今天我们将着重介绍slot和父子组件之间的访问和通信。slot是一
阅读全文
摘要：一、打包第三方类库 下面说2种方法： 第一种： 1、引入jQuery，首先安装： 2、安装好后，在index.js中引入，用jquery语法进行测试 3、webpack打包测试，jquery语法正常使用。 第二种： 如果你觉的上面的方法和webpack没什么关系，只是普通的引入，webpack只是负
阅读全文
摘要：一、less文件打包和分离 1、要使用less，首先使用npm安装less服务；还需要安装Less-loader用来打包使用。 2、在module中配置 3、在html中编写一个div，在css中新建一个less文件 4、引入到index.js中 5、使用webpack进行打包，输入npm run
阅读全文
摘要：一、babel支持 Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-pres
阅读全文
摘要：一、CSS中的图片处理： 1、首先在网上随便找一张图片，在src下新建images文件夹，将图片放在文件夹内 2、在index.html中写入代码：<div id="pic"></div>来放置图片 3、设置图片的css 4、编写完成后，安装file-loader和url-loader 5、安装好后
阅读全文
摘要：一、CSS文件打包 1、在src下新建css文件，在css文件下新建index.css文件，输入以下代码 2、css建立好后，需要引入到入口文件，这里我们引入到index.js中 3、在终端安装style-loader和css-loader 4、安装好后，我们开始在webpack.config.js
阅读全文
摘要：一、core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended 之前的电脑 node 是 14 版本，对应 npm 是 6 版本，项目都是正常启动的。但是新换了个笔记本，新装 node 环境，node 是最新的 1
阅读全文
摘要：一、安装和配置webpack 1、全局安装webpack 这样就安装好了webpack，可以再全局通过webpack -v来查看是否安装成功。 2、先创建项目目录结构，根目录是mywebpack。进入项目根目录，执行：npm init，生成package.json文件，内容就是一堆json数据，基本
阅读全文
摘要：npm 是 Node 的模块管理器，功能极其强大。它是 Node 获得成功的重要原因之一。正因为有了npm，我们只要一行命令：npm install，就能安装别人写好的模块 。 一、从 npm install 说起 npm install 命令用来安装模块到node_modules目录。 安装之前，
阅读全文
摘要：由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。 一、安装Node.js 首先，从Node.js官网下载对应平台的安装程序，网速慢的童鞋请移步国内镜像。在Windows上安装时务必选择全部组件，包括勾选Add to Path。 安装完成后，在Wind
阅读全文
摘要：组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。 那么什么是组件呢？组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。 一、组件的创建和注册基本步骤 Vue
阅读全文
摘要：一、问题记录 最近在 linux 使用nodejs时，遇到个问题，就是 node 都安装成功了，但是进入 bin 目录，执行 ./node -v 总是报错，bash: ./node: No such file or directory，查资料解决方案如下： 1、最近在使用Linux操作系统执行一个可
阅读全文
摘要：一、打包图 打包图（ Pack ），用于表示包含与被包含的关系，也可表示各对象的权重，通常用一圆套一圆来表示前者，用圆的大小来表示后者。 1、布局（数据转换） 第 1 行：打包图的布局 第 2 行：size() 设定转换的范围，即转换后顶点的坐标(x,y)，都会在此范围内。 第 3 行：radius
阅读全文
摘要：每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。 首先贴一张Vue文档给出的生命周期图示，并添加了一些注释： Vue2.0的生命周期钩子一共有10个，同样结合官方文档作出了下表 （除了beforeCreate和created钩子之外，其他钩子均在服务器端渲染期间不
阅读全文
摘要：首先，参考之前一篇vue生命周期的总结：Vue生命周期总结 接下来我们来分析下官方文档经典流程图，每个阶段到底发生了什么事情。 1、在beforeCreate和created钩子函数之间的生命周期 在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属
阅读全文
摘要：在移动端，有个很重要的概念，叫做懒加载，适用于一些图片资源特别多，ajax数据特别多的页面中，经常会有动态加载数据的场景中，这个时候，我们通常是使用监听scroll或者使用setInterval来判断，元素是否进入视图，其中scroll由于其特别大的计算量，会有性能问题，而setInterval由于
阅读全文
摘要：一、弦图 1、弦图是什么 弦图（Chord），主要用于表示两个节点之间的联系的图表。两点之间的连线，表示谁和谁具有联系。 2、数据 初始数据为： 数据是一些城市名和一些数字，这些数字表示城市人口的来源。其意思如下： 左边第一列是被统计人口的城市，上边第一行是被统计的来源城市，即： 北京市的人口有 1
阅读全文
摘要：一、饼状图 在布局的应用中，最简单的就是饼状图。 1、数据 有如下数据，需要可视化： 这样的值是不能直接绘图的。例如绘制饼状图的一个部分，需要知道一段弧的起始角度和终止角度，这些值都不存在于数组 dataset 中。因此，需要用到布局，布局的作用就是：计算出适合于作图的数据。 2、布局（数据转换）
阅读全文
摘要：一、图表交互操作 与图表的交互，指在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应。 交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等
阅读全文
摘要：一、动态效果 D3 支持制作动态的图表。有时候，图表的变化需要缓慢的发生，以便于让用户看清楚变化的过程，也能给用户不小的友好感。 1、什么是动态效果 前面制作的图表是一蹴而就地出现，然后绘制完成后不再发生变化的，这是静态的图表。 动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置
阅读全文
摘要：比例尺是 D3 中很重要的一个概念。绘制图形时直接用数值的大小来代表像素不是一种好方法，本章正是要解决此问题。 一、为什么需要比例尺 上一章制作了一个柱形图，当时有一个数组，绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。此方式非常具有局限性，如果数值过大或过小，例如：
阅读全文
摘要：一、元素操作： 1、选择元素 select 和 selectAll，以及选择集的概念 关于 select 和 selectAll 的参数，其实是符合 CSS 选择器的条件的，即用“井号（#）”表示 id，用“点（.）”表示 class。 此外，对于已经绑定了数据的选择集，还有一种选择元素的方法，那就
阅读全文
摘要：D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。 D3 提供了各种简单易用的函数，大大简化了 JavaScript 操作数据的难度。由于它本
阅读全文
摘要：1、创建函数的5种常用方法： （1）直接声明 （2）函数表达式（这里又可以分为匿名函数表达式和具名函数表达式） （3）使用构造函数 （4）使用对象直接量的方式来创建一个函数。 （5）立即执行函数：创建后可以立即调用函数自身 2、具名函数表达式： 创建一个变量，内容为一个带有名称的函数 注意：具名函数
阅读全文
摘要：一、问题背景 有时候我们经常会遇到接口请求慢的情况，下意识里会觉得是后端接口返回的问题。其实还真不一定，这个需要具体情况具体分析，可以从控制台network具体分析 鼠标悬浮到 network 接口请求的 waterfall 上就会看到该接口的具体耗时。可以看到：queue 队列、stalled 暂
阅读全文
摘要：问题背景 页面刷新后报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME t
阅读全文
摘要：在数据库的增删改查操作中，使用最频繁的就是查询操作。而在所有查询操作中，统计数量操作更是经常被用到。关于数据库中行数统计，无论是MySQL还是Oracle，都有一个函数可以使用，那就是COUNT。但是，就是这个常用的COUNT函数，却暗藏着很多玄机，尤其是在面试的时候，一不小心就会被虐。不信的话请尝
阅读全文
摘要：数组在各个编程语言中的重要性不言而喻，但是在之前的JavaScript中数组虽然功能已经很强大，但操作方法并不完善，在ECMAScript5中做了适当的补充。 Array.isArray(element) 这是Array对象的一个静态函数，用来判断一个对象是不是数组 .indexOf(element
阅读全文
摘要：一、问题场景： 想把本地的项目访问localhost:3000访问修改成某个域名，比如a.baidu.com来访问。通过配置host：127.0.0.1 a.baidu.com，但是访问的时候报错：显示invalid host header 原因：这句话的意思是：无效的Host请求头； 因为vue
阅读全文
摘要：一、作用 setTimeout 第三个及之后的参数作用：定时器启动时候，第三个以后的参数是作为第一个fn()的参数传进去 // setTImeout 第三个及以后参数是作为第一个函数 fn 的参数传入 setTimeout(fn, 1000, 1, 2) function fn (x, y) { c
阅读全文
摘要：一、bind()方法的实现 在JavaScript中，方法往往涉及到上下文，也就是this，因此往往不能直接引用。就拿最常见的console.log("info…")来说，避免书写冗长的console，直接用log("info…")代替，不假思索的会想到如下语法： 很遗憾，运行报错：TypeErro
阅读全文
摘要：时间复杂度：按照我的理解，时间复杂度就是程序运行次数的数量级。 注意！时间复杂度不是单纯的耗时，而是指耗时与数据增长量之间的关系（一般可以套用耗时x数量增长量），我搜了下，竟然有“时间复杂度为O(1)就是耗时1秒，查找10000次时间复杂度O(n)就是耗时10000秒”这样扯淡的说法 一、时间复杂度
阅读全文
摘要：一、为什么<img>元素底部会有空白？ 要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念。 vertical align的有效取值为bas
阅读全文
摘要：一、内联元素空隙问题 当我们使用"display:inline-block"把块集元素转换为内联元素时，会发现每两个内联元素之间有一定的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。 元素被当成行内元素排版的时候，元素之间的空白符（空格、回车
阅读全文
摘要：一、结论 先说结论：使用 for 循环循环一个list，并在for循环中将某对象或者用于承载数据的list 添加add进另外一个list时，该对象或用于承载数据的 list 必须要在for循环内创建。若在for循环外创建，则 add 进的数据都会变成最后一次循环添加的数据。 List<ManHour
阅读全文
摘要：MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定
阅读全文
摘要：一、项目场景： 技术：Vue3 + TS + CompositionAPI 系统：无关 场景：在一个vue页面引用一个vue组件 二、问题描述： 1、问题现象：重复引用 首先出现警告如下： [Vue warn]: Unhandled error during execution of schedul
阅读全文
摘要：一、问题背景 在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。 1、问题描述及触发条件： 当 el-form 中 有且只存在一个input时，在这个input中回车会触发默认提交事件，可能会改
阅读全文
摘要：一、腾讯位置服务注册及获取密钥 1、注册腾讯位置服务：可以用 qq 号登陆注册，https://lbs.qq.com/recent_news.html 2、获取密钥 3、添加 key 注意：一定要勾选上 WebServiceAPI，否则会出问题。 不勾选上的话，会报错：{status: 199, m
阅读全文
摘要：一、$route.matched的作用 官方解释： 与给定路由地址匹配的标准化的路由记录数组。 个人觉得就是当有多级路由的时候，记录每一级路由，并生成数组。如： const router = new VueRouter({ routes: [ // 下面的对象就是路由记录 { path: '/foo
阅读全文
摘要：官方关于<router-link> 的 v-slot的相关介绍，并给出了一个例子 <router-view v-slot="{ Component, route }"> <transition :name="route.meta.transition || 'fade'" mode="out-in"
阅读全文
摘要：1、files.associations 配置文件关联： 任何 vue 后缀的文件会被认为是 html 文件 ，(查看编辑器右下角) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化，代码提示等。 任何 wxss 后缀的文件被认为是 css 文件 ，然后 vscode 会用 c
阅读全文
摘要：一、2 个配套插件 Auto Close Tag：用于自动补全HTML结束标签 Auto Rename Tag：自动完成另一侧标签的同步修改（使用该插件，可以在重命名一个 HTML 标签时，自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。该扩展适用于 HTML、
阅读全文
摘要：一、什么是 nrm nrm 是一个 npm 源管理器，允许你快速地在 npm 源间切换。 什么意思呢？npm默认情况下是使用npm官方源（使用npm config ls 命令可以查看），在国内用这个源肯定是不靠谱的，一般我们都会用淘宝npm源：https://registry.npm.taobao.
阅读全文
摘要：一、如何动态导入静态图片 详见文档：静态资源处理 - https://cn.vitejs.dev/guide/assets.html 1、将资源引入为 URL：服务时引入一个静态资源会返回解析后的公共路径 2、new URL(url, import.meta.url) import.meta.url
阅读全文
摘要：假如有几个数字 int score[] = {67, 69, 75, 88}; 按照从大到小排序。 有2种思路： 第一种思路：score[j] 和 score[j+1] 比较，如果前者比后者小，把前者和后者调换顺序，两两调换后一轮下来，最小的会被排到最后去。 每一轮j都从0开始，当i轮排序，就有最后
阅读全文
摘要：先说结论：几种遍历方法中for执行最快，它没有任何额外的函数调用栈和上下文。但是是不是就一定直接使用 for 循环呢？这个也不好说，我们在实际开发中需要结合语义话、可读性和程序性能，去选择究竟使用哪种方案。 一、5种遍历对比 1、for语句 是最原始的循环语句。定义一个变量i(数字类型，表示数组的下
阅读全文
