![](https://img-blog.csdnimg.cn/20201226213942660.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE
文章平均质量分 52
VUE
__畫戟__
前端。知之为知之,不知为不知
展开
-
vue 相同path不同参数的路由跳转处理
因此不会再次调用接口,同理从跳转后的页面返回上一页也不会触发生命周期钩子。相同path不同参数的路由跳转后,由于是。原创 2024-07-02 15:11:24 · 279 阅读 · 0 评论 -
H5移动端 Vue3 + vue-virtual-scroller 实现长列表性能优化
移动端在渲染长列表时 大量dom节点的渲染和重绘重排会导致页面卡顿、滚动不流畅、设备耗电加快、影响移动设备电池寿命等性能问题;这里分享使用【虚拟滚动-渲染可视区域】方案进行长列表优化,以Vue3为例,使用 `vue-virtual-scroller`实现性能优化原创 2024-04-01 23:18:17 · 2042 阅读 · 0 评论 -
vue中的diff算法
diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。转载 2023-05-08 00:49:57 · 775 阅读 · 0 评论 -
React的diff算法
React的diff算法是一种快速而高效的算法,用于计算需要更新的组件节点。通过这个算法,React能够高效地计算出需要更新的节点,并最小化操作,提高更新的性能。同时,由于React能够快速找到需要更新的节点,因此也能够保证应用的性能和响应速度。原创 2023-04-26 16:04:57 · 223 阅读 · 0 评论 -
深入浅出 React:虚拟 DOM Diff 算法解析
DOM Diff 算法的两个假设:1. 两个相同组件产生类似的 DOM 结构,不同的组件产生不同的 DOM 结构;2. 对于同一层次的一组子节点,它们可以通过唯一的 id 进行区分。转载 2023-04-21 01:00:51 · 591 阅读 · 0 评论 -
Vue3快速上手
Vue3带来了什么?1.性能的提升 *打包大小减少41%;*初次渲染快55%, 更新渲染快133% ;*内存减少54% … ;2.源码的升级 *使用Proxy代替defineProperty实现响应式 ;*重写虚拟DOM的实现和Tree-Shaking … ;3.新的特性 1.Composition API(组合API);*setup配置 *ref与reactive *watch与watchEffect * provide与inject 2. 新的内置组件 *Fragment * Teleport ....转载 2022-01-16 21:14:39 · 408 阅读 · 1 评论 -
Vue3响应式原理
实现原理: 通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读取、修改、新属性的添加、属性的删除等; 通过Reflect(反射):对呗代理对象的属性进行操作。原创 2022-01-15 12:01:26 · 116 阅读 · 0 评论 -
uni-app 页面级组件onLoad 不触发问题
uni-app onLoad原创 2021-12-21 16:09:37 · 3473 阅读 · 6 评论 -
解决【v-show 有时失效】问题
解决 小程序 v-show 失效 问题;v-show 样式权重;v-show hidden;剖析 v-show原创 2021-11-17 14:46:44 · 5274 阅读 · 0 评论 -
uni-app 分类组件
uni-app 分类组件,支持多平台,支持搜索;uni-app垂直分类组件原创 2021-11-16 20:58:23 · 1982 阅读 · 6 评论 -
使用Vue CLI,服务端构造index.html,如何引入hash之后的JS、CSS等资源文件?
一、首先,前端打包构造index.html一般情况下,当我们运行vue-cli-service build时,会打包出一个静态资源包,包含的index.html会带有注入的资源和 resource hint,资源包会带有hash,打包后如下:index.html:部署时直接服务器访问这个index.html就可以正常访问了。二、服务器端构造index.html,有什么问题呢?如果是服务器端构造的html,需要引入css和js文件,但服务器端压根不知道splitChun...原创 2020-12-17 11:49:45 · 3133 阅读 · 2 评论 -
Vue slot 默认值取其他 slot
slot 默认使用其他传进来的 slot 值,并且还支持对当前的 slot 修改原创 2021-11-15 21:43:16 · 1688 阅读 · 0 评论 -
Vue slot 跨组件传递
Vue slot 跨组件传递、Vue slot 透传、Vue slot 多级传递、很多情况下,我们需要使用到嵌套组件,嵌套组件中深层的组件如何获取外部传进来的 slot 呢?原创 2021-11-15 21:27:15 · 2784 阅读 · 0 评论 -
uni-app多选select组件,兼容多平台小程序、H5
uni-app 多选select组件1. 多选select组件目前只支持多选,单选请用单选select组件2. 支持配置关键字段3. 兼容 H5、微信小程序、百度小程序、支付宝小程序、头条小程序4. 按需引用5. 性能良好,无bug原创 2021-10-19 22:23:28 · 10788 阅读 · 18 评论 -
自定义组件的 v-model
一个组件上的v-model默认会利用名为value的 prop 和名为input的事件,但是像单选框、复选框等类型的输入控件可能会将valueattribute 用于不同的目的。model选项可以用来避免这样的冲突:Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, templat...原创 2021-10-17 22:10:49 · 201 阅读 · 0 评论 -
vue开发 - transition之弹窗动画popup
页面上需要弹出一个列表供用户选择,通过简单的v-show控制,感觉体验上总要差那么一点,于是加上了vue的transition,最终实现的效果就是,点击选择银行时,银行列表从下面一点点滑动上来,选择完成后,慢慢滑动 下去,贴上代码:先看下效果:<template> <div class="xn-container"> <button class="type1" @click="showCssPopup(true)">css transiti转载 2021-10-16 23:00:26 · 3471 阅读 · 4 评论 -
npm(六):使用Vue CLI构建 lib 发布npm包全流程
使用Vue CLI 通过--target lib 将一个单独的入口构建为一个库,本文重点在于组件编写过程,在打包脚本配置、全局组件、局部组件、组件包样式修改、共享全局样式变量、图片资源、背景图片、字体、iconfont、完整引入、局部引入等细节方面有详细的阐述npm包构建并发布手把手教程...原创 2021-10-06 15:31:21 · 10208 阅读 · 3 评论 -
实现【企业微信自建应用使用uni-app H5 开发】,并解决【uni-app集成微信JSSDK(wx、jWeixin)变量冲突问题】
这里讲的是企业微信API,关于企业微信管理后台的配置这里暂时不讲  ̄□ ̄||1.企业微信自建应用的开发与调试2.讲述企业微信自建应用主体逻辑3. 登录授权、SDK使用4.解决uni-app打包后与微信JSSDK(wx、jWeixin)变量冲突问题...原创 2021-07-29 15:58:43 · 5164 阅读 · 20 评论 -
一款可以支持多选的uni-app H5端PopupSelect
<template> <u-popup :safe-area-inset-bottom="true" class="select-popup" mode="bottom" v-model="show" @close="close"> <view class="select-popup-header"> <view class="popup-cancel"> <u-button type=".原创 2021-06-15 17:40:06 · 671 阅读 · 0 评论 -
解决【uni-app H5端页面刷新之后页面栈会消失】
H5端页面刷新之后页面栈会消失,此时navigateBack不能返回,如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。export default function() { const canNavBack = getCurrentPages() if (canNavBack && canNavBack.length > 1) { uni.navigateBack({ delta: 1 }) } else.原创 2021-06-09 16:29:58 · 1868 阅读 · 0 评论 -
Vue 实现在文本溢出后浮现Tooltip、及文本展开收起效果
1.一个实现在文本溢出后浮现Tooltip,文本不溢出则不显示Tooltip的Vue组件;2.还可以做文本展开收起效果;持续迭代中,开源原创 2021-06-05 18:21:10 · 2880 阅读 · 9 评论 -
Eslint
module.exports = { 'env': { 'browser': true, 'node': true, 'es6': true }, 'globals': { 'uni': true }, 'extends': [ 'eslint:recommended', 'plugin:vue/essential' ], 'parserOptions': { 'ecmaVersion': 12, 'sourceT.原创 2021-04-22 15:05:37 · 315 阅读 · 0 评论 -
大文件分片断点续传底层组件逻辑
基于 WebUploader,实例化 WebUploader,参数见文中注释this.uploader = WebUploader.create({ ...})注册 WebUploadernew WebUploader.Uploader.register({ beforeSend: (block) => { /** * 上传前,进行分片,分片后每一个片都有主键,然后接口验证是否已传过 * 若上传过则不再上传,若没有上传过则续传。 */ .原创 2021-03-09 22:03:21 · 441 阅读 · 2 评论 -
小程序配置安全区域,亲测有效
// 配置底部安全区域page { //iOS 11 padding-right: constant(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); padding-left: constant(safe-area-inset-left); //iOS 11.2+ padding-right: env(safe-area-inset-right); padding-botto.原创 2021-02-25 20:47:32 · 1134 阅读 · 0 评论 -
基于ElementUI远程搜索Select组件,接受所有elementUI Select API,参数灵活可配置
基于ElementUI远程搜索Select 受控组件,接受所有ElementUI Select API,参数灵活可配置1.可以支持传入接口、配置label、value显示select2.同时支持远程搜索3.支持防抖4.支持多选及最大可选数量5.支持配置分页及搜索条件6.支持optios右侧显示其他字段7.支持ElementUI Select所有props、api原创 2021-01-06 09:53:15 · 625 阅读 · 0 评论 -
修改el-switch 样式
// 修改 el-switch 样式.el-switch { height: 22px; line-height: 22px;}.el-switch__label { position: absolute; display: none; color: #fff !important; height: 22px; line-height: 22px;}/* 打开时文字位置设置 */.el-switch__label--right { z-index: 1; .原创 2020-09-20 20:26:59 · 1647 阅读 · 1 评论 -
Vue 如何新增自定义指令?
创建局部指令:var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: { inserted(el) { // 指令中第一个参数是当前使用指令的DOM console.log(el); cons原创 2020-09-14 14:04:08 · 466 阅读 · 0 评论 -
Vue如何自定义一个过滤器?
html代码:<div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }}</div>js代码:var vm=new Vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (原创 2020-09-14 13:59:59 · 177 阅读 · 0 评论 -
Vuex 自动注入所有 ./modules 下的 vuex 子模块
import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)// 自动注入所有 ./modules 下的 vuex 子模块const files = require.context('./modules', false, /\.js$/)const modules = {}files.keys().forEach((key) => { modules[key.r.原创 2020-09-14 11:51:22 · 918 阅读 · 0 评论 -
解决【Element-ui的Tabs页签组件在TabPane按钮宽度发生变化后,底部active-bar定位不准确】
问题描述:当切换按钮的语言后,由于文字数量发生改版,按钮宽度变化,被选中的按钮下方的指示线定位不准确解决方案:在组件中绑定ref:<el-tabs ref="tabs"></el-tabs>watch: { currentLang(){ resetTabActivePosition(this.$refs.tabs.$el) }},method: { resetTabActivePosition($...原创 2020-08-26 19:55:38 · 3737 阅读 · 1 评论 -
如何终止前端发起的请求?
问题描述:当前端请求发送并且响应未完成时,终止请求,不再返回数据问题案例:1,一些列表页接口比较慢,改变查询条件后发送查询请求,这样就和上次的查询请求形成两个异步请求,有时可能就会发生本次请求先得到响应数据,然后上一次请求后得到响应数据,这样在页面上的查询结果就会出现bug。(不是单纯的防抖和节流就能解决问题)2,一些大文件上传,需要很久的时间,用户在中途想要终止上传问题解决:...原创 2020-04-25 17:37:05 · 6462 阅读 · 3 评论 -
vue 父子组件的生命周期顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated父组...原创 2020-01-10 10:22:42 · 228 阅读 · 0 评论 -
axios 全局设置 和局部实例化设置使用
一、封装全局http请求1,封装/*** @Author: * @Date: 2019/10/14* @Description: 封装http请求* @remarks:*/import axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '@/store...原创 2019-12-18 22:01:58 · 2297 阅读 · 1 评论 -
element + vue-cropper 完成图片裁剪上传功能
1,npm install vue-cropper2,代码<template> <div class="form-edit"> <el-form ref="form" class="form" :model="form" :rules="rules" label-width="120px" :status-icon="true">...原创 2019-12-09 15:07:54 · 673 阅读 · 2 评论 -
Element UI跨页勾选复选框
<el-table ref="chapterList" v-loading="listLoading" :data="list" border fit highlight-current-row @select-all="selectAll" @select="handleselectRow"...原创 2019-12-09 13:48:38 · 387 阅读 · 0 评论 -
vue table翻页序号累加
/** * 翻页序号 * @param index Number 列表数据下标 * @param currentPage Number 当前页码 * @param pageSize Number 每页条数 * @returns {*} Number 翻页序号 */export functi...原创 2019-12-09 13:23:30 · 1037 阅读 · 0 评论 -
Vue结合webuploader实现文件分片断点续传
根于公司业务,封装了底层的 文件分片断点续传底层能力组件 和 带有前端交互的UI组件使用步骤1,本项目基于vue-cli3,在public下创建webUploader目录2,由于我司视频兼容能力业务需求,jQuery在index.html中引入。因此jQuery的引入方式有些简陋,多多包涵。。3,文件分片断点续传底层能力组件<template> &...原创 2019-12-09 11:15:10 · 2705 阅读 · 15 评论 -
vue 退出编辑页的保存提示,同时解决beforeRouteLeave 和 浏览器的前进后退的闪现冲突(hash模式有此问题,history模式下正常)
export default { data() { return { dataIsChange: 0, // 计数器,据此判断表单是否已编辑 noLeaveprompt: false, // 表单提交后,设置为true,据此判断提交不再弹出离开提示 form: { // 表单数据 menuname: '', // 菜单名称 ...原创 2019-10-18 20:53:47 · 1588 阅读 · 3 评论 -
Vue2 响应式原理:Object.defineProperty()
Vue2 双向数据绑定原理:Object.defineProperty()原创 2019-06-03 14:30:49 · 1079 阅读 · 0 评论 -
一个例子搞懂Vue实例的生命周期
复制以下代码试验下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>一个例子搞懂Vue实例的生命周期</title></head><body> <div id="app"> ...原创 2019-05-27 16:45:51 · 808 阅读 · 0 评论