vue 单元测试初探
前言
单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义，如C语言中单元指一个函数，Java里...
2021-05-27
VUE+Express+MongoDB前后端分离实现一个便签墙
计划来实现一个便签墙系列，这个东西做简单也简单，往复杂了做功能也很多，记录一下从零到有的开发过程吧，希望最后能把这个项目做得很完善。首先是前后端分离架构，前端用vue，后台我...
2021-05-27
浅谈vue首次渲染全过程
昨天有朋友问我vue在页面第一次加载时到底做了些什么，看来这个问题在很多朋友心中可能还比较模糊，今天我们一起来详细的看看vue的首次渲染过程
了解vue首次渲染全过程，我们应该...
2021-05-27
vue后台管理添加多语言功能的实现示例
在这家公司一个项目， 需要添加英文版本，就是中英文化了，直接上代码1.首先是main.js页面做配置import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i1...
2021-05-27
vue实现秒杀倒计时组件
本文实例为大家分享了vue实现秒杀倒计时组件的具体代码，供大家参考，具体内容如下下面是使用Vue实现秒杀倒计时组件开发思路1.请求服务器获取这一刻的服务器时间（统一以服务器时...
2021-05-27
vue父子组件的互相传值和调用
1、父传值给子组件
父组件：<template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div></template><script>import child from './child'expo...
2021-05-27
Vue自定义v-has指令,做按钮权限判断的步骤
应用场景
以后台管理系统为例，每个用户所拥有的按钮权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。简单说一下，自定义...
2021-05-27
Vue+Springboot实现接口签名的示例代码
1、实现思路
接口签名目的是为了，确保请求参数不会被篡改，请求的数据是否已超时，数据是否重复提交等。接口签名示意图
客户端提交请求时，将以下参数按照约定签名方式进行签名，随...
2021-05-27
VUE的tab页面切换的四种方法
1.静态实现方法:
效果图:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo...
2021-05-27
Vue自定义v-has指令实现按钮权限判断
应用场景
以后台管理系统为例，每个用户所拥有的按钮权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。简单说一下，自定义...
2021-05-27
详解vue3沙箱机制
前言
vue3 沙箱主要分两种 浏览器编译版本，浏览器版本是使用with语法加上proxy代理拦截 本地预编译版本，通过在模版预编译阶段转换阶段，使用转换插件transformExpression...
2021-05-27
Vue封装一个TodoList的案例与浏览器本地缓存的应用实现
本文主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现，分享给大家，具体如下：使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存的技术手段.浏...
2021-05-27
如何在vue项目中使用百度地图API
1、在百度地图开放平台注册账号并登录 网址：http://lbsyun.baidu.com/index.php?title=jspopularGL2、选择自己所需的地图版本： 我个人使用2.0足够了，其实就是懒，一直...
2021-05-27
Vue实现下拉滚动加载数据的示例
Web项目经常会用到下拉滚动加载数据的功能，今天就来种草 Vue-infinite-loading 这个插件，讲解一下使用方法！第一步：安装npm install vue-infinite-loading --save第二步：引用impo...
2021-05-27
vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一...
2021-05-27
Vue nextTick的原理解析
使用过Vue的小伙伴们都知道，Vue里的nextTick可以获取到更新后的DOM, 今天我就来讲解下nextTick里面究竟做了什么？开始讲解前，我们需要知道了解一个概念，那就是Event LoopEvent L...
2021-05-27
Vue.js前端框架之事件处理小结
1. v-on 事件监听监听DOM事件使用 v-on 指令。该指令通常在模板中直接使用，在触发事件时会执行一些 JavaScript 代码。v-on 指令的基本用法（1）在 HTML 中使用 v-on 指令，后面可...
2021-05-27
vue 实现无规则截图
大家所见到的大多数都是有规则截图,可以应付大部分的应用场景,但是对于图片处理,想要将规则交给用户,普通的截图已经满足不了用户了,那我们能不能前端实现图片的任意规则截...
2021-05-27
Vue.js源码分析之自定义指令详解
前言除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。官网介绍的比较抽象，显得很高大上，我个人对自定义指令的理解是:当自定义指令作用在一些DOM元...
2021-05-27
vue中多附件上传的实现示例
前言
本篇主要记录在 Vue项目中 实现附件上传功能，可实现单/多附件上传，识别文件格式并用不同图标展示功能，及控制是否可编辑功能。内容简洁易懂，如有需要可自取。 完整代码点击...
2021-05-27
vue 虚拟DOM快速入门
虚拟 DOM
什么是虚拟 dom
dom 是文档对象模型，以节点树的形式来表现文档。虚拟 dom 不是真正意义上的 dom。而是一个 javascript 对象。正常的 dom 节点在 html 中是这样表示...
2021-05-27
基于Vite2.x的Vue 3.x项目的搭建实现
创建 Vue 3.x 项目npm init @vitejs/app my-vue-app --template 引入 Router 4.x
npm install vue-router@4 --save 配置路由在更目录中添加一个 router 的文件夹，新建 index...
2021-05-27
vue 实现拖拽动态生成组件的需求
产品需求
开完产品需求会议，遇到了一个需求，首先页面分成两栏布局，左侧展示数据组件，支持拖拽排序，点击按钮清除组件。右侧支持将组件的缩略图拖拽至左侧生成一个新的组件。思路...
2021-05-27
通过Element ui往页面上加一个分页导航条的方法
需求加入一个分页条，此分页条可以跳转页面，可以根据页码选择具体页面，可以设置当前页面的大小。在element ui官网选择Pagination分页组件进入element ui官网，然后选择一个合适的...
2021-05-27
详解Vue开发网站seo优化方法
因为用了vue等js的数据绑定机制来展示页面数据，爬虫获取到的html是模型页面而不是最终数据的渲染页面，搜索引擎是不回去执行请求到的js。vue的项目都是ajax请求数据，引擎爬虫进...
2021-05-27
Vue项目引入PWA的步骤
Vue项目引入PWA很简单，操作步骤如下：1. 安装依赖vue add @vue/pwa由于使用add关键字，安装成功后会在项目中创建一些文件，如果项目使用了git，可以很容易的看出文件变化：src文件夹下...
2021-05-27
Vue中的父子组件通讯以及使用sync同步父子组件数据
前言父子组件通讯，可分为两种情况：1. 父组件向子组件中传递数据
2. 子组件向父组件中传递数据一般情况下， 1中情况可通过props解决数据传递的问题， 这里就不多赘述了。子组件向...
2021-05-27
vue实现图形验证码登录
本文实例为大家分享了vue实现图形验证码登录的具体代码，供大家参考，具体内容如下1、效果图2、在components下面新建文件identify.vue，内容：<template> <div class="s-canvas">...
2021-05-27
vue实现视频上传功能
本文实例为大家分享了vue实现视频上传功能的具体代码，供大家参考，具体内容如下环境：vue + TS 上传视频 + 上传到阿里云
主要处理前端在vue下上传视频使用的是阿里云的视频点播...
2021-05-27
vue引入Excel表格插件的方法
本文实例为大家分享了vue引入Excel表格插件的具体代码，供大家参考，具体内容如下一、安装npm install handsontable-pro @handsontable-pro/vuenpm install handsontable @hand...
2021-05-27
vue使用v-model进行跨组件绑定的基本实现方法
大家好，今天我们来说一下使用v-model实现父子组件的绑定效果1：简单版代码如下：父组件：<template> <div> // 3：使用子组件，并使用v-model绑定 <About v-model="father"/> </d...
2021-05-27
Vue项目中如何封装axios（统一管理http请求）
1、需求说明
在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中，需要对axios进一步封装，方便在项目中的使用。2、Vue项目结构
在本地创建Vue项目，目录...
2021-05-27
vue实现tab路由切换组件的方法实例
前言本文介绍的是使用vue自带的vue-router.js路由实现分页切换功能，下面话不多说了，来一起看看详细的实现代码吧实现图片如下下列为实现代码css:*{ margin: 0;...
2021-05-27
详解在vue使用weixin-js-sdk常见使用方法
链接：https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6....
2021-05-27
vue2.x 从vue.config.js配置到项目优化
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 v...
2021-05-27
Vue路由vue-router详细讲解指南
中文文档：https://router.vuejs.org/zh/Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就...
2021-05-27
Vue3状态管理的使用详解
背景
随着Vue3的逐步应用，对状态管理的需求越来越多。起初是基于Vuex4进行状态管理的，但是Vuex4也暴露了一些问题。从个人角度来说，Vuex4类似于过渡期产品，对TypeScript的支持性...
2021-05-27
vue项目实现图形验证码
本文实例为大家分享了vue项目实现图形验证码的具体代码，供大家参考，具体内容如下效果预览：（项目要求清爽一点，所以没背景。但是下面的代码会把背景干扰写进去）1.下载identify插件，...
2021-05-27
vue项目两种方式实现竖向表格的思路分析
问题描述
在我们做项目中，常见的是横向表格，但是偶尔的需求，也会做竖向的表格。比如下图这样的竖向表格：
我们看到这样的效果图，第一时间想到的是使用UI框架，改一改搞定。但是饿了...
2021-05-27
vue实现简单数据双向绑定
本文实例为大家分享了vue实现简单数据双向绑定的具体代码，供大家参考，具体内容如下这里是简单的实现，有助于新手理解消化，当然vue要实现双向数据代理不可缺少，期待后续在更新vue...
2021-05-27
vue的ssr服务端渲染示例详解
为什么使用服务器端渲染 (SSR) 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程...
2021-05-27
vue使用swiper插件实现轮播图的示例
hello大家好，最近我在做一个仿饿了么的项目，我会将我的项目经验同步到这里，与大家分享！vue - 使用swiper插件实现轮播图
下载安装： npm install swiper --saveMsite.vue的HTML部...
2021-05-27
Vue3使用mitt进行组件通信的步骤
Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用mitt.js。 比起Vue实例上的EventBus，mitt.js好在哪里呢？首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还...
2021-05-27
vue实现tab切换的3种方式及切换保持数据状态
vue实现tab切换的3种方式一、v-show控制内容切换1.简单版原理：用点击事件改变num值作为开关，控制tab样式和内容显示隐藏。2.数据渲染原理：主要利用v-for绑定的index来控制，跟上...
2021-05-27
详解Vue组件复用和扩展之道
概述软件编程有一个重要的原则是 D.R.Y（Don't Repeat Yourself），讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展 Vue 组件的最佳...
2021-05-27
vue实现登录时的图片验证码
本文实例为大家分享了vue实现登录时的图片验证码的具体代码，供大家参考，具体内容如下效果图一、新建vue组件components/identify/identify.vue<template> <div class="s-canv...
2021-05-27
vue实现图形验证码
本文实例为大家分享了vue实现图形验证码的具体代码，供大家参考，具体内容如下效果图：或或或代码：验证码组件：src/common/sIdentify.vue<template> <div class="s-canvas"> <ca...
2021-05-27
vue实现价格日历效果
本文实例为大家分享了vue实现价格日历效果的具体代码，供大家参考，具体内容如下1、效果图2、下载全局安装：npm install ele-calendar3、在components下新建文件calendar.vue，内容...
2021-05-27
关于vue中如何监听数组变化
前言前段时间学习了关于vue中响应式数据的原理，（并作了学习笔记vue响应式原理），其实是通过Object.defineProperty控制getter和setter，并利用观察者模式完成的响应式设计。那么数...
2021-05-27
vue使用mixins优化组件
vue 提供了 mixins 这个 API，可以让我们将组件中的可复用功能抽取出来，放入 mixin 中，然后在组件中引入 mixin，可以让组件显得不再臃肿，提高了代码的可复用性。如何理解 mixins...
2021-05-27
