- 博客(100)
- 收藏
- 关注
RSS订阅原创 React-5.3 Redux -- 使用react-redux
Redux的使用一. connect1.安装2.文件代码示例1). store文件夹：创建空仓库index.js -- 总控仓库reducer.js -- 管理员（如果多则可换成文件夹，最后合并并导出）2). index.js：与视图产生关联3). App.js4). 组件 inner.js（使用connect）二. hooks一. connect1.安装npm i react-redux2.文件代码示例1). store文件夹：创建空仓库index.js – 总控仓库import { cr
2020-08-17 23:48:39
264
原创 React-5.2 Redux -- combineReducers优化合并reducer
combineReducers优化合并reducer原始臃肿写法合并写法1合并写法2，combineReducers 终极简洁版原始臃肿写法当数据过于臃肿时，可以用组件化的方式提出来写，再进行合并原始臃肿写法，数据很多时，写法会非常杂，不建议使用。 X X X例如：index 的数据要管理、message 的数据要管理、list 的数据要管理function reducer(state={ index:{info:"首页的数据"}, list:{info:"列表的数据"},
2020-07-21 11:20:52
391
原创 React-5.1 Redux 之 状态管理库 -- 核心api
redux核心1. 上节课内容总结2. 课程目标3. redux概念4. 课程内容4.1 为什么使用Redux4.2 核心概念(1). state对象* 纯函数(2). action对象(3). Store对象 (负责存储的仓库)4.3 redux 三大原则4.4 redux 基本应用1). 安装2). 引入3). 创建一个仓库，在仓库中对状态进行管理，参数为一个纯函数4). reducer 纯函数方法1. getState 获取状态方法2. dispatch 修改(1). 修改1次后(2). 修改2次
2020-07-21 03:29:16
383
原创 React-4.2 React-router 小案例
react-router路由小案例 -- 点击不同的类型及页码，请求和显示相应内容src1. app.js2. index.js3. index.css4. http.js 请求数据5. router文件夹router.js6. component文件夹6.1 Nav.js 顶部导航6.2 inner.js 列表显示区list.js 中间内容显示区footer.js 底部页码区6.3 page404.jssrc1. app.jsimport React from 'react';import Na
2020-07-20 17:19:02
225
原创 React-4.1 React-router
react-router1. 上节课重点内容1.1 函数式组件1.2 React hooks(钩子)React Hooks 优势Hook 使用规则2. 本节课目标3. 课程内容3.1 路由3.2 SPA3.3 SPA 的页面切换机制前端路由4. React Router4.1 基于 Web 的 React Router4.2 安装4.3 组件(1) BrowserRouter 组件(2) HashRouter 组件(3) Route 组件exact：(4) Link 组件to 属性：4.4 传递 props
2020-07-14 21:31:59
248
原创 React-3.3 自定义hooks 之 自定义滚动条
用自定义hooks写滚动条app.jshooks.jsindex.js图示自定义hooks需要注意的自定义 Hook 是一个函数命名以 “use” 开头，函数内部可以调用其他的 Hook。在当前函数组件的最顶层调用，（只在最顶层使用 Hook）不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。app.jsimport React,{useEffect,useState} from 'react';import {useScrollY}
2020-07-14 00:26:16
1013
原创 React-3.2 函数式组件、todoList（hooks版本）实战
React-3之函数式组件5. 函数式组件6. React hooks6.1 React Hooks 优势6.2 常用 hook6.2.1 useState6.2.2 useEffect6.2.3 useRef6.3 Hook 使用规则7. 练习 实战 - 完整todoList （hooks版本）7.1 文件app.js7.2 文件index.js7.3 文件list.js7.4 文件opt.js下节课内容练习5. 函数式组件函数式组件中，没有 state 和 生命周期，所以又被称为 无状态组件，在早期
2020-07-13 09:27:55
1454
1
原创 React-3.1 类式组件、todoList（类版本）实战
React-31. 上节课重点内容回顾2. 课程目标3. 课程内容3.1 PureComponent3.2 ref3.3 children3.4 dangerouslySetInnerHTML3.5 key 的问题实战 - 完整todoList函数式组件React hooksReact Hooks 优势常用 hookHook 使用规则练习下节课内容练习1. 上节课重点内容回顾组件间的信息传递生命周期受控组件2. 课程目标掌握React其他 API 使用：PureComponent、ref、
2020-07-13 09:25:55
192
原创 React-2 -- setState、组件间通信、组件的生命周期
React-21. 上节课重点内容回顾2. 课程目标3. 课程内容3.1 state 和 setState3.2 组件间通信跨组件通信 context - 扩展3.3 组件的生命周期3.3.1生命周期演变1）之前版本（React 16.3 之前）2）现在使用***挂载阶段**更新阶段**卸载阶段**错误处理*3.4 生命周期函数详解3.5 受控组件3.6 todoList 初实现下节课内容1. 上节课重点内容回顾JSX 注意事项必须有,且只有一个顶层的包含元素 - React.FragmentJ
2020-07-13 09:22:38
289
原创 React-1 -- 初识React
React-1课程内容1. React 是什么？2. 命令式编程 和 声明式编程3. 如何使用 React3.1 基于浏览器的模式3.2 babel3.3 JSX插值表达式各种类型内容在插值中的使用输出数据类型列表渲染条件渲染3.4 在属性上使用 表达式JSX 使用注意事项4. 基于自动化的集成环境模式 - create-react-app - 脚手架4.1 介绍4.2 安装与使用安装npmyarn使用npx4.3 项目目录结构说明4.4 命令脚本npm startnpm run testnpm run b
2020-07-12 20:20:49
201
原创 微信小程序三 之 “小团点评吧“
微信小程序三1.课前准备2.课堂主题2.1 云开发2.2 mpvue构建项目2.3 实现定位及城市选择功能2.4 实现列表及详细页面3.总结1.课前准备工具微信开发者工具微信小程序账号前置知识html、css基础知识js基础知识2.课堂主题小程序云存储小程序云函数mpvue构建项目定位功能实现城市列表选择实现商铺列表实现商铺详细页面上拉加载更多2.1 云开发云存储数据库curd增加 db.collection('news').add(
2020-07-12 19:41:18
829
原创 微信小程序学习之零碎记录＋写项目时的一些小错误~
这里写目录标题1. 框架1.1 全局配置1.2 页面配置2. 组件2.1 视图容器1. 框架1.1 全局配置官方文档 -> 框架 -> 小程序配置 -> 全局配置点编译 => 刷新sitemap 配置小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；sitemap.json 有以下属性微信现已开放小程序内搜索，开发者可以通过
2020-07-12 15:53:24
859
原创 微信小程序二
微信小程序二课前准备课堂主题课堂目标自定义组件小程序中websocket请求《3秒谁准》多人小游戏总结下节预告课前准备工具微信开发者工具微信小程序账号前置知识html、css基础知识js基础知识课堂主题自定义组件小程序中websocket；小程序中授权登录《3秒谁准》多人小游戏案例；课堂目标学会使用自定义组件学会小程序组件间的通信会使用小程序授权登录会使用小程序中的websocket请求自定义组件预定义组件
2020-06-09 20:32:57
142
原创 微信小程序一
微信小程序一1. 课前准备课堂主题2. 课堂目标1.1 什么是小程序？1.2小程序优点1.3 小程序环境1.4 初始化项目1.5 小程序页面1.6 小程序单位1.7 组件1.8 导航栏配置1.9 事件绑定模板引用提高模板复用性；网络请求1.12 新闻列表3. 总结4. 下节预告1. 课前准备工具微信开发者工具微信小程序账号前置知识html、css基础知识js基础知识课堂主题小程序简介小程序环境小程序页面事件系统模板引用网络请求新闻列表案例2. 课堂目标
2020-06-07 20:19:56
273
原创 Git
Git文章目录Git1. 什么是版本控制？2. 什么是 Git？人工版本控制器版本控制工具常见版本控制工具3. 怎么工作的？git 文件生命周期状态区域4. 安装5. 配置-- global检查配置6. 创建仓库 - repository7. 工作流与基本操作8. 查看工作区的文件状态乱码git status 显示乱码终端乱码9. 添加工作区文件到暂存区创建版本提交备注修改默认编辑器单行备注10. 查看提交日志11. 修复提交12. 删除撤销重置从暂存区中撤销到工作区该命令既可以用于回退版本13. 比较1
2020-06-07 20:15:31
202
原创 webpack
webpack1. webpack 是什么？2. 安装3. 使用4. 打包模块4.1 入口文件4.2 打包命令5. 打包配置6. 核心配置6.1 mode6.2 entry6.3 output7. 深入执行简要流程8. Loaders8.1 raw-loader8.2 file-loader8.3 url-loader8.4 css-loader8.5 style-loader8.6 sass-loader9. Plugins9.1 HtmlWebpackPlugin9.2 clean-webpack-pl
2020-05-31 17:58:48
217
原创 webpack 与 模块化
webpack 与 模块化模块化模块化的核心ESM独立模块作用域导出模块内部数据导入外部模块数据模块化的向下兼容CommonJSAMDrequireJS`requireJS` 的 `CommonJS` 风格UMDtsm - typescript module模块化模块化已经是现代前端开发中不可或缺的一部分了把复杂的问题分解成相对独立的模块，这样的设计可以降低程序复杂性，提高代码的重用，也有利于团队协作开发与后期的维护和扩展从 ECMAScript2015 开始引入了模块的概念，我们称为：ECMASc
2020-05-31 17:52:30
153
原创 Vue.js -- vuex
vuex文章目录vuex1、为什么要用 vuex ？2、通信解决方案3、vuex 是什么？4、vuex 的工作流5、安装 vuex6、引入 vuex7、从 Store 开始7-1、创建一个 Store8、核心概念8-1、state8-1-1、state 的创建8-1-2、在组件中使用 store8-1-3、store 配置8-1-4、使用辅助函数 `mapState`8-1-5、使用扩展运算符组合9、getters9-1、getters 函数9-2、通过属性访问9-3、通过方法访问9-4、使用辅助函数 `
2020-05-31 17:46:11
205
原创 Vue.js路由 -- 路由懒加载
vue-router 之 路由懒加载路由懒加载路由懒加载当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了import Vue from 'vue'import Router from 'vue-router'import NProgress from 'nprogress'import 'nprogress/nprogress.css'// import Home f
2020-05-31 17:43:39
195
原创 Vue.js路由 -- 路由元信息
vue-router路由元信息通过 `meta` 定义要验证的路由路由元信息定义路由的时候可以配置 meta 字段通过 meta 定义要验证的路由const router = new Router({ routes: [ { path: '/user', component: User, children: [ { path: '', name: 'user', compone
2020-05-31 17:42:24
154
原创 Vue.js路由 -- 滚动行为
vue-router 之 滚动行为滚动行为后退/前进滚动行为前端路由并没有重载整个浏览器，只是通过 DOM 进行了局部更新。所以，有的时候，浏览器的一个状态会被保持，比如 滚动条，当我们在一个页面中滚动滚动条，然后跳转到另外一个页面，滚动条会保持在上一个页面中，我们其实更希望滚动条能回到页面顶部，就像重载了整个页面一样const router = new VueRouter({ routes: [...], scrollBehavior: () => ({ y: 0 })});后退
2020-05-31 17:41:10
388
原创 Vue.js路由 -- 路由动效
vue-router 之 路由动效路由动效路由动效利用 transition 组件，我们还可以给路由导航加上动效// App.vue<template>...<transition name="fade"> <router-view/></transition>...</template><style>.fade-enter-active { transition: opacity .5s;}.fade
2020-05-31 17:39:08
150
原创 Vue.js路由 -- 路由数据获取
vue-router 之 路由数据获取1. 数据获取1.1 导航完成之后获取1.2 导航完成之前获取1.3 扩展 - nprogress安装1. 数据获取有的时候，进入某个路由以后，我们需要从服务端获取数据，比如 /item/:itemId ，通常，我们有两种方式来实现导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据，在数据获取期间显示加载中之类的 loading 提示导航完成之前获取： 导航完成之前，在路由进入的守卫中获取数据，在数据获取成功以后执行导航。这两种方式都没
2020-05-31 17:35:43
767
原创 Vue.js路由 -- 路由组件传参
vue-router文章目录vue-router路由组件传参案例默认处理对象模式的回调函数模式路由组件传参我们通常把路由直接映射（绑定）的组件称为 路由组件，也只有路由组件才能直接调用路由有关对象：$router、$route当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点案例我们对 item.vue 组件进行改造，当我们在 home.vue 的商品列表上移入移出，出现商品信息提示层[外链图片转存失败,源站可能有防盗链机
2020-05-31 17:32:18
190
原创 Vue.js路由 -- 重定向与别名
vue-router文章目录vue-router重定向案例组件路由配置别名404重定向有的时候，我们会根据某种需求对用户请求的页面进行重新定位案例现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道组件// BookChoose.vue<template> <div> <router-link :to="{name: 'book
2020-05-31 17:30:28
202
原创 Vue.js路由 -- 嵌套路由
vue-router 之 嵌套路由嵌套路由1. 添加路由与子路由children 属性2. 子路由视图嵌套路由一些比较复杂的应用会有多层嵌套的路由和组件组成在应用增加一个用户个人中心，用户中心又是由多个页面组成，如：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ceXcESA-1590917235040)(assets/vue-router-usercenter.png)]1. 添加路由与子路由...import User from './views/User
2020-05-31 17:28:53
171
原创 Vue.js路由 -- 路由守卫
vue-router文章目录vue-router路由守卫组件内守卫beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave路由守卫参数tofromnext路由独享的守卫全局守卫beforeEachbeforeResolveafterEach路由守卫当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫组件内守卫路由独享守卫全局守卫组件内守卫定义在组件内的与路由有关的生命周期函
2020-05-31 17:24:21
260
原创 Vue.js路由 -- queryString
vue-router文章目录vue-routerqueryString$route.query编程式导航路由组件的复用watchqueryString有的时候，我们可能也会用到 queryString<select v-model="sort"> <option value="desc">从高到低</option> <option value="asc">从低到高</option></select>$route.q
2020-05-31 17:19:39
755
原创 Vue.js路由 -- 动态路由
vue-router文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params动态路由有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url/item/1/item/2/item/3...我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理...{ path: '/item/:itemId', nam
2020-05-31 17:15:43
642
原创 Vue.js路由 -- devTools
Vue.js 之 devToolsvue-devTools安装步骤vue-devTools为了更方便的在开发过程中对 Vue 程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试参考：https://github.com/vuejs/vue-devtoolsVue.js-devtools，点击下载安装步骤1、首先进入浏览器设置，点击 扩展程序[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-reAyA
2020-05-31 17:11:27
265
原创 Vue.js路由 -- 异步请求
vue-router 之 异步请求1. 异步请求1.1 axios1.2 请求2. 跨域2.1 vue.config.js2.2 跨域请求代理配置1. 异步请求在实际的应用开发中，与后端交互，进行异步请求是很常见的需求1.1 axiosnpm i axios1.2 请求// home.vue<template> <div class="home"> Home </div></template><script>
2020-05-31 17:08:46
228
原创 Vue.js路由 -- vue-router
vue-router路由1. vue-router 的安装2. Vue.use()3. 创建路由对象4. router-view 组件路由当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由路由：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件1. vue-router 的安装npm i vue-router// ORyarn add vue-router2. Vue.use()通过前面提到的 Vue.use 方法，把 vu
2020-05-31 17:05:25
139
原创 Vue.js -- 动画
Vue.js -- 动画动画1. CSS2. JavaScript3. vue 中的动画处理动画生命周期transition 组件过渡类名动画在 vue 中给组件或元素添加动画的方式可以分为多种，但总体无非还是通过 css 和 JavaScript 来进行处理1. CSS通过 css 添加动画的方式特别的简单，只需要利用 css 中的 transition 就可以做到<!DOCTY...
2020-05-31 16:53:07
184
原创 Vue.js -- 插件
Vue.js -- 插件插件安装插件实例插件插件通常是用来给 vue 提供扩展功能的一种方式给 Vue 添加属性和方法给 Vue 实例 添加属性和方法添加全局资源：指令、过滤器、组件等添加配置选项安装插件通过全局方法 Vue.use() 使用插件。它需要在调用 new Vue() 启动应用之前完成Vue.use(插件);如果插件是一个对象，必须提供 install 方法。...
2020-05-31 16:51:15
201
原创 Vue.js -- 动态组件
Vue.js -- 动态组件动态组件1. component 组件2. keep-alive 组件3. 生命周期activated`deactivated`动态组件有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况1. component 组件component 是 vue 内置的一个组件，它提供...
2020-05-31 16:50:13
189
原创 Vue.js -- 组件生命周期
组件生命周期一、组件生命周期1.创建阶段beforeCreate()created()2.挂载阶段beforeMount()mounted()3.更新阶段beforeUpdate()updated()4.卸载阶段beforeDestroy()destroyed()errorCaptured()二、ref 与 $refsref$refs三、nextTick一、组件生命周期组件生命周期指的是组件从...
2020-05-31 16:48:42
199
原创 Vue.js -- 单文件组件
vue 单文件组件单文件组件1. 组成2. lang 属性3. src 属性4. 有作用域的 CSS混用本地和全局样式5. 资源路径处理绝对路径前缀相对路径前缀特殊前缀单文件组件vue 的单文件组件是官方提供的一种用来组织组件代码的形式，该文件以 .vue 为后缀，该文件会被 vue-cli 内置的 webpack 解析生成对应的 javascript、html、css 文件https://vue-loader-v14.vuejs.org/zh-cn/start/spec.html1. 组成<
2020-05-31 16:47:25
358
原创 Vue.js -- cli
vue-clivue-cli安装创建项目命令行方式创建项目基于浏览器图形界面方式创建项目运行打包项目目录结构文件说明vue-clihttps://cli.vuejs.org/zh/vue-cli 是 vue 提供的一个用于自动化构建和开发项目的工具，也称为：脚手架，它是一系列工具的集合，它主要有：根据配置选项自动构建项目，并安装所需要的依赖启动一个本地开发服务器，通过这个服务器可以基于...
2020-05-27 16:13:38
140
原创 Vue.js -- 组件
Vue.js文章目录Vue.js组件的注册Vue.component()全局组件与局部组件dataprops组件通信$emit()组件双绑的实现v-modelmodel 选项.syncupdate:[prop]插槽具名插槽v-slot作用域插槽props 验证非 prop 特性替换/合并已有的特性禁用特性继承组件的注册在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是...
2020-05-27 16:11:51
127
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人