JavaScript - 教程之家

63浏览

0评论

js限制输入框只能输入数字(onkeyup触发)

例子：html代码<input type="text" name="" id="box" />通常都直接用：<input type="text" name="" id="box" onkeyup="value=value.replace(/[^\d]/g,'')"/>以上的缺点是，当你正...

2020-05-27

63浏览

0评论

使用Vuex解决Vue中的身份验证问题

传统方式中，许多人使用本地存储，来管理通过客户端验证生成的tokens。一个大问题是如何有更好的方式，来管理验证tokens，从而允许我们来存储更大的用户信息。这就是Vuex的作用。 V...

2020-05-27

65浏览

0评论

基于vue和react的spa进行按需加载的实现方法

基于vue和react的spa进行按需加载由于最近打算将所有的管理系统采用同一套登陆方法，然后在登陆后进行系统的切换选择，不需要每个系统都去重新登陆一次，所以前端这边思考将所有...

2020-05-27

58浏览

0评论

脚手架vue-cli工程webpack的作用和特点

Vue项目开发过程中，会因为很多不同的实际运用需求不断地对webpack配置进行修改，在此之前，我们需要对webpack有一个基本的认识，了解它到底能为我们做些什么webpack是一个模块打包...

2020-05-27

59浏览

0评论

使用electron将vue-cli项目打包成exe的方法

如果你已经做好了一个vue的项目，并且想要将他打包成exe,那么请继续阅读。首先你可以下载一个demo了解一下。git clone https://github.com/electron/electron-quick-startcd...

2020-05-27

77浏览

0评论

使用 Node.js 实现图片的动态裁切及算法实例代码详解

背景&概览目前常见的图床服务都会有图片动态裁切的功能，主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片。一张动辄以 MB 为计量单位的原始大图，通常不会只设置一...

2020-05-27

63浏览

0评论

原生JS实现旋转轮播图+文字内容切换效果【附源码】

废话不多说，直接上图看效果：需求：点击左右按钮实现切换用户图片与信息；原理：点击右侧左侧按钮，把3号的样式给2号，2号的给1号，1号的给5号，5号的给4号，4号的样式给3号，然后根据现在是第...

2020-05-27

65浏览

0评论

vue-cli脚手架搭建的项目去除eslint验证的方法

eslint验证，为我们提升我们的代码质量和良好的编码风格带来了非常大的帮助，但是由于其语法验证的严格，很多程序员在初期使用的时候很不适应，就想怎么能够去掉eslint验证。其实把...

2020-05-27

70浏览

0评论

使用vue根据状态添加列表数据和删除列表数据的实例

如下所示：<template> <div> <div v-for="obj of a" @click="sel(obj)"> {{obj.name}} <span v-if="!obj.select">+</span><span v-else>-</span> </div> <hr> <div>...

2020-05-27

59浏览

0评论

vue动态删除从数据库倒入列表的某一条方法

如下所示：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单...

2020-05-27

61浏览

0评论

Vue中的Props(不可变状态)

组件接受的选项大部分与Vue实例一样，而选项props是组件中非常重要的一个选项。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给...

2020-05-27

71浏览

0评论

vue实现重置表单信息为空的方法

背景之前表单重置为空的话是这样写的this.fromline = { access_provider_name: '', // 接入商名称 access_provider_address: '', // 接入商所属地区 remark: '' // 备...

2020-05-27

40浏览

0评论

vue根据值给予不同class的实例

如下所示：<div class="chatBox-kuang" :class="addclass(skin)"></div> data(){ return{ skin:'' }}onchooseSkin(attr){ this.skin=attr}, 方法一addclass(i){ switch (i)...

2020-05-27

54浏览

0评论

vue实现条件判断动态绑定样式的方法

在我们做前端页面的时候，为了美观和直观，我们希望通过条件判断来让页面显示不同的样式，如下图所示：当值为“是”时，显示绿色的标签，当值为“否”时，显示为灰色的标签。标签的样式分...

2020-05-27

86浏览

0评论

脚手架vue-cli工程webpack的基本用法详解

webpack的打包依赖于它的一个重要配置文件webpack.config.js，在这个配置文件中就可以指定所有在源代码编译过程中的工作了，就一个配置就可以与冗长的Gruntfile或者Gulpfile说...

2020-05-27

36浏览

0评论

vue里input根据value改变背景色的实例

1、首先定义两个不同的.null-input .el-input__inner {background-color: rgba(255, 255, 255, 0.8); color: #525661; font-size: 16px;}.no-null-input .el-input__inner...

2020-05-27

57浏览

0评论

浅谈vue项目打包优化策略

使用vue-cli部署生产包时，发现资源包很大，打包后的vendor.js达到了1.4M，这已经很大了，而且会影响到首屏加载。那么，怎么优化呢？1.组件按需加载
这是首先可以优化的点。如果频繁使...

2020-05-27

59浏览

0评论

vue动画之点击按钮往上渐渐显示出来的实例

如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <s...

2020-05-27

54浏览

0评论

vue给组件传递不同的值方法

这里讲解一下Vue 官网的一个实例，Vue将数据遍历传递给多个组件，这个是我们实际开发中常做的事情。一般大型应用都是使用组件搭建起来的，我们需要给组件传递不同的值，来实现不同...

2020-05-27

56浏览

0评论

详解React之key的使用和实践

在渲染列表时，React的差异比较算法需要一个在列表范围内的唯一key来提高性能（通常用于获知哪个列表项改变了）。这个唯一的key需要我们手动提供。React官方建议使用列表数据中可...

2020-05-27

83浏览

0评论

vue init webpack 建vue项目报错的解决方法

使用vue init webpack 创建vue项目时报如下错误：vue init webpack my-projectC:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60let template =...

2020-05-27

71浏览

0评论

浅谈针对Vue相同路由不同参数的刷新问题

在使用vue和vue-router开发spa应用时，我们会遇到这样一种问题。
当页面跳转时，组件本身并没有发生改变：// 路由映射关系'/form/:type'// 当前页面路由/form/shop1this.$router....

2020-05-27

79浏览

0评论

vue、react等单页面项目部署到服务器的方法及vue和react的区别

最近好多伙伴说，我用vue做的项目本地是可以的，但部署到服务器遇到好多问题：资源找不到，直接访问index.html页面空白，刷新当前路由404。。。用react做的项目也同样遇到类似问题。...

2020-05-27

49浏览

0评论

对vue v-if v-else-if v-else 的简单使用详解

首先vue.js请注意 2.1.0版本以上方可使用v-else-if<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue.js"></script> </head> <bo...

2020-05-27

312浏览

0评论

Vue路由history模式解决404问题的几种方法

问题背景：vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路...

2020-05-27

63浏览

0评论

浅谈关于iview表单验证的问题

关于iview表单验证的问题iview表单验证的步骤：第一步：给 Form 设置属性 rules :rules
第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“
第...

2020-05-27

67浏览

0评论

iview同时验证多个表单问题总结

iview验证一个表单问题：
在上一篇文章中总结了iview表单验证的问题。其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。<Form ref="addArea...

2020-05-27

66浏览

0评论

在vue中v-bind使用三目运算符绑定class的实例

如图所示：通过动态的切换isOk就可以达到切换class的效果，isOk可以为一个表达式如num>1,如果data中num大于1，则显示classA，否则显示classB以上这篇在vue中v-bind使用三目运算符绑...

2020-05-27

70浏览

0评论

vue路由事件beforeRouteLeave及组件内定时器的清除方法

背景之前在做ADTS项目的时候，首页是一个实时监测的页面，需要每隔5秒更新一次数据，而业务逻辑上的需要先请求告警列表的接口的，从告警列表中拿到数据再去获取其他的数据，所以我在...

2020-05-27

67浏览

0评论

vue 利用路由守卫判断是否登录的方法

1.在router下的index.js 路由文件下，引入相关需要文件；import Vue from 'vue'import Router from 'vue-router'import {LOGIN} from '../common/js/islogin'import HelloWorld...

2020-05-27

69浏览

0评论

vue使用v-for实现hover点击效果

使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令（简写为：@）来完成。为标签绑定mouseenter以及mouseleave事件即可。hover是css中的选择器，用于选择鼠标指针浮动在上面的...

2020-05-27

72浏览

0评论

vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展。v-if 是直接删除dom节点, 就是...

2020-05-27

69浏览

0评论

浅谈微信页面入口文件被缓存解决方案

缓存对于前端页面来说，是加速页面加载的利器之一，但也同时带来了很多问题，比如新版本发布之后，怎么替换客户端上的缓存文件呢？大家一般的的解决方案主要有以下几种形式，一般情况
1...

2020-05-27

65浏览

0评论

JS数组实现分类统计实例代码

将水果数组中同类的水果合并为一条并求出总数var fruits = [{ name: 'apple', value: 1}, { name: 'apple', value: 2}, // 总计3个苹果{ name: 'banana', value: 2},...

2020-05-27

66浏览

0评论

Vue CLI3 开启gzip压缩文件的方式

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助 compress...

2020-05-27

76浏览

0评论

vue-router 手势滑动触发返回功能

vue-router的路由变换只存在“变换前”和“变换后”，不存在“切换中”的状态，所以做不到大多数app（微信那样的）在滑动过程中让界面跟随手指移动。但滑动事件还是可以监听的，我们...

2020-05-27

58浏览

0评论

浅谈angular2子组件的事件传递(任意组件事件传递)

angular2子组件的事件传递angular2有很多组件组成，画面由很多路由，导致事件的传递很“笨拙”，本组的技术负责人发现了任意组件传递事件的这个方法，教会了我，我做个笔记。项目情况...

2020-05-27

53浏览

0评论

详解如何webpack使用DllPlugin

前言（时光飞逝，转眼又偷懒了一个多月）什么是DLLDLL(Dynamic Link Library)文件为动态链接库文件,在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立...

2020-05-27

73浏览

0评论

angular2 组件之间通过service互相传递的实例

母组件传值给子组件母组件通过service传值给子组件，很简单，声明一个service@Injectable()export class ToolbarTitleService { title:string;}然后在母组件中依赖注入@Compone...

2020-05-27

71浏览

0评论

angularjs1.5 组件内用函数向外传值的实例

组件：.component('homeCityListCom',{ bindings: { list: '<', cityname:'&' }, controllerAs: 'vm', template: ` <div class="cityListBox"> <span class="title">按拼...

2020-05-27

73浏览

0评论

小程序视频或音频自定义可拖拽进度条的示例代码

小程序原生组件的音频播放时并没有进度条的显示，而此次项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。
视频和音频提供的api大致是相似的，可以根...

2020-05-27

61浏览

0评论

angular5 子组件监听父组件传入值的变化方法

项目中遇到一个问题，就是在ngInit()中调用方法，只调用一次的问题，当父组件传值变化时，并不会再次执行。import {Component,Input,OnChanges,SimpleChanges} from '@angular/core...

2020-05-27

59浏览

0评论

关于AngularJS中ng-repeat不更新视图的解决方法

最近写AngularJS项目中，遇到一个问题，先对数组进行赋值，ng--repeat正常工作，然后对数组进行修改，ng-repeat似乎没有工作，视图没有更新。原因是ng-repeat会已默认值排序，由于我的数...

2020-05-27

79浏览

0评论

react native基于FlatList下拉刷新上拉加载实现代码示例

react native 的上拉加载一直困扰着自己，一直用的第三方组件，但是可维护性不高，而且也不太好用，最近工作没那么忙，就研究下了官方的FlatList，做出来的成果，比第三方组件流畅度高好...

2020-05-27

57浏览

0评论

基于VUE实现的九宫格抽奖功能

先给大家展示下效果图：HTML代码：<template> <div class="luckDraw"> <title-bar :title="title"></title-bar> <div class="container"> <div class="turntable-wrapper">...

2020-05-27

69浏览

0评论

angularJs使用ng-repeat遍历后选中某一个的方法

1、html代码如下所示： <div> <button ng-repeat="t in deptName" class="deptDiv" ng-class="{'deptDivOnclick':selected==t.name}" ng-click="showDeptEmps(t.name...

2020-05-27

65浏览

0评论

jQuery实现点击图标div循环放大缩小功能

很基础的一个功能，点击左下角的图标按钮，地图的整个div会变大，变大预览之后，再次点击图标按钮，地图的整个div会变小，恢复原样，两个图标在地图界面的放大和缩小时间不断的切换图标状...

2020-05-27

83浏览

0评论

angularJs中orderBy筛选以及filter过滤数据的方法

如下所示：<div ng-app="module" ng-controller="ctrl">  {{data|orderBy:'click':true}}<br>  {{data|orderBy:'id':false}}<...

2020-05-27

76浏览

0评论

VUE 配置vue-devtools调试工具及安装方法

1. 通过 Git 克隆项目到本地git clone https://github.com/vuejs/vue-devtools.git2. Git 进入到 vue-devtools 所在目录，然后运行以下两个指令。先运行 npm install 安装项...

2020-05-27

78浏览

0评论

iview Upload组件多个文件上传的示例代码

使用 iview Upload 上传组件手动上传包括单个文件和多个文件思路：创建一个数组把需要上传的文件 push到这个数组里面1.引用组件2.手动上传，根据官方文档设置:before-uplo...

2020-05-27

热门文章