+
+

+      <br/>
+      <select value={this.state.city}  onChange={this.handleClick} name = 'city'>
+      <option value="bj">北京</option>
+        <option value="sh">上海</option>
+        <option value="gz">广州</option>
+      </select>
+      <input type='checkbox' name='isChecked' checked = {this.state.isChecked} onChange={this.handleClick}/>
+
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<AppInput />,document.getElementById('root'))
+```
+### 高阶函数
+如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数.
+1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数
+2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数
+函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式.
+## 非受控组件
+借助于ref,使用原生DOM方式来获取表单元素值
+ref作用:获取DOM或组件
+```html
+class APPRef extends React.Component{
+  constructor(){
+    super()
+    // 创建ref对象
+    this.txtRef = React.createRef()
+  }
+  getTxt=()=>{
+    console.log('文本框值为',this.txtRef.current.value)
+  }
+  render(){
+    return(
+      <div>
+        <input type="text"ref = {this.txtRef}/>
+        <button onClick= {this.getTxt}>获取文本信息</button>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<APPRef />,document.getElementById('root'))
+```
diff --git a/react/4.评论列表案例.md b/react/4.评论列表案例.md
new file mode 100644
index 0000000..c621da7
--- /dev/null
+++ b/react/4.评论列表案例.md
@@ -0,0 +1,99 @@
+```html
+import React from "react";
+
+class CommentList extends React.Component {
+    state = {
+        comments: [
+            // { id: 1, name: 'shi', content: '沙发' },
+            // { id: 2, name: 'xiao', content: '板凳' },
+            // { id: 3, name: 'hua', content: '地板' }
+        ],
+        userName:'',
+        userContext:''
+    }
+    renderList() {
+        const {comments}= this.state
+        if (comments.length === 0) {
+            return (<div className="no-Comment">暂无评论</div>)
+        }
+        return (<ul>
+            {
+                comments.map(item => (
+                    <li key={item.id}>
+                        <h4>评论人:{item.name}</h4>
+                        <p>评论:{item.content}</p>
+                    </li>
+                ))
+            }
+        </ul>)
+        // return this.state.comments.length === 0 ? (<div className="no-Comment">暂无评论</div>) :
+        //     (<ul>
+        //         {
+        //             this.state.comments.map(item => (
+        //                 <li key={item.id}>
+        //                     <h4>评论人:{item.name}</h4>
+        //                     <p>评论:{item.content}</p>
+        //                 </li>
+        //             ))
+        //         }
+        //     </ul>)
+
+    }
+    handleForm=(e)=>{
+        const {name,value}= e.target
+        this.setState({
+            [name]:value
+        })
+    }
+    addComment=()=>{
+        const {comments,userName,userContext}= this.state
+        // 非空校验
+        if(userName.trim()===""||userContext.trim()===""){
+            alert('请输入评论内容')
+            return
+        }
+        const newComments = [{
+            id:Math.random(),
+            name:userName,
+            content:userContext
+        },...comments]
+        this.setState({
+            comments:newComments,
+            // 清空文本空
+            userContext:'',
+            userName:''
+        })
+
+
+    }
+
+    render() {
+        const {userName,userContext}= this.state
+        return (
+            <div className="app">
+                <div>
+                    <input className="user" type="text" name="userName" value={userName} placeholder="请输入评论人" onChange={this.handleForm} />
+                    <br />
+                    <textarea className="content" cols="30" rows="10" name="userContext" value={this.state.userContext}  placeholder="请输入评论内容" onChange={this.handleForm}  />
+                    <br />
+                    <button onClick={this.addComment}>发表评论内容</button>
+                </div>
+                {/* {this.state.comments.length === 0 ? (<div className="no-Comment">暂无评论</div>) :
+                    (<ul>
+                        {
+                            this.state.comments.map(item => (
+                                <li key={item.id}>
+                                    <h4>评论人:{item.name}</h4>
+                                    <p>评论:{item.content}</p>
+                                </li>
+                            ))
+                        }
+                    </ul>)
+                } */}
+                {this.renderList()}
+            </div>
+        )
+    }
+}
+export default CommentList
+```
\ No newline at end of file
diff --git a/react/5.组件进阶.md b/react/5.组件进阶.md
new file mode 100644
index 0000000..5616002
--- /dev/null
+++ b/react/5.组件进阶.md
@@ -0,0 +1,294 @@
+# 组件通讯
+多组件之间共享通讯
+## props接收传递给组件的数据
+传递数据:给组件标签添加属性
+函数组件 props
+```html
+const HelloProps = (props)=>{
+  console.log(props)
+  return (
+    <div>props:{props.name}</div>
+  )
+}
+
+ReactDOM.render(<HelloProps name= "hua"/>,document.getElementById('root'))
+```
+类组件 this.props
+```html
+class HelloProps extends React.Component{
+  render(){
+    return (<div>props:{this.props.name},{this.props.role}</div>)
+  }
+}
+ReactDOM.render(<HelloProps name= "hua" role="shi"/>,document.getElementById('root'))
+
+```
+## 组件特点
+1. 可以是任意值
+```html
+class HelloProps extends React.Component{
+  render(){
+    console.log(this.props)
+    return (<div>props:{this.props.name},{this.props.role} {this.props.tag}</div>)
+  }
+}
+ReactDOM.render(<HelloProps name= "hua" role="shi" age = {19} 
+  colors = {['red','green','blue']}
+  fn={()=>console.log('我可以传函数')} 
+  tag={<p>jsx</p>}
+
+  />,document.getElementById('root'))
+```
+2. 只读
+3. 在使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到props
+
+```html
+class HelloProps extends React.Component{
+  constructor(props){
+    super(props)
+    console.log(this.props)
+  }
+  render(){
+    console.log(this.props)
+    return (<div>props:{this.props.name},{this.props.role} {this.props.tag}</div>)
+  }
+}
+ReactDOM.render(<HelloProps name= "hua" role="shi" age = {19} 
+  colors = {['red','green','blue']}
+  fn={()=>console.log('我可以传函数')} 
+  tag={<p>jsx</p>}
+
+  />,document.getElementById('root'))
+```
+## 通讯的三种方式
+### 父组件传递给子组件
+1. 父组件提供传递的state数据
+2. 给子组件添加属性,值为state中的数据
+3. 子组件中通过props接收父组件中传递的数据
+```html
+class Parent extends React.Component{
+  state = {lastName:'师'}
+  render(){
+    return (
+      <div className='parent'>
+        父组件:
+        <Child name = {this.state.lastName}/> 
+      </div>
+    )
+  }
+}
+// 子组件
+const Child = (props)=>{
+  return (
+    <div className='child'>
+      <p>子组件接收到父组件的数据 {props.name}</p>
+    </div>
+  )
+}
+
+ReactDOM.render(<Parent  />,document.getElementById('root'))
+```
+### 子组件传递给父组件
+利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数.
+1. 父组件提供一个回调函数(用于接收数据)
+2. 将改函数作为属性的值,传递给子组件
+3. 子组件通过props调用回调函数
+4. 将子组件的数据作为参数传递给回调函数
+```html
+class Parent extends React.Component{
+  state={
+    parentMsg:''
+  }
+
+  getChildMsg = data=>{
+    console.log('接收到子组件传递过来的数据',data)
+    this.setState({
+      parentMsg:data
+    })
+  }
+  render(){
+    return (
+      <div className='parent'>
+        父组件:{this.state.parentMsg}
+        <Child name = {this.getChildMsg}/> 
+      </div>
+    )
+  }
+}
+// 子组件
+class Child extends React.Component{
+  state = {
+    msg:"回调传递"
+  }
+  handleClick=()=>{
+    // 
+    this.props.name(this.state.msg)
+  }
+  render(){
+    return (
+      <div className='child'>
+        <p>子组件发送到父组件</p><button onClick={this.handleClick}>点击</button>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(<Parent  />,document.getElementById('root'))
+```
+## 兄弟组件间的通讯
+将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态
+状态提升
+公共父组件职责:1.提供共享状态2.提供操作共享状态的方法
+要通讯的子组件只能通过props接收状态或者操作状态的方法
+```html
+class Counter extends React.Component{
+  state={
+    count:0
+  }
+  onIncrement=()=>{
+    this.setState({
+      count:this.state.count+1
+    })
+  }
+  render(){
+    return(
+      <div>
+        <Child1 count={this.state.count}></Child1>
+        <Child2 onIncrement={this.onIncrement}></Child2>
+      </div>
+    )
+  }
+}
+const Child1=(props)=>{
+  return <h3>计数器:{props.count}</h3>
+}
+const Child2=(props)=>{
+  return <button onClick = {()=>props.onIncrement()}>+1</button>
+}
+ReactDOM.render(<Counter  />,document.getElementById('root'))
+```
+
+# Context跨组件传递数据
+1. 使用React.createContext()创建Provider,Consumer
+2. 使用Provide组件作为父节点
+3. 设置value属性,表示要传递的数据
+4. 调用Consumer组件来接收数据
+```html
+const { Provider, Consumer } = React.createContext();
+
+class ContextApp extends React.Component {
+    render() {
+        return (
+            <Provider value='pink'>
+                <div className="app">
+                    <Node />
+                </div>
+            </Provider>
+        )
+    }
+}
+
+const Node = props => {
+    return (
+        <div className="node">
+            <SubNode />
+        </div>
+    )
+}
+
+const SubNode = props => {
+    return (
+        <div className="subNode">
+            <Child />
+        </div>
+    )
+}
+
+const Child = props => {
+    return <div className="child" ><Consumer>{data=><span>我是子节点---{data}</span>}</Consumer></div>
+}
+```
+# props深入
+## children表示组件标签的子节点.当组件标签有子节点时,props就会有该属性.
+children 属性与普通props一样,值可以是任意值(文本,React元素,组件,甚至是函数)
+```html
+class ChildProps extends React.Component{
+    render(){
+        console.log(this.props)
+        return (
+            <div><h2>组件标签的子节点{this.props.children}</h2></div>
+        )
+    }
+}
+ReactDOM.render(<ChildProps>传递到props的child</ChildProps>,document.getElementById('root'))
+```
+
+```html
+class ChildProps extends React.Component{
+    render(){
+        console.log(this.props)
+        return (
+            <div><h2>组件标签的子节点</h2>{this.props.children}</div>
+        )
+    }
+}
+const Test = ()=> <button>组件按钮</button>
+ReactDOM.render(<ChildProps><Test/><p>传递到props的child</p></ChildProps>,document.getElementById('root'))
+```
+函数
+```html
+class ChildProps extends React.Component{
+    render(){
+        this.props.children()
+        console.log(this.props)
+        return (
+            <div><h2>组件标签的子节点</h2></div>
+        )
+    }
+}
+ReactDOM.render(<ChildProps>{()=>console.info("这是一个函数")}</ChildProps>,document.getElementById('root'))
+```
+## prop 校验
+1. 安装prop-types (npm i prop-types 或者 yarn add prop-types)
+2. 导入prop-types包
+3. 使用组件名.propTypes={}来给组件的props添加校验规则
+4. 校验规则通过PropTypes对象指定
+```html
+import React from "react"
+import PropTypes from "prop-types"
+class PropCheck extends React.Component{
+    render(){
+        const arr = this.props.colors
+        console.info(arr)
+        const lis = arr.map((item,index)=><li key={index}>{item}</li>)
+        return (
+            <ul>{lis}</ul>
+        )
+    }
+}
+PropCheck.protoTypes= {
+    colors:PropTypes.array
+}
+export default PropCheck
+ReactDOM.render(<PropCheck colors = {['red','black']} />,document.getElementById('root'))
+```
+## prop 默认值
+```html
+class LPropCheck extends React.Component{
+    render(){
+        // const arr = this.props.colors
+        // console.info(arr)
+        // const lis = arr.map((item,index)=><li key={index}>{item}</li>)
+        // return (
+        //     <ul>{lis}</ul>
+        // )
+        return <div><h2>test</h2>{this.props.colors}</div>
+    }
+}
+LPropCheck.propTypes= {
+    colors:PropTypes.array
+}
+LPropCheck.defaultProps= {
+    colors:["red"]
+}
+```
diff --git a/react/6.组件生命周期.md b/react/6.组件生命周期.md
new file mode 100644
index 0000000..bbec454
--- /dev/null
+++ b/react/6.组件生命周期.md
@@ -0,0 +1,269 @@
+只有类组件才有生命周期
+1. 创建
+```html
+class LifeCreate extends React.Component{
+    constructor(props){
+        super(props)
+        console.warn('1.生命周期钩子函数constructor')
+    }
+    componentDidMount(){
+        console.warn('3.生命周期钩子函数componentDidMount')
+    }
+    render(){
+        console.warn('2.生命周期钩子函数render')
+        return (<div><h3>hello</h3></div>)
+    }
+}
+```
+2. 更新
+New props,setState,forceUpdate
+```html
+class LifeUpdate extends React.Component{
+    constructor(props){
+        super(props)
+        console.warn('1.生命周期钩子函数constructor')
+        this.state = {
+            count:0
+        }
+    }
+    componentDidMount(){
+        console.log(document.getElementById('root'))
+        console.warn('3.生命周期钩子函数componentDidMount')
+    }
+    handlerClick= ()=>{
+        // this.setState({
+        //     count:this.state.count+1
+        // })
+        this.forceUpdate()
+    }
+    render(){
+        console.warn('2.生命周期钩子函数render')
+        return (<div><Counter count = {this.state.count}/><button onClick={this.handlerClick}>hello</button></div>)
+    }
+}
+class Counter extends React.Component{
+    componentDidUpdate(prevProps){
+        console.warn('---------------２生命周期钩子函数componentDidUpdate')
+        if(prevProps.count!=this.props.count){
+            this.setState({})
+        }
+    }
+    render(){
+        console.warn('---------------１生命周期钩子函数render')
+        return (<p>点击次数{this.props.count}</p>)
+    }
+}
+```
+3. 卸载
+```html
+class LifeEnd extends React.Component{
+    constructor(props){
+        super(props)
+        console.warn('1.生命周期钩子函数constructor')
+        this.state = {
+            count:0
+        }
+    }
+    componentDidMount(){
+        console.log(document.getElementById('root'))
+        console.warn('3.生命周期钩子函数componentDidMount')
+    }
+    handlerClick= ()=>{
+        this.setState({
+            count:this.state.count+1
+        })
+        // this.forceUpdate()
+    }
+    render(){
+        console.warn('2.生命周期钩子函数render')
+        return (<div>
+            {this.state.count>3?("goodby"):<Counter count = {this.state.count}/>}
+            <button onClick={this.handlerClick}>hello</button></div>)
+    }
+}
+class Counter extends React.Component{
+    componentDidUpdate(prevProps){
+        console.warn('---------------２生命周期钩子函数componentDidUpdate')
+
+        if(prevProps.count!==this.props.count){
+            this.setState({})
+        }
+    }
+    componentDidMount(){
+        this.timerId = setInterval(()=>{
+            console.log("定时器在执行")
+        },500)
+    }
+    componentWillUnmount(){
+        clearInterval(this.timerId)
+        console.warn("结束")
+    }
+    render(){
+        console.warn('---------------１生命周期钩子函数render')
+        return (<p>点击次数{this.props.count}</p>)
+    }
+}
+```
+# 组件复用
+复用组件的状态逻辑1.state2.操作state的方法.
+## render props
+将要复用的state和操作state的方法封装到一个组件中
+添加一个值为函数的prop,通过函数参数来获取(需要组件内部来实现)
+使用该函数的返回值,作为要渲染的UI内容
+```html
+import img from './img/20200205205324.jpg'
+import PropTypes from "prop-types"
+class RepeatUse extends React.Component {
+    render(){
+        return (
+            <div>
+                <h1>render props 复用模式</h1>
+                <Mouse >{mouse=>{return (<p>X:{mouse.x},Y{mouse.y}</p>)}}</Mouse>
+                <Mouse >{mouse=>{return <img src={img} alt="" style={{position:'absolute',top:mouse.y-350,left:mouse.x-350}} />}}</Mouse>
+            </div>
+        )
+    }
+}
+class Mouse extends React.Component {
+    state = {
+        x: 0, y: 0
+    }
+    handleMouseMove = e => {
+        this.setState({
+            x: e.clientX,
+            y: e.clientY
+        })
+    }
+    // 监听鼠标移动
+    componentDidMount() {
+        window.addEventListener('mousemove', this.handleMouseMove)
+    }
+    componentWillUnmount(){
+        window.removeEventListener('mousemove', this.handleMouseMove)
+    }
+    render(){
+        return this.props.children(this.state)
+    }
+}
+Mouse.propTypes={
+    children:PropTypes.func.isRequired
+}
+```
+## 高阶组件HOC
+是一个函数,接收要包装的组件,返回增强后的组件
+1. 创建函数以with开头
+2. 指定函数参数,参数大写开头
+3. 函数内部创建类组件,提供复用状态逻辑代码
+4. 在组件中渲染参数组件,同时通过prop传递给参数组件(high order component)
+5. 调用高阶组件,传入要增强的组件,通过返回值拿到增强后的组件并将其渲染到页面.
+```html
+class RepeatUse extends React.Component {
+    render(){
+        return (
+            <div>
+                <h1>render props 复用模式</h1>
+                <MoousePosition ></MoousePosition>
+            </div>
+        )
+    }
+}
+
+function withMouse(WrappedComponent){
+    class Mouse extends React.Component {
+        state = {
+            x: 0, y: 0
+        }
+        handleMouseMove = e => {
+            this.setState({
+                x: e.clientX,
+                y: e.clientY
+            })
+        }
+        // 监听鼠标移动
+        componentDidMount() {
+            window.addEventListener('mousemove', this.handleMouseMove)
+        }
+        componentWillUnmount(){
+            window.removeEventListener('mousemove', this.handleMouseMove)
+        }
+        render(){
+            // return this.props.children(this.state)
+            return <WrappedComponent {...this.state}></WrappedComponent>
+        }
+    }
+    
+    return Mouse
+}
+
+const Position = props=>(
+    <p>
+        鼠标当前位置(x:{props.x},y:{props.y})
+    </p>
+)
+const MoousePosition = withMouse(Position)
+
+```
+### 设置displayName便于区分
+```html
+class RepeatUse extends React.Component {
+    render(){
+        return (
+            <div>
+                <h1>render props 复用模式</h1>
+                <MoousePosition ></MoousePosition>
+                {/* <MoousePosition >{mouse=>{return (<p>X:{mouse.x},Y{mouse.y}</p>)}}</MoousePosition> */}
+                {/* <MoousePosition >{mouse=>{return <img src={img} alt="" style={{position:'absolute',top:mouse.y-350,left:mouse.x-350}} />}}</MoousePosition> */}
+            </div>
+        )
+    }
+}
+
+function getDisplayName(WrappedComponent){
+    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
+}
+
+function withMouse(WrappedComponent){
+
+    class Mouse extends React.Component {
+        state = {
+            x: 0, y: 0
+        }
+        handleMouseMove = e => {
+            this.setState({
+                x: e.clientX,
+                y: e.clientY
+            })
+        }
+        // 监听鼠标移动,仅挂载执行一次
+        componentDidMount() {
+            window.addEventListener('mousemove', this.handleMouseMove)
+        }
+        componentWillUnmount(){
+            window.removeEventListener('mousemove', this.handleMouseMove)
+        }
+        render(){
+            // return this.props.children(this.state)
+            return <WrappedComponent {...this.state}></WrappedComponent>
+        }
+    }
+    // 设置展示名称
+    Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
+    return Mouse
+}
+
+const Position = props=>(
+    <p>
+        鼠标当前位置(x:{props.x},y:{props.y})
+    </p>
+)
+const MoousePosition = withMouse(Position)
+```
+## 高阶组件传递 props
+```html
+        render(){
+            // return this.props.children(this.state)
+            return <WrappedComponent {...this.state}{...this.props}></WrappedComponent>
+        }
+```
+## 组件极简模型
+(state,props)=>UI
\ No newline at end of file
diff --git a/react/react原理/7.1.Diff算法.md b/react/react原理/7.1.Diff算法.md
new file mode 100644
index 0000000..1f3c70f
--- /dev/null
+++ b/react/react原理/7.1.Diff算法.md
@@ -0,0 +1 @@
+diff对比最小粒度:标签 
\ No newline at end of file
diff --git a/react/react原理/7.setState说明.md b/react/react原理/7.setState说明.md
new file mode 100644
index 0000000..9731991
--- /dev/null
+++ b/react/react原理/7.setState说明.md
@@ -0,0 +1,56 @@
+setState异步更新(同一方法中多次调用只会render一次),设置值后立即获取,只能获取到原始值
+获取最新的state
+```html
+        this.setState((state,props)=> {
+            return {
+                count:state.count+1
+            }
+        })
+```
+setState第二个参数作为回调参数,在状态更新,后立即执行.
+```html
+class StateApp extends React.Component{
+    constructor(){
+      super()
+      this.state= {
+        count:0
+      }
+    }
+    onIncrement=()=>{
+      console.info('事件处理this'+this)
+    //   this.setState({
+    //     count:this.state.count+1
+    //   })
+    //   this.setState({
+    //     count:this.state.count+1
+    //   })
+        this.setState((state,props)=> {
+            return {
+                count:state.count+1
+            }
+        })
+        this.setState((state,props)=> {
+            return {
+                count:state.count+1
+            }
+        },()=>{
+            console.log('状态更新后回调函数',this.state.count)//4
+            console.log(document.getElementById('root').innerText)
+        })
+        console.info(this.state.count)///2
+    }
+    render(){
+      return (
+        <div>有状态组件,{this.state.count}
+        <button onClick={this.onIncrement}>+1</button>
+        </div>
+      )
+    }
+  }
+```
+
+
+
+
+
+
diff --git a/react/react原理/8.jsx语法转换过程.md b/react/react原理/8.jsx语法转换过程.md
new file mode 100644
index 0000000..37e8653
--- /dev/null
+++ b/react/react原理/8.jsx语法转换过程.md
@@ -0,0 +1,58 @@
+jsx语法->createElement()->React元素
+父组件更新,子组件跟着更新.
+# 组件优化
+### 减轻state,与渲染无关的不要放在state中.
+### 避免不必要的重新渲染.
+钩子函数 shouldComponentUpdate(nextProps,nextState)  
+根据返回值判断是否需要渲染该值.
+触发时机:更新阶段的钩子函数,组件重新渲染前执行(shouldComponentUpdate->render)
+或者使用纯组件
+```html
+class StateApp extends React.Component{
+    constructor(){
+      super()
+      this.state= {
+        count:0
+      }
+    }
+    shouldComponentUpdate(nextProps,nextState){
+        console.info('最新是内容'+nextState.count)
+        console.info('上次是内容'+this.state.count)
+        return nextState.count!==this.setState.count
+    }
+    onIncrement=()=>{
+      console.info('事件处理this'+this)
+        this.setState((state,props)=> {
+            return {
+                count:state.count+1
+            }
+        })
+        console.info(this.state.count)
+    }
+    render(){
+      return (
+        <div>有状态组件,{this.state.count}
+        <button onClick={this.onIncrement}>+1</button>
+        </div>
+      )
+    }
+  }
+```
+
+## 纯组件 PureComponent
+比较props和state,只有这两者变化才会更新.
+纯组件内部的对比是shallow compare 浅层对比
+对于引用类型来说:只比较对象地址.
+# 虚拟DOM和Diff算法
+虚拟DOM=state+jsx
+虚拟DOM:本质上就是一个js对象,用来描述你希望在屏幕上看到的内容(UI)
+虚拟DOM让react脱离了浏览器的束缚
+## diff算法
+1. 初次渲染是,React会根据初始state(Model),创建一个虚拟DOM对象(树)
+2. 根据虚拟DOM生成真正的DOM,渲染到页面中
+3. 当数据变化后(setState),重新根据新的数据,创建新的虚拟DOM对象树
+4. 与上一次得到的虚拟DOM对象,使用Diff算法对比(找不同),得到需要更新的内容
+5. 最终,React只将变化的内容(patch)到DOM中,重新渲染到页面.
+
+
+
diff --git a/react/react原理/img/key选择.png b/react/react原理/img/key选择.png
new file mode 100644
index 0000000..d344753
Binary files /dev/null and b/react/react原理/img/key选择.png differ
diff --git a/react/react原理/img/遍历中key.png b/react/react原理/img/遍历中key.png
new file mode 100644
index 0000000..87fd173
Binary files /dev/null and b/react/react原理/img/遍历中key.png differ
diff --git a/react/redux/img/react-redux模型图.png b/react/redux/img/react-redux模型图.png
new file mode 100644
index 0000000..9718d07
Binary files /dev/null and b/react/redux/img/react-redux模型图.png differ
diff --git a/react/redux/img/redux原理图.png b/react/redux/img/redux原理图.png
new file mode 100644
index 0000000..7aa355c
Binary files /dev/null and b/react/redux/img/redux原理图.png differ
diff --git a/react/route-v6/1.项目.md b/react/route-v6/1.项目.md
new file mode 100644
index 0000000..4756668
--- /dev/null
+++ b/react/route-v6/1.项目.md
@@ -0,0 +1,21 @@
+1. 使用vite创建自己的项目
+
+```shell
+npm create vite@latest react-route-v6-learn -- --template react
+```
+
+2. 安装路由
+
+```
+npm install react-router-dom localforage match-sorter sort-by
+```
+
+3. 启动
+
+```
+npm run dev
+```
+
+nested 嵌套
+
+navigate 导航
\ No newline at end of file
diff --git a/react/生命周期/生命周期new.png b/react/生命周期/生命周期new.png
new file mode 100644
index 0000000..5122856
Binary files /dev/null and b/react/生命周期/生命周期new.png differ
diff --git a/react/生命周期/生命周期old.png b/react/生命周期/生命周期old.png
new file mode 100644
index 0000000..ec52ba5
Binary files /dev/null and b/react/生命周期/生命周期old.png differ
diff --git a/react/生命周期/生命周期函数.png b/react/生命周期/生命周期函数.png
new file mode 100644
index 0000000..6ed7c92
Binary files /dev/null and b/react/生命周期/生命周期函数.png differ
diff --git a/react/生命周期/生命周期函数new.png b/react/生命周期/生命周期函数new.png
new file mode 100644
index 0000000..f7e99f5
Binary files /dev/null and b/react/生命周期/生命周期函数new.png differ
diff --git a/react/目录1.png b/react/目录1.png
new file mode 100644
index 0000000..128667d
Binary files /dev/null and b/react/目录1.png differ
diff --git a/react/目录2.png b/react/目录2.png
new file mode 100644
index 0000000..3c23a08
Binary files /dev/null and b/react/目录2.png differ
diff --git a/react/路由/9.1.配置代理.md b/react/路由/9.1.配置代理.md
new file mode 100644
index 0000000..c20c7e0
--- /dev/null
+++ b/react/路由/9.1.配置代理.md
@@ -0,0 +1,44 @@
+# 代理:
+### 方式一
+只能使用一种代理
+package.json文件中添加
+"proxy":"http://localhost:5000"
+自身没有的资源会请求5000,自身请求http://localhost:3000/
+### 方式二
+src根目录下创建文件setupProxy.js
+```html
+const proxy = require('http-proxy-middleware')
+module.exports=function(app){
+    app.use(
+        proxy('/api1',{
+            target:'http://localhost:5000',
+            changeOrigin:true,
+            pathRewrite:{'^/api1':''}
+        }),
+        proxy('/api2',{
+            target:'http://localhost:5001',
+            changeOrigin:true,
+            pathRewrite:{'^/api2':''}
+        })
+    )
+}
+```
+
+
+```
+const {createProxyMiddleware} = require('http-proxy-middleware')
+module.exports=function(app){
+    app.use(
+        createProxyMiddleware('/api1',{
+            target:'https://github.com',
+            changeOrigin:false,
+            pathRewrite:{'^/api1':''}
+        }),
+        createProxyMiddleware('/api2',{
+            target:'http://localhost:5001',
+            changeOrigin:true,
+            pathRewrite:{'^/api2':''}
+        })
+    )
+}
+```
\ No newline at end of file
diff --git a/react/路由/9.路由.md b/react/路由/9.路由.md
new file mode 100644
index 0000000..8037cac
--- /dev/null
+++ b/react/路由/9.路由.md
@@ -0,0 +1,39 @@
+npm i react-router-dom@5
+为有效使用单页面管理原来的多页面的功能,前端路由应运而生.
+从一个视图跳转到另一个视图,是URL路径与组件的对应关系.
+1. 安装路由 npm i react-router-dom
+2. 导入 import { BrowserRouter as Router,Route,Link } from 'react-router-dom';
+3. 使用Router包裹整个组件
+4. 使用Link(解析为a标签)组件作为导航菜单路由入口
+5. 使用Route配置路由的规则和要展示的组件路由出口
+## 路由执行过程
+1. 点击Link组件(a标签),修改了浏览器地址栏中url
+2. React路由监听到地址栏url的变化
+3. React路由内部遍历所有Route组件,使用路由规则(path)与pathname进行匹配
+4. 当路由规则(path)能够匹配地址栏中的pathname时,就展示改route组件内容
+## 编程式导航
+通过js代码来实现页面跳转 this.pops.history.push('/home')
+history是react路由提供的,用于获取浏览器历史记录的相关信息
+push(path):跳转到某个页面,参数path表示要跳转的路径
+go(n)前进或者后退到某个页面(后退用-)
+
+<Redirect to="/home"></Redirect>
+<Navigate to="/about"></Navigate>
+## 默认路由
+```
+            <Route path ="/" element={<LoginApp/>} ></Route>
+```
+默认情况下React是模糊匹配模式
+精确匹配添加exact
+```html
+            <Route exact  path ="/home" element={<HomeApp/>} ></Route>
+```
+
+React路由一切都是组件,可以像思考组件一样思考路由.
+
+HashRouter  路径中包含#,#后所有资源都不发送服务器.
+
+路由组件(<Header/>):放到pages文件夹下,传入大量props信息
+一般组件(<Route path="/about" component={About} />):放到components,默认不传props内容,无history
+
+NavLink 默认点击高亮(activeClassName)
\ No newline at end of file
diff --git a/react/项目/10.技术栈.md b/react/项目/10.技术栈.md
new file mode 100644
index 0000000..d58e173
--- /dev/null
+++ b/react/项目/10.技术栈.md
@@ -0,0 +1,34 @@
+1. React核心库:react,react-dom,react-router-dom
+2. 脚手架:create-react-app
+3. 数据请求:axios
+4. ui组件库:antd-mobile
+5. 其他组件库:react-virtualized长列表,formik-yup表单和表单验证,react-spring动画功能
+6. 百度地图api
+
+创建并导入数据库 hkzf
+在api目录中执行  npm start
+8080
+
+npx create-react-app hkzf-mobile
+
+npm install antd-mobile --save
+
+npm install react-router-dom
+
+对象简写方式
+```
+{message:message}=>{message} 
+```
+
+
+
+
+
+
+
+
+
+09
+14
+15
+27
\ No newline at end of file
diff --git a/react/项目/11.获取数据.md b/react/项目/11.获取数据.md
new file mode 100644
index 0000000..e87e0d7
--- /dev/null
+++ b/react/项目/11.获取数据.md
@@ -0,0 +1,7 @@
+获取数据
+1. 安装axios:npm i axios
+2. 在Index组件中导入axios
+3. 在state中添加轮播图数据:swipers
+4. 新建一个方法getSwipers用来获取轮播图数据,并更新swipers状态
+5. 在componentDidMount钩子函数中调用该方法
+6. 使用获取到的数据渲染轮播图
\ No newline at end of file
diff --git a/react/项目/12.sass文件使用.md b/react/项目/12.sass文件使用.md
new file mode 100644
index 0000000..43104fc
--- /dev/null
+++ b/react/项目/12.sass文件使用.md
@@ -0,0 +1,5 @@
+安装
+```
+npm i node-sass
+```
+修改文件名为scss
\ No newline at end of file
diff --git a/react/项目/13.租房小组.md b/react/项目/13.租房小组.md
new file mode 100644
index 0000000..dc9fbea
--- /dev/null
+++ b/react/项目/13.租房小组.md
@@ -0,0 +1,23 @@
+1. state中添加租房小组数据group 
+2. 新建一个方法getGroups用来获取数据,并更新groups状态
+3. 在componentDidMount钩子函数中调用该方法
+4. 使用过去到的数据渲染租房小组数据
+# H5中的地理位置API
+```html
+navigator.geolocation.getCurrentPosition(position=>{
+    console.log("当前位置信息",position)
+})
+```
+
+懒渲染
+可视区域渲染,大列表
+
+react-virtualized   
+
+1. 将获取到的cityList和cityIndex添加为组件的状态数据
+2. 修改List组件的rowCount为cityIndex的长度
+3. 将rowRender函数添加到组件内部,以便在函数中获取到状态数据cityList和cityIndex
+4. 修改List组件的RowRender为组件中的rowRender方法
+5. 修改rowRender方法中渲染的每行格式结构和样式.
+6. 修改list组件的rowHeight为函数,动态计算每一行的高度
+7. 
\ No newline at end of file
diff --git a/react/项目/14.cssInJs.md b/react/项目/14.cssInJs.md
new file mode 100644
index 0000000..4efb451
--- /dev/null
+++ b/react/项目/14.cssInJs.md
@@ -0,0 +1,19 @@
+使用JavaScript编写CSS的统称,用来解决CSS样式冲突,覆盖的问题.
+CSS-Model:BEM(Block 块,Element元素,Modifier三部分组成)
+```
+import styles from './index.module.css'
+<div className={styles.test}>测试样式覆盖</div>
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vue/1-vue官网学习.md b/vue/1-vue官网学习.md
new file mode 100644
index 0000000..7a39340
--- /dev/null
+++ b/vue/1-vue官网学习.md
@@ -0,0 +1,206 @@
+#### 绑定 v-bind
+
+v-bind attribute ：将这个元素节点的 `title` attribute 和 Vue 实例的 `message` property 保持一致
+
+```javascript
+<div id="app-2">
+  <span v-bind:title="message">
+    鼠标悬停几秒钟查看此处动态绑定的提示信息！
+  </span>
+</div>
+var app2 = new Vue({
+  el: '#app-2',
+  data: {
+    message: '页面加载于 ' + new Date().toLocaleString()
+  }
+})
+```
+
+在控制台输入改变信息：app2.message = '新消息'
+
+#### 控制元素显示 v-if
+
+```js
+<div id="app-3">
+  <p v-if="seen">现在你看到我了</p>
+</div>
+var app3 = new Vue({
+  el: '#app-3',
+  data: {
+    seen: true
+  }
+})
+```
+
+直接在控制台改变属性：app3.seen = false
+
+#### 循环展示 v-for
+
+```js
+<div id="app-4">
+  <ol>
+    <li v-for="todo in todos">
+      {{ todo.text }}
+    </li>
+  </ol>
+</div>
+
+var app4 = new Vue({
+  el: '#app-4',
+  data: {
+    todos: [
+      { text: '学习 JavaScript' },
+      { text: '学习 Vue' },
+      { text: '整个牛项目' }
+    ]
+  }
+})
+```
+
+在控制台改变内容：app4.todos.push({ text: '新项目' })
+
+####   添加一个事件监听器 v-on
+
+```javascript
+<div id="app-5">
+  <p>{{ message }}</p>
+  <button v-on:click="reverseMessage">反转消息</button>
+</div>
+var app5 = new Vue({
+  el: '#app-5',
+  data: {
+    message: 'Hello Vue.js!'
+  },
+  methods: {
+    reverseMessage: function () {
+      this.message = this.message.split('').reverse().join('')
+    }
+  }
+})
+```
+
+####  表单输入和应用状态之间的双向绑定 v-model
+
+```js
+<div id="app-6">
+  <p>{{ message }}</p>
+  <input v-model="message">
+</div>
+
+var app6 = new Vue({
+  el: '#app-6',
+  data: {
+    message: 'Hello Vue!'
+  }
+})
+```
+
+#### 组件
+
+- 任意类型的应用界面都可以抽象为一个组件树。
+
+- 子单元通过 prop 接口与父单元进行了良好的解耦。
+
+- 所有的 Vue 组件都是 Vue 实例。
+
+```js
+Vue.component('todo-item', {
+  // todo-item 组件现在接受一个
+  // "prop"，类似于一个自定义 attribute。
+  // 这个 prop 名为 todo。
+  props: ['todo'],
+  template: '<li>{{ todo.text }}</li>'
+})
+
+<div id="app-7">
+  <ol>
+    
+    <todo-item
+      v-for="item in groceryList"
+      v-bind:todo="item"
+      v-bind:key="item.id"
+    ></todo-item>
+  </ol>
+</div>
+
+var app7 = new Vue({
+  el: '#app-7',
+  data: {
+    groceryList: [
+      { id: 0, text: '蔬菜' },
+      { id: 1, text: '奶酪' },
+      { id: 2, text: '随便其它什么人吃的东西' }
+    ]
+  }
+})
+
+```
+
+#### 响应式
+
+- 当一个 Vue 实例被创建时，它将 `data` 对象中的所有的 property 加入到 Vue 的**响应式系统**中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
+- 值得注意的是只有当实例被创建时就已经存在于 `data` 中的 property 才是**响应式**的。
+- `Object.freeze()`，这会阻止修改现有的 property，也意味着响应系统无法再*追踪*变化。
+
+```js
+var obj = {
+  foo: 'bar'
+}
+
+Object.freeze(obj)
+
+new Vue({
+  el: '#app',
+  data: obj
+})
+
+<div id="app">
+  <p>{{ foo }}</p>
+  
+  <button v-on:click="foo = 'baz'">Change it</button>
+</div>
+```
+
+- 除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 `$`，以便与用户定义的 property 区分开来。
+
+```js
+var data = { a: 1 }
+var vm = new Vue({
+  el: '#example',
+  data: data
+})
+
+vm.$data === data // => true
+vm.$el === document.getElementById('example') // => true
+
+// $watch 是一个实例方法
+vm.$watch('a', function (newValue, oldValue) {
+  // 这个回调将在 `vm.a` 改变后调用
+})
+```
+
+#### 生命周期钩子
+
+- 生命周期钩子的 `this` 上下文指向调用它的 Vue 实例。
+- 不要在选项 property 或回调上使用箭头函数
+
+```js
+new Vue({
+  data: {
+    a: 1
+  },
+  created: function () {
+    // `this` 指向 vm 实例
+    console.log('a is: ' + this.a)
+  }
+})
+// => "a is: 1"
+```
+
+![](img\lifecycle.png)
+
diff --git a/vue/2-模板语法.md b/vue/2-模板语法.md
new file mode 100644
index 0000000..e20016c
--- /dev/null
+++ b/vue/2-模板语法.md
@@ -0,0 +1,110 @@
+如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，[直接写渲染 (render) 函数](https://cn.vuejs.org/v2/guide/render-function.html)，使用可选的 JSX 语法。
+
+#### 数据绑定
+
+- 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
+- 通过使用 [v-once 指令](https://cn.vuejs.org/v2/api/#v-once)，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新，类似Object.freeze()。但请留心这会影响到该节点上的其它数据绑定。
+
+```js
+<span>Message: {{ msg }}</span>
+<span v-once>这个将不会改变: {{ msg }}</span>
+```
+
+####  v-html
+
+- 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
+
+```js
+<p>Using mustaches: {{ rawHtml }}</p>
+<p>Using v-html directive: <span v-html="rawHtml"></span></p>
+```
+
+#### v-bind
+
+- Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind
+
+```js
+<div v-bind:id="dynamicId"></div>
+// 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。
+<button v-bind:disabled="isButtonDisabled">Button</button>
+```
+
+#### javascript语法
+
+```
+{{ number + 1 }}
+{{ ok ? 'YES' : 'NO' }}
+{{ message.split('').reverse().join('') }}
+<div v-bind:id="'list-' + id"></div>
+```
+
+- 数据绑定支持javascript语法
+- 每个绑定都只能包含**单个表达式**
+- 模板表达式都被放在沙盒中，只能访问[全局变量的一个白名单](https://github.com/vuejs/vue/blob/v2.6.10/src/core/instance/proxy.js#L9)，如 `Math` 和 `Date` 。你不应该在模板表达式中试图访问用户定义的全局变量。
+
+```js
+
+{{ var a = 1 }}
+
+{{ if (ok) { return message } }}
+```
+
+#### 指令v-
+
+- 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
+
+```js
+<p v-if="seen">现在你看到我了</p>
+```
+
+#### 参数
+
+```js
+<a v-bind:href="url">...</a>
+// 在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
+<a v-on:click="doSomething">...</a>
+// 在这里参数是监听的事件名。
+<a v-bind:[attributeName]="url"> ... </a>
+// 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property // attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
+<a v-on:[eventName]="doSomething"> ... </a>
+// 当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
+```
+
+- 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写
+
+```js
+
+<a v-bind:[someAttr]="value"> ... </a>
+```
+
+#### 修饰符
+
+- 修饰符 (modifier) 是以半角句号 `.` 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，`.prevent` 修饰符告诉 `v-on` 指令对于触发的事件调用 `event.preventDefault()`
+
+```js
+<form v-on:submit.prevent="onSubmit">...</form>
+```
+
+#### 缩写：@
+
+```js
+
+<a v-bind:href="url">...</a>
+
+<a :href="url">...</a>
+
+<a :[key]="url"> ... </a>
+
+
+<a v-on:click="doSomething">...</a>
+
+<a @click="doSomething">...</a>
+
+<a @[event]="doSomething"> ... </a>
+```
+
+
+
diff --git a/vue/3-计算属性和侦听器.md b/vue/3-计算属性和侦听器.md
new file mode 100644
index 0000000..c8cb073
--- /dev/null
+++ b/vue/3-计算属性和侦听器.md
@@ -0,0 +1,154 @@
+## computed
+
+#### 计算属性 
+
+- 计算属性是基于它们的响应式依赖进行缓存的
+
+```js
+<div id="example">
+  <p>Original message: "{{ message }}"</p>
+  <p>Computed reversed message: "{{ reversedMessage }}"</p>
+</div>
+var vm = new Vue({
+  el: '#example',
+  data: {
+    message: 'Hello'
+  },
+  computed: {
+    // 计算属性的 getter
+    reversedMessage: function () {
+      // `this` 指向 vm 实例
+      return this.message.split('').reverse().join('')
+    }
+  }
+})
+
+<p>Reversed message: "{{ reversedMessage() }}"</p>
+
+// 在组件中
+methods: {
+  reversedMessage: function () {
+    return this.message.split('').reverse().join('')
+  }
+}
+```
+
+#### 监听属性
+
+- 类似watch
+
+```js
+<div id="demo">{{ fullName }}</div>
+// watch
+var vm = new Vue({
+  el: '#demo',
+  data: {
+    firstName: 'Foo',
+    lastName: 'Bar',
+    fullName: 'Foo Bar'
+  },
+  watch: {
+    firstName: function (val) {
+      this.fullName = val + ' ' + this.lastName
+    },
+    lastName: function (val) {
+      this.fullName = this.firstName + ' ' + val
+    }
+  }
+})
+// 
+var vm = new Vue({
+  el: '#demo',
+  data: {
+    firstName: 'Foo',
+    lastName: 'Bar'
+  },
+  computed: {
+    fullName: function () {
+      return this.firstName + ' ' + this.lastName
+    }
+  }
+})
+```
+
+#### set
+
+```js
+computed: {
+  fullName: {
+    // getter
+    get: function () {
+      return this.firstName + ' ' + this.lastName
+    },
+    // setter
+    set: function (newValue) {
+      var names = newValue.split(' ')
+      this.firstName = names[0]
+      this.lastName = names[names.length - 1]
+    }
+  }
+}
+// 现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
+```
+
+## 监听器
+
+- 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
+- 在这个示例中，使用 `watch` 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
+
+```js
+<div id="watch-example">
+  <p>
+    Ask a yes/no question:
+    <input v-model="question">
+  </p>
+  <p>{{ answer }}</p>
+</div>
+
+
+
+<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
+<script>
+var watchExampleVM = new Vue({
+  el: '#watch-example',
+  data: {
+    question: '',
+    answer: 'I cannot give you an answer until you ask a question!'
+  },
+  watch: {
+    // 如果 `question` 发生改变，这个函数就会运行
+    question: function (newQuestion, oldQuestion) {
+      this.answer = 'Waiting for you to stop typing...'
+      this.debouncedGetAnswer()
+    }
+  },
+  created: function () {
+    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
+    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
+    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
+    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
+    // 请参考：https://lodash.com/docs#debounce
+    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
+  },
+  methods: {
+    getAnswer: function () {
+      if (this.question.indexOf('?') === -1) {
+        this.answer = 'Questions usually contain a question mark. ;-)'
+        return
+      }
+      this.answer = 'Thinking...'
+      var vm = this
+      axios.get('https://yesno.wtf/api')
+        .then(function (response) {
+          vm.answer = _.capitalize(response.data.answer)
+        })
+        .catch(function (error) {
+          vm.answer = 'Error! Could not reach the API. ' + error
+        })
+    }
+  }
+})
+</script>
+```
+
diff --git a/vue/4-Class 与 Style 绑定.md b/vue/4-Class 与 Style 绑定.md
new file mode 100644
index 0000000..cd74a8c
--- /dev/null
+++ b/vue/4-Class 与 Style 绑定.md	
@@ -0,0 +1,86 @@
+### v-bind:class
+
+#### 属性
+
+- 我们可以传给 `v-bind:class` 一个对象，以动态地切换 class
+
+```js
+<div
+  class="static"
+  v-bind:class="{ active: isActive, 'text-danger': hasError }"
+></div>
+
+data: {
+  isActive: true,
+  hasError: false
+}
+```
+
+#### 对象
+
+```js
+<div class="static active"></div>
+
+//绑定的数据对象不必内联定义在模板里：
+<div v-bind:class="classObject"></div>
+data: {
+  classObject: {
+    active: true,
+    'text-danger': false
+  }
+}
+data: {
+  isActive: true,
+  error: null
+},
+computed: {
+  classObject: function () {
+    return {
+      active: this.isActive && !this.error,
+      'text-danger': this.error && this.error.type === 'fatal'
+    }
+  }
+}
+```
+
+#### 数组
+
+```js
+<div v-bind:class="[activeClass, errorClass]"></div>
+data: {
+  activeClass: 'active',
+  errorClass: 'text-danger'
+}
+<div class="active text-danger"></div>
+
+<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
+<div v-bind:class="[{ active: isActive }, errorClass]"></div>
+```
+
+#### 用在组件上
+
+组件中信息不会被覆盖而是追加
+
+### 绑定内联样式 v-bind:style
+
+- CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
+
+```html
+<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
+<div v-bind:style="styleObject"></div>
+<div v-bind:style="[baseStyles, overridingStyles]"></div>
+```
+
+```js
+data: {
+  activeColor: 'red',
+  fontSize: 30
+}
+data: {
+  styleObject: {
+    color: 'red',
+    fontSize: '13px'
+  }
+}
+```
+
diff --git a/vue/5-条件渲染.md b/vue/5-条件渲染.md
new file mode 100644
index 0000000..867c623
--- /dev/null
+++ b/vue/5-条件渲染.md
@@ -0,0 +1,71 @@
+#### v-if
+
+- 当 `v-if` 与 `v-for` 一起使用时，`v-for` 具有比 `v-if` 更高的优先级。不推荐两个一起使用
+
+```html
+<h1 v-if="awesome">Vue is awesome!</h1>
+<h1 v-else>Oh no 😢</h1>
+
+<template v-if="ok">
+  <h1>Title</h1>
+  <p>Paragraph 1</p>
+  <p>Paragraph 2</p>
+</template>
+
+<div v-if="Math.random() > 0.5">
+  Now you see me
+</div>
+<div v-else>
+  Now you don't
+</div>
+
+<div v-if="type === 'A'">
+  A
+</div>
+<div v-else-if="type === 'B'">
+  B
+</div>
+<div v-else-if="type === 'C'">
+  C
+</div>
+<div v-else>
+  Not A/B/C
+</div>
+```
+
+#### key管理可复用元素
+
+- 那么在上面的代码中切换 `loginType` 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，`<input>` 不会被替换掉——仅仅是替换了它的 `placeholder`。
+
+```html
+<template v-if="loginType === 'username'">
+  <label>Username</label>
+  <input placeholder="Enter your username">
+</template>
+<template v-else>
+  <label>Email</label>
+  <input placeholder="Enter your email address">
+</template>
+```
+
+- 这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 `key` attribute 即可
+
+```html
+<template v-if="loginType === 'username'">
+  <label>Username</label>
+  <input placeholder="Enter your username" key="username-input">
+</template>
+<template v-else>
+  <label>Email</label>
+  <input placeholder="Enter your email address" key="email-input">
+</template>
+```
+
+#### v-show
+
+```html
+<h1 v-show="ok">Hello!</h1>
+```
+
+- v-show` 不支持 `<template>` 元素，也不支持 `v-else
+
diff --git a/vue/6-列表渲染.md b/vue/6-列表渲染.md
new file mode 100644
index 0000000..7a38baa
--- /dev/null
+++ b/vue/6-列表渲染.md
@@ -0,0 +1,221 @@
+#### v-for
+
+```html
+<ul id="example-1">
+  <li v-for="item in items" :key="item.message">
+    {{ item.message }}
+  </li>
+</ul>
+```
+
+```js
+var example1 = new Vue({
+  el: '#example-1',
+  data: {
+    items: [
+      { message: 'Foo' },
+      { message: 'Bar' }
+    ]
+  }
+})
+```
+
+```html
+<ul id="example-2">
+  <li v-for="(item, index) in items">
+    {{ parentMessage }} - {{ index }} - {{ item.message }}
+  </li>
+</ul>
+```
+
+```js
+var example2 = new Vue({
+  el: '#example-2',
+  data: {
+    parentMessage: 'Parent',
+    items: [
+      { message: 'Foo' },
+      { message: 'Bar' }
+    ]
+  }
+})
+```
+
+### v-for遍历一个对象的元素
+
+```html
+<ul id="v-for-object" class="demo">
+  <li v-for="value in object">
+    {{ value }}
+  </li>
+</ul>
+
+<div v-for="(value, name) in object">
+  {{ name }}: {{ value }}
+</div>
+
+<div v-for="(value, name, index) in object">
+  {{ index }}. {{ name }}: {{ value }}
+</div>
+
+<div v-for="item in items" v-bind:key="item.id">
+  
+</div>
+```
+
+```js
+new Vue({
+  el: '#v-for-object',
+  data: {
+    object: {
+      title: 'How to do lists in Vue',
+      author: 'Jane Doe',
+      publishedAt: '2016-04-10'
+    }
+  }
+})
+```
+
+#### 显示过滤/排序后的结果
+
+- 有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
+
+```html
+<li v-for="n in evenNumbers">{{ n }}</li>
+```
+
+```js
+data: {
+  numbers: [ 1, 2, 3, 4, 5 ]
+},
+computed: {
+  evenNumbers: function () {
+    return this.numbers.filter(function (number) {
+      return number % 2 === 0
+    })
+  }
+}
+```
+
+- 在计算属性不适用的情况下 (例如，在嵌套 `v-for` 循环中) 可以使用一个方法
+
+```html
+<ul v-for="set in sets">
+  <li v-for="n in even(set)">{{ n }}</li>
+</ul>
+```
+
+```js
+data: {
+  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
+},
+methods: {
+  even: function (numbers) {
+    return numbers.filter(function (number) {
+      return number % 2 === 0
+    })
+  }
+}
+```
+
+```html
+<div>
+  <span v-for="n in 10">{{ n }} </span>
+</div>
+
+<ul>
+  <template v-for="item in items">
+    <li>{{ item.msg }}</li>
+    <li class="divider" role="presentation"></li>
+  </template>
+</ul>
+```
+
+#### v-for,v-if 一同使用
+
+- 当它们处于同一节点，`v-for` 的优先级比 `v-if` 更高，这意味着 `v-if` 将分别重复运行于每个 `v-for` 循环中。当你只想为*部分*项渲染节点时，这种优先级的机制会十分有用。
+- 
+
+```html
+<--代码将只渲染未完成的 todo-->
+<li v-for="todo in todos" v-if="!todo.isComplete">
+  {{ todo }}
+</li>
+<ul v-if="todos.length">
+  <li v-for="todo in todos">
+    {{ todo }}
+  </li>
+</ul>
+<p v-else>No todos left!</p>
+```
+
+#### v-for在组件中
+
+```html
+<div id="todo-list-example">
+  <form v-on:submit.prevent="addNewTodo">
+    <label for="new-todo">Add a todo</label>
+    <input
+      v-model="newTodoText"
+      id="new-todo"
+      placeholder="E.g. Feed the cat"
+    >
+    <button>Add</button>
+  </form>
+  <ul>
+    <li
+      is="todo-item"
+      v-for="(todo, index) in todos"
+      v-bind:key="todo.id"
+      v-bind:title="todo.title"
+      v-on:remove="todos.splice(index, 1)"
+    ></li>
+  </ul>
+</div>
+```
+
+
+
+```js
+Vue.component('todo-item', {
+  template: '\
+    <li>\
+      {{ title }}\
+      <button v-on:click="$emit(\'remove\')">Remove</button>\
+    </li>\
+  ',
+  props: ['title']
+})
+
+new Vue({
+  el: '#todo-list-example',
+  data: {
+    newTodoText: '',
+    todos: [
+      {
+        id: 1,
+        title: 'Do the dishes',
+      },
+      {
+        id: 2,
+        title: 'Take out the trash',
+      },
+      {
+        id: 3,
+        title: 'Mow the lawn'
+      }
+    ],
+    nextTodoId: 4
+  },
+  methods: {
+    addNewTodo: function () {
+      this.todos.push({
+        id: this.nextTodoId++,
+        title: this.newTodoText
+      })
+      this.newTodoText = ''
+    }
+  }
+})
+```
+
diff --git a/vue/7-事件处理.md b/vue/7-事件处理.md
new file mode 100644
index 0000000..99c79e2
--- /dev/null
+++ b/vue/7-事件处理.md
@@ -0,0 +1,125 @@
+```html
+<div id="example-1">
+  <button v-on:click="counter += 1">Add 1</button>
+  <p>The button above has been clicked {{ counter }} times.</p>
+</div>
+<div id="example-2">
+  
+  <button v-on:click="greet">Greet</button>
+</div>
+```
+
+```js
+var example1 = new Vue({
+  el: '#example-1',
+  data: {
+    counter: 0
+  }
+})
+var example2 = new Vue({
+  el: '#example-2',
+  data: {
+    name: 'Vue.js'
+  },
+  // 在 `methods` 对象中定义方法
+  methods: {
+    greet: function (event) {
+      // `this` 在方法里指向当前 Vue 实例
+      alert('Hello ' + this.name + '!')
+      // `event` 是原生 DOM 事件
+      if (event) {
+        alert(event.target.tagName)
+      }
+    }
+  }
+})
+
+// 也可以用 JavaScript 直接调用方法
+example2.greet() // => 'Hello Vue.js!'
+```
+
+#### 内联处理器中的方法调用
+
+- 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 `$event` 把它传入方法
+
+```html
+<div id="example-3">
+  <button v-on:click="say('hi')">Say hi</button>
+  <button v-on:click="say('what')">Say what</button>
+  <button v-on:click="warn('Form cannot be submitted yet.', $event)">
+  Submit
+</button>
+</div>
+
+
+```
+
+```js
+new Vue({
+  el: '#example-3',
+  methods: {
+    say: function (message) {
+      alert(message)
+    },
+    warn: function (message, event) {
+    // 现在我们可以访问原生事件对象
+    if (event) {
+      event.preventDefault()
+    }
+    alert(message)
+  } 
+  }
+})
+```
+
+#### [事件修饰符](https://cn.vuejs.org/v2/guide/events.html#事件修饰符)
+
+- 键盘按键处理
+- 鼠标按键处理
+
+```html
+
+<a v-on:click.stop="doThis"></a>
+
+
+<form v-on:submit.prevent="onSubmit"></form>
+
+
+<a v-on:click.stop.prevent="doThat"></a>
+
+
+<form v-on:submit.prevent></form>
+
+
+
+<div v-on:click.capture="doThis">...</div>
+
+
+
+<div v-on:click.self="doThat">...</div>
+
+
+<a v-on:click.once="doThis"></a>
+
+
+
+
+<div v-on:scroll.passive="onScroll">...</div>
+
+
+<input v-on:keyup.enter="submit">
+
+<input v-on:keyup.page-down="onPageDown">
+
+<input v-on:keyup.13="submit">
+
+// 可以使用 `v-on:keyup.f1`
+Vue.config.keyCodes.f1 = 112
+
+<input v-on:keyup.alt.67="clear">
+
+
+<div v-on:click.ctrl="doSomething">Do something</div>
+
+```
+
diff --git a/vue/8-表单输入绑定.md b/vue/8-表单输入绑定.md
new file mode 100644
index 0000000..2eb3748
--- /dev/null
+++ b/vue/8-表单输入绑定.md
@@ -0,0 +1,27 @@
+## v-model
+
+```html
+<div id="example-6">
+	<select v-model="selected">
+      <option v-for="option in options" v-bind:value="option.value">
+        {{ option.text }}
+      </option>
+    </select>
+    <span>Selected: {{ selected }}</span>
+</div>
+```
+
+```js
+new Vue({
+  el: 'example-6',
+  data: {
+    selected: 'A',
+    options: [
+      { text: 'One', value: 'A' },
+      { text: 'Two', value: 'B' },
+      { text: 'Three', value: 'C' }
+    ]
+  }
+})
+```
+
diff --git a/vue/9-组件基础.md b/vue/9-组件基础.md
new file mode 100644
index 0000000..f84e1e0
--- /dev/null
+++ b/vue/9-组件基础.md
@@ -0,0 +1,56 @@
+- 因为组件是可复用的 Vue 实例，所以它们与 `new Vue` 接收相同的选项，例如 `data`、`computed`、`watch`、`methods` 以及生命周期钩子等。仅有的例外是像 `el` 这样根实例特有的选项。
+- 一个组件的 `data` 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
+- 通过prop向组件传递数据，`v-on` 监听子组件实例的任意事件
+- [从一个 API 获取博文列表](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-component-blog-post-example)
+
+```js
+// 定义一个名为 button-counter 的新组件
+Vue.component('button-counter', {
+  data: function () {
+    return {
+      count: 0
+    }
+  },
+  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
+})
+
+Vue.component('blog-post', {
+  props: ['title'],
+  template: '<h3>{{ title }}</h3>'
+})
+```
+
+```html
+<div id="components-demo">
+  <button-counter></button-counter>
+</div>
+
+<blog-post title="My journey with Vue"></blog-post>
+<blog-post title="Blogging with Vue"></blog-post>
+<blog-post title="Why Vue is so fun"></blog-post>
+
+<blog-post
+  v-for="post in posts"
+  v-bind:key="post.id"
+  v-bind:title="post.title"
+></blog-post>
+```
+
+```html
+new Vue({ el: '#components-demo' })
+
+new Vue({
+  el: '#blog-post-demo',
+  data: {
+    posts: [
+      { id: 1, title: 'My journey with Vue' },
+      { id: 2, title: 'Blogging with Vue' },
+      { id: 3, title: 'Why Vue is so fun' }
+    ]
+  }
+})
+```
+
+## [动态组件](https://cn.vuejs.org/v2/guide/components.html#动态组件)
+
+https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-dynamic-components
\ No newline at end of file
diff --git a/vue/erp-web.md b/vue/erp-web.md
new file mode 100644
index 0000000..b0cd7e5
--- /dev/null
+++ b/vue/erp-web.md
@@ -0,0 +1,109 @@
+### 目录查看
+
+1. node_modules：安装依赖打包
+2. public：图片文件，index.html
+3. src:
+   1. api:调用接口使用的js文件
+   2. assets:图片文件
+   3. components：vue组件文件页面处理
+4. config：request.js，请求配置token设置。
+5. filters：index.js，时间格式化，变量转换。
+6. router：
+   1. index.js,从接口获取路由配置之
+   2. index备份.js：配置路由备份
+   3. permission.js：权限校验是否有token，遍历路由权限校验
+   4. router.config.js：免密登录白名单
+7. store:用户信息和权限处理
+   1. nodules/user.js
+   2. getters.js
+   3. index.js
+8. styles：样式处理
+9. utils：工具类
+10. views
+    1. dashboard：页面排版vue
+    2. forgetPassowrd：fogetPassword.vue
+    3. login:login.vue
+    4. register:register.vue
+    5. webView:webView.vue
+11. App.vue
+12. main.js:websocket
+13. registerServiceWorker.js:生产环境配置
+14. .env不同环境变量配置
+15. label.config.js
+16. package.json：包管理,启动打包
+17. vue.config.js:
+
+vue-cli-service serve
+
+### 总结
+
+当配置baseURL时，代理不生效。
+
+```js
+const request = axios.create({
+  timeout: 30000, // 请求超时时间
+  baseURL: process.env.VUE_APP_URL,
+  withCredentials: true
+});
+
+proxy: {
+    '/': { // 代理api
+        target: 'http://localhost:8085', // 服务器api地址
+            changeOrigin: true//, // 是否跨域
+        // pathRewrite: {
+        //   '^/': 'http://qiankun.bj-fanuc.com.cn/finance-admin/charts/selectChartDataByPageModel' // 路径重写
+        // }
+    }
+}
+```
+
+## 启动跟踪
+
+```js
+npm run dev
+```
+
+文件：package.json
+
+```json
+"dev": "webpack-dev-server --inline --progress --module-bind production --config build/webpack.dev.conf.js "
+```
+
+文件：build/webpack.dev.conf.js
+
+```js
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    },
+    proxy: {
+      '/*': { // 代理api
+        target: 'http://localhost8080/', // 服务器api地址
+        changeOrigin: true, // 是否跨域
+        pathRewrite: {
+          '^/*': 'http://localhost:8081/' // 路径重写
+        }
+      }
+    }
+  },
+```
+
diff --git a/vue/img/lifecycle.png b/vue/img/lifecycle.png
new file mode 100644
index 0000000..f8cd62c
Binary files /dev/null and b/vue/img/lifecycle.png differ
diff --git a/vue/webpack打包.md b/vue/webpack打包.md
new file mode 100644
index 0000000..e9e6186
--- /dev/null
+++ b/vue/webpack打包.md
@@ -0,0 +1,98 @@
+## 基本参数
+
+[基本参数说明](https://webpack.docschina.org/concepts)
+
+1. 入口(entry)
+2. 输出(output)
+3. loader
+4. 插件(plugin)
+5. 模式(mode)
+6. 浏览器兼容性(browser compatibility)
+7. 环境(environment)
+
+## 默认配置
+
+1. 入口起点为 `src/index.js`
+2. 然后会在 `dist/main.js` 输出结果
+3. 并且在生产环境开启压缩和优化
+4. 通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 `webpack.config.js` 文件，然后 webpack 会自动使用它。
+
+[webpack.config.js配置](https://webpack.docschina.org/configuration)
+
+**“webpack 配置的可扩展”** 是指，这些配置可以重复使用，并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 [webpack-merge](https://github.com/survivejs/webpack-merge)）将它们合并起来。
+
+- 使用 JavaScript 控制流表达式，例如 `?:` 操作符
+- 精心编写的 **模块** 提供了可靠的抽象和封装界限，使得应用程序中每个模块都具备了条理清晰的设计和明确的目的。
+- 应保证 loader 的先后顺序：[`'style-loader'`](https://webpack.docschina.org/loaders/style-loader) 在前，而 [`'css-loader'`](https://webpack.docschina.org/loaders/css-loader) 在后
+
+## 基础文件
+
+1. index.html是主入口
+2. app.js是我们写的模块,并依据CommonJS规范导出这个模块
+3. main.js其实是一个组件,它的目的是将我们写的一些代码模块返回并插入到页面中
+
+ 不兼容问题升级
+
+```js
+npm i -D html-webpack-plugin@webpack-contrib/html-webpack-plugin
+
+```
+
+临时删除一些错误包
+
+```
+    "eslint-loader": "^2.0.0",
+        "element-ui": "^2.15.7",
+            "less-loader": "6.0.0",
+                "jest": "^27.4.5",
+    "jest-serializer-vue": "^0.3.0",
+        "babel-jest": "^27.4.5",
+            "vue-jest": "^1.0.2",
+              "friendly-errors-webpack-plugin": "2.0.0-beta.2",  
+                  "uglifyjs-webpack-plugin": "2.2.0",
+                      "babel-plugin-transform-runtime": "^7.14.0",
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-transform-runtime": "7.12.13",
+    "@babel/preset-env": "^7.16.7",
+    "babel-eslint": "^10.0.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-vue-jsx": "4.0.1",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    
+    "@babel/preset-env":"7.16.7"
+        "babel-plugin-react-intl": "^8.2.15",
+        
+        
+    npm instal babel-preset-env
+    npm install babel-preset-stage-2
+    
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-plugin-transform-vue-jsx": "^4.0.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-2": "^6.24.1",
+    
+    
+    -----------------------------------
+        "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.7",
+    "babel-loader": "^8.2.3",
+    "babel-preset-stage-2": "7.0.0-beta.3",
+    "babel-runtime": "6.26.0",
+    
+        "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-plugin-transform-vue-jsx": "^3.7.0",
+    "babel-preset-env": "^1.7.0",
+        "@babel/preset-stage-2": "^7.8.3",
+    
+    
+    
+TypeError: src/main.js: this.setDynamic is not a function
+```
+
diff --git a/vue/websocket.html b/vue/websocket.html
new file mode 100644
index 0000000..cec4c89
--- /dev/null
+++ b/vue/websocket.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>WebSocket</title>
+</head>
+<body>
+    <script>
+        var ws = new WebSocket("ws://192.168.60.109:8081/socket/123");
+        ws.onopen = function() {
+            document.write('<span>ws: ' + ws.url + ' opened</span><br/>');
+            ws.send('Hello, websocket!');
+        };
+        ws.onmessage = function(evt) {
+            document.write('<span>ws: '+ evt.data + '</span><br/>');
+        };
+        ws.onclose = function(evt) {
+            document.write('<span font="yellow">ws: closed</span><br/>');
+            console.log(evt);
+        };
+        ws.onerror = function(evt) {
+            document.write('<span font="darkred">ws: closed</span><br/>');
+            console.log(evt);
+        };
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/vue/深入了解组件/1-组件注册.md b/vue/深入了解组件/1-组件注册.md
new file mode 100644
index 0000000..87b7883
--- /dev/null
+++ b/vue/深入了解组件/1-组件注册.md
@@ -0,0 +1,36 @@
+组件类似与java中的类(对象)。
+
+#### 全局组件
+
+```js
+Vue.component('component-a', { /* ... */ })
+Vue.component('component-b', { /* ... */ })
+Vue.component('component-c', { /* ... */ })
+
+new Vue({ el: '#app' })
+```
+
+```html
+<div id="app">
+  <component-a></component-a>
+  <component-b></component-b>
+  <component-c></component-c>
+</div>
+```
+
+#### 局部组件
+
+```js
+var ComponentA = { /* ... */ }
+var ComponentB = { /* ... */ }
+var ComponentC = { /* ... */ }
+
+new Vue({
+  el: '#app',
+  components: {
+    'component-a': ComponentA,
+    'component-b': ComponentB
+  }
+})
+```
+

+ 条件渲染{loadData()} +

行内样式

类样式

类样式