Ai.ﻮ-CSDN博客

原创 React框架-高阶组件（HOC）

文章目录一、高阶组件的定义二、高阶组件的作用三、高阶组件的特点四、高阶组件的实现一、高阶组件的定义高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。通俗来讲，高阶组件（也叫高阶函数、容器组件）是一种设计模式、一种开发经验、一种思想。二、高阶组件的作用作用：实现组件业务逻辑的复用比如当多个组件有相同的某些业务功能时，可以对这些重复的业务进行封装。三、高阶组件的特点特

2020-10-17 17:38:35 325

原创 React框架-Context(上下文)

文章目录前言一、Context的作用二、使用Context1、React.createContext2、Context.Provider3、Context.Consumer4、Class.contextType5、Context.displayName6、小结三、Context的应用场景1、主题切换2、获取当前认证的用户3、React-router使用context4、React-redux使用contxt5、跨层级组件传参四、Context的缺点前言在一个典型的 React 应用中，数据是通过 pr

2020-10-17 17:24:34 397

原创 React框架-浅谈Hooks

文章目录一、Hooks简介二、为什么使用Hooks三、使用 State Hook1、useState四、使用 Effect Hook1、useEffect2、useEffect的常见问题2-1 为什么要在 effect 中返回一个函数?2-2 React 何时清除 effect？2-3 effect 中的是否必须要返回?2-4 组件中可以包含多个useEffect一、Hooks简介Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 Re

2020-10-17 16:44:13 438

原创 React框架-生命周期

文章目录前言一、挂载阶段挂载阶段常用的三个生命周期二、更新阶段更新阶段常用的两个生命周期三、卸载阶段卸载阶段常用的一个生命周期四、生命周期图解重要阶段完整阶段前言每个组件都包含“生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。在React中，生命周期有三个阶段1、挂载阶段2、更新阶段3、销毁阶段一、挂载阶段当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：constructor()static getDerivedStateFrom

2020-10-17 15:46:49 525

原创 React框架-JSX语法

文章目录前言一、你如何理解JSX？1、JSX是对象2、JSX是变量3、JSX可以嵌套4、jsx可以防注入攻击二、JSX注释方式1、单行注释2、多行注释前言JSX是一个 JavaScript 的语法扩展，是javascript XML语法糖。官方建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。一、你如何理解JSX？1、JSX是

2020-10-17 14:25:11 322

原创 React框架-浅谈组件

文章目录前言一、类组件二、无状态组件（函数式组件）三、无状态组件与类组件的区别1、类组件state的特点2、无状态组件（函数式组件）Props前言React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。一、类组件import React from "react"import {Child1} from "@/components"export default

2020-10-17 11:41:00 403

原创 webpack入门教程（基础版）

文章目录一、webpack是什么？二、安装webpack1.全局安装2.局部安装三、webpack的四个核心概念1、entry(入口)2、output（出口）3、loader（转换器）4、plugins（插件）四、使用webpack1、安装2、执行打包3、启动本地服务4、启动热更新5、区分开发环境和生产环境6、babel-loader一、webpack是什么？webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，

2020-09-27 19:12:41 485

原创 Node.js浅谈之数据库连接

文章目录一、三种连接数据库服务的方式二、使用 express-generator 搭建工程项目三、mongoose 模块连接数据库一、三种连接数据库服务的方式使用命令行来连接$mongo 在一个数据库服务的下面，可以有多个数据库使用可视化工具，比如robo3T navicat使用编程语言对应的驱动（代码来连接）二、使用 express-generator 搭建工程项目1、express 简介express官网express的优势：让Web开发更简洁，这也是框架存在的意义。学习

2020-09-22 20:45:47 249

原创 Node.js浅谈之MongoDB

文章目录一、MongoDB/Robo3T安装二、MongoDB vs. MySQL 及其概念讲解一、MongoDB/Robo3T安装MongoDB安装MongoDB安装下载.msi文件安装时，取消勾选“MongoDB Compass”，它是MongoDB官方的图形化工具，无须安装。配置环境变量系统设置->环境变量->添加PATH：D:\mongo\bin启动mongodb服务 mongod --dbpath “D:\mongo\data”使用 mongo shell 连接m

2020-09-22 20:27:22 142

原创 Node.js浅谈之概念

文章目录一、Node.js是什么？二、Node.js VS Chrome三、浅谈Node.js四、什么是服务器？五、使用两种方式搭建服务器一、Node.js是什么？Node.js是一个基于Chrome V8引擎的javaScript运行环境，首先对于概念来讲，一定要记住它只是一种运行环境，并不是一种编程语言。下载：在http://nodejs.cn/中文网或者https://nodejs.org/英文网下载并安装安装好之后可以在命令行执行node-v查看node版本执行npm-v查看包管理的版

2020-09-22 20:12:12 98

原创 vue渐进式框架-项目部署及上线

前言注：有很多都是面试题哦！文章目录前言一、vue项目打包上线时一般要做什么？二、但多页面应用程序的原理三、vue.config.js的配置一般都做什么？四、项目部署五、浏览器输入url访问一个地址时发生了什么？一、vue项目打包上线时一般要做什么？在vue.config.js中配置一个publicPath字段，给资源路径加上一个前缀。考虑图片是否需要做优化，要是需要就进行图片的模块化，然后向运维要访问的路径，写到baseURL上。考虑api的baseURL，修改为远程服务器的地址。

2020-09-19 11:07:05 172

原创 vue渐进式框架-路由守卫及图片模块化处理

一、路由守卫是什么？概念：把原来没有条件限制的路由跳转添加上限制条件。//全局的路由守卫router.beforeEach((to,from,next)=>{})//局部的路由守卫beforeRouteEnter(to,from,next){}二、BSR与SSR视图：view + 模型数据ModelBSR：客户端渲染：视图与数据的组装是在客户端完成的。SSR：服务器渲染：视图与数据的组装是在服务器端完成的。BSR的优势和劣势有哪些？前后端分

2020-09-19 10:11:45 400

原创 vue渐进式框架-vuex的写法及跨域处理方法

文章目录一、在组件中使用Vuex的终极写法一、modules三、vue环境下的跨域处理方法四、Sass使用一、在组件中使用Vuex的终极写法被map*系列方法映射进来的，都可以使用this直接访问，使用起来更方便。import { mapState,mapGetters,mapMutations,mapActions } from "vuex"export default{ computed:{ ...mapState("namespaced",["state中的变量"]), ...

2020-09-11 21:46:59 223

原创 vue渐进式框架-vuex及axios的封装

文章目录一、Vuex起步二、状态管理三、devTools的安装四、Vuex的核心概念五、封装axios六、Vuex工作流程总结一、Vuex起步首先我们要知道Vue的三驾马车：Vue本身，Vue Router路由，Vuex状态管理工具。状态指的就是数据。以下是一个表示“单向数据流”理念的简单示意（状态管理：可预测的数据流向）：二、状态管理作用：1、实现组件之间的数据共享 2、用于实现缓存提示：在vue应用程序中，vuex不是必须的，是可选的1、安装cnpm install v

2020-09-10 21:40:08 106

原创 vue渐进式框架-路由详解

文章目录一、嵌套路由二、路由重定向三、路由命名与别名四、动态路由与路由传参五、路由懒加载六、两种路由模式的对比七、vue-router提供的内置Api一、嵌套路由{ path: '/film', component: Film, children: [ // 当前这个规则的路由是 /film/hot // 当url=/film/hot时，路由会在Film组件中寻找一个名字叫default的容器来承载HotFilm {

2020-09-10 11:02:59 245

原创 vue渐进式框架-脚手架安装及路由

Vue脚手架安装以及路由提示：这里写出了详细步骤，一看就会。环境搭建：第1步：安装Node.js 去node.js官网下载windows对应版本，安装即可。验证node.js是否安装成功： node -v npm -v第2步：解决npm安装第三方模块很慢问题，建议使用cnpm淘宝镜像官网地址：https://developer.aliyun.com/mirror/NPM?from=tnpm# 全局安装cnpm这个工具# -g 表示全局安装，一次安装，永久使用n

2020-09-08 20:25:41 296

原创 vue渐进式框架-事件总线及插槽等

文章目录一、事件总线二、混入Mixin三、动态组件四、异步组件五、Ref六、过渡动画七、插槽提示：以下是本篇文章正文内容，下面案例可供参考一、事件总线事件总线，是为了解决兄弟组件之间的通信问题。 var bus = new Vue() // 事件总线 bus.$on() 用于接收信息 bus.$emit() 用于发送信息 // 订阅发布模式二、混入Mixin作用是：实现组件中选项的复用。<body> <div id="app">

2020-09-07 21:23:11 110

原创 vue渐进式框架-自定义button组件

自定义button组件：全局组件：只要编译好，在任意一个vue响应式系统中都会起作用局部组件：只能在当前响应式系统中被使用完成一个小demo，代码如下（示例）：css代码：.btn { line-height: 35px; display: inline-block; padding: 0 20px; border-radius: 5px; font-size: 12px; } .btn.plain {

2020-09-04 21:42:16 855

原创 vue渐进式框架-组件封装及通信

Vue组件：组件是可复用的 Vue 实例，且带有一个名字。自定义组件的名字，一定要用多个单词（避免未来某天和HTML5新增标签冲突），建议用中划线连接起来。1、封装组件有什么好处？复用、便于维护(一处修改多处同步变化)、隐藏细节快速开发，使用第三方开源的组件库快速搭建我们自己的产品2.父子组件通信：自定义属性、自定义事件父组件向子组件传值，使用自定义属性，子组件使用props接收子组件向父组件传值，使用自定义事件，子组件this.$emit('事件名','给父组件的数据')实

2020-09-04 21:19:43 143

原创 Vue自定义指令实现拖拽功能

效果展示：html代码：<div id="app"> <div class="box" v-drag></div></div>css代码：*{ margin: 0; padding: 0;}.box{ width: 200px; height: 200px; background: orange;}Vue代码：<script src=

2020-09-04 19:54:47 473

原创 vue渐进式框架-响应式原理及生命周期

vue响应式原理与生命周期文章目录vue响应式原理与生命周期前言一、vue响应式原理二、生命周期前言提示：读完以下的内容，你将可以回答如下问题：响应式原理：如何修改声明式变量？当声明变量发生变化时，在哪个时间节点去更新DOM？如何理解生命周期？提示：以下是本篇文章正文内容，下面案例可供参考一、vue响应式原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

2020-09-02 22:10:03 475

原创利用VUE制作史上最简单的待办事项表单

项目场景：以下为效果图html代码：提示：其中引入了icon-font：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conten

2020-09-02 09:29:20 586

原创 vue渐进式框架-事件、样式及表单

文章目录前言一、事件详解二、动态样式1.v-bind:class 简写：class2.v-bind:style 简写：style做一个小demo三、表单详解1.表单有哪些?input、textarea、select做一个小demo前言事件修饰符:.stop 阻止冒泡.prevent 阻止HTML标签的默认事件和行为事件修饰符可以链式调用@keyup.ctrl.shift.65=“screenCaptrue”当我们在做VUE开发,凡是涉及到事件的功能,都有非常好的事件修饰符可

2020-09-02 09:19:55 298

原创 vue渐进式框架-安装及指令

vue渐进式框架学习之路-01 两种安装方式：script标签引入、vue-cli脚手架工程化安装。  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  优势：代码体积小，基于虚拟DOM，数据双向绑定，生态圈繁荣。在浏览器控制台，app.msg 进行“双向绑定”调试，

2020-09-01 15:56:48 103

原创 js新入小白的练习题

js新入小白的练习题程序有三大结构： 1. 顺序结构 2. 条件结构 3. 循环结构条件结构-if语句： if（表达式1）{ 语句1 }if（表达式2）{ 语句2 }else if{ 语句3 }练习：请输入一个年份，判断这个年份是平年还是闰年。 var year = prompt("请输入年份");//请用户输入 if (year % 4 == 0 && year % 100 != 0 || year % 400 ==0){

2020-07-11 16:27:36 184

weixin_48852584的博客