自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(21)
  • 收藏
  • 关注

原创 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 618 1

原创 react之子组件向父组件传递数据

在父组件中定义一个事件函数,并将这个函数以属性的方式传递给子组件,在子组件中调用这个函数并将要传递的数据作为参数传递过去。 父组件: import React from "react"; import CommentList from "./CommentList"; import CommentForm from "./CommentForm"; class CommentBox exte...

2020-03-24 23:00:49 528

原创 表单数据的双向绑定

通常需要获取用户在表单内填写的信息,实现对于用户数据的获取并上传,因此表单数据的绑定十分重要,这次我们将对单选,下拉,输入分别进行数据的绑定。 双向绑定的方法: 1、绑定表单的value属性值到state中的变量。 2、监听表单控件的onChange事件,当表单发生变化的时候触发绑定事件函数。 3、利用绑定事件传入的event.target获取变化事件对象,通过event.target.valu...

2020-03-23 22:37:50 945

原创 React的生命周期

初始化阶段(intialization) constructor(): 实现组件对象状态state函数的初始化,包括props, state,在这个生命周期的函数中,一般做一些state的初始化。类比Vue中的created 挂载阶段(mounting) componentWillMount(): 在DOM元素挂载前,此时state的变化不会引起DOM的变化,因为DOM元素还没有被渲染挂载。...

2020-03-21 22:36:55 174

原创 React的上下文Context

Context React.createContext(): 用于创建一个上下文 Provider: 用于为组件树提供特定的上下文 Consumer: 在组件树内获取特定的上下文内容 Context简单的使用方法 import React, { Component } from "react"; // 创建两个不同的上下文 const ComponentTreeParam = React....

2020-03-20 22:14:22 144

原创 列表数据渲染

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 283

原创 组件间传参

父组件传子组件 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 182

原创 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 136

原创 react之动态参数设置

两种动态参数的设置 state查询 setState改变参数 Ⅰ、state进行查询 // App.js class Content extends Component { constructor(props) { super(props); this.state = { content: '123' }; } render() { ...

2020-03-16 22:15:09 1889

原创 react之index.js

先创建一个react工程 create-react-app first-react cd first-react npm start 我们打开目录下的index.js文件,从入口文件开始认识react // index.js import React from 'react'; // ReactDom用于页面渲染 import ReactDOM from 'react-dom'; // ind...

2020-03-12 21:49:52 2985 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 207

原创 循环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 220

原创 钩子函数

钩子函数 1.beforeCreate 在实例初始化之后,数据观测(data observer)和 event/watcher 事件配置之前被调用。 2.created 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observer)、属性和方法的运算、watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 3.beforeMount ...

2020-03-09 22:26:01 294

原创 命令方式操作nginx

(1) 默认方式启动nginx nginx 因为配置好了环境变量,系统能够通过PATH中的路径找到nginx的二进制可执行文件,执行时,读取默认路径下的配置文件,即/usr/local/nginx/conf目录 (2) 另行指定配置文件的启动方式,使用 -c 选项 nginx -c /tmp/nginx.conf,nginx启动时,通过读取/tmp/nginx.conf配置文件来启动nginx (...

2020-03-07 21:30:42 229

原创 数据绑定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 1671

原创 vue过滤器

vue过滤器: vue.js允许你自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持) 过滤器应该被放在JavaScript的尾部,由“管道符 | ”指示。 <!-- 在双花括号中 --> {{ message | 过滤器名称 }} <!-- 在 `v-bind` 中 --> &lt...

2020-03-05 21:45:19 129

原创 vue指令

vue指令 Vue 指令都是以v-xxx的形式表示,就是html页面的属性 <div v-xxx> </div> 常用的Vue的指令 v-text: 元素的innerHtml属性,必须是双标签 v-html 元素的innerHtml属性 v-if 判断是否插入元素 v-else-if v-else v-show 隐藏元素,如果确定要隐藏,会给元素的style添加displ...

2020-03-04 22:04:15 133

原创 父子组件

父组件用子组件 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 209

原创 vue组件

Vue组件 什么是组件 组件的概念:组件即自定义控件,是Vue.js最强大的功能之一 组件的用途:组件能够封装可重用代码,扩展html标签功能 组件的本质:自定义标签 组件的分类 全局组件:不同作用域内均可使用 局部组件:只在定义该组件的作用域内使用 全局组件 建议:组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。 定义位置:创建实例前定义全局组...

2020-03-03 09:14:42 119

原创 如何将一个盒子显示在浏览器中间

如何将一个盒子显示在浏览器的正中间 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 2597

原创 CSS中常见的选择符

CSS中基础常见选择符 CSS样式由两部分组成,分别是选择符和声明。其中声明由属性和属性值组成 选择符{属性:属性值;} CSS基础选择符: 选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或者制定名称的元素. 类型选择符/元素选择符/标签选择器(element选择器) 语法:标签名称{属性:属性值;} 类型选择符是根据html语言中的标记来直接定义 说明: 类型选择符就是网页元素...

2020-02-24 18:56:22 1502

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除