前端知识库

框架的前奏，学会一些工具才能使用框架 1.前置知识 ES6的使用 let / const / 箭头函数 / … / new / class / Promise 继承 / this / 原型 CSS语法和布局 MVC概念 Model / View / Controller / EventBus 工具的使用 VSCode 或 WebStorm 终端命令行： npm / yarn / http-server / parcel / git 2.用到的工具 webpack@5 官网链接 安装方法见官网，在 .

1.useState 在React的函数组件中，默认只有属性没有状态 注意事项1：不可局部更新 如果state是一个对象，不能部分setState，因为setState不会帮我们合并属性 解决：要先把整个对象拷贝过来（...use），然后再局部修改覆盖它 setUser({ ...user, name:'Jack' }) 注意事项2 ：地址要变 在set的之后不能set之前的对象，地址要变，不然React发现地址没变就认为数据也没变 事项3：useState初始值可以写成函数 好处：减少多.

1.useState 执行setN的时候：n会变吗？App()会重新执行吗？ 1.n不会变，setN不会改变n 2.App()会重新执行，会产生一个新的n 注意：旧n和新n同时存在 这就是React的思想，永远产生新的对象，不改变旧值 App()重新执行，那么useState(0)的时候，n每次的值会不同吗? 答：会。 1.1 分析 setN 1.setN 一定会修改数据x，将n+1存入x 2.setN 一定会触发 <App />重新渲染（re-render） useState useS

目录 创建方式 没有state怎么办 没有生命周期怎么办 useState的原理 1.创建方式 就是创建一个函数 组件只是说明能和别人组合起来 const Hello = (props)=>{ return <div>{props.message}</div> } //等价于 const Hello = props => <div>{props.message}</div> //等价于 function Hello(props) {

生命周期 let div = document.createElement('div') //这是div的 create/construct 过程 div.textContent='hi' //这是初始化state（这不是生命周期） document.body.appendChild(div) //这是div的 mount 过程 div.textContent='hi2' //这是div的 update过程 div.remove() //这是div的 unmount 过程 React组件也有这些过程，可

1.两种创建class组件的方式 ES5（过时） 由于ES5不支持class ES6 方式 import React from 'react' class B extends React.Component{ constructor(props){ //从父组件接收来的，会把props放到this上面 super(props) } render(){ return ( <div>hi</div> ) } } //B作为组.

目录 类组件和函数组件 如何使用 props 和 state 外部数据和内部数据 如何绑定事件 复习this 1.组件 component 1.1 Element 和 component const div = React.createElement('div',...) 这是一个React元素（d小写） const Div = ()=> React.createElement('div',...) 这是一个React组件（D大写） 1.2 什么是组件 能跟其他物件组合起来的物件，就是组件

JSX X表示扩展，JSX就是JS扩展版 1.vue-loader和react-loader Vue有vue-loader 1..vue文件里写<template>、<script>、<style> 2.通过vue-loader变成一个构造选项（组件） React有 JSX 1.react-loader就是 babel-loader 2.而babel-loader被webpack内置了 2.使用JSX 方法一：CDN（不用这个，效率太低） 1.标签就写成标签，放

目录 如何引入React 函数的本质——延迟 JSX的用法 条件判断与循环 1.如何引入React 1.1 CDN引入(很麻烦,没人用) 操作 1.需要引入两个库,注意顺序 2.react、react-dom —react.development.js —react-dom.development.js 3.引入这两个库之后就可以使用自己的JS文件 项目默认可以使用parcel来运行 // 对象 console.log(window.React); // 函数 console.log(win

列表过渡 常用 怎么渲染整个列表，比如对：v-for列表进行渲染 答：使用<transition-group>组件 1.区别于transition 不同于 <transition> 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。 过渡模式不可用，因为我们不再相互切换特有的元素。 也就是mode=out-in 内部元素总是需要提供唯一的 key attribute 值。 如果key没有提供，或者不是唯一就会

1.轮播组件 slides 淘宝首页的广告位：轮播 轮播最难的点：最后一个到第一变化 Vue动画方式1 - CSS transition 官方文档 CSS过渡 1.做一个简单的动画需要哪几布 给元素外添加一个transition标签 <transition name="fade">标签元素</transition> 在CSS里面写一个以fade开头的一系列的类 .fade-enter-active 需要给变化元素初始值 （有些属性有默认值就不需要初始值） 添加一个事件监听

1.路由是什么 搞清楚这几个概念： 路由 分发 路由表 默认路由 如果没有#n，就给一个默认值 number = number || 1; 404 路由 / 保底路由 如果用户输入了错误路径，就给一个404页面，保证用户总是能够看到一个页面 嵌套路由 1.1 路由器 如果家里有1个即以上的人要上网，就需要一个路由器 上网路由 1.用户上网连接路由器，路由器看你想连哪里，就会把信号包发给相应的地方（百度、抖音、腾讯等） 2.分发：分别发送到各个地方 3.路由就是分发请求，路由器就是分发请求的东西 4.路

官方文档 1.v-model指令 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 双向绑定 1.修改内存中的message，UI会自动变化（改了内存，页面会变化） 2.如果用户修改了input内容，那么内存中message也会变化 <template> <div id="app"> //双向绑定 <input v-model="message" plac.

一、provide 和 inject 提供和注入 1.举例 换肤 class后面两个引号 1.在div上面绑定了一个class 2." "：是表示里面内容是class的值，这不是JS的双引号，是XML的双引号，中间有空格，如果删掉断句就错了 3.``:是JS的双引号，说明里面有变量，删掉就不是JS字符串了 含义是：div有两个class，一个是app，还有一个是theme-${thiemeName} theme-${thiemeName}：theme-bule、theme-red 所谓换肤，就是改di

1.Directives 指令 内置指令 v-if、v-for、v-show、v-html等 自定义指令 自己造出 v-x，点击即出现一个x 1.1 自定义指令 一、声明一个全局指令 Vue.directive('x',directiveOptions) 就可以在任何组件里使用 v-x <img v-x alt="Vue logo" src="./assets/logo.png" width="25%"> // 注册一个全局自定义指令 `v-focus` Vue.directive('f

指令 Direction 1.什么是指令 以 v- 开头的东西就是指令 1.和默认属性区分开 2.只有两个缩写不用加 v- 事件：@ 绑定：: 语法 1.v-指令名:参数=值，如： v-on:click=add 2.如果值里没有特殊字符，则可以不加引号 3.有些指令没有参数和值，如 v-pre（不对花括号进行操作） 4.有些指令没有值，如 v-on:click.prevent（阻止默认事件） <a @click.prevent href="https://www.baidu.com">baid

Vue模板语法 1.模板 template 三种写法 一、Vue完整版，写在HTML里 //写在HTML里 <div id=xxx> {{n}} //被替换 <button @click="add">+1</button>//被理解，然后添加一个事件监听 </div> new Vue({ el: '#xxx', //传一个选择器 data:{n:0}, //data 可以改成函数 methods:{ add(){} } })

1.computed就是计算属性，watch就是监听 2.computed就是用来计算出一个值，第一个是这个值在调用的时候不需要加括号，当属性使用；第二是它根据依赖会自动缓存，依赖不变computed的值就不会重新计算 3.watch如果一个属性变化了，那么就执行一个函数，它有两个选项，第一个是immediate，表示在第一次渲染的时候是否执行这个函数，第二个是deep，监听一个对象的时候是否要看对象里面属性的变化。 ...

进阶属性 1.响应式原理 options.data 1.会被 Vue 监听 2.会被 Vue 实例代理 3.每次对 data 的读写都会被 Vue 监控 4.Vue 会在data 变化时 更新 UI 那么：data变化时除了更新UI还能做点什么？ 2.computed-计算属性 用途 1.被计算出来的属性就是计算属性 2.当属性变化时，重新计算 3.用于：用户名展示 4.用于：列表展示 计算属性：可以让是其他属性计算而来的结果变成一个属性 1.默认会去读这个属性的返回值 2.列表选择展示：是通过列表u

1.什么是响应式 若物体能对外界的刺激作出反应，它就是响应式的 2.Vue的data是响应式 const vm = new Vue({data:{n:0}}) 如果修改 vm.n，那么UI中的n就会来响应我 Vue2通过 Object.defineProperty来实现数据响应式 3.响应式网页 如果改变窗口大小，网页内容就会做出响应，那就是响应式网页 4.Vue的data有bug Object.defineProperty 的问题 1.Object.defineProperty(obj,'n

Vue对data做了什么？ 1.getter和setter let obj = { 姓:'高', 名:'圆圆', get 姓名(){ return this.姓 + this.名 }, set 姓名(xxx){ this.姓 = xxx[0] this.名 = xxx.substring(1) } } obj.姓名 = '刘诗诗' console.log('需求一：'+ obj2.姓名)//需求一：高圆圆 console.log(`需求二：姓${obj.姓},

1.Vue实例 实例就是对象 比如：之前用jQuery去选择一个元素（如：#app），得到的是一个jQuery实例，这个实例封装了对那个元素的所有操作 Vue也是一样的，用Vue做出一个Vue实例 2.内存图 const vm = new Vue(options) 一般前面的const vm可以省略，直接写：new Vue(options) 构造一个Vue的实例：new Vue(options) 1.这个实例会根据你给的选项得出一个对象：vm 2.vm封装了这个DOM对象，以及对应的所有操作（事件绑

Vue完整版和运行时版的区别 1.两个版本对应的文件名 完整版：vue.js 运行时版本：vue.runtime.js 2.template 和 render 怎么用 完整版：template new Vue({ el:'#app',//元素直接从HTML里面拿 template:` <div>{{n}}</div> ` data:{ // data可以是函数也可以是对象 n:0 } }) 运行时版：render new Vu

框架 1.Vue的历史 View，意为：MVC中的V MVC中的V是Vue的重点，M和C则被简化 主要关心视图 版本 1.2015年，1.0版本——Vue是MVVM框架 2.2016年，2.0版本——Vue就不是MVVM框架 如何学习Vue 1.用CRM把所有文档过一遍 2.写一篇博客 2.使用 @vue/cli 搭建项目 搞出一个使用Vue的项目 2.1 方法一：使用@vue/cli 官方文档 1.安装：yarn global add @vue/cli(想要具体版本后面@4) 2.创建文件：.

如何使用 webpack 10.一键部署到 github 做了网页目的就是给别人看 步骤 1.本地打包 2.上传到github 10.1 一个文件上传 git add . – git commit -v – yarn build（重新生成dist目录） 理论上来说dist目录中的内容就是一个独立的前端网站 1.在本地用http-server测试一下 2.cd dist – http-server -c-1 3.本地预览没问题就可以上传到github 上传到github 一个小tip：如果代码已经上传过

如何使用 webpack 框架图 loader转换是1对1 plugin插件转换可以是n对1 webpack内置打包JS文件，但其他的CSS需要自己下载 loader和plugin的区别是什么？ 1.翻译一下：loader就是加载器，plugin就是插件 2.中文解释：加载器就是用来load（加载）一个文件，比如说babel-loader就是用来加载高级的JS把它变成低版本浏览器支持的JS，css-loader和style-loader是用来加载CSS，然后把它变成页面上的标签，还可以加载图片文件，对图

如何使用 webpack 4.用 webpack 生成 HTML 做项目的时候最好是git提交一下，因为有可能做着做着做毁了，没办法撤回 官网链接：HTMLWebpack 安装：yarn add html-webpack-plugin --dev 复制代码到之前的webpack.config.js文件中 删掉重复的命令，也就多了两句话 声明放前面，plugins放在module里面即可 const HtmlWebpackPlugin = require('html-webpack-plugin'); {