JS
Simple-395
简单就好
展开
-
一个简单的Vue页面(单页面应用)
大多人使用webpack, element-ui等等组件打包了一个庞大的项目,但却忘记了Vue原本的样子,其实Vue本来可以很简单。以下就是一个简单的Vue页面。原创 2020-03-31 12:30:53 · 6813 阅读 · 4 评论 -
Vue Ajax配置(基于axios)
如果你需要在特定的响应码下做特殊处理,可以定义自己的拦截器,方法如下:第一步,标记异步请求(很重要!);第二步,配置请求拦截器 ;第三步,配置响应拦截器;原创 2020-03-26 09:19:17 · 464 阅读 · 0 评论 -
Vue自动翻页插件简易教程(vue-infinite-loading)
在上面的脚本中,我们使用了HN Search API和axios来获取新闻数据。如果API返回一个有非空数组,我们把它直接放入list,同时记录当前页码,通过$state.loaded方法告诉插件我们得到了一些数据。如果服务端接口返回了一个空数组,我们通过$state.complete方法告诉插件所有的数据都被加载了。原创 2019-12-17 16:14:38 · 1500 阅读 · 0 评论 -
前端模块化开发规范的终结者Webpack详解(纯干货,不套路)
可谓集CommonJS、AMD、ES6等多种特性于一身,灵活、易用、高扩展性、性能优越。两个核心的配置节:entry、output、plugin。前者指定要打包的文件,后者是打包后文件的输出路径。而plugin不多说,是各种各样的插件了,也是其灵活性特色的一大体现。...原创 2018-12-09 15:06:32 · 377 阅读 · 0 评论 -
IndexedDB初步
IndexedDB是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用,但对于存储更大量的结构化数据来说,这种方法不太有用。IndexedDB提供了一个解决方案。这是MDN IndexedDB的主要着陆页 - 这里,我们提供了完整的API参考和使用指南,浏览器支持细节,以及关键概念的一些解释的链接。原创 2019-07-31 08:55:02 · 321 阅读 · 0 评论 -
前端websocket开发
时至今日,websocket在前端开发中占据着很重要的地位,如极其常用的心跳检测功能。甚至还有大量的站点以其作为主要的数据传输工具以替代Ajax,以下我们来介绍下如何正常地使用websocket进行前端开发。原创 2019-08-19 11:46:02 · 1184 阅读 · 0 评论 -
Yarn常用命令
Yarn也是使用的package.json文件管理依赖包的。In other words,如果你想使用它,完全不需要任何额外的配置信息。是不是很爽??原创 2018-12-08 20:28:24 · 11317 阅读 · 3 评论 -
Vue常见问题汇总(持续更新。。。)
1、属性赋值不生效问题Vue.set(obj, 'title', 'Hello')原创 2019-09-03 17:59:46 · 424 阅读 · 0 评论 -
一步步教你搭建一个完整的前端项目(基于vue 2、vuex、mint-ui 2、webpack 3、axios)
准备工作需要先安装node环境,官方地址:https://nodejs.org开始搭建Windows下不要使用git自带的mintty执行命令,切换选项时会失效的。觉得cmd难看的话用PowerShell会好一些,只是好一些,呵呵。安装vue:npm install vue && npm install --global vue-cli生成项目结构,安装依赖:vue...原创 2019-09-04 11:09:02 · 1060 阅读 · 0 评论 -
一个简单的vue双向绑定功能演示页面(附图)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>测试页</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head>&l...原创 2019-09-04 11:35:30 · 355 阅读 · 0 评论 -
moment使用
1天后的时间moment().add(1, 'days')格式化moment().format('YYYY-MM-DD HH:mm:ss')原创 2019-09-24 20:21:34 · 534 阅读 · 0 评论 -
Vue事件传递问题(stop、self、once)
oncepreventstopcaptureselfpassive原创 2019-09-26 16:04:56 · 642 阅读 · 0 评论 -
Babel初步
ES6代码翻译器,可将浏览器兼容性不好的ES6代码转换为ES5的代码。让您写着舒心,用着放心!!既能享受到ES6的优雅,又能获得良好的浏览器支持。原创 2018-12-09 22:38:23 · 200 阅读 · 0 评论 -
ES6 Promise详解(同步or异步就是这么随意)
待完善原创 2018-12-08 20:27:36 · 1521 阅读 · 0 评论 -
针对ES6各主流浏览器支持情况
BrowserVersionDateChrome58Apr 2017Firefox54Jun 2017Edge14Aug 2016Safari10Sep 2016Opera55Aug 2017原创 2018-12-04 15:17:51 · 23592 阅读 · 0 评论 -
前端开发中那些常用的npm命令(持续更新中)
npm的命令:查看包信息,更换源,指定版本安装,构建,打包,启动等。原创 2018-12-08 23:02:42 · 331 阅读 · 0 评论 -
新一代前端自动化测试工具:cypress
你还在为前端自动化测试苦恼吗,这里为你推荐一款优秀的主流测试工具!原创 2019-05-21 14:59:49 · 8066 阅读 · 1 评论 -
Vue中最为灵活的组件间通信机制(eventBus)
安装与配置,使用方法;监听事件和清除监听。原创 2018-12-10 07:48:38 · 459 阅读 · 0 评论 -
VueJS极简教程之三:组件间通信
以下先列举出来各个方式,后续会逐一补充代码。属性传值最常见的传值方式,可一旦组件嵌套加深,些种方式便显示特别繁琐。适用场景:待完善方法回调安全,数据不易被篡改,但使用越来较为麻烦。适用场景:待完善钩子父组件通过向子组件传入方法钩子,子组件可以直接调用父组件的方法。适用场景:待完善通过refs直接调用在子组件引用时通过ref属性定义一个“对象名”,在需要用过的地方可以直接使用t...原创 2018-11-26 09:20:43 · 200 阅读 · 0 评论 -
前端项目调试模式下在控制台打印代理日志(重定向日志)的方法
背景以下演示在微服务架构下的前后端分离模式,在本地调试时如何启用代理日志:这里插入一个话题:为什么要代理?因为这种模式下存在跨域问题,虽然webpack可以很方便的为我们提供代理支持,但默认情况下并没有启用代理日志。那该如何开启呢?请往下看!示例1、打开并编辑以下文件:/config/index.jsproxyTable: { '/userApi': { target: ...原创 2019-06-09 21:03:15 · 10682 阅读 · 3 评论 -
JS数据操作常用方法汇总(map, reduce, filter)
业内各大主流编程语言皆已支持map、reduce,怎能少得了JS?请看以下示例:数据源users = [ {'id': 1, 'name': 'Sunny', 'age': 20, 'salary': 1000}, {'id': 2, 'name': 'David', 'age': 25, 'salary': 1200}, {'id': 3, 'name': 'Mark...原创 2019-06-29 21:34:18 · 429 阅读 · 1 评论 -
Webpack常用方法及技巧集锦(持续更新中。。。)
Webpack常用方法及技巧集锦(持续更新中。。。)原创 2019-06-29 21:23:01 · 509 阅读 · 0 评论 -
Vue的接口调用是vue-resources还是axios?
1、vue-resources官方已经不推荐使用了,还是用`axios`吧。2、axios是一种Promise实现,这就意味着你可以使用await关键字实现同步调用。原创 2018-12-08 23:00:00 · 1358 阅读 · 1 评论 -
一步步教你搭建一个完整的前端项目(基于vue 2、vuex、element-ui 2、webpack 3、axios)
需要先安装node环境,官方地址:https://nodejs.org;Windows下不要使用git自带的mintty执行命令,切换选项时会失效的。觉得cmd难看的话用PowerShell会好一些,只是好一些,呵呵。原创 2018-12-05 18:14:44 · 1560 阅读 · 0 评论 -
前端模块化开发规范之ES6
直接上代码啦!导入import { getList } from './userService'或者import userService from './userService'导出export default { userService}或者export function getList() {}原创 2018-12-09 14:28:11 · 484 阅读 · 0 评论 -
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题(附图)
背景不多介绍了,直接上代码。打开.eslintrc.js,将rules节点中添加以下配置项。rules: { 'vue/script-indent': ['error', 2, {'baseIndent': 1}]}其中第1个2是指统一缩进2个空格,第2个1是指1倍缩进。...原创 2018-12-08 21:58:26 · 7378 阅读 · 4 评论