- 博客(21)
- 收藏
- 关注
RSS订阅原创 react之antd表单
Ant Design Form组件提供了一个create方法，使用form.create()(component)处理之后的component 会接收到一个props.form，使用props.form下的一系列方法，便可以很方便的写出具备自动校验功能的表单。import {Form} from 'antd' class LoginForm extends React.Component{...
2020-03-25 23:06:18
592
1
原创 react之子组件向父组件传递数据
在父组件中定义一个事件函数，并将这个函数以属性的方式传递给子组件，在子组件中调用这个函数并将要传递的数据作为参数传递过去。父组件：import React from "react";import CommentList from "./CommentList";import CommentForm from "./CommentForm";class CommentBox exte...
2020-03-24 23:00:49
510
原创 表单数据的双向绑定
通常需要获取用户在表单内填写的信息，实现对于用户数据的获取并上传，因此表单数据的绑定十分重要，这次我们将对单选，下拉，输入分别进行数据的绑定。双向绑定的方法:1、绑定表单的value属性值到state中的变量。2、监听表单控件的onChange事件,当表单发生变化的时候触发绑定事件函数。3、利用绑定事件传入的event.target获取变化事件对象，通过event.target.valu...
2020-03-23 22:37:50
933
原创 React的生命周期
初始化阶段(intialization)constructor():实现组件对象状态state函数的初始化，包括props, state,在这个生命周期的函数中，一般做一些state的初始化。类比Vue中的created挂载阶段(mounting)componentWillMount():在DOM元素挂载前,此时state的变化不会引起DOM的变化，因为DOM元素还没有被渲染挂载。...
2020-03-21 22:36:55
165
原创 React的上下文Context
ContextReact.createContext(): 用于创建一个上下文Provider: 用于为组件树提供特定的上下文Consumer: 在组件树内获取特定的上下文内容Context简单的使用方法import React, { Component } from "react";// 创建两个不同的上下文const ComponentTreeParam = React....
2020-03-20 22:14:22
133
原创 列表数据渲染
class ListRender extends Component { constructor(props) { super(props); this.state = { userInfo: [ { name: 'tom', age: 18, habbits: 'baseball' }, { name: 'jerry', age: ...
2020-03-19 22:33:45
275
原创 组件间传参
父组件传子组件class Son extends Component { constructor(props) { super(props); this.state = { name: 'son' }; } clickBtn() { this.props.callBack(this.state.name); } render...
2020-03-18 22:09:27
176
原创 react之事件绑定
class Content extends Component { constructor(props) { super(props); this.state = { content: '123', count: 0 }; this.addCount = this.addCount.bind(this); } componen...
2020-03-17 22:35:56
128
原创 react之动态参数设置
两种动态参数的设置state查询setState改变参数Ⅰ、state进行查询// App.jsclass Content extends Component { constructor(props) { super(props); this.state = { content: '123' }; } render() { ...
2020-03-16 22:15:09
1871
原创 react之index.js
先创建一个react工程create-react-app first-reactcd first-reactnpm start我们打开目录下的index.js文件，从入口文件开始认识react// index.jsimport React from 'react';// ReactDom用于页面渲染import ReactDOM from 'react-dom';// ind...
2020-03-12 21:49:52
2967
1
原创 事件绑定v-on
事件绑定v-on为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">逆转消息</button></div&g...
2020-03-11 21:55:33
200
原创 循环v-for
v-for 指令可以绑定数组的数据来渲染一个项目列表：<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> <!-- 也可以获得序号--> <li v-for="(todo,i) in ...
2020-03-10 21:51:46
211
原创 钩子函数
钩子函数1.beforeCreate在实例初始化之后，数据观测（data observer）和 event/watcher 事件配置之前被调用。2.created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer）、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。3.beforeMount...
2020-03-09 22:26:01
284
原创 命令方式操作nginx
(1) 默认方式启动nginxnginx因为配置好了环境变量，系统能够通过PATH中的路径找到nginx的二进制可执行文件，执行时，读取默认路径下的配置文件，即/usr/local/nginx/conf目录(2) 另行指定配置文件的启动方式，使用 -c 选项nginx -c /tmp/nginx.conf，nginx启动时，通过读取/tmp/nginx.conf配置文件来启动nginx(...
2020-03-07 21:30:42
217
原创 数据绑定v-bind与事件绑定v-on
数据绑定v-bind<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span></div>var app2 = new Vue({ el: '#app-2', data: { message: '页面加载...
2020-03-06 22:08:47
1658
原创 vue过滤器
vue过滤器：vue.js允许你自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)过滤器应该被放在JavaScript的尾部，由“管道符 | ”指示。<!-- 在双花括号中 -->{{ message | 过滤器名称 }} <!-- 在 `v-bind` 中 --><...
2020-03-05 21:45:19
123
原创 vue指令
vue指令Vue 指令都是以v-xxx的形式表示，就是html页面的属性<div v-xxx> </div>常用的Vue的指令v-text: 元素的innerHtml属性，必须是双标签v-html 元素的innerHtml属性v-if 判断是否插入元素v-else-ifv-elsev-show 隐藏元素，如果确定要隐藏，会给元素的style添加displ...
2020-03-04 22:04:15
122
原创 父子组件
父组件用子组件1、创建子组件模块2、在父组件中声明需要使用的子组件3、在父组件中使用子组件 <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> &...
2020-03-03 21:38:44
200
原创 vue组件
Vue组件什么是组件组件的概念：组件即自定义控件，是Vue.js最强大的功能之一组件的用途：组件能够封装可重用代码，扩展html标签功能组件的本质：自定义标签组件的分类全局组件：不同作用域内均可使用局部组件：只在定义该组件的作用域内使用全局组件建议：组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。定义位置：创建实例前定义全局组...
2020-03-03 09:14:42
110
原创 如何将一个盒子显示在浏览器中间
如何将一个盒子显示在浏览器的正中间1、通过CSS来实现1)position: absolute; top:50%; left:50%; margin-left:-101px; margin-top:-101px;2)position:absolute; left:0; top:0; right:0; bottom:0; margin:auto;2、通过JS来实现<script ...
2020-02-28 20:31:09
2582
原创 CSS中常见的选择符
CSS中基础常见选择符CSS样式由两部分组成，分别是选择符和声明。其中声明由属性和属性值组成选择符{属性:属性值;}CSS基础选择符： 选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.类型选择符/元素选择符/标签选择器（element选择器）语法：标签名称{属性：属性值;}类型选择符是根据html语言中的标记来直接定义说明：类型选择符就是网页元素...
2020-02-24 18:56:22
1491
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人