BBSMAX

react组件之非受控组件和高阶组件

非受控组件受控组件和非受控组件的区别 ----- value import React, { Component } from 'react' export default class extends Component { constructor (props) { super(props); this.state = { username: '吴大勋', password: '123465' } } render () { return ( <div> <h1>非受控组件&l

react之点语法（利用函数组件）

index.js import React, { Component } from 'react' import MyCom from './MyCom'; export default class extends Component { constructor (props) { super(props); } render () { return ( <div> <h1>高阶组件</h1> <MyCom.Coma /> <MyCom.Comb /&

react中的虚拟DOM，jsx，diff算法。让代码更高效

在react中当你的状态发生改变时,并不是所有组件的内容销毁再重建,能复用的就复用 react 组件其实就是按照层级划分的找到两棵任意的树之间最小的修改是一个复杂度为 O(n^3) 的问题. 你可以想象, 我们的例子里这不是容易处理的. React 用了一种简单但是强大的技巧, 达到了接近 O(n) 的复杂度. --- diff 算法 (以前是电脑的键盘坏了换一个电脑,现在是键盘坏了直接换键盘) React 仅仅是尝试把树按照层级分解. 这彻底简化了复杂度, 而且也不会失去很多, 因为 We

react中登录注册使用验证码验证

后端接口 var express = require('express'); var router = express.Router(); var User = require('./../sql/collection/users'); var sql = require('./../sql'); var utils = require('./../utils') var uuid = require('node-uuid'); var bcrypt = require('bcryptjs');

vue之头像管理思路

思路是在vant库中使用插件将上传的头像转码存入数据库中.每个用户存一个,不同用户就有不同的头像了.若数据库中没有头像,那么就给一个默认头像头像上传后端接口: var express = require('express'); var router = express.Router(); var Headimg = require('./../sql/collection/headimgs'); var sql = require('./../sql'); var uuid = require

vue之写发表评论思路

后端接口 var express = require('express'); const sql = require('../sql') const Comment = require('../sql/collection/comments') const User = require('../sql/collection/users') const uuid = require('node-uuid'); const utils = require('./../utils'); var rou

当后端人员未提供接口，前端人员该怎么测试 --mock

1.回顾 2.线上的mock http://rap2.taobao.org/ https://www.easy-mock.com/ 3.线上接口文档 Swagger https://swagger.io/ 4.react 文档 React 是一个用于构建用户界面的 JavaScript 库 4.1 元素.组件 const element = <h1>Hello, world!</h1>; // 既不是字符串也不是 HTML.被称为 JSX,是一个 JavaScript 的语法扩展

mapState, mapActions

<template> <div class="box"> <header class="header">分类头部</header> <div class="content"> <div class="kind"> <div class="left"> <ul> <li :class="kindin

put、delete、post、get四种传参方式

PUT: this.$http.put('url', { modifyTime:this.sizeForm.modifyTime, mqttRes:this.sizeForm.mqttRes, udpRes:this.sizeForm.udpRes, refId:this.sizeForm.refId, id:this.sizeForm.id } ).then POST: this.$http.post('url', { createTime:time, mqttRes:this.sizeFor

mixins使用混入引入组件，并可以使用公共函数。组件类同名函数可以替代公共函数。使用$ref获得子元素数据和元素dom节点。使用$parents获得父元素数据。slot插槽的使用

父组件: <template> <div class="box"> <Header > <div slot="left">你好</div> <div slot="right" @click="userFn">你好</div> </Header> <div class="content"> <h1

vue使用keep-alive出现的的activated和deactivated生命周期

<keep-alive>包裹的动态组件会被缓存,它是一个抽象组件,它自身不会渲染一个dom元素,也不会出现在父组件链中.当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 如<keep-alive>包裹两个组件:组件A和组件B.当第一次切换到组件A时,组件A的created和activated生命周期函数都会被执行,这时通过点击事件改变组件A的文字的颜色,在切换到组件B,这时组件A的

GIT 操作大全基于廖雪峰

命令显示从最近到最远的提交日志 git log / git log --pretty=oneline 回退到上一个版本:$ git reset --hard HEAD^ (用HEAD表示当前版本,也就是最新的提交1094adb...(注意我的提交ID和你的肯定不一样),上一个版本就是HEAD^,上上一个版本就是HEAD^^,当然往上100个版本写100个^比较容易数不过来,所以写成HEAD~100) 指定回到未来的某个版本:$ git reset --hard 1094a (版本号没必要

vue拖拽排序插件vuedraggable的使用附原生使用方法

Vue中使用先下载依赖: npm install vuedraggable -S 项目中引入 import draggable from 'vuedraggable' 注册 components: { draggable }, demo: <template> <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}"> &

监听watch踏坑之旅！！！vuex中如果数组发生变换但是用watch你监听不到

vuex: SET_INFO(state,info) { console.log('info',info) state.info.unshift(info) state.info.pop() console.log("newstate.info", state.info) } 监听: watch: { 'info': function (newval, oldval) { if (oldval != newval) { console.log('newval',newval) cons

有执行语句：console.log(fn2(2)[3])，补充函数，使执行结果为"hello"

function fn2(a){ return [1,2,3,"hello"];}console.log(fn2(2)[3])//hello 这个2是混淆视线的,即使没有这个2.函数依然可以正常执行. console.log(fn2()[3]) 就是求数组中的第四个值

window计时器函数

// 定时器: // 计时器 // 开启:setInterval() // 参数1:回调函数 // 参数2:毫秒数 // 功能:每个指定的毫秒数执行一次回调函数 demo: var t = setInterval(function(){ console.log("hello") }, 1000); // 清除:clearInterval() // 事件(条件触发) document.onclick = function(){ clearInterval(t); } // 延时器 //

jason数组实现页面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #content{ width: 1000px; margin: 300px auto; border: 1px solid #000; overflow: hidden; } .box{ border

ES5新增数组常见方法（indexof／forEach／map／filter）

新增的数组常见方法:以下说明中,红色为必选参数,蓝色为可选参数 1.indexOf(data,start); 用于返回某个数组或者字符串中规定字符或者字符串的位置: var arr = ["a","b","c","d","e"]; arr.indexOf("a"); //0 //返回当前查询字符所在的位置的下标,如果查询不到,返回-1,start表示从第几位开始查询. 2.forEach

字符串常见API(charCodeAt\fromCharCode)

1.myStr.charCodeAt(num) 返回指定位置的字符的Unicode(是字符编码的一种模式)编码. 2.String.fromCharCode() String的意思就是不能用自己定义的字符串名字来调用,只能用String来定义调用.接受一个或多个指定的Unicode值,然后返回一个或多个字符串.(把unicode编码转换为字符串). var str = "中国"; console.log(String.fromCharCode("0x4E2D"))

DOM选择器之元素节点选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con