- 博客(41)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 jquery 获取data-* 属性值
jquery 获取data- 属性值*data-*自定义数据属性HTML5规定可以为元素添加非标准型的属性，只需添加前缀data-，这些属性可以随意添加，随意命名，目的是为元素提供与渲染无关的信息，或提供语义信息。下面就详细介绍四种方法获取data-*属性的值<li id="getId" data-id="122" data-vice-id="11">获取id</li>1、需要获取的就是data-id 和 dtat-vice-id的值一：getAttribute(
2020-08-19 15:27:51
1830
转载 Vue全局使用axios的方法
axios 是一个基于 promise 的 HTTP 库，axios并没有install方法，所以是不能使用vue.use()方法的。1. 结合vue-axios使用看了[vue-axios](https://www.npmjs.com/package/vue-axios)的源码说明，它是按照vue插件的方式去写的。那么结合vue-axios，就可以去使用vue.use()方法了。安装：n...
2019-08-18 19:46:32
681
原创 vue-router的参数传递
vue-router传递参数分为两大类编程式的导航 router.push声明式的导航 <router-link>- 声明式的导航 <router-link>一、用name传递参数1.在路由文件src/router/index.js里配置name属性routes: [ { path: '/', name: 'Hello',...
2019-08-16 12:32:13
526
原创 vue使用 v-for循环回来的数据动态绑定id值
<el-main> <el-row :gutter="30" style='height:262px;margin:0px;margin-top: 15px' v-for='(item, index) in infoArr' :key='index'> <el-col :span="5" class='w100P h100P t-a_c flex' styl...
2019-08-02 17:53:38
2163
原创 vue绑定class和style
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>class和style属性</title> <script src="js/vue.js"></script> <script> windo...
2019-08-02 17:25:14
354
转载 Vue中监听键盘事件及自定义键盘事件
背景：在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。方案：在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听...
2019-08-02 16:32:44
1790
原创 jQuery-为动态添加的元素绑定事件即事件委托
在使用jquery的方式为元素绑定事件时，我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件。像需要用ajax的方式请求远程数据来动态添加页面元素时，显然以上几种绑定事件的方式是无效的，具体写法如下图。 //1、 $(selector).bind(event,data,function) //2、 $(selector).click(function) $(...
2019-08-02 16:06:27
331
原创 Babel转码器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Babel转码器</title> <script src="lib/01.js"></script></head><body> ...
2019-08-02 16:01:55
154
原创 js的call和apply
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>call和apply</title> <script> //定义一个对象，包含属性和方法 var stu={ name:'tom', age:21,...
2019-08-02 15:56:55
137
原创 js的事件冒泡和事件捕获
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡和事件捕获</title> <script> /** * 事件流：当一个HTML元素产生事件时，该事件会在当前元素与根元素之间按特定的顺序传播，所有经过...
2019-08-02 15:54:32
100
转载 Rem自适应js之精简版flexible.js
转载：http://caibaojian.com/simple-flexible.html之前发了一篇文章：移动端自适应：flexible.js可伸缩布局使用，里面用到了阿里的一个库：lib-flexible.js，里面有一些东西方法和自定义我这里制作的时候是不需要用到的，所以做了一个精简版的，另外还修复了UC浏览器竖屏与横屏转换的BUG。bug的重现，大家可以扫原来的DEMO（不要用微信，...
2019-07-31 13:04:34
257
原创 在vue中使用sass
安装sass的依赖包cnpm install node-sass --save-dev //安装node-sasscnpm install sass-loader --save-dev //安装sass-loadercnpm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样...
2019-07-26 17:05:47
236
原创 在vue项目中快速使用element UI
Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速的搭建网站，提高开发的效率ElementUI PC端MintUI 移动端一、全部引入安装element-uicnpm install element-ui -S 在main.js中引入并使用组件 import ElementUI from 'element-ui' import 'ele...
2019-07-26 16:45:50
548
原创 vue中使用less
a.安装相关模块：less、less-loader cnpm install less less-loader --save-devb.在webpack.config.js中添加loader { test: /\.less$/, //加载less loader: 'less-loader' } c.编写less，必须要指定lang="...
2019-07-26 16:07:31
845
转载 vue.js的 mode:'history' 对IE9的兼容
Vue 兼容 ie9 的全面解决方案1、因为vue-router对于ie9默认是退回到hash模式的,所以在new router的时候,需要设置fallback:false(默认值为true)首先mode:'history'在IE9下是不能使用的，如果是IE9，会变成hash的模式（在2项满足fallback:true条件后）如果使用fallback(跟mode同一级别的属性,该属...
2019-07-25 17:22:49
947
原创 解决vue路由History mode打包代码后，上线服务器后白屏问题及关于每次点击链接都要刷新页面的问题
vue项目打包上线以后出现白屏的情况第一种情况：由于把路由模式mode设置成history了，默认是hash。在项目开始的时候就设置了这个，然后一直没找到问题所在，后面百度了好久才发现是这个问题解决方法：路由里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行。如...
2019-07-25 17:11:44
3521
转载 vue.js打包部署上线
我们使用cnpm run dev运行项目，只是在本地开发环境中进行测试，一旦将项目部署到服务器上就会出现各种问题，如axios请求跨域、css样式失效、图片失效、地址跳转404等一系列问题。。。这里主要简单介绍一下解决方案需求：将项目成功打包部署到linux下，能成功访问到页面。步骤一：把绝对路径改为相对路径,打开config/index.js 会看到一个build属性，这里就我们打包的...
2019-07-25 16:37:27
721
原创 微信小程序canvas层级过高，遮住弹窗解决方法
页面canvas图层遮住弹出框，导致弹出框无法点击且样式存在问题因为canvas组件是由客户端创建的原生组件，原生组件层级是最高的，所以页面中的其他组件无论设置 z-index为多少都无法盖在原生组件上。想试着用cover-view组件，能覆盖canvas，map，video，camera等原生组件。但是也有一定的限制。比如：cover-view中只支持嵌套cover-view、cove...
2019-07-24 16:16:42
20802
6
转载 Axiso解决跨域访问及webpack之proxyTable设置跨域
源码地址：https://github.com/jitwxs/blog_sample这里以访问豆瓣Top250为例，直接访问如下：this.$axios.get("http://api.douban.com/v2/movie/top250").then(res=>{ console.log(res)}).catch(err=>{ console.log(err)})...
2019-07-12 13:23:12
664
1
转载 vue中axios的封装
第一步还是先下载axioscnpm install axios -S第二步建立一个htttp.jsimport axios from 'axios';import { Message } from 'element-ui';axios.defaults.timeout = 5000;axios.defaults.baseURL ='';//http request 拦...
2019-07-12 13:02:04
208
原创 vscode如何用浏览器预览运行html文件及修改默认浏览器
1,打开vscode编辑器，点击编辑器主界面左上侧第五个小图标——‘扩展’按钮；2,进入扩展搜索右拉框，在应用商店搜索框中输入“view in browser”会自动进行搜索3,等待几秒钟时间，扩展就会陆续出现，在view in browser 选项右下角会出现“安装”小按钮；点击安装即可。安装完后会提示重新加载，点击重新加载即可4,点击左侧第一个图标按钮，回到资源管理...
2019-07-11 17:56:01
6180
转载 VSCode代码格式化快捷键及保存时自动格式化
一、实现vs code中代码格式化快捷键：【Shift】+【Alt】+F二、实现保存时自动代码格式化：1）文件 ------.>【首选项】---------->【设置】；2）搜索emmet.include;3）在settings.json下的【工作区设置】中添加以下语句： "editor.formatOnType": true, "editor.formatOnSave...
2019-07-11 17:45:21
2174
原创 将VSCode设置中文语言
1）打开vscode工具；2）使用快捷键组合【Ctrl+Shift+p】，在搜索框中输入“configure display language”，点击确定后；3）修改locale.json文件下的属性“locale”为“zh-CN”;4）重启vscode工具；进入locale.json（配置显示语言），将"locale"设置为"locale":"zh-cn"如果重启后vscode菜...
2019-07-11 17:36:13
328
原创 微信小程序ios倒计时时间不显示，安卓能正常显示，小程序倒计时兼容问题
一般在做砍价、拼团、助力商品时都需要展示倒计时，但是会出现小程序中ios中倒计时不显示，安卓中能正常显示 原因是：IOS不支持2019-07-09,在小程序中ios识别的日期格式为：2019/07/10,因此有时后写倒计时等涉及时间的方法时，会出现安卓可以，ios不可以的问题2019-07-10 10:20:30这种格式，只需要将 - 替换为 / 即可解决：var endTime = "2...
2019-07-11 13:08:10
1850
原创 获取当前时间，指定日期前一天、后一天，前n天日期、指定时间的前、后n分钟的日期
module.exports = { formatTime: formatTime, getNextOrPreDate:getNextOrPreDate, getBeforeDate: getBeforeDate, getNowDate: getNowDate, getBeforeDay: getBeforeDay, getLastDay: getLastDay...
2019-07-10 12:47:55
1124
转载 vue-cli3.0 使用postcss-plugin-px2rem（推荐）和 postcss-pxtorem（postcss-px2rem）自动转换px为rem 的配置方法
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem 。为什么这三个中要推荐 postcss-plugin-px2rem呢？因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性，它可以配置 是否对某个文件夹下的所有css文件不进行从px到rem的转换。所以我们可以利用...
2019-07-06 13:20:23
2347
原创 修改html中input框提示字的字体样式及html 去掉input 获取焦点时的蓝色边框
修改html中input框提示字的字体颜色<style>/*修改提示文字的颜色*/input::-webkit-input-placeholder { /* WebKit browsers */ color: red; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red;} ...
2019-07-06 12:33:58
3133
原创 input设置readyOnly以后还可以获取焦点
可以在input中添加unselectable=“on” οnfοcus="this.blur()"最终为<input type="text" readonly="readonly" unselectable="on" onfocus="this.blur()"/>或者假如input框id为"user_name"$('#user_name').focus(funct...
2019-06-27 14:01:21
1196
原创 js将多个JSON对象合并为一个对象和删除JSON对象中的某个元素
对象合并1.接下来介绍一下ES6在Object新加的方法 assign()1.作用：将多个对象{} 合并成一个独立对象。2.使用方式: Obejct.assign(合并的对象，传入合并中的对象....) let user = {name:'无敌人',age:19}; let page = {pageSize:10,currentPage:1}; let newObj = {};...
2019-06-27 13:52:55
12775
原创 input的type为 number 时去掉上下箭头
input的type为 number 时去掉上下箭头input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none; }input[type="number"]{ -moz-appearance: textfield; }...
2019-06-25 13:07:53
240
转载 在Vue中使用icon 字体图标
1、使用线上的阿里iconfont图标库1.打开 iconFont官网 选择自己喜欢的图标，并且添加购物车2.点击购物车，添加至项目3 生成链接4在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。2、但是考虑网络及用户体验 阿里iconfont下...
2019-06-19 16:20:29
21278
原创 微信小程序 改变radio、switch、滚动条、button默认样式
1.改变radio大小/* 单选钮样式 */radio { transform:scale(0.5);}2、改变switch大小.wx-switch-input{width:42px !important;height:22px !important;}.wx-switch-input::before{width:40px !important;height: 20p...
2019-06-13 12:33:19
812
原创 微信小程序修改switch组件的大小
在使用switch组件时，想修改switch的大小，设置的height，width都没有效果， 查看官方文档，发现没有设置大小的属性官方文档如下：使用下面样式可进行修改.wx-switch-input{width:42px !important;height:22px !important;}.wx-switch-input::before{width:40px !important...
2019-05-11 17:32:03
4510
2
原创 微信小程序滑动删除
效果图wxml<!-- 顶部菜单按钮 --><view class="tui-tabbar-content"> <view class="tui-tab fs15"> <text data-id="0" bindtap="changeTabbar" class="tui-tab-cell {{index == 0 ? 'tui-...
2019-05-09 16:06:29
472
原创 微信小程序JSON.parse上一个页面传过来的对象字符串报错
在上一个页面将下一个页面需要的数据，把传递参数用JSON.stringify()函数转成字符进行传递，在目标页面中用JSON.parse函数接收时报错原因：JSON.parse无法识别某些url或者消息内容中的特殊字符，所以报错错误信息如下：Unexpected end of JSON input;at pages/moment_detail/moment_detail page lif...
2019-05-09 13:05:43
1973
原创 微信小程序日期格式化
module.exports = { formatTime: formatTime}function add0(m) { return m < 10 ? '0' + m : m}function formatTime(shijianchuo) { //shijianchuo是整数，否则要parseInt转换 var time = new Date(shij...
2019-05-05 13:10:41
2567
原创 JSON中id值相同的，值相加组成新的JSON
//原Json var data = [ {"id": "1", "count_value": "2"}, {"id": "1", "count_value": "3"}, {"id": "1", "count_value": "1"}, {"id": "2",...
2019-05-05 12:58:22
1923
原创 微信小程序map突然报错——>ret is not defined
再使用微信小程序地图时，什么代码都没改动，但是突然出现以下错误，全局搜索也没找到ret,后来发现显示地图气泡的数据中，后台返回的数据经纬度写反了，导致这个错误错误信息之前后台返回的经纬度，经纬度取反了改过以后的经纬度正确取值范围：latitude 纬度 number 是 浮点数，范围 -90 ~ 90longitude 经度 number 是 浮点数，范围 -180 ~ 18...
2019-04-30 16:35:39
1845
原创 小程序map中cover-view文本换行
在小程序map中使用cover-view,添加了word-break:break-all等属性以后还是不换行的问题经测试，添加以下样式即可换行.wrap{ word-break: break-all; word-wrap:break-word; white-space:pre-line;}...
2019-04-29 15:47:24
2754
1
原创 微信小程序图片使用filter将彩色图片变成黑白以后，border-radius失效的解决办法
使用css的filter将彩色图片亮度降低之后，设置的border-radius会出现失效不起作用的情况需求：用户在线头像为原始的彩色图片，离线将用户头像改为黑白色原来的写法：<image src="{{item.type=='add' ? 'http://h5.nn.w293.cn/ui/map/addMember.png' : item.iconPath}}" class="h40...
2019-04-29 14:42:08
4870
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人