调试网站 http://babeljs.io/repl/ 扩展阅读: # export.exports.modules.exports 和 require .import 的一些常用方法和套路 http://www.cnblogs.com/CyLee/p/5836069.html # es6学习笔记https://github.com/dragon8github/es6-Study-Notes (数组)扩展运算符使用 // demo 1 var a = (...args) => console.…

起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础. 3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解. 4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止.着…

「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就一直用了. 我最早用的是AngularJs,那时候15年也是刚传到国内,踩了很多坑这方面的坑,各种文档.API 和解决方案都不完善,所以知道从新学一个新的概念框架的难处和雷点,最近Vue发展的很好,也是华人所写,所以普及度很高,文档好,语法简介收获了一大批忠实深度用户,我之前web入坑系列文章也分析…

新手向:Vue 2.0 的建议学习顺序 尤雨溪   1 年前 注:2.0 已经有中文文档 .如果对自己英文有信心,也可以直接阅读英文文档.此指南仅供参考,请根据自身实际情况灵活调整.欢迎转载,请注明出处. 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 No…

以前我们用Jquery进行dom的操作,虽然熟悉后开发效率很高,但是如果多个控件的相互操作多的情况下,还是会乱.相比之下,Vue的使用更加清晰,通过虚拟dom将数据绑定,而且组件化和路由的帮助下,让整个网页符合SPA(Single Page Application)的潮流趋势.如果你懂的Angular.js,那么Vue.js就是囊中之物. <div id="app"> <p>{{ message }}</p> <input v-model=&q…

最近学完React的最基本概念,闲下来的时候就自己写了一个Todo-List的小应用.这里做个简略的说明,给想好好学React的新手看. React-Todo 学习前提 这里我用了webpackb做了babel和JSX预处理和模块打包.所以对React和一些ES2015(ES6)的语法要有一定的了解.我相信学习ES2015绝对是划算的,因为它是Js的规范.这里给出学习的地方,阮一峰老师的ECMAScript 6 入门或者babel的相关文档Learn ES2015. 功能需求 最后的实际效果:…

有时觉得特别的浮躁,可能是每天春运般的挤地铁,随处可见因为一点小磕小蹭吹胡子瞪眼睛的人,可能是身边的人貌似一下子都好有钱,买房买车或者买第N套房. 很想静下来心寻找到自己inner pace,但是忽然发现连给自己放一天假都觉得甚是奢侈,忙来忙去,时间永远不够用,这样的状态非常不好.我想我是真的发自内心的想做好前端的. 跟随以下建议,一步步的让自己变得越来越好. 1.学习es2015,不需要掌握所有的内容,常用的几个异步回调,promise,箭头函数等就ok. 推荐资源:https://leanp…

Vue3.0新特性/改动 新手学习路线  ===> 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法.不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础. 3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解. 4. 阅读官方教程进阶篇的前半部分,到『自…

Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢. Vue基础 对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目.先按文档顺序最少学习完组件那一章.直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构.vue的生命周期很…

视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.setState都会重新初始化getInitialState中的参数 2.createClass的命名必须以大写开头如,var MySelect = React.createClass,这里如果定义为myselect就会出错 3.render方法的第一个参数return,html代码的第一行必须和re…

ECMA6学习笔记 参考资料 ECMAScript6入门:http://es6.ruanyifeng.com/ 官方文档:https://babeljs.io/learn-es2015/ 开发软件:WebStorm 开源地址:https://coding.net/u/chenxygx/p/CodeSave/git/tree/master/ECMAScript2015 npm install Settings - Keymap : Main menu - Code - Reformat Code…

1.三种声明方式 var:它是variable的简写,可以理解成变量的意思. let:它在英文中是“让”的意思,也可以理解为一种声明的意思. const:它在英文中也是常量的意思,在ES6也是用来声明常量的,常量你可以简单理解为不变的量. var a=2; { var a=3; } console.log(a); var a=2; { let a=3; } console.log(a); 2. 变量的解构赋值 简单的理解就是将等号右边数组或者对象 的元素拆开赋值给相应的变量 数组解构 let […

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L…

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言. 学习ES6之前,我们可以先来看一下各大浏览器的最新版本对ES6的支持,点击这里 我们可以使用以下几种环境去学习ES6 使用最新版本的Chrome或者Chromium 来说一下在Ubuntu下,如何升级到最新的Chromium,需要执行如下命令即可. sudo add-apt-reposito…

一. ECMAScript6(es2015)es6语法 es6/es2015,在es5的基础上扩展了很多新的功能,我们要学习仅仅是es6中的部分常用新功能,这些功能在使用的时候一定要慎重,因为他们之中有一部分js代码在部分浏览器是不能兼容,但是所有写在服务器端的代码基本都支持es6的写法. 1.0开启严格模式: 如果需要在函数中开启,在函数的第一行加上这段字符串"use strict",如果需要在js代码中开启,在js第一行加上这个短字符"use strict".…

我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) npm install babel-plugin-transform-React-jsx 官网http://babeljs.io/ 安装ec2015的转化器,因为ec2015语法并不是所有浏览器都兼容 $ npm install --save-dev babel-preset-es2015 1 1 然…

来公司以后就一直在用vue框架,不管是业务代码,还是做vue组件.关于vue有一些点是文档中没有提及的,记录一下以便以后查询- 一.Vue的特点 新一代 Vue.js 框架非常关注如何用极少的外部特性来解决应用程序/视图状态同步问题. Vue.js 大部分是基于vue实例(var vm = new Vue({ ... }))完成的.Vue.js 负责给浏览器 DOM 中绑定数据. 1.特点 -- 这部分借鉴浅谈Vue.js的几个特点 (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5…

reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使用这个种子项目https://github.com/tianxiangbing/react-seed reactjs今年在前端圈里很火,用了三四个月,感觉确实很适合前端开发人员使用,值得深入一下,所以这里记录一下我简单的学习过程,首先是react的环境,由于现在react的新版本已经很稳定了,所以推…

# 1.hello world 学习一个语言,最好的方式,我们需要去官网去查看文档(https://facebook.github.io/react),通过JSFiddle,便可以看到最简单的demo.目前为止最新版本为15.3.0,后续没有特别说明,我们都是基于该版本. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g…

http://segmentfault.com/a/1190000002678515?utm_source=Weibo&utm_medium=shareLink&utm_campaign=socialShare 上次我写<前端工程师必知必会>已经是三年前了,那是我写过最火的文章了.三年了,我仍然会在Twitter上收到关于这篇文章的消息. 从2012年到现在,一篇文章都没发过让我觉得有点羞羞哒.三年是一段很长的时间,很多东西都发生了改变.2012年,我鼓励同学们去学习浏览器开发…

一.认识webpack webpack是一款模块打包加载工具.它能够将各种资源.JS.CSS.图片等作为模块打包加载.本人也是近期因工作需要才开始接触webpack,在下文中有误的地方还希望各位能够指出,本人也会积极改正. 二.安装webpack 这里安装webpack的前提是已经安装的node.js和npm.下面进行webpack的全局安装: $ npm webpack install -g 三.相关配置 每个使用webpack的项目必须有一个webpack.config.js文件.先上代码.…

今天把上一篇还没学习完的 webpack部分学习完: 之前有说过关于css的webpack使用.我们讲了 ExtractTextPlugin 来单独管理css讲了module.loaders下关于 css的写法: module: { loaders: [ // Extract CSS during build { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css'), include: paths } ]},还讲了关于…

文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学react之前先学习下webpack.前端有一系列的构建工具,如grunt.gulp都是,具体区别联系不做详述.Webpack:是一个解决模块的定义.依赖和导出工具,目的就是把有依赖关系的各种文件(HTML,CSS,JS)打包成一系列的静态资源构建成项目.scripts:是将命令替换成另一种写法,在命令比较…

好在之前接触过 flux,对于理解 vuex 还是很有帮助的.react 学到一半,后来因为太忙,就放弃了,现在也差不多都忘记了.不过感觉 vuex 还是跟 flux 还是有点区别的. 对于很多新手来说,只是阅读文档是不好消化,我的建议是看看 vuex 的实例,通过研究实例来学习vuex.这样就会好理解多了.如果还是不能理解,最好办法就是先把store 的四个属性:state, getters, mutations, actions 记下来,然后再分析四个属性的特点,什么地方会用到,是怎样连接在…

深入学习webpack(一) 模块化的相关库和工具已经很多了,包括require.js.sea.js和一些工程化工具webpack.gulp.grant.那么我们该如何选择呢? 其实,我们只需要掌握了其中一种模块化的方案即可,因为这里最重要的是思想,而不是工具.在这些工具之中,webpack无疑是非常火的,并且在现在和未来也将大有可为,所以,这篇文章就好好的说说webpack! 参考文章: webpack官方文档 什么是webpack? webpack是一款打包工具,其中的modules包括cs…

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 30.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "PingFang TC Semibold"; color: #000000 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0…

React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比如Firefox,Chrome,按F12,找到javaScript脚本,打断点,然后调试.这是调试JavaScript的基本环境,但是React由于使用了ES6的语法,在浏览器中经过Babel解析,或者在发布前就将React的代码编译成了ES5规范的JavaScript代码,我们调试时怎么能调试到自…

(参考别人结合自己的整理得出,若有错误请大神指出) Facebook 官方推出Create-React-App脚手架,基本可以零配置搭建基于webpack的React开发环境,内置了热更新等功能. 详细文档可前往链接:Create-React-App文档 本文将介绍使用Create-React-App脚手架搭建antd-mobile的开发环境. 快速开始: npm install -g create-react-app       /* 安装create-react-app,建议使用cnpm *…

我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我整理出的这些文章对于初学者来说是比较有好的,希望通过整理我的学习路线,能给同样作为iOS开发者,想学习React Native的朋友们一些帮助. 既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解释说明. React Native概念介绍…

深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 五:添加插件来替代环境变量 六:添加 UglifyJS来压缩我们js的代码 七:监听文件变化的插件 --- rollup-watch 八:开启本地服务的插件 --- rollup-plugin-serve 九:实时刷新页面 --- rollup-plugin-livereload 十. 安装同时运…