好咖啡要和朋友一起品尝，好“模板”也要和同样喜欢它的人一起分享。 网站首页JS经典实例
js实现文件下载到内存(远程地址下载为file对象)及提取视频第一帧做为视频封面
发布时间：2020-08-08 19:46:35作者：雪饮
有这样一个需求：需要将一个网络地址（该地址可能是.mp4或者.mov或者干脆无后缀，但其内容就是mp4或者mov类型）。对于此种情况需要用html5的video标签去播放。在需求的实现时候发现
详细信息>>jquery frame中创建元素
发布时间：2020-07-04 10:53:00作者：雪饮
jquery frame中创建元素$("frame[name=admin_main]").ready(function(){ var body=$(window.frames["admin_main"].document).find("body"); var fixbar=body.find(".
详细信息>>01-vue基础+项目（18年9月最新)学习笔记
发布时间：2020-06-25 20:28:54作者：雪饮
(3068)父组件向子组件通信(3069)子组件向父组件通信(3070)全局组件与插槽(slot)(3071)父子组件间的属性传递(自定义标签)(属性prop)(3072)多插槽及填充(3073)全局组件的事件
详细信息>>JavaScript使用观察者模式模拟vue双向绑定(简单的vue核心原理)
发布时间：2020-06-25 16:37:54作者：雪饮
本次主要介绍使用原生JavaScript以观察者模式模拟vue双向绑定、模板、指令系统，即vue的核心原理。代码理解起来有一定难度，但只要以观察者模式、双向绑定、模板(正则及文本节
详细信息>>jquery对未来(动态)img的onerror监听无效的解决方案
发布时间：2020-06-15 21:58:06作者：雪饮
对于图片加载失败，例如图片的src为空或者即便不为空，但图片地址不可访问都会触发img的onerror事件，这听起来很不错，可以用此特性解决图片加载失败时的默认破碎图片样式，提高用户
详细信息>>nuxt中的store使用
发布时间：2020-06-14 15:00:49作者：雪饮
Store的使用首先我们在昨天项目中建立store/index.js并给一个值默认为0，然后提供一个对外接口通过该接口能使得该默认为0的值能被修改则如import Vue from 'vue'
import Vuex
SSR服务端渲染
发布时间：2020-06-13 17:16:15作者：雪饮
新手模板初始化vue init nuxt-community/starter-template 01_nuxt_start后面的是项目名可自定义然后一路next即可，最后按照提示进入目录npm install 以及npm run dev当我们n
详细信息>>pwa的https与离线app
发布时间：2020-06-07 10:46:51作者：雪饮
https环境下的pwa前面有讲过pwa只在https环境下和localhost环境下有作用，而localhost上我们已经测试过了。那么要了解https环境下的pwa表现就要先和非https环境做表现，下图是
详细信息>>pwa实现http请求缓存
发布时间：2020-06-06 10:51:23作者：雪饮
本来呢，昨天就想给大家实现这个呢。无奈调试半天，又可能是因为这个pwa战线拉的太长了，自己的时间捉襟见肘，所以人一急起来，各种细节性的问题都难免忽略掉，导致一个细节而一直调试不成功。
调试技巧
首先由于pwa走缓存，这样你的代码是否生效很关键，所以在调试期间有个技巧
第一个就是随机数，这个如果有个几年经验的都不陌生了
vue-pwa实现
发布时间：2020-06-06 00:28:31作者：雪饮
本来上个星期就要弄好的，可能当时脑袋有点混乱，做了大半天没有搞定，临近天黑，周末的时间又结束了，不甘心的放弃了。今天是星期五，今天早上公交车上突然又起执念。Pwa搭建 这家伙
详细信息>>vue服务端渲染-自定义指令
发布时间：2020-05-30 14:59:49作者：雪饮
自定义指令同样的先初始化一个项目vue init webpack-simple 01_directive进入项目目录npm install、npm run dev基础定义与调用在src/main.js中定义如import Vue from 'vue
详细信息>>VueJS-跨域_骨架屏插件、预渲染、多页应用-Vue预渲染(坑）
发布时间：2020-05-25 18:12:27作者：雪饮
老版本解决方案vue create 05_vue_prerender我们自定义Vue CLI v3.6.1┌───────────────────────────┐│ Update available: 4.3.1 │└─
详细信息>>VueJS-跨域_骨架屏插件、预渲染、多页应用-多页应用
发布时间：2020-05-24 18:32:27作者：雪饮
多页应用先初始化一个项目C:\Users\xy>vue init webpack 02_mutipart_page_app多项目准备然后src目录下全部删除并新建project目录并在project目录分别建立goods目录和user
详细信息>>VueJS-跨域_骨架屏插件、预渲染、多页应用-骨架屏应用
发布时间：2020-05-23 17:28:00作者：雪饮
PowerShell下初始化项目之前一直在cmd中初始化项目，这次可以尝试下在powerShell中初始化一个简易模板的项目PowerShell中初始化项目你可能会遇到Windows PowerShell版权所有
详细信息>>mixin插件、history-history
发布时间：2020-05-22 18:22:04作者：雪饮
History所谓的history是route模式的一种，route默认是hash模式，就是地址栏通过#锚链接实现路由的。而history模式则不需要地址栏传递#锚链接。配置起来非常容易，以上次的02_plu
详细信息>>mixin插件、history及骨架屏原理-mixin插件
发布时间：2020-05-21 16:37:59作者：雪饮
安装mixin为了不和之前的项目影响，就单独初始化一个命令如：vue init webpack-simple 01_mixinC:\Users\xy>vue init webpack-simple 01_mixin Command vue init requires a
详细信息>>vue项目第六天vuex的应用
发布时间：2020-05-20 18:03:41作者：雪饮
使用vuex的store实现购物车的数量展示安装vuexnpm i vuex -S部署代码把昨天vuex中的store文件夹整个拷贝到我们之前项目的src目录中然后main.js中引入store// 引入axios
im
vue项目第六天
发布时间：2020-05-19 17:43:34作者：雪饮
组件切换的淡入淡出效果本质：在app.vue主组件中的router-view外层套一个transition组件并提供淡入淡出样式<transition name="fade" mode="out-in"><router-view/></tran
详细信息>>vue或npm下载安装chromedriver失败或太慢
发布时间：2020-05-18 20:35:03作者：雪饮
当你用vue下载chromedriver谷歌驱动时或者npm install时会发现若待安装列表中存在chromedriver，则经常这个chromedriver都是没有下载成功的。解决方案如下：npm install chrom
详细信息>>vue项目第五天购物车、父子传值-02
发布时间：2020-05-15 20:31:01作者：雪饮
商品详情页的评论功能因为之前在图集详情页做过图片评论组件的封装，所以这里只需要调用下即可，这里采用的是跳转一个新页面来调用并且为了区分商品评论和图片评论（我这里后端
详细信息>>vue项目第五天
发布时间：2020-05-11 16:34:15作者：雪饮
子组件接收数据处理展示子组件可以通过接收父组件的属性，并在computed中用新的结果做为return的展示添油加醋。首先初始化一个简易的webpackC:\Users\Administrator\Webstor
详细信息>>vue项目第四天-商品列表、购物车(商品详情及图文介绍)
发布时间：2020-05-09 19:53:35作者：雪饮
商品详情页没有多少出彩的地方，主要是封装了轮播、图文介绍所涉及到的组件跳转及beforeRouteEnter钩子以及合并请求轮播封装则有轮播组件封装为Swipe.vue<template>
<m
vue项目第四天商品列表、购物车
发布时间：2020-05-08 00:14:33作者：雪饮
商品列表界面没有什么特别的，主要就是使用了一个下拉触底的mint-ui的组件商品列表组件GoodsShow.vue如：<template>
<div :style="{ height:wrapperHeight + 'px' }" ref=
vue项目第三天图集预览与评论
发布时间：2020-05-06 20:40:10作者：雪饮
目标1：图集的预览之前在图文分享的详情页中以宫格方式展示了某个图集下面的所有图片，但现在有个需求是点击某个图片后就能全屏预览，这个需求看似很容易直接放大即可，但是这样比
详细信息>>vue项目第三天
发布时间：2020-05-04 23:44:30作者：雪饮
目标1：为axios请求时及请求结束加上loading和关闭loading效果只需要在src/main.js中加入请求及响应拦截器即可//定义axios全局拦截器
//请求拦截器
Axios.interceptors.requ