经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 Vue.js
一个基于Vue 3+Element Plus的基金看板

一个基于Vue 3+Element Plus的基金看板

原由 在公司,老用手机还是不方便,其他网站页面又花里胡哨的,于是产生了自己做个数据汇总页面,可以DIY,方便后面个性化开发。 介绍 基于Vue 3,UI采用Element Plus 只有一个html文件 数据接口来源:天天基金网 可以添加自己的基金代码、单价、份额,系统会自动计算,而且每...[2021/6/7]

vue实现水波涟漪效果的点击反馈指令

水波效果 当用户点击时,会以点击中心为圆心产生一个水波扩散的涟漪效果,适用各个场景,美观又不浮夸,关键是可以给用户带来很直观的反馈。 来看实现 首先这里基于Vue3自定义指令进行封装,Vue3的自定义指令跟Vue2相比变动不是很大,。我们的目标是完成一个水波指令的基本原型,这里循...[2021/5/31]

vue基于Teleport实现Modal组件

vue基于Teleport实现Modal组件

1.认识Teleport 像我们如果写Modal组件、Me age组件、Loading组件这种全局式组件,没有Teleport的话,将它们引入一个.vue文件中,则他们的HTML结构会被添加到组件模板中,这是不够完美的。 没有Teleport 有Telepo...[2021/5/31]

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通过懒加载提升页面响应速度

概述 项目的目的是要通过数据透视表和Excel公式来分析公司的各项运营数据。不过在集成后,在开发环境页面运行流畅,大量数据加载处理也很快。但是发布生产后,在用户每次打开页面时,加载时间上相较开发阶段均有所降低,经过排查速度变慢是由于发布包的vendor.js变大所导致的,这个文件加载每次都需30...[2021/5/10]

VUE+Canvas实现简单五子棋游戏的全过程

VUE+Canvas实现简单五子棋游戏的全过程

前言 在布局上,五子棋相比那些目标是随机运动的游戏,实现起来相对简单许多,思路也很清晰,总共分为: (1)画棋盘; (2)监听点击事件画黑白棋子; (3)每次落子之后判断是否有5子相连,有则赢。 最复杂的恐怕就是如何判断五子棋赢了,那么就先从简单的开始,画个棋盘吧~ 1、画棋盘...[2021/5/10]

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 使用的是虚拟 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 ,新特性 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种方式

什么是路由懒加载? 也叫延迟加载,即在需要的时候进行加载,随用随载。 官方解释:  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 动态生成拓扑图的示例

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项目中锚点定位替代方式

在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转。所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document....[2019/11/13]

vue data引入本地图片的两种方式小结

我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return ...[2019/11/13]

前端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为了良好的用户体验, 会需要实现APP形式的切换页面的左滑和右滑效果 实现原理, vue的过渡 & 动画 技术栈: vue + vue-router 解决思路 区分前进 和 后退的路由 网上搜索的资料, 找到了两种 监听popstate...[2019/11/12]

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]

解决vue admin element noCache设置无效的问题

1、后台返回的数据 { path: ''/fbgq'', name: ''fbgq'', component: () => import(''../view part/fbgq.vue''), meta: { title: ''发布供求'', ...[2019/11/12]

使用vuex存储用户信息到localStorage的实例

1、首先需要装vuex npm install vuex -d 2、新建store文件夹,新建index.js, 并引入vue、vuex,代码如下: import Vue from ''vue'' import Vuex from ''vuex'' Vue...[2019/11/12]

vue 实现通过vuex 存储值 在不同界面使用

通过vuex 存储 1. 创建store.js文件 import Vue from ''vue''; import Vuex from ''vuex''; Vue.use(Vuex); const state = { 要设置的全局访问的state对象 coun...[2019/11/12]

VUE:vuex 用户登录信息的数据写入与获取方式

整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返...[2019/11/12]

Vuex实现数据增加和删除功能

首先,我们要安装vuex,执行命令yarn add vuex 1.编写state数据 vuex/index.js import Vue from ''vue''; import Vuex from ''vuex''; Vue.use(Vuex); const state ...[2019/11/12]

vuex存储token示例

1.在login.vue中通过发送http请求获取token 根据api接口获取token var url = this.HOST + " e ion"; this.$axios.post(url, { username: this.loginForm.username,...[2019/11/12]

vue在路由中验证token是否存在的简单实现

1. 在router/index.js进行验证 2. 代码如下: import Vue from ''vue'' import Router from ''vue-router'' import Login from ''@/component common/Login''; ...[2019/11/12]

vue路由守卫,限制前端页面访问权限的例子

今天给大家写一篇关于vue校验登录状态,如果是非法登录就跳转到登录页面的逻辑 首先需要写一个路由守卫,它的原理是每次路由发生变化时触发具体写法如下: router.beforeEach((to, from, next) => { next() }) befor...[2019/11/12]

vue 更改连接后台的api示例

vue 更改连接后台的api,是更改在config文件夹下的index.js文件中的proxyTable的值。 如下代码,其中 10.1.166.88:8888 pringTimes 为后台暴露出来的appi。 dev: { env: require(''./dev.e...[2019/11/12]

373
2
记录数:518 页数:1/1112345678910下一页尾页
加载更多
 友情链接: NPS