huangpb的博客

是一个高度可定制的虚拟滚动列表插件，它可以在大量数据下提供高性能的渲染和滚动。它可以处理各种类型的数据，例如列表、表格、瀑布流等，并且支持水平和垂直滚动，也支持动态列表项。vue-virtual-scroller的API和事件系统也非常丰富，可以让开发者轻松地自定义滚动逻辑和交互效果。

移除 .eslintrc.js extends 里的 '@vue/typescript/recommended'步骤一：移除npm依赖。将所有ts文件改为js。

仅支持 Vue2，不支持 Vue3安装依赖包npm i vue-lazyload -S在 main.js 使用插件import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { preLoad: 1.3, // 预加载高度的比例 error: require('./assets/error.gif'), loading: require('./assets/loading.gif'), attempt: .

keep-alive实现原理

Object.definePropertyVue的响应式原理最底层是通过 Object.defineProperty 的 get 和 set 实现的。function defineReactive (obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: () => { consol

封装一：只把弹窗封装成一个单独的组件1. 弹窗组件 my-dialog.vue<template> <el-dialog title="选择水果" :visible.sync="dialogVisible" width="30%" @close="handleClose" > <el-checkbox-group v-model="checkList"> <el-checkbox

一、 Makefile 文件Make是最常用的构建工具，它的规则配置一般写在 Makefile 文件里。make 的使用有点像 package.json 里的 scripts，把一段长命令用一段短命令来执行。Makefile文件由一系列规则（rules）构成。每条规则的形式如下。<target> : <prerequisites> [tab] <commands>上面第一行冒号前面的部分，叫做"目标"（target），冒号后面的部分叫做"前置条件

一、Element UI 组件库二次开发的大致流程1. 从 Element 官方 clone 一份dev 源码到本地2.安装依赖：npm i3.修改组件源码组件内容在 “packages/组件目录” 里修改。组件样式在 “packages/theme-chalk/src/组件名.scss” 里修改。查看效果可以在 “examples/docs/zh-CN/组件名.md” 里增加自己需要调试的代码，就可以在页面的相应的组件的例子中看到自己修改后的效果。4.如果要上传到 n.....

一、介绍​​​​​​​vue-create-api是一个能够让 Vue 组件通过 API 方式调用的插件。经常在弹出框上使用。组件必须定义 name 属性，例如，this.$createHello 里的 hello 就是组件名 调用 $create 方法时，组件会被添加到 body 调用 $create 方法返回值是Vue组件实例，可以用返回值的 remove() 方法去销毁组件和删除添加到 body 下DOM元素二、安装npm i -S vue-create-api三、使用..

前言：Vue.js CLI工具 不知不觉发展到了4.0时代，CLI给人最直白的感受是没有了build文件夹跟config文件夹，所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。有三种方式，推荐第二种标准版（无需安装依赖，直接复制即可配置）。1、依赖库npm install vue-cli-configjs2、标准版// vue.config.jsconst path = require('path');const

1. 自动聚焦第1种方法：使用 $nextTick<input ref="myInput" v-model="text"/>mounted() { this.$nextTick(function () { this.$refs.myInput.focus(); });},第2种方法：自定义 v-focus 指令Vue.directive('focus', { inserted(el) { el.focus(); },});如果你有

1. 定义路由import Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);const routes = [ { path: "/", component: () => import(/* webpackChunkName: "layout" */ "./layouts/BasicLayout"), beforeEnter: (to, from, next) =&gt.

方法一：自己封装一个高度过渡组件Vue的 <transition> 组件是实现不了元素高度过渡的，所以我们可以自己封装一个高度过渡组件。组件的原理是：使用原生的 CSS3 transition 属性，在改变元素的高度的同时会有过渡效果。这里有个注意点，显示的时候为什么元素的高度要赋值为offsetHeight 的高度，而不能设置成 auto？原因是CSS3 transition 属性不支持 height 为 auto 的过渡。以下是组件的封装代码：<...

1. 首先安装Animate.cssnpm install animate.css --save2. 在 main.js 引入import 'animate.css';3. 更改 <transition> 组件的class我使用的是 Animate 4.x 版本，跟 3.x 语法有区别。<transition enter-active-class="animate__animated animate__bounceInLeft" leav.

用 vue create 创建项目的时候选手动配置，然后选择 jest，生成的项目中就会有一个 jest 的配置文件jest.config.js 和一个对 HelloWorld.vue 组件的单测示例tests/unit/example.spec.js。用 Cli 创建的项目的时候，单元测试的准备工作脚手架已经帮你做好了，你直接运行 npm run test:unit 就能把单测示例跑起来。jest.config.js首先，我们来看一下 jest 配置文件，默认生成的配置文件只有pres...

我们来手把手撸一个下面这样的数据驱动的router：new Router({ id: 'router-view', // 容器视图 mode: 'hash', // 模式 routes: [ { path: '/', name: 'home', component: '<div>Home</div>', beforeEnter: (next) => { console.log('befo.

随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高，单页应用（SPA）成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式： 利用URL中的hash（“#”） 利用History interface在 HTML5中新增的方法 vue-router是Vue.js框架的路由插件，下面我们从它的源码入手

路由原理在解析源码前，先来了解下前端路由的实现原理。 前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式hash 模式 history 模式www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面。History 模式是 HTML5 新推出的功能，比之 Hash U

这里介绍两种安装vue-devtools 的方式。方式一：通过谷歌应用商店安装vue-devtools 扩展程序方式二：把本地已有的扩展程序文件添加到谷歌浏览器的扩展程序里这种方式适用于无法打开谷歌应用商店的同学。1. 先在收藏猫插件点击“下载插件手动安装”下载 vue-devtools 扩展插件。下载下来的文件是以 .crx 为扩展名的，Chrome的“扩展程序”都是以 .crx 为扩展名。2. 进入谷歌浏览器的扩展程序页，直接把刚才下载的扩展程序文件拖进去即可。...

vue的使用相信大家都很熟练了，使用起来简单。但是大部分人不知道其内部的原理是怎么样的，今天我们就来一起实现一个简单的vueObject.defineProperty()实现之前我们得先看一下Object.defineProperty的实现，因为vue主要是通过数据劫持来实现的，通过 get、 set来完成数据的读取和更新。  var obj = {name:'wclimb'...

1. 首先安装vue插件，安装方法：　　setting  --&gt;  plugin  ，点击plugin，在内容部分的左侧输入框输入vue，会出现两个关于vue的插件，点击安装即可。安装完成后，就可以看到，新建文件时，会有vue文件的提示。　　如下图所示：　　2. 设置vue新建文件模板。　　步骤： settings  --&gt;  file and code templates .在内容区...

先讲点实际的实用点的钩子：Created：vue实例被生成后的一个生命周期钩子函数。(页面初始化数据加载一般写这里);beforeCreate：给个loading界面 created撤销loading;beforeDestory：你确认删除XX吗？destoryed：当前组件已被删除，清空相关内容关于Vue组件生命周期，翻译后图示：m