- 博客(98)
- 收藏
- 关注
RSS订阅原创 你了解react吗？
我: 在父子组件中，父组件通过属性把函数传递给子组件，子组件可以通过条用this.props.函数名，来触发父组件的事件，从而实现父组件值的更新，同时在子组件中设置propsTypes和defaultProps分别来限制props的类型和默认值.在子孙组件间进行传值,也是同上（只是进行了Props多层传值而已）。第二种是可以通过Redux进行状态管理，一般用store来存储数据，通过store里面的reducer初始化并定义state修改规则，可以通过dispatch一个action来提交对数据的修改。
2023-05-06 20:35:14
121
原创 基于vue实现人脸识别组件
1.安装依赖npm install tracking2.封装组件<template> <div class="camera_outer"> <!-- 此处代码请勿随意删除: input兼容ios无法调用摄像头的问题 accept属性兼容某些华为手机调用摄像头,打开的是文件管理器的问题 --> <input type="file" id="file" accep
2021-02-25 09:41:35
5361
6
原创 vue进阶—1.vue组件化实践
1.1组件化vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发1.1.1 组件通信的常用方式props父给子传值//childprops:{msg:String}//parent<HelloWorld msg="Welcome to Your Vue.js App">子给父传值//childthis.$emit('add
2021-02-24 18:06:11
252
原创 Vue基础知识—7.可复用性
7.1过滤器过滤器常用在两个地方的后面:双括号插值和v-bind表达式(2.1.0+支持)<!-- 在双花括号中-->{{message|capitalize}}<!--在v-bind中 --><div v-bind:id="rawId|formatId"></div><template> <div id="ReusableComponent"> <!-- 过滤器 --> {{price|c
2021-02-24 10:24:54
171
原创 Vue基础知识—8.工程化
8.1快速原型开发你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发。8.1.1 安装@vue/cli-service-global扩展npm install -g @vue/cli-service-global8.1.2 vue serve启动一个服务并运行原型vue serve Hello.vue8.2创建项目8.2.1 vue createvue create 项目名8.2.2 vue ui图像化管理vue ui8.3
2021-02-24 09:33:03
337
原创 vue基础知识—9.路由
9.1安装vue add router9.2基础9.2.1 起步<nav> <router-link to="/">首页</router-link> <router-link to="/about">管理</router-link></nav><router-view></router-view><template> <div> &
2021-02-23 13:14:01
240
1
原创 vue基本知识—10.统一状态管理Vuex
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以可预测的方式发生改变10.1安装vue add vuex10.2起始State:将应用全局状态定义在state中state{ isLogin:false}Mutation:修改state只能通过mutationmutations:{ login(state){ state.isLogin = true } logou
2021-02-22 11:32:10
249
原创 Vue基本知识—6.过渡&动画
6.1css过度动画vue在插入、更新或者移动DOM时，提供多种不同方式的应用过渡效果。包括以下工具:在css过渡和动画中自动应用class 可以配合使用第三方css动画库，如:Animate.css在过渡钩子函数中使用Javascript直接操作DOM可以配合使用第三方Javascript动画库，如 Velocity.jstransition组件会为嵌套元素自动增加class,可用于做css过渡动画<script>Vue.component('message', { //
2021-02-19 09:45:09
170
原创 Vue基本知识—5.vue必会api盘点
5.1数据相关api5.1.1 Vue.set向响应式对象中添加一个属性，并且确保这个新的属性同样是响应式的，且触发视图更新使用方法:Vue.set(target,propertyName/index,value)<template> <div id="app"> <!-- vue.set --> <p> <input v-model.number="price"/> <button @
2021-02-18 14:22:29
161
原创 vue报错:Type of the default value for ‘courses‘ prop must be a function
在写Vue组件的props,如下写法 props:{ courses:{ type:Array, default:[] } },在vue中，会出现如下错误提示:必须是个函数做如下修改即可:props:{ courses:{ type:Array, default:()=>[] } }...
2021-02-18 11:07:19
534
原创 Vue基本知识-4.组件化
4.1组件基础组件是可复用的vue实例，带有一个名字，我们可以通过在new Vue创建的Vue根实例,把这个组件作为自定义元素来使用4.1.1 组件注册、使用、数据传递Vue.component(name,options)可注册组件Vue.component('course-list',{ data(){ return { selectedCourse:'' } }, props:{ courses:{ type:Array,
2021-02-18 10:45:05
119
原创 vue基本知识—3.生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程，例如:需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时，更新DOM等，这些都称为Vue实例的生命周期。3.1使用生命周期钩子在VUE实例的生命周期过程中会运行一些叫做生命周期的钩子函数，这给用户在不同阶段添加自己代码的机会<template> <div id="app"> <p v-if="courses.length==0">没有任何课程信息</p> <ul>
2021-02-10 14:53:14
137
原创 vue基础知识—2.模板语法
2.1vue模板语法Vue.js使用基于HTML的模板语法，允许开发者声明式地将Dom绑至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能够被遵循的浏览器和HTML解析器解析2.1.1 插值文本数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值<template> <div id="app"> {{title}} </div></template><script>expor
2021-02-10 14:15:02
202
原创 vue基础知识—1.HelloWorld
1.1引入vue安装vuenpm install vue -g下载vue的最新版本npm install -g @vue/cli创建项目vue create study-vuevue2.0和vue3.0的区别1.打包方式：2.0是通过:npm run dev3.0是：npm run serve2.文件夹目录：3.0取消掉了config目录、build目录、static目录 ,还有最重要的一点，3.0的安装项目时自动下载node-model,vue.config.js也没了，需
2021-02-10 11:03:07
160
原创 react基础知识—13.Hook API的useDemo与useCallback
13.1 useDemo把"创建"函数和依赖项数组作为参数传入useDemo,它仅会在某个依赖项改变时才重新计算memoized值。这种优化有助于避免在每次渲染时都进行高开销的计算import React,{useState,useMemo} from "react"export default function UseMemoPage(props){ const [count,setCount] = useState(0); const expensive = useMemo(()=>
2021-02-09 17:18:48
641
1
原创 react基础知识—12.自定义Hook与Hook使用规则
12.1 自定义Hook有时候我们会想在组件之间重用一些状态逻辑,目前有两种主流方案来解决这个问题:高阶组件和render props。自定义Hook可以让你在不增加组件的情况下达到同样的目的。自定义Hook是一个函数，其名称"use"开头，函数内部可以调用其他的Hookimport React,{useState,useEffect,useDemo} from "react"export default function CustomHookPage(props){ const [count
2021-02-09 16:25:28
611
原创 react基础知识-11.Hook
11.1 认识HookHook是一个特殊的函数，它可以让你"钩入"React的特性,例如，useState是允许你在react函数组件中添加state的Hook，如果你在编写函数组件并意识到需要向其添加一些state,以前的做法是必须转化为class,但是现在你可以在现有函数组件中使用Hookimport React,{useState} from "react"export default function HookPage(props){ const [count,setCount] = u
2021-02-09 15:33:16
108
原创 react基础知识-10.PureComponent
10.1 实现性能优化定制shouldComponentUpdate后的Componentimport React,{Component,PureComponent} from "react"export default class PureComponentPage extends PureComponent{ constructor(props){ super(props); this.state = { counter:0, obj:{
2021-02-09 14:44:50
175
原创 react基础知识-9.react-router
8.1 安装npm install react-router-dom -s8.2 基本使用react-router中奉行一切皆组件的思想，以下都是以组件形式存在路由器-Router链接-Link路由-Route独占-Switch重定向-Redirectimport React,{Component} from "react"import {BrowserRouter as Router,Route,Link} from "react-router-dom"export defau
2021-02-09 13:59:08
128
原创 react基础知识—8.react-redux
8.1 安装react-reduxnpm install react-redux -s8.2 使用react-reduxreact-redux提供了两个apiProvider为后代组件提供storeconnect为组件提供数据和变更方法import React,{Component} from "react"import {connect} from "react-redux"const mapStateToProps = state =>{ return { num:
2021-02-09 13:08:14
122
原创 react基础知识-7.redux
redux是负责组织state的工具,使用的时候,需要Redux的好处和坏处,酌情使用。一般在下面场景中，会引入redux有相当大量的、随时间变化的数据你的state需要有一个单一可靠数据来源你觉得把所有的state都放在最顶层组件中无法满足需求某个组件的状态需要共享7.1reduxredux是Javascript应用的状态管理容器，提供可预测化的状态管理，他保证了程序行为的一致性且易用测试。7.2 安装reduxnpm install redux -s7.3 redux上手如果要
2021-02-09 10:40:51
124
原创 利用git上传本地代码到码云
前提需安装git客户端，以下全用git命令执行。1、git配置git config --global user.name "用户名"git config --global user.email "邮箱"此处的用户名为你的码云的用户名，邮箱为你绑定的邮箱2、生成公钥私钥ssh-keygen -t rsa -C "邮箱" #一路Enter下去，将生成的公钥填在码云上cat C:/Users/Administrator/.ssh/id_rsa.pub注意：如果公钥私钥已生成，不用重复执行ssh
2021-02-08 16:28:23
130
原创 react基础知识-6.组件复合
复合组件给你足够的敏捷去自定义组件的外观和行为,这种方式更明确和安全。如果组件中有公用的非ui逻辑,将他们抽取为js模块导入而不是继承它们6.1不具名组件import React,{Component} from "react";export default class BottomBar extends Component{ render(){ return( <div className = "bottomBar"> <h3>Bot
2021-02-08 16:21:15
175
原创 vscode中文显示
1.点击扩展，或者是ctrl+shift+x2.输入Chinese3.点击install4.Ctrl+shift+P,弹出命令行，选择"Configure Display Language"，在弹出框中选择zh_cn,重启完成，即为中文
2021-02-08 15:37:55
187
原创 react基础知识-5.生命周期
5.1生命周期方法生命周期方法，用于在组件不同阶段执行自定义功能。在组件被创建并插入到DOM时(挂载中阶段)组件更新时，组件取消挂载或从DOM中删除时，都可以使用的生命周期方法ReactV16.3之前的生命周期ReactV16.4之后的生命周期v17可能会废弃的三个生命周期函数用getDerivedStateFormProps替代，目前使用的话加上UNSAFE_:componentWillMountcomponentWillReceivePropscomponentWillUpdate
2021-02-08 10:07:45
109
原创 react基础知识-4.如何正确使用setState
4.1setState(partialState,callback)parrialState：object|function 用于产生与当前state合并的子集callback:fucntion state更新之后被调用4.2 对setState()的了解直接修改state，不会重新渲染组件,而是应该使用setState()//错误写法this.state.comment = 'Hello'//正确使用this.setState({ comment:'Hello'});sta
2021-02-05 13:07:57
293
1
原创 react基础知识—3.组件
组件,从概念上类似javaScript函数，它可以接受任何形式的入参(props),并返回用于描述页面展示内容的React元素,组件有两种形式:class组件和function组件3.1class组件class组件通常拥有状态和生命周期，继承于Component,实现render方法，用class创建一个Clockimport React,{Component} from "react"export default class ClassComponent extends React.Compon
2021-02-04 17:36:53
95
原创 react基础知识-2.jsx
jsx是一种javascript的语法扩展，其语言比较像模板语言,但实际上完全是javaScript内部实现的,jsx可以很好的描述UI,能够有效地提高开发效率2.1基本使用表达式:{}//index.jsimport React from 'react';import ReactDOM from 'react-dom';//基本使用const name = "react"const jsx = <div>hello,{name}</div>ReactDOM.re
2021-02-04 17:34:30
104
原创 react全讲解
1.1起步创建项目:npx create-react-app my-app打开项目: cd my-app启动项目:npm start暴露配置项:npm run eject1.2文件结构其中:README.md–文档public–存放静态资源src–源码App.js–根组件index.css–全局样式index.js–入口文件package.json–npm 依赖config里面的webpack.config.js,可以看出能够支持ts、sass及css模块化 entry:
2021-02-04 17:30:35
7386
2
原创 Request Header is too large问题解决
出现这个原因是post请求时，tomcat限制了post请求参数的大小，只需要在server.xml中找到Connector 节点并用以下代码覆盖IDEA集成tomcat之后，也会出现此问题，解决办法同样找server.xml添加上述代码，server.xml位置如下图1.找到自己Tomcat所在目录。点击运行按钮旁边的tomcat，进入Edit Cofigurations，红色框就是tomcat所在位置。2.server.xml文件就位于config目录下修改 Connector节点即可。
2021-02-03 10:50:45
3295
原创 基于vue实现电子签名组件
1.安装依赖npm intsall vue-esign -s2.在main.js中引入组件import vueEsign from 'vue-esign'3.封装组件<!-- * @Author: * @Date: 2021-02-02 * @LastEditTime: 2021-02-02 * @LastEditors: Please set LastEditors * @Description: 电子签名 * @FilePath: --><templa
2021-02-02 11:31:51
1034
1
原创 react—1.react相关知识点
1.react前期准备创建react项目npx create-react-app react-democd react-demonpm start环境介绍node_modules:非常大public:入口文件src:源码文件2.react-jsx语法jsx语法:javascript+xml语法(html)解读jsx语法:遇到<>,按照HTML语法解析,遇到{},按照Javascript解析import React from 'react';import ReactD
2021-01-30 13:50:26
162
原创 TypeScript—4.对象理解导读
4.1对象概述 TypeScript中的对象，是对生活中具体事物的抽象,使得我们可以通过代码来描述具体的事情。Ts中的对象也是由特征和行为组成,他们有各自的专业的名称,属性(特征)和方法(行为)理解TS中的对象:一组相关的属性和方法的集合，并且是无序的。4.2创建对象 对象的语法let person = {}此处的{}(花括号、大括号)来表示对象。而对象中没有属性和方法时，称为空对象。对象的属性和方法，采用键值对的形式,键、值之间使用冒号(:)来配对。键(key)->
2021-01-30 13:34:35
1030
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人