编程开发 - 教程之家

63浏览

0评论

vue项目watch内的函数重复触发问题的解决

问题描述：
有两个页面A和B，每个页面里都有一个getList()方法。这个两个方法都需要传一个相同的参数C，参数C的选择过程又比较麻烦。为了避免在切换A、B两个界面重复选择参数C的...

2021-05-27 21:29:29

61浏览

0评论

Vue实现无缝轮播效果

本文实例为大家分享了Vue实现无缝轮播效果的具体代码，供大家参考，具体内容如下
代码
1.子组件代码
代码如下（示例）：<template> <div> <div class="box" @mouseenter="mouse"...

2021-05-27 21:29:28

46浏览

0评论

vue移动端项目中如何实现页面缓存的示例代码

背景
在移动端中，页面跳转之间的缓存是必备的一个需求。例如：首页=>列表页=>详情页。从首页进入列表页，列表页需要刷新，而从详情页返回列表页，列表页则需要保持页面缓存。对于首...

2021-05-27 21:29:22

40浏览

0评论

vue实现菜单权限控制的示例代码

大家在做后台管理系统时一般都会涉及到菜单的权限控制问题。当然解决问题的方法无非两种——前端控制和后端控制。我们公司这边的产品迭代速度较快，所以我们是从前端控制路由...

2021-05-27 21:29:21

46浏览

0评论

vue实现登录注册模板的示例代码

模板1： login.vue<template> <p class="login"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="登录" name="first"> <el-form :mode...

2021-05-27 21:29:19

36浏览

0评论

关于Vue虚拟dom问题

一、什么是虚拟dom？虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构在vue中，每个组件都有一个render函数，没有render找template，没有template找el，有el就会把el.outHTM...

2021-05-27 21:29:16

36浏览

0评论

浅谈Vue入门需掌握的知识

Vue作为一款目前最流行的前端框架之一，是许多前端开发工程师的不二选择。最近我在前端岗位上也运用Vue实现了几款产品，那么今天来分享一下Vue是什么，以及我对Vue的见解。一、定...

2021-05-27 21:29:13

49浏览

0评论

vue3.0公共组件自动导入的方法实例

一、前提
我们使用的是require.context方法导入，在vite创建的项目内使用会报错"require not found"，所以必须用webpack创建项目。或者有大能可以说说vite怎么解决这个问题。二...

2021-05-27 21:29:11

56浏览

0评论

vue3利用store实现记录滚动位置的示例

整体效果
在首页列表进行滚动浏览时进入详情页后，切换回首页时可以定位到之前浏览的位置。监听容器滚动事件
定义一个滚动事件，绑定到容器的滚动事件上,我这里做了一下节流con...

2021-05-27 21:29:09

54浏览

0评论

vue + element ui实现播放器功能的实例代码

没有效果图的展示都是空口无凭1.基于audio并结合elementUI 的进度条实现
2.实现了播放器基本的功能，播放/暂停、快进、静音、调节声音大小、下载等功能html代码，关键部分已加...

2021-05-27 21:29:07

57浏览

0评论

vue+element+oss实现前端分片上传和断点续传

纯前端实现：切片上传断点续传。断点续传需要在切上上传的基础上实现前端之前上传OSS，无需后端提供接口。先上完整代码，直接复制，将new OSS里的参数修改成自己公司OSS相关信息...

2021-05-27 21:29:03

44浏览

0评论

详解vue computed的缓存实现原理

本文围绕下面这个例子，讲解一下computed初始化及更新时的流程，来看看计算属性是怎么实现的缓存，及依赖是怎么被收集的。<div id="app"> <span @click="change">{{sum}}</span>...

2021-05-27 21:29:01

47浏览

0评论

vue移动端自适应适配问题详解

1、vue ui创建项目2、选择基本配置项3、运行项目4、新建rem.js文件// 基准大小const baseSize = 32// 设置 rem 函数function setRem () { // 当前页面宽度相对于 750 宽的...

2021-05-27 21:28:50

44浏览

0评论

VUE+Canvas实现财神爷接元宝小游戏

之前的canvas小游戏系列欢迎大家戳：《VUE实现一个Flappy Bird~~~》《猜单词游戏》《VUE+Canvas 实现桌面弹球消砖块小游戏》《VUE+Canvas实现雷霆战机打字类小游戏》如标题，这...

2021-05-27 21:28:47

81浏览

0评论

Vue.js之VNode的使用

什么是VNode
在vue.js中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的DOM元素。例如，DOM元素有元素节点，文本节点，注释节点等，v...

2021-05-27 21:28:44

51浏览

0评论

如何使用vue自定义指令构建拖放插件

我们都知道html5的拖放特性，利用它可以很方便的实现拖拽和放置功能，比如一些选择类操作的使用场景，让用户去拖拽比鼠标点击更容易接受和理解。今天我们就利用这一特性，结合vue的...

2021-05-27 21:28:42

46浏览

0评论

Vue2.0/3.0双向数据绑定的实现原理详解

Vue2.0/3.0 双向数据绑定的实现原理
双向数据绑定简意即数据的改变能让页面重新渲染Vue2.0 ES5的原理：Object.defineProperty 对数据进行拦截简单小案例<body> 姓名:...

2021-05-27 21:28:41

28浏览

0评论

vue实现登录类型切换

本文实例为大家分享了vue实现登录类型切换的具体代码，供大家参考，具体内容如下运行效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录类...

2021-05-27 21:28:39

105浏览

0评论

详解Element-ui NavMenu子菜单使用递归生成时使用报错

当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标hover时，会出现循环调用某个（mouseenter）事件，导致最后报错
处理方式
注：2.13.2 版本，只需对子菜单设置属性 :popp...

2021-05-27 21:28:36

36浏览

0评论

用vue设计一个数据采集器

场景
在业务上现在有一个场景，当发生业务行为变化时，需要对各个模块的行为进行数据收集，数据用途可以用作回顾，也可以是例如监控这样的场景。核心问题
说白了这个需求就是需要对...

2021-05-27 21:28:35

43浏览

0评论

vue实现骨架屏的示例

骨架屏用途
作为spa中路由切换的 loading, 结合组件的生命周期和ajax请求返回的时机来使用.（作为loading 使用）。作为与用户联系最为密切的前端开发者，用户体验是最值得关...

2021-05-27 21:28:33

43浏览

0评论

详解vue3的沙箱机制

前言
vue3 沙箱主要分两种浏览器编译版本，浏览器版本是使用with语法加上proxy代理拦截本地预编译版本，通过在模版预编译阶段转换阶段，使用转换插件transformExpression...

2021-05-27 21:28:30

49浏览

0评论

Vue项目中实现带参跳转功能

页面介绍： 主页面：name —> shishengzuotanhuichaxun 此页面表格中的数据均通过接口从后端获取数组对象并渲染，每一行数据都有对应的行id，我们的目的就是根据表格...

2021-05-27 21:28:29

48浏览

0评论

Vue-CLI多页分目录打包的步骤记录

页面目录结构注意需要将默认的 html 模板文件 public/index.html 移动到根目录下。安装依赖npm i --save-dev cross-env tasksfilebuild/pages.js获取 Vue CLI 需要的多页...

2021-05-27 21:28:27

68浏览

0评论

vue 单元测试初探

前言
单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义，如C语言中单元指一个函数，Java里...

2021-05-27 21:28:25

41浏览

0评论

VUE+Express+MongoDB前后端分离实现一个便签墙

计划来实现一个便签墙系列，这个东西做简单也简单，往复杂了做功能也很多，记录一下从零到有的开发过程吧，希望最后能把这个项目做得很完善。首先是前后端分离架构，前端用vue，后台我...

2021-05-27 21:28:24

38浏览

0评论

浅谈vue首次渲染全过程

昨天有朋友问我vue在页面第一次加载时到底做了些什么，看来这个问题在很多朋友心中可能还比较模糊，今天我们一起来详细的看看vue的首次渲染过程
了解vue首次渲染全过程，我们应该...

2021-05-27 21:28:07

32浏览

0评论

vue后台管理添加多语言功能的实现示例

在这家公司一个项目，需要添加英文版本，就是中英文化了，直接上代码1.首先是main.js页面做配置import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载const i1...

2021-05-27 21:28:04

51浏览

0评论

vue实现秒杀倒计时组件

本文实例为大家分享了vue实现秒杀倒计时组件的具体代码，供大家参考，具体内容如下下面是使用Vue实现秒杀倒计时组件开发思路1.请求服务器获取这一刻的服务器时间（统一以服务器时...

2021-05-27 21:28:02

32浏览

0评论

vue父子组件的互相传值和调用

1、父传值给子组件
父组件：<template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div></template><script>import child from './child'expo...

2021-05-27 21:27:51

61浏览

0评论

Vue自定义v-has指令,做按钮权限判断的步骤

应用场景
以后台管理系统为例，每个用户所拥有的按钮权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。简单说一下，自定义...

2021-05-27 21:27:49

112浏览

0评论

Vue+Springboot实现接口签名的示例代码

1、实现思路
接口签名目的是为了，确保请求参数不会被篡改，请求的数据是否已超时，数据是否重复提交等。接口签名示意图
客户端提交请求时，将以下参数按照约定签名方式进行签名，随...

2021-05-27 21:27:44

42浏览

0评论

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 21:27:42

37浏览

0评论

Vue自定义v-has指令实现按钮权限判断

应用场景
以后台管理系统为例，每个用户所拥有的按钮权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。简单说一下，自定义...

2021-05-27 21:27:33

49浏览

0评论

详解vue3沙箱机制

前言
vue3 沙箱主要分两种浏览器编译版本，浏览器版本是使用with语法加上proxy代理拦截本地预编译版本，通过在模版预编译阶段转换阶段，使用转换插件transformExpression...

2021-05-27 21:27:30

39浏览

0评论

Vue封装一个TodoList的案例与浏览器本地缓存的应用实现

本文主要介绍了Vue封装一个TodoList的案例与浏览器本地缓存的应用实现，分享给大家，具体如下：使用Vue封装一个简易的Todolist的小案例. 同时加入了浏览器本地缓存的技术手段.浏...

2021-05-27 21:27:23

88浏览

0评论

如何在vue项目中使用百度地图API

1、在百度地图开放平台注册账号并登录　　网址：http://lbsyun.baidu.com/index.php?title=jspopularGL2、选择自己所需的地图版本：　　我个人使用2.0足够了，其实就是懒，一直...

2021-05-27 21:27:21

43浏览

0评论

Vue实现下拉滚动加载数据的示例

Web项目经常会用到下拉滚动加载数据的功能，今天就来种草 Vue-infinite-loading 这个插件，讲解一下使用方法！第一步：安装npm install vue-infinite-loading --save第二步：引用impo...

2021-05-27 21:27:18

167浏览

0评论

vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一...

2021-05-27 21:27:15

70浏览

0评论

Vue nextTick的原理解析

使用过Vue的小伙伴们都知道，Vue里的nextTick可以获取到更新后的DOM, 今天我就来讲解下nextTick里面究竟做了什么？开始讲解前，我们需要知道了解一个概念，那就是Event LoopEvent L...

2021-05-27 21:27:11

54浏览

0评论

Vue.js前端框架之事件处理小结

1. v-on 事件监听监听DOM事件使用 v-on 指令。该指令通常在模板中直接使用，在触发事件时会执行一些 JavaScript 代码。v-on 指令的基本用法（1）在 HTML 中使用 v-on 指令，后面可...

2021-05-27 21:27:09

38浏览

0评论

vue 实现无规则截图

大家所见到的大多数都是有规则截图,可以应付大部分的应用场景,但是对于图片处理,想要将规则交给用户,普通的截图已经满足不了用户了,那我们能不能前端实现图片的任意规则截...

2021-05-27 21:27:06

167浏览

0评论

Vue.js源码分析之自定义指令详解

前言除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。官网介绍的比较抽象，显得很高大上，我个人对自定义指令的理解是:当自定义指令作用在一些DOM元...

2021-05-27 21:27:05

58浏览

0评论

vue中多附件上传的实现示例

前言
本篇主要记录在 Vue项目中实现附件上传功能，可实现单/多附件上传，识别文件格式并用不同图标展示功能，及控制是否可编辑功能。内容简洁易懂，如有需要可自取。完整代码点击...

2021-05-27 21:27:02

34浏览

0评论

vue 虚拟DOM快速入门

虚拟 DOM
什么是虚拟 dom
dom 是文档对象模型，以节点树的形式来表现文档。虚拟 dom 不是真正意义上的 dom。而是一个 javascript 对象。正常的 dom 节点在 html 中是这样表示...

2021-05-27 21:27:01

61浏览

0评论

基于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 21:26:59

50浏览

0评论

vue 实现拖拽动态生成组件的需求

产品需求
开完产品需求会议，遇到了一个需求，首先页面分成两栏布局，左侧展示数据组件，支持拖拽排序，点击按钮清除组件。右侧支持将组件的缩略图拖拽至左侧生成一个新的组件。思路...

2021-05-27 21:26:57

52浏览

0评论

通过Element ui往页面上加一个分页导航条的方法

需求加入一个分页条，此分页条可以跳转页面，可以根据页码选择具体页面，可以设置当前页面的大小。在element ui官网选择Pagination分页组件进入element ui官网，然后选择一个合适的...

2021-05-27 21:26:56

56浏览

0评论

详解Vue开发网站seo优化方法

因为用了vue等js的数据绑定机制来展示页面数据，爬虫获取到的html是模型页面而不是最终数据的渲染页面，搜索引擎是不回去执行请求到的js。vue的项目都是ajax请求数据，引擎爬虫进...

2021-05-27 21:26:53

46浏览

0评论

Vue项目引入PWA的步骤

Vue项目引入PWA很简单，操作步骤如下：1. 安装依赖vue add @vue/pwa由于使用add关键字，安装成功后会在项目中创建一些文件，如果项目使用了git，可以很容易的看出文件变化：src文件夹下...

2021-05-27 21:26:51

热门文章