Vue3.0写自定义指令的简单步骤记录Vue3.0写自定义指令的简单步骤记录
前言
vue中提供了丰富的内置指令，如v-if,v-bind,v-on......,除此之外我们还可以通过Vue.directive({})或者directives:{}来定义指令
在开始学习之前我们应该理解，自定义指令的应用场景，任何功能的开发都是为了解决具体的问题的，
通过自定义指令...[2021/6/28]
vue3+el-table实现行列转换
目录行列转换
分析成绩单的组成
用 vue3 + el-table 做的成绩单
前端模拟数据
使用 el-table 生成成绩单
确定表头
确定数据
计算学生的总分和平均分
计算排名
计算各个学科的平均分。
记录各个科目的最高分和最低分
增加排序功能
增加色彩区分
行列转换
为啥会出现行列...[2021/6/21]
vue中对虚拟dom的理解知识点总结
本质是一个普通的js对象，用于描述视图界面结构的，
在mouted的回调中，可以输出_vnode，
通过图可以知道，_vnode中有以下几个主要的属性：
tag：组件的标签名，
data: 组件的属性，
children: 组件的子...[2021/6/21]
vue 单元测试的推荐插件和使用示例
目录框架
一流的错误报告
活跃的社区和团队
Jest
Mocha
推荐插件
Vue Testing Library (@testing-library/vue)
Vue Test Utils
示例 单元测试应该：
可以快速运行
易于理解
只测试一个独立单元的工作
...[2021/6/21]
详解Vue-Router的安装与使用
目录安装
路由的基础配置
将Router安装到Vue中
Router的相关配置Router.routes 的相关配置实现一个简单的路由
1.配置路由2. 在组件中实现路由
1. router-link 用于实现路由的跳转组件:该组件支持的属性
2. router-view 根据当前VueRouter...[2021/6/21]
vue实战中的一些实用小魔法汇总
能让你首次加载更快的路由懒加载，怎么能忘？
路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。
举个🌰，如果这样写，加载的时候会全部都加载进来。
const router = new VueRouter({
routes...[2021/6/15]
vsCode一键生成vue模板
1.使用快捷Ctrl + Shift + P唤出控制台
2，然后输入“snippets”并选择
2.接着输入vue，
vs code自动生成vue.json文件。
3. 将vue.json文件改为下面得模板（可以根据个人需求修改当中的模板内容）&...[2021/6/15]
浅析vue侦测数据的变化之基本实现
一、Object的变化侦测
下面我们就来模拟侦测数据变化的逻辑。
强调一下我们要做的事情：数据变化，通知到外界（外界再做一些自己的逻辑处理，比如重新渲染视图）。
开始编码之前，我们首先得回答以下几个问题：
1.如何侦测对象的变化？
使用 Object.definePro...[2021/6/15]
vue2/vue3路由权限管理的方法实例vue2/vue3路由权限管理的方法实例
1. Vue 路由权限控制一般有2种方法
a、路由元信息(meta)
b、动态加载菜单和路由(addRoutes)
2 路由元信息（meta）来进行路由权限控制
2.1 在vue2种的实现
如果一个网站有不同的角色，比如 管理员 和 普通用户 ，要求不同的角色能访问的页面是不一样...[2021/6/15]
一个基于Vue 3+Element Plus的基金看板一个基于Vue 3+Element Plus的基金看板
原由
在公司，老用手机还是不方便，其他网站页面又花里胡哨的，于是产生了自己做个数据汇总页面，可以DIY，方便后面个性化开发。
介绍
基于Vue 3，UI采用Element Plus
只有一个html文件
数据接口来源：天天基金网
可以添加自己的基金代码、单价、份额，系统会自动计算，而且每...[2021/6/7]
vue实现水波涟漪效果的点击反馈指令vue实现水波涟漪效果的点击反馈指令
水波效果
当用户点击时，会以点击中心为圆心产生一个水波扩散的涟漪效果，适用各个场景，美观又不浮夸，关键是可以给用户带来很直观的反馈。
来看实现
首先这里基于Vue3自定义指令进行封装，Vue3的自定义指令跟Vue2相比变动不是很大，。我们的目标是完成一个水波指令的基本原型，这里循...[2021/5/31]
vue基于Teleport实现Modal组件
1.认识Teleport
像我们如果写Modal组件、Me age组件、Loading组件这种全局式组件，没有Teleport的话，将它们引入一个.vue文件中，则他们的HTML结构会被添加到组件模板中，这是不够完美的。
没有Teleport
有Telepo...[2021/5/31]
vue 实现上传组件vue 实现上传组件
1.介绍
效果如下图
2.思路
文件上传的两种实现方式
1.From形式
<form
method="post"
enctype="multipart/from-data"
action="api/upload"
>...[2021/5/31]
Vue必学知识点之forEach()的使用
前言
在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，而且这种情形在开发中无所不在，那么本篇博文就来分享一个比较常用又经典的知识点：forEach() 的使用。
forEach() 是前端开发中操作数组的一种方法，主要功能是遍历数组，其实就是 for 循环的升级版，该语句需要...[2021/5/31]
Vue源码分析之虚拟DOM详解
为什么需要虚拟dom？
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。例如，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量...[2021/5/31]
vue动态绑定图标的完整步骤
0 图标和图片的不同
图标时字符，图片时二进制流。即图片加载会比图标慢，且加载图标最好不要用img标签，我们可以把图标当成组件用import的方法引入进来，然后当成标签引入。
1 安装svg
1.使用管理员身份运行cmd窗口，切换到项目目录下执行。
npm add sv...[2021/5/24]
vue-table实现添加和删除
本文实例为大家分享了vue-table实现添加和删除的具体代码，供大家参考，具体内容如下
一.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<...[2021/5/17]
Vue通过懒加载提升页面响应速度Vue通过懒加载提升页面响应速度
概述
项目的目的是要通过数据透视表和Excel公式来分析公司的各项运营数据。不过在集成后，在开发环境页面运行流畅，大量数据加载处理也很快。但是发布生产后，在用户每次打开页面时，加载时间上相较开发阶段均有所降低，经过排查速度变慢是由于发布包的vendor.js变大所导致的，这个文件加载每次都需30...[2021/5/10]
VUE+Canvas实现简单五子棋游戏的全过程
前言
在布局上，五子棋相比那些目标是随机运动的游戏，实现起来相对简单许多，思路也很清晰，总共分为：
（1）画棋盘；
（2）监听点击事件画黑白棋子；
（3）每次落子之后判断是否有5子相连，有则赢。
最复杂的恐怕就是如何判断五子棋赢了，那么就先从简单的开始，画个棋盘吧~
1、画棋盘...[2021/5/10]
Vue开发指南之重点知识梳理Vue开发指南之重点知识梳理
概述
如果您是Vue开发的新手，您可能已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等。
另外您可能还经常听到和Vue一起提到的工具和库，如Vuex、Webpack、Vue CLI和Nuxt。
也许您在面对这些未知的术语和工具时会感到无助和绝望，没关系，您并...[2021/5/10]
Vue实现下拉加载更多
熟悉Element-UI的开发者可能都会有这样的经历，它的无限滚动 InfiniteScroll 并不好用，下面介绍两种下拉加载的实现方法：
1. 使用el-table-infinite-scroll 插件
(1). 安装插件
npm install --save el-tabl...[2021/5/10]
关于Vue Router的10条高级技巧总结
前言
Vue Router 是 Vue.js 官方的路由管理器。
它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.j...[2021/5/6]
浅谈vue2的$refs在vue3组合式API中的替代方法
如果你有过vue2的项目开发经验，那么对$refs就很熟悉了。由于vue3的断崖式的升级，在vue3中如何使用$refs呢？想必有遇到过类似的问题，我也有一样的疑惑。通过搜索引擎和github，基本掌握如何使用$refs。在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用...[2021/4/19]
Vue 内置组件keep-alive的使用示例
keep-alive 是Vue内置的组件之一， 主要用于保留组件状态或避免重新渲染。
作用
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验。
一、keep-alive 用法
< keep-a...[2021/4/12]
vue diff算法全解析vue diff算法全解析
前言
我们知道 Vue 使用的是虚拟 DOM 去减少对真实 DOM 的操作次数，来提升页面运行的效率。今天我们来看看当页面的数据改变的时候，Vue 是如何来更新 DOM 的。Vue和React在更新dom时，使用的算法基本相同，都是基于 snabbdom。 当页面上的数据发生变化时，Vue ...[2021/4/12]
vue 实现可拖曳的树状结构图
最近用vue做了一个小项目--可拖曳的树状结构图。
Vue递归组件
结构通过Vue的递归组件实现
布局使用flex，结构线由CSS伪类实现
需要注意的是居中布局，当X轴元素过多导致子元素宽度超出视图，元素居中后虽然有滚动条，但只能到达右边的内容，左边的内容会无法访问，可以把...[2021/4/12]
Vue实现无缝轮播效果
本文实例为大家分享了Vue实现无缝轮播效果的具体代码，供大家参考，具体内容如下
代码
1.子组件代码
代码如下（示例）：
<template>
<div>
<div cla ="box" @mouseenter="mo...[2021/4/12]
Vue2.x 项目性能优化之代码优化的实现
众所周知，Vue项目采用了数据双向绑定和虚拟DOM基础，在数据驱动代替DOM频繁渲染已经算是非常高效了，对开发者而言已经非常优化了，那为什么还会有Vue性能优化这一说呢？
因为目前Vue 2.x使用了webpack等第三方打包构建工具，并且支持其他第三方的插件，我们在项目中使用这些工具时可能不...[2021/3/29]
vue中data改变后让视图同步更新的方法
前言
不久前天看到一个比较有趣的问题，vue中data改变后，如何让视图同步更新，搜索了一下，并没有发现解决问题的方法，只能从源码去找解决方法了。
原因
我们都知道，在vue中改变数据后，视图并不是同步更新的。
在vue实例初始化后，会将data设置为响应式对象，当我们执行th...[2021/3/29]
vue3如何优雅的实现移动端登录注册模块vue3如何优雅的实现移动端登录注册模块
前言
近期开发的移动端项目直接上了 vue3 ,新特性 composition api 确实带来了全新的开发体验.开发者在使用这些特性时可以将高耦合的状态和方法放在一起统一管理,并能视具体情况将高度复用的逻辑代码单独封装起来,这对提升整体代码架构的健壮性很有帮助.
如今新启动的每个移动端...[2021/3/29]
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
效果 若使用 请自行优化代码和样式不显示图片/播放视频音频代码如下 <template>
<div>
<div v-on:dragover="tts" v-on:drop="...[2021/3/1]
vue-router懒加载的3种方式汇总
未使用懒加载
import Vue from ''vue'';
import Router from ''vue-router'';
import HelloWorld from ''@component HelloWorld'';
Vue.use(Router);
expor...[2021/3/1]
vue-router路由懒加载及实现的3种方式vue-router路由懒加载及实现的3种方式
什么是路由懒加载？
也叫延迟加载，即在需要的时候进行加载，随用随载。
官方解释：
1：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
2：如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组...[2021/3/1]
vue-video-player 断点续播的实现
最近的项目中需要实现视频断点续播的功能，一听到这个功能。内心方张了..但却又有点小窃喜，小懵乱。抱着求学态度去挑战一下。
1.安装插件
npm install vue-video-player --save
2.Main.js 引入组件
import VideoPl...[2021/2/1]
如何在Vue项目中添加接口监听遮罩
一、业务背景
使用遮罩层来屏蔽用户的非正常操作，是前端经常使用的方式。但是在一些项目中，并没有对遮罩层进行统一管理，这就会造成如下的问题：
（1）所有的业务组件都要引入遮罩层组件，也就是每个.vue业务组件，都在template中引入了Mask组件。组件在项目的各个角落都存在，不利于管理，...[2021/1/25]
vue keep-alive的简单总结
一、作用
主要用于保留组件状态或避免重新渲染。
二、用法
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不...[2021/1/25]
Vue中ref和$refs的介绍以及使用方法示例
前言
在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。
ref介绍
r...[2021/1/11]
手写Vue源码之数据劫持示例详解
源代码: 传送门
Vue会对我们在data中传入的数据进行拦截：
对象：递归的为对象的每个属性都设置get et方法
数组：修改数组的原型方法，对于会修改原数组的方法进行了重写
在用户为data中的对象设置值、修改值以及调用修改原数组的方法时，都可以添加一些逻辑...[2021/1/4]
vue 动态生成拓扑图的示例
横向拓扑
在 index.html 文件中引入文件。
<link href="https: magicbox.bk.tencent.com tatic_api/v3/a et bootstrap-3.3.4/c bootstrap.min.c " rel="externa...[2021/1/4]
vue调用微信JSDK 扫一扫，相册等需要注意的事项
在VUE里面需要注意的第一个问题就是路由得设置成
第二个就是 跳转路由的时候
不要用this.$router.push 或者this.$router.replace 前者在ios 和安卓端都调不起来的
后者只能在安卓端有效 在ios端无效
this.$router...[2021/1/4]
vue+vant 上传图片需要注意的地方
<van-uploader v-model="fileList" multiple :after-read="afterRead" :max-count="1" />
1:上传文件流，提交的模式 肯定得 form-data模式
2：上传的文件file 做出处理我这...[2021/1/4]
vue项目中锚点定位替代方式
在vue项目中，使用锚点定位会和router的规则冲突，在项目中的表现就是第一次点击url改变了，但是没有跳转到锚点位置，再次点击才会跳转。所以在vue项目中定义一个方法不适用锚点定位：
scrollToSection() {
let section = document....[2019/11/13]
vue data引入本地图片的两种方式小结vue data引入本地图片的两种方式小结
我就废话不多说了，大家直接看吧！
第一种
<template>
<img :src="imgsrc">
</template>
<script>
export default {
data () {
return ...[2019/11/13]
前端vue-cli项目中使用img图片和background背景图的几种方法前端vue-cli项目中使用img图片和background背景图的几种方法
前端中背景图片极其常用,但是很容易出现各种问题.
一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹.
一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误.
c 方法
正常使用background属性即可.
如有问题,应把图片资源放入static静态资源文件...[2019/11/13]
vue 项目打包时样式及背景图片路径找不到的解决方式
问题描述：vue项目打包后，文件找得到，但是引用的字体及背景图片找不到；
解决方法：
主要是需要单独为 c 配置 publicPath 。
ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api，可以为c 单独配置 public...[2019/11/13]
vue-element-admin 菜单标签失效的解决方式
设置菜单路由时，代码如下：
{
path: ''/materieluse'',
component: Layout,
meta: {
title: ''仓库管理'',
icon: ''component''
},
children: [{...[2019/11/12]
vue页面切换项目实现转场动画的方法vue页面切换项目实现转场动画的方法
前言
移动端, 使用vue为了良好的用户体验, 会需要实现APP形式的切换页面的左滑和右滑效果
实现原理, vue的过渡 & 动画
技术栈: vue + vue-router
解决思路
区分前进 和 后退的路由
网上搜索的资料, 找到了两种
监听popstate...[2019/11/12]
Vue 中 a标签上href无法跳转的解决方式Vue 中 a标签上href无法跳转的解决方式
问题：
使用vue-router 在IE下 a标签里的路由不跳转，火狐，chrome工作正常。
解决：
在App.vue 里增加判断IE浏览器手动修复……
export default {
name: ''App'',
mounted(){
function ...[2019/11/12]
vue 中几种传值方法(3种)
前言
vue项目中，组件跟组件之间数据的传递是很普遍的行为，在这里总结几种常见的vue组件跟组件之间传值方式，其中，主要有父子组件，非父子组件传值。
父组件向子组件传值
方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加...[2019/11/12]
Vue2.0 实现页面缓存和不缓存的方式
1、在app中设置需要缓存的div
<keep-alive> 缓存的页面
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<ro...[2019/11/12]
经验首页