'})vm.mount('#app')对比Vue2.x写法

在vue2.x中注册全局组件使用Vue.component

6.2 Vue4.xcli或者使用Vite创建Vue3.0项目

使用cli创建项目使用npm全局安装或者升级4.xclinpm i -g @vue/cli

使用vue-cli创建vue应用程序vue create project-name注意创建的项目还是vue2.x应用程序

将vue2.x项目升级到vue3.x需要安装一个插件vue add vue-next

使用Vite创建项目

使用vite创建vue3.x项目只需要一条命令npm init vite-app project-name现在vite还不太成熟，实际开发还是使用vue-cli

6.3 一切皆组件

传统网页开发html、js、css，如果使用vue开发应用程序，要以app或者小程序的视觉看待vue。可以理解为对于一个vue应用程序来说一切都是组件，不能再用页面的概念看待vue应用程序。

6.4 组件编程思想代码复用

代码分离

6.5自定义组件props属性

vue单向数据流特性：指的是父组件传给子组件的数据应该由父组件决定，子组件的数据更新不应该影响父组件。实际上在vue中props对象的属性都是只读(reading only)的。

在这里还要注意一下值类型和引用类型。

如果引用类型，对象属性是可以修改的。

props可以是一个数组，也可以是一个对象数组：xxxxxxxxxx

props: ['a','b','c']

对象：xxxxxxxxxx

props: {a: {type: String, // 数据类型value: 'hello' // 默认参数// 关于props的参数还有很多，甚至可以校验参数是否合法}}

setup方法的第一个参数是props

6.6 自定义事件

在Vue3.0中自定义事件需要使用setup方法中的第二个参数context调用emit()方法。

emit()方法第一个参数方法名：方法名推荐规则全小写或单词之间使用-分割

第二个参数数据：要返回给父组件的数据

事件监听机制事件监听只能一步一步往上监听，不能跨过中间间隔的组件监听。对比小程序

小程序是使用triggerEvent()方法

第七章vue-route

7.1 前端路由的意义

在传统的项目并没有前端路由，页面都是后端路径渲染而来。

在现代web开发中其实前后端没有多大区别，前端也是通过一个url跳转页面/组件，而且要注意的是前端路由并不会去服务器发送请求，不会访问我们的服务端的。对比小程序

小程序中也有路由的概念，只不过它比较简单只有几个api，而vue的前端路由而是需要安装一个vue-route插件

7.2 router-view与router-link

router-view它会匹配当前路由配置的组件来替换router-view。

router-link它的行为类似a标签，不过它是跳转的是路由。

7.3 vue-router 编程思想入口组件规范

router-view监听事件

组件的切换优先考虑路由而不是条件渲染

7.4 嵌套路由

在配置路由的时候，需要在父路由配置children属性，并且需要与router-view搭配，它也只能显示在父路由所配置组件的router-view里面。

7.5 vue3获取路由参数

在2.x中获取路由参数是使用this.$route

在3.0中需要使用router.currentRoute

7.6 动态组件与keep-alive

在vue中集中切换视图的方案v-if

router-view

动态组件

动态组件xxxxxxxxxx

keep-alive

缓存组件，保存组件之前的状态xxxxxxxxxx

keep-alive 还有exclude属性，作用与include相反

除了可以用','分割之外，还可以使用数组或者正则表达式

主要组件名大小写敏感

第八章 vuex

第三阶段 前端面试

第一章变量类型和计算思考typeof能判断哪些类型？

何时使用===或==？

值类型与引用类型的区别？

手写深拷贝

1.1 值类型与引用类型

值类型本质：如果定义了一个值类型变量a=100，那么他会在栈中创建a=100。

常见值类型：undefinednumberstringboolean、symbol

代码演示xxxxxxxxxx

let a = 100let b = aa = 200console.log(b) // 100

引用类型本质：如果定义了一个引用类型变量a，那么它会在栈中创建a=内存地址，内存地址是在堆中生成。

常见引用类型：ArrayObjectnullfunctionxxxxxxxxxx

const a = {age: 10}const b = aa.age = 20console.log(b.age) // 20

小结值类型各走各的

引用类型随它变化而变化

1.2 typeof运算符识别所有值类型

识别函数

识别引用类型，但是不可再细分

1.3 深拷贝xxxxxxxxxx

function deepClone(obj = {}) {// 如果为null或者不是object，直接返回if(obj === null || typeof obj !== 'object') {return obj}// 如果是数组返回[]，否则返回{}let result = obj instanceof Array ? [] : {}for(let key in obj) {// 保证key不是原型的属性if(obj.hasOwnProperty(key)) {result[key] = deepClone(obj[key])}}return result}

1.4 变量计算-类型转换==运算符运算会自动类型转换，建议除了判断null之外，一切使用===运算符==与===区别==会自动类型转换

===不但会判断值是否相等，还要判断类型是否相等

第二章原型与原型链思考如何准确判断一个变量是不是数组？

class的原型本质，怎么理解？

知识点class和继承

类型判断instanceof

原型和原型链

2.1 原型

原型关系每个class都用显式原型prototype

每个实例都有隐式原型proto

实例的proto指向对应class的prototype

原型执行规则先在自身属性和方法寻找

如果找不到则自动取proto隐式原型寻找

2.5 原型链每个class的显式原型prototype也有一个隐式原型proto，

如果这个类存在继承关系，那么这个隐式原型会指向父类显式原型，直到Object显式原型为止，最终Object的隐式原型proto指向null

第三章 作用域和闭包思考this的不同应用场景，如何取值?

手写bind函数

实际开发中闭包的应用场景，举例说明

知识点作用域和自由变量

闭包

this

3.1 作用域和自由变量所有的自由变量查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方。xxxxxxxxxx

// 函数作为返回值function fun1() {const a = 100return function() {console.log(a) //100}}const fn1 = fun1()const a = 200fn1()​// 函数作为参数function print(fun2) {const a = 200fun2()}const a = 100function fun2() {console.log(a) // 100}print(fun2)

3.2 this

this 指向什么值，取决于函数执行时确定，不是在函数定义时确定

3.3 手写bind、apply、callbind函数：返回一个函数，第一个参数改变this的指向，其余参数直接传递。

apply函数：直接调用，第一个参数改变this的指向，其余参数用数组包裹。

call函数：直接调用，第一个参数改变this指向，其余参数直接传递。

手写bindxxxxxxxxxx

Function.prototype.mybind = function() {// 将arguments参数分解为argsconst args = Array.prototype.slice.a(arguments)const obj = args.shift()const self = this //指向fn1return function() {self.apply(obj,args)}}function fn1(a,b,c) {console.log(this)console.log(a,b,c)}const fun2 = fn1.mybind({x:100},1,2,3)// 相当于fn1.bind的作用fun2()

手写applyxxxxxxxxxx

​Function.prototype.myapply = function(obj,args) {const self = this // 指向fn1self.call(obj,...args)}function fn1(a,b,c) {console.log(this)console.log(a,b,c)}fn1.myapply({x:100},[1,2,3])​

手写callxxxxxxxxxx

Function.prototype.mycall = function() {// 将arguments参数分解为argsconst args = Array.prototype.slice.apply(arguments)const obj = args.shift()const self = this // 指向fn1self.apply(obj,args)}function fn1(a,b,c) {console.log(this)console.log(a,b,c)}fn1.mycall({x:100},1,2,3)

第四章 同步和异步

同步与异步区别同步会阻塞代码执行

异步不会阻塞代码执行

异步应用场景加载图片

网络请求

定时任务思考：Promise解决什么问题？

解决回调地狱(callback hell)

异步进阶

Promise三种状态：pending、resolved、rejected

then和catch链式调用的影响then正常返回resolved，里面有报错则返回rejected

catch正常返回resolved，里面有报错则返回rejected

async/await有async的存在一定会返回一个promise，如果不主动返回promise会包装成promise

await 可以理解为求值，类似then中的数据。

await一定要搭配await使用

async/await在for...of起作用

微任务和宏任务微任务和宏任务分别有哪些？微任务：promise，async/await

宏任务：setInterval、setTimeout、AJAX、DOM事件等

为什么微任务的执行时机比宏任务早？微任务是在DOM渲染之前执行

宏任务是在DOM渲染之后执行

为什么微任务和宏任务队列是分开的？微任务是语法规定

宏任务是浏览器规定

第五章 WEB API

5.1 DOM

节点操作getElementById()通过id选择器获取一个节点元素

getElementsByTagName()通过标签名称获取一组节点元素

getElementsByClassName()通过类名获取一组节点元素

querySelectorAll()通过一个或多个css选择器获取一组节点元素

结构操作新增/插入一个节点xxxxxxxxxx

移动节点xxxxxxxxxx

获取子元素列表，使用父节点属性childNodes，注意包含文本节点，文本节点nodeType = 3，DOM节点nodeType = 1

获取父元素，使用子节点属性parentNode

删除子节点：使用removeChild()

5.2 BOMnavigator：获取浏览器信息

screen：获取屏幕信息

localtion：获取网址信息

history：前进和后退

5.3 事件阻止默认行为：event.preventDefault()

阻止冒泡：event.stopPropagation()

事件代理：其实也是冒泡的一个应用。

第六章AJAX

6.1 模拟AJAX-get请求xxxxxxxxxx

const xhr = new XmlHttpRequest('GET','/data.json',true) // true代表异步，false代表同步xhr.onreadystatechange = function() {if(xhr.readyState === 4) {if(xhr.status === 200) {console.log(xhr.responseText)}}}xhr.send(null)

readyState0：还没有调用send方法

1：已调用send方法，正在发送请求

2：send方法执行完成，已接受到全部响应内容，但是数据还未回来

3：正在解析响应内容

4：响应内容解析完成，可以在客户端调用，除了4这种情况，其他情况都拿不到响应内容

6.2 同源策略

ajax请求时，浏览器要求当前网页和server必须同源(安全)。

同源协议、域名、端口，三者必须一致xxxxxxxxxx

// 注意：img，link，script，都可以无视同源

6.3 跨域

所有跨域都必须经过server端允许和配合，未经过server端允许就实现跨域，说明浏览器有漏洞，危险信号。

实现跨域两种方式JSONP：可以绕过跨域限制，服务器可以任意动态拼接数据返回，所以就可以获得跨域的数据，只要服务端愿意返回

CROS

第七章存储

cookie,localStorage,sessionStorage的区别容量：cookie只能存储4kb，localStorage、sessionStorage能存储5kb。

是否跟随http请求发送出去：cookie会，localStorage、sessionStorage不会。

localStorage,sessionStorage的区别localStorage数据会永久存储，除非代码或手动删除。

sessionStorage数据只存在于当前会话，浏览器关闭则清空。

第八章 HTML语义化理解？提高代码阅读性

让搜索引擎更容易读懂

块级元素和内联元素块级元素display:block/table：div、p、h1-h5、p、ul、ol、table等

内联元素display:inline/inline-block：span、img、input、button

第九章 CSS

9.1 BFC理解与应用Blcok format contexxt 块级格式化上下文

一块独立渲染区域，内部元素的渲染不会影响外界以外的元素

形成BFC条件float 不是 none

position是absoluted或者fixed

overflow不是visible

display是flex、inline-block等

第十章 运行环境

10.1 网页加载和渲染

资源的形式html代码

媒体文件，图片或者视频等

js、css

加载过程输入urlDNS解析：域名——>IP地址

浏览器根据P地址向服务器发起HTTP请求

服务器处理HTTP请求，并返回给浏览器

渲染过程根据HTML代码生成DOM Tree

根据CSS代码生成CSSOM

讲DOM Tree和CSSOM整合形成Render Tree渲染树

根据渲染树渲染页面

遇到则暂停渲染，优先加载并执行JS代码，完成再继续

直到把渲染树渲染完成

10.2 性能优化手写防抖、节流

性能优化原则缓存

减少CPU计算量，减少网络加载耗时

加载更快减少资源体积，压缩代码

减少访问次数：合并代码，SSR服务端渲染、缓存。

使用更快网络：CDN

渲染更快CSS放在head，JS放在body下面

尽早开始执行JS，用DOMContentLoaded

懒加载(图片懒加载，上滑加载更多(分页))

对DOM查询进行缓存，频繁DOM操作，合并到一起插入DOM结构

节流throttle，防抖debouncexxxxxxxxxx

// 防抖function debounce(fn,delay=500) {let timer = nullreturn function() {if(timer) {clearInterval(timer)}timer = setTimeout(()=>{fn.apply(this,arguments)timer = null},delay)}}​// 节流function throttle(fn,delay=100) {let timer = nullreturn function() {if(timer) returntimer = setTimeout(()=>{fn.apply(this,arguments)timer = null},delay)}}

springboot 建readme_README相关推荐

1. springboot 建readme_经验分享：给项目创建和编写README.md文件的步骤

   在项目开发过程中,不仅要注意代码的编写质量,也要为合作开发打好基础,尤其是合作开发的时候,同事直接的代码需要熟悉,这就需要在开发的时候进行注释操作,方便别人维护和熟悉代码.除了上述两个重要的点之外,还 ...

2. 智能门禁（6）---调用face++实现人脸检测

   人脸识别(一)调用face++实现人脸检测 2017年下半年以来,随着iPhoneX的人脸解锁功能把人脸识别这一黑科技带入大家的视野中之后,各种有关人脸识别功能的新闻和报道层出不穷.不仅是对普通群众来 ...

3. 人脸识别（一）调用face++实现人脸检测

   2017年下半年以来,随着iPhoneX的人脸解锁功能把人脸识别这一黑科技带入大家的视野中之后,各种有关人脸识别功能的新闻和报道层出不穷.不仅是对普通群众来说,对我们程序猿来说,百度,微软,阿里等各大 ...

4. 人脸识别（一）调用face++实现人脸检测。

   2017年下半年以来,随着iPhoneX的人脸解锁功能把人脸识别这一黑科技带入大家的视野中之后,各种有关人脸识别功能的新闻和报道层出不穷.不仅是对普通群众来说,对我们程序猿来说,百度,微软,阿里等各大 ...

5. SpringBoot 集成 clickhouse + mybatis-plus 配置及使用问题说明（含建表语句、demo源码、测试说明）

   1.建表语句 -- 建表 CREATE TABLE IF NOT EXISTS tb_stat ( id String, region String, group String, yesterday ...

6. springboot mybatis ehcache_SpringBoot入门建站全系列（十四）集成Redis缓存

   SpringBoot入门建站全系列(十四)集成Redis缓存 一.概述 本地缓存,就是使用应用内使用本地内存将数据暂缓存储,一般数据库的查询如果不怎么改动,可以用本地缓存暂存. 远程缓存,比如redi ...

7. springboot util 测试类怎么写_SpringBoot入门建站全系列（九）文件上传功能与下载方式...

   SpringBoot入门建站全系列(九)文件上传功能与下载方式 Spring对文件上传做了简单的封装,就是用MultipartFile这个对象去接收文件,当然有很多种写法,下面会一一介绍. 文件的下载 ...

8. Springboot 之 Hibernate自动建表（Mysql）

   前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 引入Maven依赖包 <dependency><groupId>org.sp ...

9. idea 建nodejs 项目_三种方法带你新建SpringBoot项目

   SpringBoot 的设计目的是简化Spring的搭建与开发,尤其是没有了好多繁琐的配置.本篇文章主要介绍如何搭建SpringBoot项目. 从官网创建 访问Spring的官方网站 start.sp ...

10. Springboot，Mybatis根据实体类自动建表

    Springboot,Mybatis根据实体类自动建表 在创建实体类的同时还要在数据库建表,如果只是很少的属性那么无所谓,但是当实体类很多或者字段很多时这就是一个非常让人不爽的事情了 通常有两种思路, ...

最新文章

1. 操作系统学习：基础轮廓梳理
2. nrf51822-主从通信分析1
3. a类网络被谁用了_谁说学考没有用？浙江三位一体报名要求，需要几A几B都在这里...
4. ArcGIS 10.0安装之 ArcSDE的安装
5. 想申请AI方向硕、博，这个内容一定要提前准备！！
6. php生成pdf中文断码_Rmarkdown导出中文PDF解决方案
7. InceptionNet V2整理总结
8. Centos7 yum 安装 oracle-rdbms-server-11gR2-pre
9. IO is frozen on database xxx, No user action is required
10. 设计师必备超人气设计素材网站
11. socket read time out解决方法_深入浅出讲解：php的socket通信
12. 根据ip高精度查地址网址
13. DocumentFormat.OpenXml
14. 二分算法：数的三次方根
15. python聚类系数_NetworkX 计算聚类系数的Python实现
16. 用Python爬了我的微信好友，他们是这样的...
17. Leetcode个人题解714
18. 【数据结构】树与二叉树的基本概念及性质
19. 捍宇医疗再冲刺科创板上市：核心产品专利来自购买，暂未商业化
20. 安卓手机各种信息获取---（通讯录短信息通话记录）

热门文章

1. STM8S 低功耗（1）
2. 简单编译器的实现 (四)
3. WebPager For ASP.NET (基于ASP.NET的数据分页控件)
4. 神经网络高维互信息计算Python实现（MINE）
5. 智能优化算法：非洲秃鹫优化算法-附代码
6. 模板题——贪心（2）
7. php数组排除某个键_PHP根据key删除数组中指定的元素
8. 实习成长之路：MySQL四：深入浅出索引
9. NLP学习03--递归神经网络RNN
10. mongodb分页优化