2021年03月_小李要加油鸭

原创组件的注册传参双向数据绑定

组件根组件：通过new Vue()来创建的，通常应用只有一个可复用组件：通过Vue.component()来创建分为全局组件和局部组件组件的注册vue.componentVue.componrnt(‘组件名称’，{组件选项})组件名称遵循自定义组件命名规范：全小写、连字符组件选项与new Vue选项配置基本一致<div id="app"> <k-div></k-div> </div>//可复用组件的全

2021-03-29 19:23:10 206

原创 watch与computed

computedcomputed是一个计算属性(多个值变化，影响到一个结果) 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。他是函数主要当作属性来使用，逻辑简单。只执行一次就拿出来调用下一次获取computed的值时才会重新计算。<div id="app"> <div> <button :class="{active: gender === ""}" @click="getUsers('')">全部</but

2021-03-26 17:36:21 188

原创 Vue指令

指令表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用{{}}语法，而是需要指令。指令是一些带有v-前缀的属性v-指令名称 = 表达式（不是普通的字符串）v-text...

2021-03-25 20:11:35 128

原创 vue入门基础---组件---render----挂载----数据劫持--视图更新

vue.js是一套用于构建用户界面的渐进式框架vue核心：声明式渲染组件引入直接用script进行引入把vue.js保存到本地进行引入组件在script中创建vue组件el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例template组件的模板结构（HTML），模板内容会被 vue进行渲染，生成最终的html内容，并替换占位（挂载）元素Mustache（双大括号，大胡子）语法

2021-03-24 19:05:31 328

原创路由参数

路由参数history : 历史记录以及路由给我们的一些操作< button onClick = { () => { //history.go(-1) // ****goBack 返回上一步 //goForward 前进一步 // *****push : 修改当前的url //

2021-03-14 22:37:30 135

原创 hook 简单的小案例

React hooks(钩子)React hooks 是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能React Hooks 优势简化组件逻辑复用状态逻辑无需使用类组件编写Hook 使用规则只在 React 函数中调用 HookReact 函数组件中React Hook 中只在最顶层使用 Hook//开通必须是 useSizefunction useSize() { return { w: window.i

2021-03-13 21:27:03 214 1

原创标题函数式组件

函数式组件函数式组件中，没有 state 和生命周期，所以又被称为无状态组件，在早期 react 版本中，被当前纯渲染组件来用//函数式组件/*特别注意：函数组件：1. 组件的第0个参数是props - 接收父级传递过来的信息2. 组件中return （必须写）定义该组件要渲染的内容3. 没有生命周期，没有this，没有state*/在16.7(beta)之前，函数组件一直当作纯渲染组件来使用16.8正式上线function Child(props) { re

2021-03-13 10:04:26 83

原创 children dangerouslySetInnerHTML

children组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容可以自定义结构的组件的常用形式children传递函数传递子组件代码演示import React, { PureComponent, } from 'react';class Popwindows extends PureComponent { state = { close: false //不关 } render() {

2021-03-12 22:03:55 141

原创 PureComponent的详解

PureComponentPureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一直PureComponent缺点可能会因深层的数据不一致而产生错误的否定判断，从而shouldComponentUpdate结果返回false，界面得不到更新。PureComponent优势不需要开发者自己实现shouldComponentUpdate，就可以进行简单的判断来提升性能。代码演示class App extends

2021-03-12 18:46:18 1737

原创生命周期函数详解

React生命周期细constructor(props)类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作初始化 state处理事件绑定函数的 thisrender()render 方法是 Class 组件必须实现的方法static getDerivedStateFromProps(props, state)该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 stateco

2021-03-11 20:07:39 771

原创跨组件通信

跨组件通信 context - 扩展React.createContext(defaultValue); { Consumer, Provider } = createContext(defaultValue)Context.Provider 在父组件调用 Provider 传递数据value 要传递的数据接收数据class.contextType = Context; static contextType = Context;this.context;Context.Consumer

2021-03-09 20:13:41 216

原创 setState异步原理和 react组件通信

setState异步原理state 和 setStatesetState(updater,[callback])updater: 更新数据FUNCTION/OBJECTcallback: 更新成功后的回调FUNCTION异步：react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能浅合并 Objecr.assign()setAge = () => { this.setState({ nub: this.state.nub

2021-03-08 21:46:10 134

原创 React初期的事件

// 类式组件中定义constructor, 一定要接受props，调用super（）----为了继承里面内容为构造函数 // constructor(props) { // super(props); // this.state = { // nub: 0 // } // }// 数字的增加 Fn = () => { // console.log(this);

2021-03-08 10:12:46 126

原创 React的循环数据渲染到页面

Object.values()Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组Object.values()和Object.keys()是相反的操作，把一个对象的值转换为数组循环数据渲染一种export default class friendList

2021-03-07 22:11:05 1123

原创 react 自定义构建初期

npm start启动一个内置的本地 WebServer，根目录映射到 ‘./public’ 目录，默认端口：3000命令输入完毕自动弹出浏览器端口特殊：3000或者3001自定义项目类式组件组件类必须继承 React.Component组件类必须有 render 方法import React,{Component} from 'react';app.jsimport React, { Component } from 'react';/*类名*/class App

2021-03-06 21:37:19 116

原创 React注意事项

// JSX 基于 javaScript 和 xml 的拓展语法// - 它可以作为值使用// - 它并不是字符串// - 他也不是html// - 它可以配合js 表达式一起使用// - 它不可以和js 语句一起使用// - 所有的标签名必须是小写// - 所有的标签必须闭合，哪怕单标签//// - class 要写做className// - style 接受的是一个对象，并不是字符串// - 每次只.

2021-03-02 20:33:27 118 1

LJiaJia595的博客