React实战—学习必经之路-JSX语法(2)

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

React实战—为什么会出现React(0)

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

Vue实战—项目的优化(完结篇)

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

Vue实战—如何实现商品评价栏目(14)

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

Vue实战—实现商品详情页的评价列表(13)

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

Vue实战—实现商品详情页(12)

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

Vue实战—购物车详情页面的实现(11)

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

Vue实战—商品分类菜单数量提示(10)

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

Vue实战—商品控件与购物车联动(9)

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

Vue实战-菜单栏,商品展示数据交互(8)

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

Vue实战-商品展示切图(7)

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

Vue实战—评价组件的设计与实现(6)

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

Vue实战—项目数据交互-axios(4)

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

Vue实战—路由轻松设置vue-router(3)

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

ES6 —项目综合实战(完结篇)

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

Gatsby极速入门—添加上一页下一页功能(完结篇)

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

Gatsby极速入门—添加博客内容页(4)

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

Gatsby极速入门—添加博客文章列表(3)

2019-05-24
阅读 2 分钟
1.9k
1.查数据 {代码...} 如图所示, 2.套页面 打开index.js {代码...} 打开首页,看到文章列表就大功告成了。

ES6—项目小练习-TodoList(15)

2019-05-21
阅读 8 分钟
4.4k
通过搜索引擎,发现很多教程都是直接引入Traceur.js 然后讲解ES6各种功能和语法的,但是好像实际并不是直接引入Traceur.js ,而是用babel。

ES6—面试常见ES6问题集锦(14)

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

ES6-Generator与react状态机(13)

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

Gatsby极速入门—使用GraphQL解析Markdown(2)

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

ES6-Proxy与数据劫持(12)

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

ES6—Async与异步编程(11)

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

ES6-class、模块化在vue中应用(10)

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

ES6—class与模块化(9)

2019-05-12
阅读 4 分钟
5.3k
很多编程语言都有这项功能,比如 Python的import、Ruby的require,甚至就连CSS都有@import,但是JavaScript没有这方面的支持,这增加了开发大型的、复杂的项目时的难度。

ES6—class与面向对象编程(8)

2019-05-10
阅读 5 分钟
6.5k
在ES5中,我们经常使用方法或者对象去模拟类的使用,并基于原型实现继承,虽然可以实现功能,但是代码并不优雅,很多人还是倾向于用 class 来组织代码,很多类库、框架创造了自己的 API 来实现 class 的功能。

Gatsby极速入门—支持Markdown(1)

2019-05-10
阅读 1 分钟
2.4k
1.安装插件 我用Gatsby就是因为它支持Markdown.所以不墨迹,直接整Md支持。 {代码...} 2.添加格式化文章 在src>pages下面,添加三篇文章,头部格式如下: path : "/blog/my-first-post" date : "2019-05-01" title : "Hello world" tags : ['教程','Gatsby'] excerpt : "Gatsby hello word post" 完整代码如图所示:

ES6—数组新方法(7)

2019-05-10
阅读 6 分钟
13.2k
在javascript中,数组是最重要的数据结构,没有之一,因为所有的数据结构都可以使用数组模拟和表达。可以说掌握了数组,就掌握了js与数据操作的大部分核心功能。

ES6—扩展运算符和rest运算符(6)

2019-05-08
阅读 4 分钟
4k
1、扩展运算符简介 扩展运算符( spread )是三个点(...),可以将一个数组转为用逗号分隔的参数序列。 说的通俗易懂点,有点像化骨绵掌,把一个大元素给打散成一个个单独的小元素。 基本用法:拆解字符串与数组 {代码...} 2、扩展运算符应用 2.1 某些场景可以替代apply 在使用Math.max()求数组的最大值时,ES5可以通过...