自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

小羽向前跑

前端工程师,产品爱好者

原创 react 渲染富文本中的标签内容

假设拉取下来的是富文本携带html标签的内容应该如何渲染到页面: 例:<div>我是富文本内容</div> 在标签上使用dangerouslySetInnerHTML={{__html:this.state.article}} import React, { Com...

2020-02-18 17:56:11

阅读数 2

评论数 0

原创 react 做一个点赞按钮组件

点击按钮,喜欢或者取消 小图标用的是https://emojipedia.org/这个网站的 直接复制使用即可 创建组件Like.js 一开始设置为黑色false,isLiked如果为true渲染红心,false渲染黑心 setState时用了两种方法 import React, ...

2020-02-18 17:52:13

阅读数 2

评论数 0

原创 react 父子传值

创建父组件Demofather.js 第一种传值:在子元素标签上 title='待办事项' x={1} 字符串可以用" "引号传递 数字类型用{}大括号传递 子组件标签内部可以传递任何数据,react将自动生成props.children数据 i...

2020-02-18 16:01:42

阅读数 8

评论数 0

原创 react 中使用less

首先 npminstallless-loaderless--save-dev 安装之后终端 npmruneject来暴露webpack的配置文件,如果报错: Remove untracked files, stash or commit any changes, and try again....

2020-02-18 12:28:54

阅读数 0

评论数 0

原创 react jsx语法

//调用react下面的createElement方法,传入第一个参数是tag //第二个是属性,第三个是子元素集合 import React from 'react' let JsxDemo =( <div className='app...

2020-02-18 08:44:07

阅读数 1

评论数 0

原创 react hooks useState

react-hooks写法 直接用函数形式完成()=>{setCount(count+1)} useState是react自带的一个hook函数,它的作用是用来声明状态变量 useState的用法,分别是声明、读取、使用(修改) useState这个函数接收的参数是状态的初始值 R...

2020-02-18 08:34:08

阅读数 1

评论数 0

原创 react hooks useReducer

import React, { useReducer } from 'react'; function ReducerDemo(){ const [ count , dispatch] =useReducer((state,action)=>{ ...

2020-02-18 08:18:33

阅读数 0

评论数 0

原创 react hooks useContext

父子传值 跨层级传值 父组件引入并创建createContext,子组件引入useContext import React, { useState , createContext ,useContext } from 'react'; const CountContex...

2020-02-18 08:11:32

阅读数 0

评论数 0

原创 react hooks useEffect

useEffect代替生命周期函数componentDidMount页面加载和componentDidUpdate页面更新 //useEffect代替生命周期函数 componentDidMount页面加载和componentDidUpdate页面更新 import React, { use...

2020-02-18 08:05:31

阅读数 3

评论数 0

原创 react Refs使用

//Refs使用,绑定dom元素,ref 不能设置在无状态组件上 //不要在 render 或者 render 之前访问 refs import React, { Component } from 'react'; class Refsdemo extends Compone...

2020-02-17 20:16:52

阅读数 28

评论数 0

原创 react 按条件渲染内容

//按条件渲染内容 && 数组大于0时,渲染 import React from 'react' //判断数组length大于0时,渲染未读消息 //0条时不渲染未读消息 function Choice() { const messages = [...

2020-02-17 20:12:25

阅读数 3

评论数 0

原创 react 跟踪表单的值

//跟踪表单的值 import React, { Component } from 'react'; class FlavorForm extends Component { constructor(props) { super(props); ...

2020-02-17 20:10:10

阅读数 15

评论数 0

原创 react 路由小案例

父组件AppRouter import React from 'react' //BrowserRouter as Router 给BrowserRouter起名Router 方便使用 import {BrowserRouter as Router, Route, Link...

2020-01-16 13:45:39

阅读数 51

评论数 0

原创 vscode常用快捷键总结

Ctrl+Shift+P,F1 展示全局命令面板 Ctrl+P 快速打开最近打开的文件 Ctrl+Shift+N 打开新的编辑器窗口 Ctrl+Shift+W 关闭编辑器 Ctrl + X 剪切 Ctrl + C 复制 Alt + up/down 移动行上下 Shift + Alt ...

2020-01-06 16:50:16

阅读数 11

评论数 0

原创 vue 配置baseurl

config文件夹下新建global.js const BASE_URL = 'http://xxxxxxx' export default { BASE_URL } main.js添加到全局 import global_ from '../config...

2020-01-02 10:27:53

阅读数 20

评论数 0

原创 vue 移动端无限瀑布流 插件使用

瀑布流插件: importwaterfallfrom'vue-waterfall2' Vue.use(waterfall) <div class="seat_box"> <div class="se...

2019-12-27 15:02:24

阅读数 44

评论数 0

原创 vue 表单 单选 切换样式

<div class="form_input"> <span>性别</span> <label class="sex sex1" v-bind:class="{ act...

2019-12-27 13:40:38

阅读数 12

评论数 0

原创 vue 设置整屏背景色 音乐播放

<template> <div class="gif"> <!-- <p class="count">{{count}}</p> --> <div @click=&...

2019-12-27 11:26:46

阅读数 10

评论数 0

原创 ts 数组的类型

let fibonacci: number[] = [1, 1, 2, 3, 5]; //数组的项中不允许出现其他的类型: // let fibonacci: number[] = [1, '1', 2, 3, 5]; 报错 //一个比较常见的做法是,用 any 表示数...

2019-12-26 17:08:51

阅读数 14

评论数 0

原创 ts数据类型

//数据类型 //我们用 : 指定 person 参数类型为 string function sayHello(person: string) { return 'Hello, ' + person; } let user = 'Tom'; con...

2019-12-26 17:07:58

阅读数 10

评论数 0

原创 ts 学习1

npminstall-gtypescript vscode写ts文件报错: tsc-init会在目录下生成一个tsconfig.json文件可识别.ts文件 编译一个TypeScript文件很简单: tschello.ts 编译后会自动生成对应的js文件 用TypeScript编写Rea...

2019-12-26 17:06:47

阅读数 5

评论数 0

原创 ts 日期对象

//不传参 let d:Date = new Date() //传递一个整数 let b:Date = new Date(1000) //从1970往后数1秒

2019-12-26 17:00:02

阅读数 30

评论数 0

原创 ts 联合类型

//联合类型(Union Types)表示取值可以为多种类型中的一种。 let myFavoriteNumber3: string | number; myFavoriteNumber3 = 'seven'; myFavoriteNumber3 = 7; //当 Typ...

2019-12-26 16:55:35

阅读数 9

评论数 0

原创 ts 类型推论

//类型推论 //TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论 // let myFavoriteNumber = 'seven'; // myFavoriteNumber = 7; 会报错 //如果定义的时候没有赋值, //...

2019-12-26 16:52:35

阅读数 25

评论数 0

原创 ts 接口

//我们定义了一个接口 Person,接着定义了一个变量 tom,它的类型是 Person。 //这样,我们就约束了 tom 的形状必须和接口 Person 一致。 interface Person { name:string; age:number; } let tom: P...

2019-12-26 16:50:49

阅读数 5

评论数 0

原创 ts 函数的类型

function sum(x: number, y: number): number { return x + y; } //输入多余的(或者少于要求的)参数,是不被允许的: //sum(1, 2, 3); 报错 //sum(1); 报错 //在 TypeScript 的类型定义中...

2019-12-26 16:47:05

阅读数 6

评论数 0

原创 vue package.json项目名 只能设置小写 办法

公司要求vue修改cil的package.json项目名称 ,name名,要求中文; npm的文档写只写是小写英文 要求如下: 最少配置项, package.json 必须包括以下几项: "name" 全部为小写字母 一个单词,无空格 允许半角破折号和下划线 ...

2019-12-26 16:31:16

阅读数 15

评论数 0

原创 vue 循环遍历背景图

//循环背景图获取index <template> <div id="app"> <div class='pic' v-for="(item,index) in list"...

2019-12-25 17:41:57

阅读数 25

评论数 0

原创 vue todolist

父组件todo.vue <template> <section class="real-app"> <headers></headers> <input ...

2019-12-25 17:05:13

阅读数 13

评论数 0

原创 vue 插槽 作用域插槽 控制同一子组件视图不同

爷爷组件.vue //父组件传值,控制相同子组件内部不同变化 <template> <div id="app"> <!-- son组件 --> <son :show="false"> ...

2019-12-25 16:23:59

阅读数 5

评论数 0

原创 vue 修饰符

//修饰符 <template> <div id="example-3"> <!-- lazy在“change”时而非“input”时更新 --> <input v-model.lazy="msg"&g...

2019-12-25 15:46:53

阅读数 7

评论数 0

原创 vue 小知识 不同元素绑定同一事件 传值

//不同元素绑定同一事件 传值 <template> <div id="example-3"> <button v-on:click="say('hi')">Say hi</button&...

2019-12-25 15:25:08

阅读数 11

评论数 0

原创 vue 通过router路由控制 同一组件router-view视图显示位置

/app路径下视图显示: /login路径下视图显示: app.vue组件视图: 使用name属性 <template> <div id="app"> <!-- 使用命名视图 控制同一个路径的视图显示位置 --> ...

2019-12-25 15:15:56

阅读数 15

评论数 0

原创 vue 小知识点 声明式渲染 鼠标悬停显示信息

// 声明式渲染 鼠标悬停显示信息 <template> <div id="app2"> <span :title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </spa...

2019-12-25 14:45:12

阅读数 7

评论数 0

原创 vue 小知识点 循环JSON数据 v-pre

<template> <div id="app"> <ul> <li v-for="(val, key,index) in obj" :key='index'> ...

2019-12-25 14:42:11

阅读数 7

评论数 0

原创 子元素相对于父元素固定定位

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"...

2019-12-25 09:45:53

阅读数 32

评论数 0

原创 异步笔试题

1 //请写出输出内容 async function async1() { console.log('async1 start'); ---2 await async2(); --遇到await跳出 console.log('asy...

2019-12-18 13:54:49

阅读数 8

评论数 0

原创 css面试题

BFC是什么? BFC,块状格式化上下文,其实是一个隔离的独立盒子(容器),他有以下特性: 容器里面的子元素不会影响到外面的元素,容器外的元素也不会影响到里面 BFC容器会一个挨着一个排列 计算BFC的高度时,浮动元素也参与计算 BFC的区域不会与float box重叠 怎样触发(创建)...

2019-12-18 10:36:23

阅读数 11

评论数 0

原创 echarts 可视化数据展示 横柱状图2

效果 代码 initChart7() { // 带阴影柱状图 var option = { grid: { left: "left", right: "...

2019-12-14 13:43:47

阅读数 5

评论数 0

原创 echarts 可视化数据展示 竖柱状图

效果 initChart6() { // 竖直柱状图 var option = { grid:{ x:20, y:20, x2:20, ...

2019-12-14 11:31:52

阅读数 7

评论数 0

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