2020年11月_Georgia fab

原创 react hooks （含router+store 全家桶！）

HOOK函数式组件的性能会更好，函数式组件没有this指向的问题，react在16.8以后推出了hook，解决了函数式组件无state和生命周期，ref的问题render使用高阶函数会使得组件有很多层的多余嵌套，HOOK中的render可以解决这个问题：App.js<Wrap render={()=>{ return ( <mark>test</mark> )}}>Wrap组件render(){ return th

2020-11-16 16:56:19 1423

原创 react-router基本使用笔记

是第三方开发的路由react-router官方文档react-router react-router-dom 这个会依赖上面的包，所以直接安装这个就好了router 三种渲染方式BrowserRouter是路由的根组件，只能接收一个子元素，定义了路由作用的范围import {BrowserRouter/*history模式*/,Route/*一个路由的配置项*/} from ' react-router-dom'···<BrowserRouter> /*Browser

2020-11-16 16:50:06 138

原创 vue2.x使用总结（扩展部分）

文章目录创建组件的方式动态组件组件分类组件对外API组件通信mixinsprovide / injectextend构造器$mount手动挂载递归组件render函数jsxfunctional rendererrorCaptured 异常捕获创建组件的方式//1.全局组件Vue.component('组件名', { name components directives filters mixins template props data computed wa

2020-11-16 16:44:43 219

原创 vue2.x vnode编译过程

vnode是vue中的虚拟dom节点对象什么是虚拟dom节点：不是真实的dom节点，是js对象。template：<div id="app"> <p>{{message}}</p> <button @click="btnAction">按钮</button></div>1.第一渲染，需要根据template中的模版，渲染出来初始的dom结构<div id="app"> <p>hello

2020-11-16 16:39:26 150

原创 vue-router使用总结

路由 router基础写法路由嵌套路由正向传参编程式导航命名路由路由别名，重定向命名视图路由守卫基础写法将router的配置分离出去router.js定义路由表const routes = [ // 一个对象，就是一个路由表配置项 // 必须配置的是path，component { // 当地址栏地址变化为/home时，就加载Home组件，放置在router-view中 path: '/home', //按需加载 component: ()=>im

2020-11-16 16:32:08 72

原创移动web开发基础知识（rem布局）

文章目录分辨率移动端使用的效果图分辨率1334*750物理像素(physical pixel)/设备像素(dp:device pixel)css像素/逻辑像素设备像素比(dpr)：物理像素/css像素越大越精细标清屏dpr:1和高清屏dpr>=2 retina缩放：缩放改变的是css像素的大小ppi/dpi：每英寸的物理像素点 (pixels per inch/dots per inch)视口viewportjs获得屏幕宽移动端单位window.devicePixelRatio分

2020-11-16 16:21:55 106

原创浅谈webpack的使用

文章目录webpack模式(mode)入口(entry)输出(output)管理输出开发环境source map使用 watch mode(观察模式)使用 webpack-dev-server使用 webpack-dev-middleware热更新插件loader加载 CSS加载 images 图像加载 fonts 字体加载数据插件(plugin)浏览器兼容性(browser compatibility)webpack本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。

2020-11-16 16:09:29 390

原创 react入门

react组件组件的两种实现模式：1.函数式组件（相比较函数式性能会更好）import React from 'react'export default ()=>{ return ( <div id="app"> <h1>hello world</h1> </div> )}2.class组件// react组件（class组件）import React, {Component} from 'reac

2020-11-16 15:19:31 670

原创自定义v-model 2.x vs 3.0

关于v-model指令的一个小记，由于新出的vue3 对它做了一个很好的改进，所以值得记录一下先看下v-model实现方式当在原生组件中使用： <input v-model="val" /> //相当于做了以下 <input :value="val" @input="val=$event.target.value">当在自定义组件上使用时： <my-component v-model="val"></my-component>

2020-11-15 23:55:04 113

原创使用vue3 hook 完成一个点击元素外区域元素隐藏功能附加vue2自定义指令实现方式

一般这样的功能在一个项目中很多地方需要用到vue3可以将功能代码单独提出来import { ref, onMounted, onUnmounted, Ref } from 'vue'const useClickOutside = (elementRef: Ref<null | HTMLElement>) => { const isClickOutside = ref(false) const handler = (e: MouseEvent) => { if

2020-11-13 18:30:31 1548 4

原创 vue3.0使用笔记（基础）

vue3.0基本使用ref语法Reactive 函数生命周期侦测变化 - watchdefineComponent 包裹组件Teleport 瞬间移动spense - 异步请求好帮手第二部分ref语法<template> <h1>{{count}}</h1> <h1>{{double}}</h1> <button @click="increase">+1</button></template>

2020-11-13 15:22:18 384

原创 TS泛型使用笔记Generics

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

2020-11-12 11:14:40 862

原创 vue2.x使用总结（可复用性篇）

使用发布订阅模式自己写发布订阅模式代码使用发布订阅模式来处理非父子组件之间的通信vue中的发布订阅main.jsVue.prototype.$center = new Vue();one.vuemethods: { addAction(){ // 派发事件 // Bus.$emit('send', this.value); this.$center.$emit('send', this.value); this.value = '';

2020-11-12 11:06:25 263 2

原创 vue2.x使用总结（组件篇）

template 标签开发时需要有个大标签包裹，但是又不希望存在dom中，这时候可以使用template标签，只识别指令，不作用在dom中。可以跟v-if, v-for使用，但是不能和v-show使用，无效的按键修饰符<input type="text" @keyup.ctrl.c="handleAction"/>组合键的使用.c ,.enter,.tab...系统修饰符…组件先声明组件参数1:组件的名字参数2:组件的配置项，必须写template，定义组件的dom

2020-11-12 10:49:24 305

qq_27314517的博客