前端
关注
分享
扫一扫
承蒙时光不弃1769203735
hello world!
展开
-
使用vue-cli创建项目注意事项，以及Runtime Only和Runtime+Compiler区别
在我们使用vue-cli创建项目的时候，会提示你安装的版本可以看到有两种版本： Runtime Only 版本 和 Runtime+Compiler 版本。1.Runtime Only我们在使用 Runtime Only 版本的 Vue.js 的时候，通常需要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript，因为是在编译阶段做的，所以它只包含运行时的 Vue.js 代码，因此代码体积也会更轻量。 在将 .vue 文件编译成 JavaS.转载 2020-06-13 15:48:41 · 841 阅读 · 0 评论 -
js日期相减函数
话不多说，上代码<!DOCTYPE html><html><head> <title>js日期相减函数</title> <script type="text/javascript"> window.onload=function(){ console.log(DateMinus('2018-8原创 2018-08-11 14:49:38 · 452 阅读 · 0 评论 -
js获取Url中的参数（超级好用）
<!DOCTYPE html><html><head> <title>js获取url中的参数</title> <script type="text/javascript"> window.onload=function(){ console.log(GetQueryString("id&原创 2018-08-11 14:52:12 · 217 阅读 · 0 评论 -
js根据日期获取星期
js中提供了getDay()这样的一个函数，返回值为 0-6 代表星期日、星期一、、、星期六用法：var week=new Date().getDay(); if(week==0){ week="星期日"; } else if(week==1){ week="星期一"; } else if (week == 2) { ...原创 2018-08-24 17:48:22 · 3688 阅读 · 0 评论 -
No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方案
出现该错误是由于存在网站跨域访问的问题。什么是网站跨域，简单来讲，当你通过ajax来请求或发送数据时，两个域名之间不能跨过域名来发送请求或者请求数据，浏览器会认为它是不安全的。解决方式：1、服务器端解决方案设置响应报文头response.setHeader("Access-Control-Allow-Origin", "*"); “Access-Control-Allow-...原创 2018-09-16 14:33:35 · 402 阅读 · 0 评论 -
Web前端性能优化
Web前端性能优化的9大问题1、请减少HTTP请求基本原理：在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览...转载 2018-09-19 11:56:26 · 170 阅读 · 0 评论 -
router-link 地址可以改变，但是router-view不渲染
这个问题困扰了我整整一天，没错，就是一天！苦思冥想，还以为是哪里缺少了包的导入，但是不管怎么调试，router-view就是显示不出来，更可怕的是，浏览器上居然不报错！！！后面终于还是妥协在csdn上找出了错误：export default new Router( { routes: [ { path：'\', component:...原创 2018-10-11 10:25:36 · 3781 阅读 · 4 评论 -
固定定位相对于当前父元素
我们知道，固定定位是相对于屏幕的。但是，怎么才能实现相对于当前父元素呢？那就是不使用top left bottom right。而是使用margin-top margin-left margin-bottom margin-right直接上代码，测试一下，你会恍然大悟！<!DOCTYPE html><html lang="en"><head> ...原创 2018-10-15 12:12:49 · 3101 阅读 · 0 评论 -
vue.js使用vue-preview做移动端缩略图时报错Property or method "$preview" is not defined
报错的详细信息为：Property or method "$preview" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components...原创 2018-10-22 11:46:02 · 3865 阅读 · 4 评论 -
使用vue-cli快速创建vue+webpack项目
1、安装vue脚手架npm install -g vue-cli2、创建一个vue+webpack项目vue init webpack projectname运行这段命令后，会让你输入项目名、作者及其他相关配置信息，可根据实际需要进行选择。也可回车默认。执行完成后，在你执行当前命令的路径中会生成一个以你项目名命名的项目文件夹。3、安装依赖cd projectname ...原创 2018-10-25 10:08:36 · 528 阅读 · 0 评论 -
在网页中引用阿里iconfont字体图标的三种方式
首先，你需要在阿里巴巴图标矢量库中创建账号。创建完成后，选择你想要的图标添加到购物车（也就是添加入库）。添加了之后点击右上角的购物车按钮，弹出如下框，点击“添加至项目”在此你可以选择新建一个项目（项目名任意起），或者添加到你原来创建的项目中。我这里新建了一个名为NewTest的项目，如图所示：准备工作做好了之后，下面我们来具体引用一下这些字体图标。1、Unico...原创 2018-10-28 10:35:47 · 12922 阅读 · 1 评论 -
三种css预处理器的介绍与比较
一、介绍CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。css预处理器种类繁多，三种主流css预处理器是Less、Sass（Scss）及Stylus；它们各自的背景如下:Sass：200...原创 2018-10-28 11:58:46 · 4264 阅读 · 0 评论 -
在README.md中如何加入图片
在本地README.md中，是不支持向word一样直接插入图片的。但是上传到github上，可以实现插入图片。具体操作：直接将上述代码粘贴到你的READM...原创 2018-10-28 14:51:14 · 1447 阅读 · 0 评论 -
在vue项目中如何关闭Eslint校验
在使用vue-cli创建vue项目的时候，有一个选项是问你是否使用Eslint来规范你的代码，我选择了是。项目创建成功后，跑起来没问题。自己再修改了一点点组件，再次跑，一路报错...........别提有多惨了！一直看我的代码感觉就是没有问题，后面再看它报的错误，比如：'vm' is assigned a value but never used (vm被定义了但是从未使用)...原创 2018-10-28 20:23:20 · 8059 阅读 · 1 评论 -
移动端点击事件延迟300ms解决方式
说明：移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。 以下是历史原因，来源一个公司内一个同事的分享： 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑...转载 2018-10-28 20:46:01 · 1001 阅读 · 0 评论 -
vue.js介绍及vue.js优缺点
什么是vue.jsVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue.js 的目标是通过尽可能简单的 API 实...原创 2018-10-25 20:53:18 · 18788 阅读 · 0 评论 -
ES6之模板字符串
1.基本用法传统的JavaScript语言，输出模板通常是这样写的。$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on...原创 2018-10-31 11:42:59 · 241 阅读 · 0 评论 -
Vue中computed与method的区别
1.computed区别于method的两个核心在官方文档中，强调了computed区别于method最重要的两点computed是属性调用，而methods是函数调用 computed带有缓存功能，而methods不是OK，下面我们看一个具体的例子<!--HTML部分--><div id="app"> <h1>{{message}}...原创 2018-10-30 20:39:31 · 198 阅读 · 0 评论 -
vue项目中引入mint-ui的方式（全部引入与按需引入）
一、全部引入1、安装mint-uinpm intall mint-ui --save2、main.js中引入mint-uiimport MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)3、组件调用<mt-button type="danger">退出登录</mt-...原创 2018-11-01 15:15:20 · 8291 阅读 · 2 评论 -
Vue.js报错"TypeError: Cannot read property 'name' of undefined"
出现该错误的原因是因为你花括号中的某些属性未定义。很有可能是因为你写错了属性名称，要么还有一种情况就是：异步请求获取数据时，由于数据时异步获取的，所以一开始是没有该数据属性的，这种情况下也会报这种错误。比如说我这里有一个数据info，初始值为一个空对象。{{info.supports}}是不会报错的，但是，{{info.supports.name}}这样就会报错了。这是为什么呢？因为，...原创 2018-11-01 21:21:41 · 46345 阅读 · 1 评论 -
vue中使用better-scroll实现页面滑动
1、安装better-scrollnpm install--save better-scroll2、在组价中引用import BScroll from 'better-scroll'3、创建滚动new BScroll(Dom元素)这里的Dom元素可以传一个类选择器，比如：new BScroll('.shop-info'，{ click:true,//启用点击，...原创 2018-11-04 15:18:27 · 720 阅读 · 0 评论 -
swiper的介绍以及使用（移动端滑动屏幕切换页面案例）
一、swiper介绍Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现轮播图、触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！二、swiper使用在swiper官网中提供了很多经典案例，这里给大家...原创 2018-11-04 16:04:17 · 5595 阅读 · 0 评论 -
vue中的push和replace跳转路由的区别
1.this.$router.push()描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。2.this.$router.replace()描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。3.this.$router.go(n)相对于当前页面向...转载 2018-11-04 17:18:18 · 6934 阅读 · 0 评论 -
vue路由组件懒加载介绍及使用
一、什么是懒加载在vue中组件懒加载又称为代码分割，也叫延迟加载，即在需要的时候进行加载，随用随载。二、为什么要使用路由组件懒加载像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有...原创 2018-11-04 17:55:30 · 2618 阅读 · 0 评论 -
vue-lazyload实现图片懒加载的方式
1、安装vue-lazyloadnpm install --save vue-lazyload2、在main.js中引入并申明使用（1）引入import VueLazyload from 'vue-lazyload'（2）申明使用Vue.use(VueLazyload,{ loading:'./common/imgs/loading.gif',//设置加载中...原创 2018-11-04 19:40:19 · 301 阅读 · 0 评论 -
vue自定义时间过滤器之使用moment
一、安装moment.jsnpm install --save moment二、自定义过滤器filter.js文件//filter.jsimport Vue from 'vue'import moment from 'moment'Vue.filter('date-format',function(value,formatStr='YYYY-MM-DD HH:mm:ss'...原创 2018-11-04 20:04:26 · 1072 阅读 · 0 评论 -
vue自定义时间过滤器之使用date-fns
date-fns较moment相比，更为轻量化，在实际开发中推荐使用date-fns。下面还是介绍它的使用方式：一、安装moment.jsnpm install --save date-fns二、自定义过滤器filter.js文件//filter.jsimport Vue from 'vue'import format from 'date-fns/format'//...原创 2018-11-04 20:27:12 · 3542 阅读 · 0 评论 -
vue项目打包后打开空白解决办法
网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看一下默认的路径。 module.exports = { bu...转载 2018-11-04 20:58:04 · 4229 阅读 · 0 评论 -
Node.js介绍、优势、用途
一、Node.js介绍Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。Nodejs是基于V8引擎，V8是Google发布的开源JavaScript引擎，本身就是用于Chrome浏览器的js解释部分，但是Ryan Dahl 这哥们，鬼才般...原创 2018-11-07 11:21:50 · 21714 阅读 · 2 评论 -
微信小程序定义双击事件
微信小程序暂不支持绑定双击事件，要想实现双击事件，只能通过我们写代码判断用户点击是否是双击行为，主要的技术点就是：记录下用户两次点击的时间戳，两个时间戳相减如果小于300毫秒，则是双击事件。具体代码如下：.wxml<button data-time="{{lastTapTime}}" data-title="标题" bindtap="doubleClick">双击<...原创 2018-11-15 14:03:10 · 4019 阅读 · 1 评论 -
React框架介绍
Virtual DOM虚拟DOM是React的基石。之所以引入虚拟DOM，一方面是性能的考虑。Web应用和网站不同，一个Web应用 中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。 在React中，应用程序在虚拟DOM上操作，这让React有了优化的机会。简单说， React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异， 然后再决定如何最优地更新DOM。这个过程被...原创 2018-11-14 10:09:16 · 1301 阅读 · 0 评论 -
小程序拖拽排序
效果如图所示下面给大家分享代码：.jsvar app = getApp();var x, y, x1, y1, x2, y2;Page({ data: { all_list: [{ id: 1, text: '推荐' }, { id: 2, text: 'logo设计' }, { id: 3, text: 'ui设计' }, { id: 4, text: 'css...转载 2018-11-14 16:50:36 · 1533 阅读 · 0 评论 -
微信小程序图片缩放、移动
一波干货.wxml<!--scale.wxml--><view class="container"> <view class="tip"> <text>scroll-view子元素缩放</text> <text>说明：双指缩放开发工具上并不支持，需要在真机上进行。 &am原创 2018-11-16 15:36:22 · 1875 阅读 · 1 评论 -
微信小程序生成图片
又是一波干货~.wxml<view class='more' bindtap='saveImageToPhotosAlbum'>保存图片</view> <canvas canvas-id='share' style='width:100vw;height:90vh;' hidden='{{canvasHidden}}'></canvas&...转载 2018-11-16 16:18:38 · 1191 阅读 · 0 评论 -
canvas是个好东西
最近在研究小程序生成图片分享功能，感觉那些能够自动生成图片的小程序特别炫酷，特别牛X。但是当你仔细学习下canvas时，发现也就那么回事~.wxml<canvas canvas-id="shareCanvas" style="width:300px;height:600px"></canvas>.jsPage({ /** * 页面的初始数据...原创 2018-11-16 17:47:55 · 227 阅读 · 0 评论 -
React基础——JSX语法
JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。虽然你可以完全不使用JSX语法，只使用JS语法，但还是推荐使用JSX，可以定义包含属性的树状结构的语法，类似HTML标签...转载 2018-11-21 20:09:02 · 215 阅读 · 0 评论 -
vscode 缩进快捷键 代码对齐快捷键
vscode缩进快捷键： 选中文本； Ctrl + [ 和 Ctrl + ] 实现文本的向左移动或者向右移动； vscode代码对齐快捷键： 选中文本； Shift + Alt + F 实现代码的对齐； 原文链接：h...转载 2018-11-21 20:14:14 · 3800 阅读 · 0 评论 -
数组的map方法
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。注意： map() 不会对空数组进行检测。注意： map() 不会改变原始数组。const arrStr=["张三","李四","王五","赵六"];const result=arrStr.map(item=>{ return item...原创 2018-11-21 21:10:40 · 261 阅读 · 0 评论 -
数组的forEach方法
forEach 方法不直接修改原始数组 const arrStr=["张三","李四","王五","赵六"]; arrStr.forEach(item=>{ item=item+"~~"; console.log(item); }) console.log(..原创 2018-11-21 21:27:20 · 606 阅读 · 0 评论 -
使用canvas画图，图形模糊怎么办
在说解决办法之前，例行惯例，简要的说明一下Html5中的Canvas。Canvas是Html5制图中常用的元素，但其本身并没有绘制能力，它仅仅是图形的容器，要制图还必须依靠脚本。按照Canvas中提供的方法，我们绘制出各种我们想要的图形，本来说这样就已经很棒了，但是有一个致命因素让人很心塞。对美观比较讲究的同学几乎不能忍这个因素，就是绘制的图无比的模糊！！！所以本人在研究过各种办法，也用过国外...转载 2018-11-23 18:11:44 · 2029 阅读 · 1 评论