atwillll-CSDN博客

原创 Dynamic Routes

在next.js中无法通过/test/:id 这种参数路由的方式获取到参数，它只能通过query的方式获取参数，即/test?id-xx的方式<kink href=/https/blog.csdn.net/a?id=1"><button>跳转到a</button></Link>使用Router的方式也可以通过问号这种形式来写，不过还可以通过Router.push()传递一个对象来写 const goToB = () => { Router.push({ pathname:'/t

2021-11-05 19:33:53 382

原创 tailwind css

优势不用命名，不会使css文件变大随意更改与内联样式相比是从预定义的设计系统中选择样式响应式设计可使用hover，focus等hover:鼠标悬停 focus:焦点 active: group-hover:悬停在父元素上时对子元素设置样式。父元素添加group，子元素添加group-hover group-focus:与group-hover一样 focus-within:尽在一个字元素获得焦点时才应用功能类 focus-visible:当一个元素具有焦点且仅在用户使用键盘时才应用功能类 m

2021-11-05 15:59:56 5211

原创 commerce

useState()const [a,b]=useState(1)//声明变量a，初始值为1，react会在重复渲染时记住当前的值，提供最新的值给函数。可以通过调用b来更新当前的afunction Example(){const [count,setCount] = useState(0);return(<div><p>you clicked {count} times</p><button onClick = { () => setCount

2021-10-27 10:17:39 120

原创 TypeScript

一种给JavaScript添加特性的语言扩展增加的功能有类型批注和编译时类型检查类型推断类型擦除接口枚举Mixin泛型编程名字空间元组Await从ECMA2015反向移植而来的功能有类模块lambda函数的箭头语法可选参数以及默认参数JavaScript与TypeScript的区别对JavaScript的语法进行扩展现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript提供编译时检查（通过类型注解提供编译时的静态类型检查

2021-10-20 19:05:28 174

原创 vue基础2

脚手架脚手架文件结构node_modulespublicfavicon.ico 页签图标index.html 主页面srcassets 存放静态资源logo.pngcomponent 存放组件HelloWorld.vueApp.vue 汇总所有组件main.js.gitignore git版本管制忽略的配置babel.config.js babel配置文件package.json 应用包配置文

2021-09-15 13:08:12 151

原创 vue基础1

vue基础vue是什么构建用户界面的渐进式js库尤雨溪开发特点组件化模式声明式编码虚拟dom diff算法初始vue想让vue工作，就必须创建一个vue实例，且要传入一个配置对象root容器里的代码符合heml规范，只不过混入一些特殊的vue语法root容器里的代码被称为 vue模板容器与实例一一对应真实开发中只有一个vue实例，并且会配合组件一起使用{{xxx}}中要写js表达式，且xxx可以自动读取到data中的所有属性一旦data中的数据发生改变，那么模板中用到该数据的地

2021-08-19 00:48:16 127

原创 React生命周期函数

React生命周期函数constructor：构造器conponentWillMount：组件将要挂载之i前，在render之前（不在新的生命周期函数中）render：页面渲染componentDidMount：组件挂载完毕之后，在render之后，只调用一次componentWillUnmount：组件卸载之前shouldComponentUpdate：boolean值，组件是否更新componentWillUpdate：render之前调用（不在新的生命周期函数中）componentD

2021-07-30 16:11:24 71

原创 web前端

盒子模型你对一个元素所设置的width与height只会应用到这个元素的内容区box-sizing属性定义了useragent应该如何计算一个元素的总宽度和总高度通过过content-box设置内容区，不包含边框，设置多少即为多少border-box设置的内容区包括边框和内边距浏览器渲染会将所有元素表示为一个个的矩形盒子，每个盒子有四个部分组成，即为内容边界，内边距边界，边框边界，外边框边界flex布局主轴由flex-direction定义，可取4个值；row、row-reverse、colu

2021-07-29 13:40:47 92

原创 React

概念网页UI框架，本质为一个组件化框架用于构建用户界面的js库，通过组件化方式构建快速响应的大型web应用程序开发React的思维模式是完全不同的，概念也极为简单React中只有组件，没有页面、控制器、模型数据与组件UI=fn（state），state计算出状态变化，fn将状态变化渲染在视图中核心思路声明式：可以做到一目了然，也便于组合组件化：可以降低系统间功能的耦合性，提高功能内部的聚合性通用性：将DOM抽象为虚拟DOM，开发者并不直接操作DOM。React也不再限于Web开发优缺点

2021-07-29 10:42:02 215

原创 2021-07-28

js进阶原始类型与引用类型var、let与const解构赋值箭头函数防抖与节流回调与promise对象原型对象this关键字call apply bind拷贝单线程process.next与setImmdeiate事件循环宏任务微任务DOM事件流与事件委托symbol原始类型与引用类型1、赋值：原始类型直接赋值；引用类型赋指向2、比较：原始类型比较的是值是否相等；引用类型比较的是否指向同一对象3、传参：原始类型作为参数，函数内操作不影响实参的值；引用类型会影响实参的值var、let与const

2021-07-28 23:48:16 80

原创 Markdown的学习记录

Markdown的学习记录Markdown文档想在泛用性十分广泛，所以抽出一点时间来进行学习。从最基本的学起首先是标题，用#来表示标题，数个#可以进行选择标题的大小。可以通过再标题下添加多个=进行一级标题的添加，–为二级标题。段落则比较简单，一行空白行则表示为一段。可以在文字最后添加两个或多个空格，再按回车，表示换行。如第一行。第二行。加粗则只需将需要加粗的文字用** 进行包裹即可。斜体则需要用* 进行包裹。如果需要进行**加粗并斜体***，则需要三个进行包

2021-07-14 17:22:24 82

原创 OrgChart页面模仿编程简单记录

OrgChart页面模仿编程简单记录导航栏整体来看，导航栏设计的还是比较简洁，顶部有8个导航模块，每个模块点击后会跳转到相应模块页面。可以使用在App.js页面中使用<Router> <Navlink>来实现。<Router> <nav> <Navlink>Home</Navlink> </nav> </Router>样式首先是被选择后改变背景颜色，<Navlink

2021-07-14 17:16:30 486