2020年5月
vue组件中使用watch响应数据
摘要： 在vue中，使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法： 普通用法： <template> //视图 <input v-model="username" v-on="changeVal" placeholder="用户名"><span>dsfsf 阅读全文
posted @ 2020-05-12 14:57 KG-work-space 阅读(960) 评论(0) 推荐(0)
vue组件中使用<transition></transition>标签过渡动画
摘要： 直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> < 阅读全文
posted @ 2020-05-09 14:48 KG-work-space 阅读(10975) 评论(1) 推荐(0)
2020年4月
react-motion 动画案例介绍
摘要： 第一个案例：Motion组件 import React,{Component} from 'react'; import {Motion,spring,presets} from 'react-motion'; import './motion.css'; class ReactMotion ext 阅读全文
posted @ 2020-04-28 11:19 KG-work-space 阅读(1050) 评论(0) 推荐(0)
react react-smooth动画
摘要： 首先自然而然的安装一下依赖： npm install react-smooth --save-dev 接下来就是组件代码啦： import React, { Component, Fragment } from 'react'; import Animate from 'react-smooth'; 阅读全文
posted @ 2020-04-27 16:42 KG-work-space 阅读(239) 评论(0) 推荐(0)
React Transition css动画案例解析
摘要： 实现React Transition Css动画效果 首先在项目工程中引入react-transition-group： npm install react-transition-group --save-dev 然后在组件中引入CSSTransition: //示例也讲解TransitionGro 阅读全文
posted @ 2020-04-26 18:25 KG-work-space 阅读(792) 评论(0) 推荐(0)
react 高阶组件的实现
摘要： 由于强大的mixin功能，在react组件开发过程中存在众多不理于组件维护的因素，所以react社区提出了新的方法来替换mixin,那就是高阶组件； 首先在工程中安装高阶组件所需的依赖： npm install @babel/plugin-proposal-decorators 然后输入命令npm 阅读全文
posted @ 2020-04-20 19:51 KG-work-space 阅读(416) 评论(0) 推荐(0)
react 没有嵌套关系的组件通讯
摘要： 前提准备四个文件，两个子组件：List、List2和一个events.js文件以及一个App.js父组件; 在src目录下创建events.js,里面的内容如下： // events.js（以常用的发布/订阅模式举例,借用Node.js Events模块的浏览器版实现） import { Event 阅读全文
posted @ 2020-04-20 12:12 KG-work-space 阅读(362) 评论(0) 推荐(0)
求一个number数组中的最大值和最小值的差
摘要： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="keywords" content="获取数组中的最大差值" /> <meta name="descrip 阅读全文
posted @ 2020-04-20 10:06 KG-work-space 阅读(422) 评论(0) 推荐(0)
CSS Modules 的六种用法
摘要： 原文地址：http://www.ruanyifeng.com/blog/2016/06/css_modules.html 阅读全文
posted @ 2020-04-17 16:18 KG-work-space 阅读(1123) 评论(0) 推荐(0)
购物车功能(每日一更)
摘要： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="keywords" content="购物车功能" /> <meta name="description" 阅读全文
posted @ 2020-04-17 13:29 KG-work-space 阅读(87) 评论(0) 推荐(0)