Startseite Erkunden Hilfe
Anmelden
Testaccount
/
1.Test
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

yb

Yangbing vor 1 Jahr
Ursprung
5bbdc1ea42
Commit
305b9af302
8 geänderte Dateien mit 400 neuen und 0 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 50 0
      yangbing/react/10_props.html
  2. 35 0
      yangbing/react/11_类组件创建.html
  3. 58 0
      yangbing/react/12_state.html
  4. 52 0
      yangbing/react/5_jsx-事件处理1.html
  5. 57 0
      yangbing/react/6_jsx-事件处理2.html
  6. 39 0
      yangbing/react/7_jsx-事件处理3.html
  7. 64 0
      yangbing/react/8_jsx-事件处理4.html
  8. 45 0
      yangbing/react/9_函数组件创建.html

+ 50 - 0
yangbing/react/10_props.html
Datei anzeigen 

@@ -0,0 +1,50 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+     <!-- 引入文件  *顺序不能改变-->
 
+    <!-- 将jsx转为js -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- react中的dom操作库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="root"></div>
 
+    <!-- 单项数据流 props 推荐父级向子级传递 只读 -->
 
+    <script type="text/babel">
 
+        function Father(props){
 
+            console.log(props,'这个是父级内容')
 
+            return(
 
+                <div style={{border:"2px solid #0e7fc7", padding:"10px"}}>
 
+                    <p>父级标签</p>
 
+                    <Child name='张三' age='8'/>
 
+                    </div>
 
+            )
 
+        }
 
+        function Child(props){
 
+            console.log(props,'这个是子级内容')
 
+            return(
 
+                <div style={{border:"2px solid #e83c09", padding:"10px"}}>
 
+                    <p>子级标签</p>
 
+                    <p>{props.name}是我的名字</p>
 
+                    <p>{props.age}是我的年龄</p>
 
+                    <button onClick={()=>{
 
+                        handleClick(props)
 
+                    }}>获取内容</button>
 
+                    </div>
 
+            )
 
+        }
 
+        function handleClick(props){
 
+            console.log(props,'显示')
 
+        }
 
+        let things =<Father/>
 
+        ReactDOM.createRoot(document.querySelector("#root")).render(things)
 
+
 
+    </script>
 
+
 
+</body>
 
+</html>

+ 35 - 0
yangbing/react/11_类组件创建.html
Datei anzeigen 

@@ -0,0 +1,35 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 引入文件  *顺序不能改变-->
 
+    <!-- 将jsx转为js -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- react中的dom操作库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        // 类组件 遵从es6规范 可以修改=>state
 
+        class Fath extends React.Component {
 
+            render() {
 
+                return (
 
+                    <div style={{ border: "2px solid #0e7fc7", padding: "10px" }}>
 
+                        <p>父级标签</p>
 
+                    </div>
 
+                );
 
+            }
 
+        }
 
+        let element = <Fath/>
 
+        ReactDOM.createRoot(document.querySelector("#root")).render(element);
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 58 - 0
yangbing/react/12_state.html
Datei anzeigen 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 引入文件  *顺序不能改变-->
 
+    <!-- 将jsx转为js -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- react中的dom操作库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        // 类组件 state 可以修改数据
 
+        // 计数器
 
+        class HandleCount extends React.Component {
 
+            // 定义初始数值
 
+            state = {
 
+                title: "计数器",
 
+                count: 0,
 
+            };
 
+            // 数据更新视图未变
 
+            //vue的解决方案：vue.set() 或 this.$set
 
+            // react解决方案：
 
+            handleAdd() {
 
+                this.setState({
 
+                    count:this.state.count + 1,
 
+                });
 
+            }
 
+            handleReduce = ()=>{
 
+                console.log(this)
 
+                this.setState({
 
+                    count:this.state.count -1,
 
+                });
 
+            }
 
+            render() {
 
+                return (
 
+                    <div>
 
+                        <h1>{this.state.title}</h1>
 
+                        <p>当前数值：{this.state.count}</p>
 
+                        <button onClick={this.handleAdd.bind(this)}>+</button>
 
+                        <button onClick={this.handleReduce}>-</button>
 
+                    </div>
 
+                )
 
+            }
 
+        }
 
+        let element = <HandleCount/>
 
+        ReactDOM.createRoot(document.querySelector("#root")).render(element);
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 52 - 0
yangbing/react/5_jsx-事件处理1.html
Datei anzeigen 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 引入文件  *顺序不能改变-->
 
+    <!-- 将jsx转为js -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- react中的dom操作库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <!-- document.querySelect(".btn").onclick -->
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        // 点击事件
 
+        // react中 事件处理onXXX 驼峰命名法
 
+        // 点击事件 onClick
 
+        // change事件 onChange
 
+        // 提交事件 onSubmit
 
+
 
+        function handleClick() {
 
+            console.log("点击了")
 
+        }
 
+        function handleChange(e) {
 
+            console.log("改变了", e.target.value)
 
+        }
 
+        function handleSubmit(e) {
 
+            alert("提交了")
 
+        }
 
+        let didid = (
 
+            <div>
 
+                <button onClick={handleClick}>这是一个按钮</button>
 
+                {/*<div class="btn">点击事件</div>*/}
 
+                <br />
 
+                <input type="text" onChange={handleChange} />
 
+                <br />
 
+                <form onSubmit={handleSubmit}>
 
+                    <button>提交</button>
 
+                </form>
 
+            </div>
 
+        )
 
+        ReactDOM.createRoot(document.querySelector('#root')).render(didid)
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 57 - 0
yangbing/react/6_jsx-事件处理2.html
Datei anzeigen 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 引入文件  *顺序不能改变-->
 
+    <!-- 将jsx转为js -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- react中的dom操作库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <!-- document.querySelect(".btn").onclick -->
 
+    <div id="root"></div>
 
+    <script type="text/babel">
 
+        // 点击事件
 
+        // react中 事件处理onXXX 驼峰命名法
 
+        // 点击事件 onClick
 
+        // change事件 onChange
 
+        // 提交事件 onSubmit
 
+
 
+        function handleClick() {
 
+            console.log("点击了")
 
+        }
 
+        function handleChange(e) {
 
+            console.log("改变了", e.target.value)
 
+        }
 
+        function handleSubmit(e) {
 
+            // alert("提交了")
 
+            // 阻止事件默认行为  e.preventDefault();
 
+            // 阻止事件冒泡  e.stopPropagation();
 
+
 
+            e.preventDefault();
 
+            console.log("提交了")
 
+        }
 
+        let didid = (
 
+            <div>
 
+                <button onClick={handleClick}>这是一个按钮</button>
 
+                {/*<div class="btn">点击事件</div>*/}
 
+                <br />
 
+                <input type="text" onChange={handleChange} />
 
+                <br />
 
+                <form onSubmit={handleSubmit}>
 
+                    <button>提交</button>
 
+                </form>
 
+            </div>
 
+        )
 
+        ReactDOM.createRoot(document.querySelector('#root')).render(didid)
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 39 - 0
yangbing/react/7_jsx-事件处理3.html
Datei anzeigen 

@@ -0,0 +1,39 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 引入文件  *顺序不能改变-->
 
+    <!-- 将jsx转为js -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- react中的dom操作库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="root"></div>
 
+    <div id="btn">这是第一个按钮</div>
 
+     <!-- this指向:
 
+            方法中this指向当前标签
 
+            改变this指向方法
 
+                1.bind
 
+                2.箭头函数 ()=>{}
 
+    -->
 
+    <script type="text/babel">
 
+        function onClick(){
 
+            console.log(this)
 
+        }
 
+        // 第一种
 
+        document.getElementById("btn").onclick = onClick;
 
+        var aaa = {name:"My name is dida"};
 
+        // 改变this指向 ：call apply bind
 
+        
+        // 第二种
 
+        let element=<div onClick={onClick.bind(aaa)}>这是第二个按钮</div>
 
+        let newPath = ReactDOM.createRoot(document.getElementById('root'))
 
+        newPath.render(element)
 
+    </script>
 
+</body>
 
+</html>

+ 64 - 0
yangbing/react/8_jsx-事件处理4.html
Datei anzeigen 

@@ -0,0 +1,64 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 引入文件  *顺序不能改变-->
 
+    <!-- 将jsx转为js -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- react中的dom操作库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <div id="root"></div>
 
+    <div id="btn">这是一个按钮</div>
 
+    
+    <script type="text/babel">
 
+        function onClick() {
 
+            console.log(this)
 
+        }
 
+        function handleClick1(e) {
 
+            console.log(this, '正常') //undefined
 
+            console.log(e, '事件') //存在事件对象
 
+        }
 
+        // 解构接受参数
 
+        function handleClick2(e, ...user) {
 
+            console.log(e.target)
 
+            console.log(...user)
 
+        }
 
+        function handleClick3(e) {
 
+            console.log(e)
 
+            // console.log(id)
 
+        }
 
+        document.getElementById("btn").onclick = onClick;
 
+        var aaa = { name: "My name is dage" };
 
+        // 改变this指向：call bind apply
 
+        // 第二种
 
+        //  let element = <div onClick={onClick.bind(aaa)}>这是第二个按钮</div>
 
+        let element = (
 
+            <div>
 
+                <p onClick={handleClick1.bind(aaa)}>事件1</p>
 
+                {/*套壳*/}
 
+                <p onClick={(e)=>{
 
+                    handleClick2(e,3,444,555)
 
+                }}>事件2</p>
 
+                <p onClick={handleClick3.bind(null, 444)}>事件3</p>
 
+                {/*null不占位*/}
 
+            </div>
 
+        )
 
+        let newPage = ReactDOM.createRoot(document.querySelector("#root"));
 
+        newPage.render(element)
 
+        {/**
 
+            默认传递事件对象
 
+            bind虽然可以改变this指向 但是位置固定并不灵活
 
+            箭头函数 可以套壳比较灵活
 
+        */}
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 45 - 0
yangbing/react/9_函数组件创建.html
Datei anzeigen 

@@ -0,0 +1,45 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 引入文件  *顺序不能改变-->
 
+    <!-- 将jsx转为js -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- react中的dom操作库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+
 
+<body>
 
+    <div id="root"></div>
 
+    <!-- 组件：类组件  函数组件 -->
 
+    <script type="text/babel">
 
+        // 这是一个函数组件  首写字母要大写
 
+        // null undefined boolean Object 无法渲染
 
+        function hunshu() {
 
+            return (
 
+                <div>
 
+                    <h3>今天真的好冷</h3>
 
+                    {[1,2,3]} {/*对象*/}
 
+                    {null}
 
+                    {undefined}
 
+                    {'helloword'}
 
+                    {false}
 
+                    {true}
 
+                    {123456}
 
+                    {/**
 
+                    {{aaa:'啦啦啦啦'}} 无法渲染  报错
 
+                    */}
 
+                </div>
 
+            )
 
+        }
 
+        let element = <New/>
 
+        ReactDOM.createRoot(document.querySelector("#root")).render(element);
 
+    </script>
 
+</body>
 
+
 
+</html>