Vue实现多图添加显示和删除
本文实例为大家分享了Vue实现多图添加显示和删除的具体代码，供大家参考，具体内容如下效果图：首先给一个input[type="file"]，然后隐藏掉，当点击加号所在的区域时，触发文件选择的点...
2021-06-28
如何在在Vue3中使用markdown 编辑器组件
安装# 使用 npmnpm i @kangc/v-md-editor@next -S# 使用yarnyarn add @kangc/v-md-editor@next引入组件import { creatApp } from 'vue';import VMdEditor from '@kangc/v-m...
2021-06-28
Vue实现动态查询规则生成组件
1. 动态查询规则动态查询规则，大致如下图所示。是可以按照用户的自定义进行组织查询语句的一种复杂组件，大致可以实现SQL查询的where条件，下面是摘自mongodb的某一软件。
2.组...
2021-06-28
vue实现tab标签(标签超出自动滚动)
当创建的tab标签超出页面可视区域时自动滚动一个tab标签距离，并可手动点击滚动tab标签，实现效果请看GIF图效果预览GIF图<template> <div class="main-box"> <button...
2021-06-28
Vue.js 使用AntV X6的示例步骤
0x0 前言
因为项目用到流程图，并且需求也算是不详细，所以选择比较灵活的 x6 图形编辑器作为流程图编辑器，从文档来看不算复杂，这边就是作为参考教程。Antv X6 文档0x1 安装
根据...
2021-06-28
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
业务场景：使用vue +element ui 的el-dialog，点击弹窗之后，默认加载第一个按钮的数据进行初始化。 div 指令： // 自动触发点击事件 directives:{ trigger:{ ins...
2021-06-28
vue圆环百分比进度条组件功能的实现
有需要的人可以参考一下，如果试用过，发现问题，欢迎留言告知，不胜感激。功能介绍：1、若页面无刷新，且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画2、若页面无刷...
2021-06-28
Vue使用axios图片上传遇到的问题
FormData是个什么鬼？经过多方搜索调查了解，这个神奇的东西是XMLHttpRequest Level 2 新增的一个对象，于2008年2月提出，可以利用它来提交表单、模拟表单提交，当然最大的优势就是可...
2021-06-28
vue储存storage时含有布尔值的解决方案
vue储存storage时含有布尔值今天遇到一个问题，需要将后台返回的true和false存到storage中去，然后用储存的这个值进行逻辑判断，但是一直判断都是错误的，后面查阅了一下资料才发现...
2021-06-28
如何用vue封装axios请求
其实vue封装axios是很简单的首先 在src路径下建http文件夹 并且创建api.js env.js request.js 这三个文件env.js文件这个文件主要就是封装我们的公共地址export default {//...
2021-06-28
Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）
前言
最近在做一个精品课程，需要在线预览课件ppt，我们的思路是将ppt转换为pdf在线预览，所以问题就是如何实现在线预览pdf了。在实现的过程中，为了更好地显示效果，我采用了多种不...
2021-06-28
vue封装axios的几种方法
基础版第一步：配置axios
首先，创建一个Service.js，这里面存放的时axios的配置以及拦截器等，最后导出一个axios对象。我平常elementUI用的比较多，这里你也可以使用自己的UI库。imp...
2021-06-28
vue 实现上传组件
1.介绍效果如下图 2.思路
文件上传的两种实现方式
1.From形式<form method="post" enctype="multipart/from-data" action="api/upload"> <input type="file name="fi...
2021-06-28
vue实现简单购物车案例
本文实例为大家分享了vue实现简单购物车的具体代码，供大家参考，具体内容如下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co...
2021-06-28
Vue3对比Vue2的优点总结
1.为什么要有vue3
我们使用vue2常常会遇到一些体验不太好的地方，比如： 随着功能的增长，需求的增加，复杂组件的代码越来越难以维护，逻辑混乱，虽然vue2也有一些复用的方法，但是都...
2021-06-28
element的表单元素使用总结
表单元素挺多的，这里简单总结下，我以我的方式主要分为：文本框类、选择类、其他类 文本框类 选择类 其他类TL;DR 时间类的选择器，均可设置输入框的显示样式和值的形...
2021-06-28
vue3如何按需加载第三方组件库详解
前言以Element Plus 为例，配置按需加载组件和样式。环境 vue3.0.5 vite2.3.3安装 Element Plusyarn add element-plus# ORnpm install element-plus --save完整引入imp...
2021-06-28
详解从vue的组件传值着手观察者模式
观察者模式首先，提到观察者模式，这不禁让我想到了MVVM，MVVM架构模式感觉用到了观察者的思想。我们还是按照惯例，了解一下什么是观察者模式观察者模式，类似发布订阅模式，完成这个动...
2021-06-28
Vue组件库ElementUI实现表格加载树形数据教程
ElementUI实现表格树形列表加载教程，供大家参考，具体内容如下Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的...
2021-06-28
vue中对接Graphql接口的实现示例
说明: 本文是本人正在搞nestjs+graphql+serverless训练营中对Graphql讲解的基础知识点，可能有点前后没对接上,文中提到的Graphql授权也是下小节介绍的一、对原来的Express返...
2021-06-28
Vue+ElementUI之Tree的使用方法
Vue+ElementUI之Tree的使用，供大家参考，具体内容如下前端代码<template> <div> <el-dialog title="终端通讯录" :visible.sync="isOpen" class="el-dialog-mini">...
2021-06-28
vue基于Teleport实现Modal组件
1.认识Teleport像我们如果写Modal组件、Message组件、Loading组件这种全局式组件，没有Teleport的话，将它们引入一个.vue文件中，则他们的HTML结构会被添加到组件模板中，这是不够...
2021-06-28
LRU算法在Vue内置组件keep-alive中的使用
vue的keep-alive内置组件的使用也是使用了改算法，源码如下：export default { name: "keep-alive", // 抽象组件属性 ,它在组件实例建立父子关系的时候会被忽略,发生在 initL...
2021-06-28
Vue实现简易购物车案例
本文实例为大家分享了Vue实现简易购物车的具体代码，供大家参考，具体内容如下先来看一下完成后的效果吧。CSS 部分这里没什么好说的，就是v-cloak 这一个知识点table{ border: 1...
2021-06-28
如何利用vue.js实现拖放功能
前言添加拖放功能是使你的程序更加自然和友好的方法。尽管有一些提供拖放功能的库，但是了解它们在底层的工作原理是非常有意义的。在本文中，我们将用内置的 HTML 拖放 API 来...
2021-06-28
Vue.set()和this.$set()使用和区别
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实...
2021-06-28
Vue中利用better-scroll组件实现横向滚动功能
About
最近在学习vue的过程中，仿照去哪儿网的移动端写了个小项目，旨在实践和巩固基础知识，但是今天发现去哪儿的首页上有一个组件用户体验较差，即一个横向列表使用浏览器的原生...
2021-06-28
vue响应式原理与双向数据的深入解析
了解object.defineProperty 实现响应式清楚 observe/watcher/dep 具体指的是什么了解 发布订阅模式 以及其解决的具体问题在Javascript里实现数据响应式一般有俩种方案，分别...
2021-06-28
Vue使用自定义指令实现页面底部加水印
项目场景
给项目的整个背景加上自定义水印，可以改变水印的文案和字体颜色等实现思路
这里使用的技术主要是canvas,在实现水印的过程中，主要使用了canvas的特性 使用 ca...
2021-06-28
vue ElementUI实现异步加载树
本文实例为大家分享了vue ElementUI实现异步加载树的具体代码，供大家参考，具体内容如下路由文件修改import List from '@/components/list.vue'import Add from '@/components...
2021-06-28
Vue源码分析之虚拟DOM详解
为什么需要虚拟dom？
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。例如，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地...
2021-06-28
vue自定义弹框效果（确认框、提示框）
本文实例为大家分享了vue自定义弹框效果的具体代码，供大家参考，具体内容如下1、自定义确认框和提示框根据传入的type来判断是确认框或提示框<template> <transition name="co...
2021-06-28
vue第一次获取不到元素的解决方法记录
前言vue中第一次获取不到元素的解决办法，是否经常第一次点击弹窗按钮，获取弹窗中的元素。打开弹窗获取元素为空，要第二次才能获取。一、更新dom后获取this.$nextTick(callback)...
2021-06-28
vue实现主题切换的多种思路分享
动态改变主题
首先需要解决的是如何知道你需要显示哪个主题，并且可以动态切换。我选择的方法是queryString。我们打开url的时候，可以在后面缀上?theme=xx,读取这个xx储存...
2021-06-28
vue3 可拖动的左右面板分割组件实现
最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度，本文就整理一下，分享给大家，具体如下：效果图分解组件整体使用flex布局左侧面板 面板的具体内容通...
2021-06-28
vue使用better-scroll实现横向滚动的方法实例
一、滚动的实现原理
better-scroll的滚动原理和浏览器原生滚动原理是一样的，当子盒子的高度大于父盒子的高度，就会出现纵向滚动；同理，如果子盒子的宽度大于父盒子的宽度，那么就会...
2021-06-28
Vue.js中的计算属性、监视属性与生命周期详解
前言
本章节咱们来说一下Vue中两个非常重要的计算属性、监视属性和生命周期，不废话直接上干货计算属性
计算属性介绍
在模板中可以直接通过插值语法显示一些data中的数据，有些...
2021-06-28
Vue组件库ElementUI实现表格列表分页效果
ElementUI实现表格列表分页效果教程，供大家参考，具体内容如下Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的...
2021-06-28
ant desing vue table 实现可伸缩列的完整例子
完美解决ant-design-vue table 可伸缩列问题，实现在固定列，多级表头情况下的伸缩列这个东西本来以为手到擒来，因为在官网中已经给出了例子，但是果然还是不能太信任官方，官方给出...
2021-06-28
Vue中ElementUI分页组件Pagination的使用方法
Vue中ElementUI分页组件Pagination的使用，供大家参考，具体内容如下一、概要ElementUI 提供了 el-pagination 组件，只要配置相应得参数和事件，即可实现分页。二、实现1、基本用法...
2021-06-28
vue实现滚动加载的表格
实现效果码云地址滚动加载知识储备
参考ant-design-vue中list滚动加载的思路，使用vue-infinite-scroll加上vue-virtual-scroller作为解决方案。组件封装
因为整个系统使用的...
2021-06-28
JavaScript中子函数访问外部变量的3种解决方法
前言我们在写web页面时，肯定会经常遇到下面这种情况：<body> <div class="btns-wrapper"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min....
2021-06-27
深入理解typescript中的infer关键字的使用
infer 这个关键字，整理记录一下，避免后面忘记了。有点难以理解呢。infer
infer 是在 typescript 2.8中新增的关键字。infer 可以在 extends 条件类型的字句中，在真实分支中引用...
2021-06-27
JavaScript输出斐波那契数列的实现方法
题目
有这么一道题目需要我们来解答： 试输出斐波那契数列的前10项，即 1、1、2、3、5、8、13、21、34、55。
分析
有些人看到题目中出现了“斐波那契数列”这个概念后，可...
2021-06-27
vue.js Router中嵌套路由的实用示例
前言随着 Vue.js 单页应用（SPA）变得相当复杂，你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例，来展示 Vue R...
2021-06-27
关于JavaScript回调函数的深入理解
前言JavaScript回调函数是成为一名成功的 JavaScript 开发人员必须要了解的一个重要概念。但是我相信，在阅读本文之后，你将能够克服以前使用回调方法遇到的所有障碍。在开始之...
2021-06-27
Vue3.0写自定义指令的简单步骤记录
前言vue中提供了丰富的内置指令，如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令在开始学习之前我们应该理解，自定义指令的应...
2021-06-27
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
最近在开发一款新的app项目，我自己也是第一次接触app开发，经过团队的一段时间研究调查，决定使用Vue3+Vant前端组件的模式进行开发，vue2开发我们已经用过几个项目了，所以决定这一...
2021-06-09
一文搞懂redux在react中的初步用法
Redux是一个数据状态管理插件，当使用React或是vue开发组件化的SPA程序时，组件之间共享信息是一个非常大的问题。例如，用户登陆之后客户端会存储用户信息（ID，头像等），而系统的很多组...
2021-06-09
深入详解JS函数的柯里化
一、补充知识点之函数的隐式转换来一个简单的思考题。function fn() { return 20;}console.log(fn + 10); // 输出结果是多少？稍微修改一下，再想想输出结果会是什么？functio...
2021-06-09
