echarts tooltip 按值的降序显示tip 信息

遇到了一个小改进点。就是echarts 图的tooltip 的内容 ,希望按照每条线当前的值进行降序显示。 查询 echarts 官方文档,https://www.echartsjs.com/option.html#tooltip 修改tooltip 的formatter 属性即可。 下面贴...

2019-02-13 14:43:42

阅读数 23

评论数 0

使用react-transition-group 实现动画

使用CSS3 提供的transition 与 animation 可以实现动画效果,但是在一些复杂效果时,还是需要借助js的,这儿介绍一下react 的动画框架,更方便的写一些动画。 react-transition-group 是react 的一个第三方模块。借助这个模块,可以实现更加复杂的动...

2019-01-31 14:32:25

阅读数 14

评论数 0

React 中实现CSS过渡动画 与 动画效果

我们先在项目的src目录下,新建一个文件App.js ,代码如下。 import React, { Component, Fragment } from 'react' class App extends Component { render() { return ( ...

2019-01-31 11:48:42

阅读数 34

评论数 0

React 中一些性能改进的点

1. 在class 中的constructor 函数中使用bind 绑定组件内函数的作用域,如下。     这样可以保证,整个文件里,该函数的作用域绑定只执行一次。且可以避免子组件的一些无必要的渲染。 constructor(props) { super(props); ...

2019-01-30 15:23:57

阅读数 31

评论数 0

React 生命周期函数使用场景 及ajax请求 前端模拟数据

React 中的生命周期函数是很重要的。 我们在写组件的时候,组件都是继承自React.Component 的,Component内置了其他所有生命周期函数,唯独没有render 函数。因此我们在写组件的时候,一定要定义render 函数。 1. shouldComponentUpdate 函...

2019-01-30 15:23:47

阅读数 16

评论数 0

React 中的生命周期函数

生命周期函数是指在某一时刻组件会自动调用的函数。 比如 render 函数就是一个生命周期函数。当 state 和props 发生改变的时候,就会被重新执行。 constructor 函数,是在组件创建的时候会被调用。按理说也符合生命周期函数的定义,但是它并不是React独有的函数,它是ES6...

2019-01-20 14:17:19

阅读数 29

评论数 0

React 中ref 的使用

ref 作用是在React 直接操作DOM【不推荐】 它的使用方法如下。在TodoList.js 中 然后呢,setState() 是一个异步函数。如果想在它执行完后,再执行操作,可以按下面的写法。 ...

2019-01-20 13:20:35

阅读数 34

评论数 0

React 中的虚拟DOM

React 的重新渲染,性能是很高的。因为它引入了虚拟DOM的概念。 呃,来看一下,render 函数渲染页面的几种做法。 前两步都是拿到state 数据 与 JSX模版。第一种就是比较朴素的方式。第二种方式虽然不用完全替换,但是也需要比对两个DOM。第三种是虚拟DOM方式。 虚拟D...

2019-01-20 12:11:56

阅读数 34

评论数 0

props, state 与render函数

在React 中,当组件的state 或者props 发生改变的时候,render函数就会重新执行。 当父组件的render 函数被运行时,它的子组件的render 函数都将被重新运行。...

2019-01-13 18:50:38

阅读数 26

评论数 0

PropTypes 与 DefaultProps

每个组件都有自己的props 参数。这个参数,是从父组件接收到的一些属性。 本篇主要介绍,接收参数时,如何对参数的类型做校验;如何定义参数的默认值。 接收参数的类型的校验: PropTypes  我们首先要引入 PropTypes,脚手架中自带了 prop-types包。然后使用如下。 ...

2019-01-13 18:41:07

阅读数 45

评论数 0

安装一下React developer tools

应该是要翻墙。 先翻吧,然后打开chrome 中的扩展程序,如下。      然后,点扩展程序,如下,进入网上商店,。      然后找到react  developer tools,添加至Chrome 即可。...

2019-01-13 18:16:10

阅读数 31

评论数 0

React 单向数据流 视图层框架

什么是React 中的单向数据流。 首先父组件向子组件传值,可以通过属性传递。子组件向父组件传值,可以调用父组件传过来的函数。 单向数据流,是指父组件可以向子组件传递数据,但子组件不可以修改这些数据,否则会报错。 React.js 是视图层框架 大型界面开发时,React.js 只负责视图...

2019-01-13 18:00:38

阅读数 34

评论数 0

JSX 一些语法 要注意的

JSX的注释。 首先,JSX 代码,是在render 中 return 里面的,然后,它的注释写法是下面这样的。 render() { return ( <React.Fragment> <...

2019-01-13 17:21:10

阅读数 24

评论数 0

之四 axios

axios 是目前vue 官方推荐的ajax 请求的使用方式。 我们在项目中使用,首先在项目中安装axios 插件。 使用命令 npm install asios --save axios 提供的API 如下      先占坑......

2019-01-06 17:57:35

阅读数 32

评论数 0

之三 命名路由和命名视图

命名路由和命名视图     给路由定义不同的名字,根据名字进行匹配     给不同的router-view 定义名字,通过名字进行对应组件的渲染 我们举例如下。 首先,命名路由。 如下是GoodList.vue <template> &...

2019-01-06 17:10:05

阅读数 38

评论数 0

之三 编程式路由

编程式路由,即通过写js 函数,实现路由的跳转。之前路由跳转是通过router-link实现,本篇,我们通过函数来实现router-link 的跳转功能。 举例。 首先是router/index.js 代码,如下。 import Vue from 'vue' import Router...

2019-01-06 16:49:44

阅读数 31

评论数 0

之三 嵌套路由

嵌套路由,即路由中嵌套路由。 下面的例子,举例商品列表页面中,通过一个路由查看商品的标题,再通过一个路由查看商品的图片。 我们先定义两个组件,Title.vue , Image.vue。 下面是Title.vue  <template> &...

2019-01-06 16:23:53

阅读数 48

评论数 0

之三 Vue-router 前端路由 与 “#”

前端路由,将本来根据地址请求后端返回页面,变为了前端直接重新渲染页面。 优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户 缺点:不利于SEO;使用浏览器的前进、后退键会重新发送请求,没有合理地利用缓存;单页面无法记住之前滚动的位置,无法在前进、后退的时候记住滚动的位置。 vue...

2019-01-06 15:56:27

阅读数 6043

评论数 -1

fixed 不生效 的一种情况

前几天,使用layui 生成一个弹出框,本来它是fixed 的。 像下面这样。 index = layer.open({ type: 1, shade: 0, title...

2018-12-25 10:55:19

阅读数 88

评论数 0

React 工程目录文件介绍

我们可以先创建一个项目。 进入桌面目录下,使用命令 npx create-react-app 项目名 创建完成后,我们打开这个项目目录。 package-lock.json 文件,是项目依赖的安装包的版本号。 然后READEME.md 是项目的描述。可以把它的内容删掉,用markdow...

2018-12-23 16:20:12

阅读数 76

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭