一.为什么学typescriptvar三大框架都是用ts写的，做个类比，如果你不知道阿拉伯数字和加减法，怎么解应用题？同理不会ts如何使用vue开发工作项目？二.开发环境准备1.安装node,[链接],下载安装，一路默认下一步 ，输入node -v显示版本成功2.安装ts,npm install -g typescript,输入tsc -v显示版本 说明成功3.安装vscode [...

导读： 这篇文章成文于 2017.03.13 13:33:40，当时的情形是，感觉老东家（业界最好的培训机构，离开的时候公司风头正劲）会出问题，所以离开了之前培训机构，然后自己创立了一家新公司，运行大概半年左右，然后老东家果然出现了很严重的危机资不抵债，而这个时候，而我新创立的公司也已经走上正轨，产品很成熟，能够很稳...

React必修技能JSX 本篇我们来了解React的JSX语法，在此之前，我们先安装React。 这里需要注意两点： 1.第一点记得安装node,地址：[链接] 使用lts版本。 2.安装脚手架，地址：[链接]。 步骤 1.安装脚手架 {代码...} 2.构建项目 {代码...} 3.启动项目 输入 {代码...} 看到界面，建立样板项目完成。 注意 1.npm 有时候慢，...

为什么需要组件化？ 1.web的发展因为HTML CSS Javascript分工造成了协作，所以需要标准和接口，所以需要组件化。 2.追求效率，重复使用。 怎么实现复用？ 我们总不能把同事的代码拷贝过来，拷贝css，拷贝js，最后改里面文字。这样也忒费劲了，而且不可持续化。接下来我们就说下怎么组件化。我们先不用react。先说原生。 ...

最开的网页只有文字，也就html部分，随着互联网发展，网页内容的丰富多彩，网页不仅仅限于浏览，而是需要互动。为解决这个问题，先后出现了js和css。

我们从零开始用vue搭建了外卖项目，对vue也有了更进一步的了解，我们从点菜，评价，商家三个模块逐步实现，我们来回顾一下以往模块： 模块回顾 点菜模块： 评价模块: 商家模块： 模块优化 我们现在需要更进一步完善我们的项目，现在有一个这样的需求： 当我们在点菜栏目下选择了对应产品，然后又浏览其他项目，此时如果...

这篇我们来实现商家页面 搭建文件结构 现在我们需要来搭建项目的html模板： {代码...} 我们通过vue的特殊特性ref引用了DOM元素seller类。以便我们用BScroll。 address-wrapper类用来存放商家地址，与电话图标。 pics-list类用来配置商家的照片。 safety-wrapper类来配置食品安全档案。 delivery-wrapper类配置配送服务。...

我们先来设置一个ratings容器，还是熟悉的老情况，ratings-wrapper的高度可能会超过ratings，这时候我们肯定会让ratings内出现滚动条的，ref也是老朋友了，配合Bscroll实现ratings-wrapper的滚动。

上篇我们实现商品的详情页，本篇我们来实现商品详情页的评价列表。 必要的数据 这里咱们举一个数据的例子，明明白白地了解这些数据是如何绑定到模板中的。 数据来自于Foods父组件，当我们选中商品，跳转到商品详情页，那么就需要依赖父组件中的商品数据，在商品详情页面展示评论，当然也可能没有如下“rating”数据。那我...

这篇我们来实现商品详情页面： 在首页点击某一商品会展示商品的详细信息。如下图所示： 创建good组件 创建一个组件 good transition 来定义页面展示的形式； 使用v-show与变量showFlag来控制显示与隐藏，ref配合BScroll控制页面的滑动； 现在结构内出现的数据的引用我们在script内进行处理。 <template> <trans...

上次我们为商品分类菜单添加了显示购物数量，这篇我们继续推进项目，来实现购物车的详情页面，在开始之前我们先看它在页面中的样子： 如上所示，此页面包含了购物列表，而它由商品名称，单价，增减商品功能构成，增减商品功能我们在商品列表中实现过，那么我们现在可以进行复用。 搭出购物车结构 我们将购物车底部构建出...

如上所示，这篇我们将商品分类菜单显示数量的提示完善，是软件更加易于使用。 好先让我回顾一下上节课的内容，Goods组件，数量提示功能最终需要在Goods组件内显示。 {代码...} 注意methods方法中的calculateCount函数实现计算个数，数量来自于增减组件内Cartcontrol。 {代码...} 以上是spus数据 Cartcontrol组件控制商品...

本篇我们将构建商品控件与购物车联动。 商品控件 商品控件的结构编写 在商品组件的<template>标签内完成项目结构，以及数据，事件的绑定，与判断逻辑的书写。 {代码...} Shopcart组件是Goods组件的子组件，在Shopcart组件初始化的时候我们可以传入给其参数poiInfo selectFoods. 请求数据，声明方法与计算属性 {代...

上篇我们将菜单栏，商品展示结构完成，本次我们为这两个部分接入数据。 菜单栏接入数据 导入组件，定义需要的数据格式 {代码...} 通过created钩子发起请求获取数据 之前我们说过在created钩子，mounted钩子内可以发起请求，请求需要的数据。本次我们在created钩子内发起get请求，获取数据 {代码...} 注意$nextTick()用法...

上次我们通过设计评价组件这个过程，了解到了组件设计中的良好的习惯，比如，文件夹如何支撑组件，图片，组件路径的存放于设置。 本篇我们将继续推进外卖项目—商品页的展示。 如图所示，我们可以把商品也面分为两大部分： 左侧“菜单栏”； 右侧商品展示； goods为当前商品页面的根元素。 {代码...} 细化左侧菜单栏 我们先...

在上篇文章我们将项目头部模块进行了编写与数据渲染。 本篇文章我们进一步深入项目设计评价组件。 分析页面 如图所示，点菜，评价，商家，为导航，我们点击评价的时候，直接跳转评价页面。 评价页面由商家评分一栏，评论列表构成，评论列表支持：全部，有图，点评三种筛选。 综上我们现在开始设计评论组件： 建立组件文...

通过上篇我们了解到了vue可以通过axios发送前端请求。 我们知道的在发送请求可以在creted（）钩子内，也可以在mounted（）钩子内。 本篇我们通过头部模块的编写，将请求到的数据渲染到模块内。 当然我们先要准备静态页面： 01.分析制作静态页面 如图所示，我们可以将整个一个头部模块分为4个部分： · 顶部通栏：返回，搜...

1.axios地址 [链接] 2.安装 {代码...} 3.使用 1.用在哪？ {代码...} 2.什么时候用？ {代码...} 3.怎么用 数据从哪里来： 1.美团API接口 ， {代码...} 2.自己搭建线上服务器数据 {代码...} 3.搭建本地模拟数据 {代码...} 结论：为了工作使用1，为了灵活性使用3，自己有现成的服务器或空间，从2、3中选的话，选择2 我们使...

上篇我们说了vue项目的目录设计，本篇我们来学习一下vue路由。 路由的作用： 在web端路由（route）就是URL到函数的映射，vue的router就像一个容器，分配，处理每一个route到URL中。 文档地址： {代码...} 安装： 通过node.js安装；npm install vue-router 但是一般情况下在node中安装vue项目的时候根据提示选择安装vue-r...

上一篇通过TodoList的练习，目的是为了让大家理解ES6中各种新特性的实际用途。 最好的学习方法就是实践，所以这节课结合实际项目，来更好的理解和掌握ES6的用途和使用场景，达到灵活运用的目的。 1、模块化 以项目中普遍会有的config.js文件为例，实现export导出： {代码...} 再在其他文件中通过import实现导入： {代码....

1.调整gatsby-node 这个就简单了,打开gatsby-node.js，增加代码如下： {代码...} 2.调整blogPost.js {代码...} 打开首页，点击页面跳转到对应的页面大功告成。 总结 到此，通过gatsby就快速的搭建了一个博客网站，我们只需书写markdown文件就能生成对应的网页了。至于网页美化，那是切图的事儿，我就不在这里墨迹了。 当...

1.查数据 注意，这里跟前面不一样了，我用gatsby-node.js这个文件去提供数据，没有什么为什么，规定，照做就好。 {代码...} 很清晰明显，这里就说一点我传递了一个参数，pathSlug到内容页。 2.创建内容页模板 在src>templates下创建blogPost.js {代码...} 这里只要对应的路径的那个文章查询 {代码...}

1.查数据 {代码...} 如图所示， 2.套页面 打开index.js {代码...} 打开首页，看到文章列表就大功告成了。

通过搜索引擎，发现很多教程都是直接引入Traceur.js 然后讲解ES6各种功能和语法的，但是好像实际并不是直接引入Traceur.js ，而是用babel。

通过对ES6系列文章的学习，相信大家对ES6已结有一定程度的了解。 所以本节的目的在于通过测试，便于让大家了解在学习中的知识掌握情况，查缺补漏，一步一个脚印。 1、选择题 1.1 下面不属于关键字let的特点的是：（ ） A、只在 let 命令所在的代码块内有效 B、会产生变量提升现象 C、同一个作用域，不能重复声明同一个变...

大家在写App和一些单页面程序的时候，经常会遇到这样的情况：当点击左边的箭头的时候，会出现灰黑色的抽屉效果，再点击一下向左的箭头，就会收起来，当然向右滑动和向左滑动也能实现抽屉效果的开关。还有，当抽屉效果开着的时候，点击右侧区域也会自动收起抽屉。点击左侧抽屉里面的图标，那么也会发生抽屉效果的开关。

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

随着前端界的空前繁荣，各种框架横空出世，包括各类mvvm框架百家争鸣，比如Anglar、Vue、React等等，它们最大的优点就是可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是脏检查或数据劫持。我们先以Vue框架出发，探索其中数据劫持的奥秘。

坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

我们在之前文章《ES6 class与面向对象编程》中，说到了目前大部分框架和库，都采用了面向对象方式编程。那么具体是怎么样应用的呢？面向对象编程，最典型和最基础的作用就是封装，封装的好处就是代码的能够复用，模块化，进行项目和文件的组织。