- 博客(35)
- 收藏
- 关注
原创 原生input 方法
input自带方法select(); 选中内容input.select();selectionStart // 光标结束选中的位置input.selectionStartselectionEnd // 光标结束选中位置input.selectionEnd = 0;setSelectionRange(start, end); // 选中指定区域的内容input.set...
2019-09-02 15:47:56
3265
原创 获取dom元素相关参数
clientHeight 获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。 clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。 clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。 clientWidth 获取对象的宽度,不计算任何边距、边框、...
2019-08-21 12:02:20
537
原创 js根据字节判断字符串长度
一个汉字是两个字节, 一个字母是一个字节处理代码/*参数说明:str: 需要处理的字符串L: 需要限制的长度*/cutStr(str, L) { var result = '', strlen = str.length, // 字符串长度 chrlen = str.replace(/[^\x00-\xff]/g, '...
2019-08-01 11:39:38
3295
原创 axios基本封装-基于vue
安装、引用npm install axios --save-dev // 安装到生成环境import Axios from 'axios'本次封装运用class类进行封装当new class类时, 默认执行class类中constructor()方法;class Http { constructor() { // new Http() 默认执行该方法 }}export d...
2019-07-24 15:02:45
495
转载 禁止web页面在ios中整屏上下弹动
禁止body或者可滑动元素的 touchmove 事件例: vuethis.$nextTick(() => { // 通过refs拿到dom元素, 给dom元素绑定touchmove事件, 其内容做操作 this.$refs.dom.addEventListener('touchmove', function (e) { if (!e.isSCROLL) { e.pr...
2019-04-26 17:35:29
3624
原创 移动端安卓文字垂直居中向上偏移解决方案
移动端安卓文字垂直居中向上偏移解决方案解决方案:不使用line-height进行垂直居中使用 transform scale 缩放操作注意:既然使用缩放,则所有的大小,宽高数值扩大一倍;参考链接-点一哈...
2019-03-18 16:49:25
3733
原创 lodash -- javascript原生库
数组去重// 传入一个数组_.uniq(array)// 根据属性值来去重, 传入一个数组,一个属性值_.uniq(array, goodsId)
2019-02-25 11:21:12
346
原创 css文字溢出隐藏,一行文字或多行文字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2019-01-18 11:52:55
25586
转载 vue项目-图片加载失败,加载默认图片
template <img :onerror="errorUserPhoto" :src="'Ecp.Picture.view.img?pictureId=' + head_pic" />script import userPhoto from '@/assets/images/userPhoto.jpg'data() { return { e...
2018-10-17 09:54:19
4071
转载 Mac上命令行获取iPhone/iPad的Identifier(UUID) 的方法
命令行(shell)获取 已通过USB连接到Mac Mini的iPhone/iPad的Identifier(UUID) 的方法:system_profiler SPUSBDataType | grep "Serial Number:.*" | sed s#".*Serial Number: "## 实用点:自动化测试的脚本不用每换一台机器就要修改待测试的iDevice的uuid了。 输出...
2018-10-13 14:05:11
3890
转载 css类名命名规则
CSS样式命名 说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或#content 容器,用于最外层 #layout 布局 #head, #header 页头部分 #foot, #footer 页脚部分 #nav 主导航 #subnav 二级导航 #menu 菜单 #s...
2018-09-14 13:57:41
1597
原创 js原生,鼠标离开事件
mouseout: 鼠标离开事件mouseleave: 鼠标离开事件区别: 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。mouseover: 鼠标移入事件mouseenter: 鼠标移入事件不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout只有在鼠标指针穿过被...
2018-02-23 23:07:40
32268
原创 vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴
this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect();//示例: 获取元素距离顶部的距离this.$refs.journalUpward.getBoundingClientRect().top// 获取组件高度this.$refs.top.$el.offsetHeight// 设置元素样式th...
2018-02-10 22:40:31
41551
原创 前端部署基本linux命令
mkdir '文件夹名称' 创建文件夹rm -r ‘文件夹名称 ’ 删除文件夹sudo chmod 777 -R '文件夹名称' 设置权限在当前文件下到拷贝文件到另一个文件夹中,示例: cp * -R ../release/v2.9 ,将当前所有文件拷贝到v2.9文件夹中 cp * -rRf '需要拷贝到哪个文件夹中(路径-相
2018-02-01 15:46:13
1408
转载 前端开发工具-vscode
插件: 下载ESLint插件后,需要在用户设置中设置"eslint.validate": ["javascript","javascriptreact","vue"]VSCode 拓展插件推荐插件列表Auto Close Tag 自动闭合HTML标签Auto Rename Tag 修改HTML标签时,自动修改匹配的
2018-01-22 17:55:49
1483
转载 前端构建工具- gulp - 安装及简单CSS,JS文件合并压缩
gulp基于流(streaming)的方式构建,首先读取文件,编译压缩文件(流的方式),最终将结果生成到配置的文件目录下。安装gulp假设已经安装了node 和npm (淘宝的cnpm很适合国内使用)。1、首页全局安装gulp。1 npm install --global gulp 2、其次局部安装gulp。(注:局部安装是安装到你项目的根目录,这是很多教程没有清晰表明)npm install g...
2018-01-11 11:59:05
2504
1
原创 js对象之深浅拷贝
前述: js分位简单类型和复杂类型, (简单、复杂类型有哪些可自行google)简单类型拷贝方式 可以直接用 = :let a = 5; let b = a;即可将 a 拷贝(复制)给 b, 并且,a、b 都有独立的内存,改变b的值也不会影响 a而复杂类型(例如: 对象object );let a = {name: 'xx'}; let b = a;复杂类型如果用简
2017-11-08 09:57:07
1240
原创 momentJs -- 强大的时间/日期格式化插件
地址:参考此处 http://momentjs.cn/docs/#/get-set/get/年月日 时分秒YYYY-MM-DD HH:mm:ssyears -- 年 months -- 月 days -- 日 hours -- 时 minutes -- 分 seconds -- 秒 milliseconds -- 毫秒引入moment获取时间 :// 获取是星...
2017-11-01 16:24:35
6209
原创 vue钩子函数 --已用,没有的用到之后更新
el - 表示DOM元素, data - 表示数据deforecreated: el和data并未初始化created: 完成了data数据的初始化,el没有beforeMount: 完成了el和data初始化mounted: 完成挂载 (el和data都初始化完成,并且挂载在页面上了)!!!!!!!! 注意:以下勾子只能在 keep-alive 下有用;
2017-10-13 10:17:40
1156
原创 vue-watch 深度监听!!
watch:{} 对象,可监听数据,数据发生变化, 处理函数 目的: watch虽可监听,但只是浅监听,只监听数据第一层或者第二层,何为第二层? let obj = {name: 'xx', child: {age: 11}}; child之后的值就为第二层或者深层实现目标: 如果 要监听一个对象中的属性,属性最高也是第二层了,watch可能监听不到, 所有要使用深...
2017-09-02 16:47:08
43947
1
原创 vue-表单操作
简单操作,与官网相同<template> <div> <h2>vue form表单</h2> <!-- 复选框 --> <input type="checkbox" id="dis" v-model="dis">
2017-08-22 23:15:20
3566
原创 vue-按键修饰符
用vue写PC端时,难免会涉及到按键,比如,按回车键提交表单等等,以下代码可直接懂,关键点是, keyup 事件 键值修饰符 回车触发 .enter (回车键) .tab (Tab键)
2017-08-19 23:56:22
1349
原创 vue-事件修饰符
详细 事件冒泡与取消默认事件 请跳转至 ☞http://blog.youkuaiyun.com/qq940853667/article/details/77151701以下是常用的事件,跟着代码写就好了 事件修饰符
2017-08-19 23:51:58
831
原创 vue中动态添加class类名
vue 动态添加class类名,灵活得让你发狂,下面示例几个<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名, 第二个参数:boolean值 --> <...
2017-08-19 16:03:59
122868
9
原创 vue中watch和computed属性作用及区别
watch 作用 :监听值,可监听所有的值,监听指的是只要我所监听的的值发生了改变,就会触发特定的方法,官方案例及写法:var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { //监听了firstNa
2017-08-16 23:44:26
7463
2
转载 前端代码规范
使用两个空格进行缩进。eslint: indentfunction hello (name) { console.log('hi', name)}除需要转义的情况外,字符串统一使用单引号。eslint: quotesconsole.log('hello there')$("")不要定义未使用的变量。eslint: no-unused-va
2017-08-15 10:14:54
7229
原创 vue-过滤器
1、过滤器使用: {{123456.123456 | numberFil}} {{12.456789 | numberFilArgument( 2 ) }} {{987.654321 | numberFil | precentFormat}} 2、过滤器定义
2017-08-14 23:12:23
246
原创 配所有的特殊符号
var re = /[`~!!@#$%^&*()_+《》,。,.\/;'[\]]+/ig; //匹配所有的特殊符号 if (re.test(message)) { console.log("有特殊符号"); return; } else { console.log("验证通过"); return; }
2017-05-29 18:13:53
815
原创 js正则匹配中文标点符号
//匹配这些中文标点符号 。 ? ! , 、 ; : “ ” ‘ ' ( ) 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ~ ﹏ ¥var reg = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3
2017-05-28 17:36:36
5459
原创 jQuery懒加载插件-lazyload(还有 jquery.scrollLoading 插件也可以实现图片滚动加载)
优点:1:图片没加载出来时,显示提前设定好的图片,等图片加载好后在显示需要显示的图片 2:当页面滑动到一定的位置时才加载所需要的图片,否则不加载代码:src:图片没有加载完成时提前显示的图片: data-original:图片加载完后所需要显示的图片,最终会显示data-original中的图片src可不写,默认是一张灰色图片
2017-05-05 20:08:05
2232
原创 ajax的四种使用方式及fetch(传说要代替ajax,原生的东西)
// 方法一: $.ajax({ url:'./a.json', type:'GET', // dataType:'json', success:function(data){ console.log(data); }
2017-05-04 20:10:36
1024
转载 HTML性能优化
页面优化是对网页中的HTML代码进行必要的调整,可以有效地精简页面中的冗余代码,加快网页显示速度,减少网页占用搜索引擎服务器的存储空间,提高用户体验和搜索引擎友好性,当然也可以更好的突出页面的主题,提高页面的相关性。 1、HTML标签有始终。 减少浏览器的判断时间2、把script标签移到HTML文件末尾,因为JS会阻塞后面的页面的显示。3、减少iframe的使用,
2017-05-03 22:37:16
414
原创 browser-sync的安装使用
作用:更改代码之后自动刷新浏览器安装:browser-sync是基于npm的,首先要安装npm,再通过npm在命令行里进行安装,安装代码如下:需要使用npm进行全局安装:` npm install browser-sync -g ` ,-g表示安装到全局或者 npm install -g browser-sync 全局安装的文件路径:C:\Users\计算机名\AppDat
2017-04-29 23:18:33
823
原创 npm的下载、使用,及切换镜像源的三种方式
简介:NPM,通常被称为node包管理器,顾名思义,他的主要功能就是管理包,包括:安装 / 卸载 / 更新 / 查看 / 搜索 / 发布等 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用使用1、安装(不用安装,只要安装过了node就会有) - 官网[...
2017-04-27 08:44:58
62457
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人