![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
工作笔记
文章平均质量分 57
avoidaily
当你凝视深渊,深渊也在凝视你
展开
-
如何通过JS获取URL携带的参数
获取URL参数思想要想获取当前页面携带的URL参数,首先要获取到当前页面的地址,我们可以通过location.search来获得。取到URL地址后,可以根据&进行数据拆分,拆分出一共有多少个参数,然后再根据=获得参数的值。本文将通过JS来获取当前访问页面所携带的参数。获取URL携带参数实例getUrlParamValue = function (name) { if (name ...转载 2020-03-20 16:27:36 · 1526 阅读 · 0 评论 -
pc网站随鼠标滚动动态出现效果
1.scroll滚动监听窗口事件,配合动画或css3<link rel="stylesheet" href="../res/static/css/animate.min.css">js$('.panel').addClass('animated fadeInUp'); // 1:直接添加$(document).scroll(function() { 2:监听窗口滚动添加 ...原创 2020-03-11 18:19:15 · 996 阅读 · 0 评论 -
element+sortablejs插件实现拖拽排序效果
背景1、后台管理系统中表格需要实现行拖拽功能2、表格使用element组件库中el-table方案介绍Sortable.js介绍:Sortable.js是一款轻量级的拖放排序列表的js插件引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS ...原创 2020-03-05 14:34:56 · 1618 阅读 · 0 评论 -
JSON.parse()与JSON.stringify()
1.parse()用于从一个字符串中解析出json对象注意:每个属性名都必须用双引号,否则会抛出异常,单引号写在{}外。var str = '{"name":"zahngsan" , "age":"23"}'JSON.parse(str)2.stringify() 用于从一个对象解析出字符串var a = {a:1,b:2}JSON.stringify(a)...转载 2020-03-03 12:16:37 · 126 阅读 · 0 评论 -
vue的生命周期
由此可见,当代码运行时,会一次调用Vue 的 beforeCreate、created、beforeMount、mounted 四个方法,直至完成组件的挂载。而update阶段,要在数据发生改变时(比如更新message字段 vm.message = ‘Hahahaha~’)才出发;destroy阶段,要在调用vm.$destroy()后才触发。...转载 2020-03-03 11:23:27 · 113 阅读 · 0 评论 -
vue-bus中央事件总线(兄弟组件之间传值)
1.作用:非父子组件(例如兄弟组件)之间传值的方式,可以用vuex,也可以用事件总线,已下是事件总线(vue-bus)的介绍:2、注册在main.js中注册import Vue from 'vue';import VueBus from 'vue-bus';//中央事件总线...Vue.use(VueBus);...3、使用A页面传递给B也页面:A页面中,触发了一个叫toB...转载 2020-03-03 11:15:13 · 853 阅读 · 0 评论 -
动态路由($router 和 $route的区别)
$router 和 $route的区别:router是VueRouter的实例,在script标签中想要导航到不同的URL,使用router是VueRouter的实例,在script标签中想要导航到不同的URL,使用router是VueRouter的实例,在script标签中想要导航到不同的URL,使用router.push方法。eg:返回上一个历史history用$router.to(-1...原创 2020-03-03 10:54:21 · 273 阅读 · 0 评论 -
vue-app物理返回(安卓)键跳到指定页面
例如提交订单成功跳到了订单详情页面,再返回就又到了提交订单支付页面。我们需要返回到其他页面:1、挂载完成后,判断浏览器是否支持popstatemounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); win...转载 2020-03-03 10:24:26 · 1270 阅读 · 2 评论 -
vue的长按事件
touch事件touchstart 在屏幕上时触发touchend 离开屏幕时触发template:<div @touchstart="getTouchStart" @touchend="getTouchEnd">methodsmethods:{ getTouchStart(){ clearTimeout(sufu); sufu=setTimeout(fun...转载 2020-03-01 17:54:14 · 5120 阅读 · 0 评论 -
移动端长按文本选择复制
css:-webkit-user-select: none;可以限制长按复制兼容性:设置或检索是否允许用户选中文本。IE6-9不支持该属性,但支持使用标签属性 onselectstart=”return false;” 来达到 user-select:none 的效果;Safari和Chrome也支持该标签属性;直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的...转载 2020-03-01 17:50:54 · 2511 阅读 · 0 评论 -
jquery获取元素节点
常用到的知识点,在此记录,以便查阅$(’.test’).parent();//父节点$(’.test’).parents();//全部父节点$(’.test’).parents(’.test1’);//含有类名.test1的父节点$(’.test’).children();//全部子节点$(’.test’).children(‘li’);//元素为li的全部子节点$(’.test’)....转载 2020-03-01 17:48:41 · 104 阅读 · 0 评论 -
Vue搭建环境时npm run dev,npm ERR! code ELIFECYCLE
报错如下npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! vue-manage-system@3.2.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.jsnpm ERR! Exit status 1npm ERR!npm ERR!...转载 2020-01-12 15:04:21 · 670 阅读 · 0 评论 -
原生Form表单提交方式
var idcard = result.data.data;var url = " 请求的地址"; var postForm = document.createElement("form");//表单对象 postForm.method = "post"; postForm.action = url; var timeInput = document.createElement("inp...转载 2020-01-10 16:52:49 · 2640 阅读 · 0 评论 -
关于localStorage,Cookie的存取
1、localStorage登录时保存localStorage.setItem('token',res.data.token);组件调用localStorage.getItem('token')API获取键值对数量localStorage.length读取localStorage.getItem(‘name’), localStorage.key(i)添加/修改local...原创 2019-12-30 16:42:57 · 298 阅读 · 0 评论 -
vue项目的自动播放背景音乐
<template> <audio preload="auto" loop id="audio" :src="require('../../assets/mp3/214.mp3')"></audio> <div @click="changeOn" :class="isOff?'isOff':'isOn'"></div></te...转载 2019-12-27 18:13:48 · 9397 阅读 · 9 评论 -
js判断对象数组中是否存在某个对象
1:直接用数组的indexOf方法就好,存在返回当前索引不存在返回-1var arr=[1,2,3,4]arr.indexOf(3) // 2arr.indexOf(5) // -12:要只是判断的话是可以遍历后判断对象的属性是否相同的,像这种:arr.forEach(item=>{ if(item.name=='Alex'){ alert('存在这个元素...转载 2019-12-27 17:00:46 · 1994 阅读 · 0 评论 -
vue项目的——TextScroll -- 文字滚动
效果展示:1:利用vue的列表过渡transition-group来进行动画渲染。滚动元素都是相对于滚动视口绝对定位,利用定时器循环更改当前显示索引,配合Vue的过渡属性,达到这种滚动效果。2:结构<div class="TextScroll"> <transition-group tag="ul" :name="scrollType"> <...转载 2019-12-25 15:44:09 · 2538 阅读 · 0 评论 -
在vue项目里使用jquery
1.NPM 安装 jQuery,项目根目录下运行以下代码npm install jquery --save2.webpack配置在项目根目录下的build目录下找到webpack.base.conf.js文件,在开头使用以下代码引入webpack,因为该文件默认没有引用,var webpack = require('webpack')然后在module.exports中添加一段代码,...转载 2019-12-25 15:38:25 · 871 阅读 · 0 评论 -
vue项目keep-alive返回记住滚动条位置
需求:点击首页列表进入二级页面,返回的时候保持在原位置。1:App.vue<template> <div id="app"> <!--页面返回不刷新--> <!-- // 缓存组件跳转的页面 --> <keep-alive> <router-view...原创 2019-12-21 16:35:08 · 1849 阅读 · 1 评论 -
element-ui中el-select组件v-model绑定值为对象时的处理
编辑修改时,遇到数据回显的问题:显示文本,传参id。而v-model只有一个绑定变量。so…value-keyvalue-key用于显示文本传参转载 2019-12-20 16:30:52 · 10838 阅读 · 1 评论 -
vue项目style绑定background-image的方式和其他变量数据
就是有一些qipa,后期要求后台修改背景图行<div class="StudyIntegral" :style="{backgroundImage:'url(' + baseUrl+avatarUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', ...原创 2019-12-13 15:12:35 · 2292 阅读 · 0 评论 -
vue项目ios上input密码框无法输入值
原因:ios系统的bug,input的type为text后面跟的是password的时候,就不能主动呼出中文输入法。解决:页面上的input输入框设置-webkit-user-select:text !important;或者一并给input的父类加上此样式。(亲试有效)在password前面加一个text的input 并将其宽高设为0 不要用display:none或 visibili...原创 2019-12-09 19:06:20 · 1170 阅读 · 0 评论 -
vs code配置ftp连接远程服务器实现代码文自动上传
1.在vscode应用商店中搜索拓展sftp插件,然后进行安装。2.安装完成后重启窗口,按快捷键Ctrl+shift+p,输入sftp:config回车进入配置文件。3.修改配置文件如下:栗子:...转载 2019-12-06 10:55:41 · 5162 阅读 · 1 评论 -
vue项目轮询 || setInterval()和setTimeout()区别
定义setTimeout():延时任务。在指定的毫秒数后调用函数或计算表达式,setInterval():定时任务。在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。setTimeout()只执行一次,而setInterval可以多次调用。栗子setInterval() 定时器this.timer = setInterval( ()=> {...原创 2019-12-04 10:49:44 · 2322 阅读 · 0 评论 -
ios页面卡顿不流畅
给滚动元素上添加:overflow-y: auto;-webkit-overflow-scrolling : touch原创 2019-11-27 16:52:37 · 163 阅读 · 0 评论 -
下拉框禁止input弹出手机默认键盘的解决办法
1. readonly (推荐) 只读(尝试有效)<input type="text" name="www.xxx" readonly="readonly" />注意: readonly表示此域的值不可修改,仅可与 type=“text” 配合使用,可复制,可选择,可以接收焦点,后台会接收到传值2. 用一个p/div等标签显示内容;然后放一个隐藏的input;如果你想着用di...转载 2019-11-27 11:57:04 · 1658 阅读 · 0 评论 -
v-touch插件:vue监听手指滑动vue-touch的使用
1. npm安装npm install vue-touch@next --save//main.js中引入:import VueTouch from 'vue-touch'Vue.use(VueTouch, {name: 'v-touch'})2. 案例://html代码<template> <v-touch v-on:swipeleft="swiperlef...原创 2019-11-25 17:54:45 · 1736 阅读 · 0 评论 -
禁止普通标签的点击事件
禁止button的点击事件是disabled=‘true’禁止非button标签的点击事件是添加样式pointer-events:none;但是存在兼容性,ie11才支持的。转载 2019-11-25 17:49:29 · 1313 阅读 · 0 评论 -
vue项目实现点击图片放大预览
vue-photo-preview插件1、运行npm install vue-photo-preview --save2、main.js引用import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)3、在html中使用// 直接设置preview ...原创 2019-11-13 16:29:15 · 7187 阅读 · 4 评论 -
vue全面自动化构建利用webpack和vue-cli脚手架创建项目完整版
vue 的轮播图swiper vue-awesome-swiper第一步:安装node node -v查看node版本 npm -v 查看npm版本(顺便安装淘宝镜像) cls清空命令行第二步(注意第二步可以被第三步代替安装webpack.意思是只装vue-cli会自带webpack):安装webpack 最好问下用哪个版本 npm(或cnpm) install webp...转载 2019-11-13 12:23:29 · 371 阅读 · 0 评论 -
jquery刷新页面代码
window.location.reload()刷新当前页面.parent.location.reload()刷新父亲对象(用于框架)opener.location.reload()刷新父窗口对象(用于单开窗口)top.location.reload()刷新最顶端对象(用于多开窗口)...转载 2019-11-12 17:05:54 · 237 阅读 · 0 评论 -
jq数组去重
$.inArray方法,来解决数组去重。//一个函数重复元素的数组var arr2 = [1,2,3,4,5,4,3,2,1];var new_arr=[];for(var i=0;i<arr2.length;i++) { var items=arr2[i]; //判断元素是否存在于new_arr中,如果不存在则插入到new_ar中 if($.inArray...转载 2019-11-12 10:12:38 · 1975 阅读 · 0 评论 -
jQuery 遍历 - each() 方法
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(...转载 2019-11-12 10:10:28 · 80 阅读 · 0 评论 -
jq弹框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-09 17:05:14 · 299 阅读 · 0 评论 -
jq不滑动变化的轮播,定时替换内容222
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-09 17:04:25 · 90 阅读 · 0 评论 -
jq不滑动变化的轮播,定时替换内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-09 17:03:52 · 111 阅读 · 0 评论 -
css动画横向滚动广告条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-09 17:01:43 · 1009 阅读 · 0 评论 -
jq插件
http://www.jq22.com/webqd722原创 2019-11-09 16:58:25 · 193 阅读 · 0 评论