阿乐去买菜

vue 插槽的基本使用vue 提供了三种插槽：匿名插槽，具名插槽，作用域插槽匿名插槽子组件定义了 solt，但未提供名字，这就是匿名插槽，也叫做默认插槽，只要出现的父组件中，未指定插槽名字的内容，都会默认放到匿名插槽里。 子组件 123<template> <div><slot></slot>//匿名插槽</div></template> 父组件 12345<template> <div> <myComponent>我被放进了插槽中</myComponent> </div></template> 默认值当父组件没有提供内容的时候，会默认渲染插槽内的内容，传值则会被替换 具名插槽所谓具名插槽，就是给插槽命了名字，父组件放进来的内容，需要指定插槽的名称，这个时候才会被分发到这个具名插槽中。 子组件 123456789101112<template> <div> <div class=" ...

前端校招面试题TCP 拥塞控制css 盒子模型 W3C 的标准盒模型 在标准的盒子模型中，width 指 content 部分的宽度 IE 的盒模型 在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度 box-sizing 的使用 12box-sizing: content-box 是W3C盒子模型box-sizing: border-box 是IE盒子模型 固定宽高元素的水平垂直居中 position:absolute、50%和 margin:-px position:fixed、0 和 margin:auto 123456789101112131415161718192021.container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}/* - position:absolute、0 和 margin:auto- position:absolute、50%和 translate */.c ...

常用的三种模块化规范ES6Moudle 使用 import/export 语法，在文件顶部导入需要的模块，特点是：静态化，在编译时候确定模块之间的以来关系，以及输入输出变量。 ES6 中 export 和 import 一般的用法有两种 （别名使用 as 关键字） 命名导出（Named exports） 默认导出（Default exports） ES6Moudle 在语言标准的层面上，实现了模块功能，而且实现得相当简单，未来大有可能完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案 1234//module-a.jsexport default { a: 1,}; import 命令具有提升效果，会提升到整个模块的头部，首先执行。 123//module-b.jsconst b = a + 2;import { a } from './module-a'; CommonJS commonJS 服务器端（nodeJS）的 js 模块规范,同步加载方式。因为 nodeJS ...

手撕数据结构—-队列与优先队列什么是队列（先进先出）队列，和栈有点类似，但是又不太一样，队列遵循先进先出的原则。列就是排队，在前面的人先享受服务，完后前面的人先走。 普通队列1234567891011121314151617181920212223242526/** * 普通队列 */class Queue { constructor() { this.list = []; } push(val) { return this.list.push(val); } pop() { return this.list.shift(); } peck() { return this.list[0]; } size() { return this.list.length; } isEmpty() { return this.list.length === 0 ? true : false; } toStrin ...

JS 如何终止 forEach 循环JS 如何终止 forEach 循环 break 报错，return 跳不出循环 终止 forEach 可以使用 try catch 内部抛出错误，catch 捕获错误。 1234567891011let arr = [1, 2, 3]try { arr.forEach(item => { if (item === 2) { throw('循环终止') } console.log(item) })} catch(e) { console.log('e: ', e)} 当然我们大可以用其他方法代替 Array.prototype.some 当 return true 的时候，会终止遍历 Array.prototype.every 当 return false 的时候，会终止遍历

call、apply、bind 详解三者都是改变函数执行时的上下文，也就是就是改变 this 的指向。 call(obj,arg1,arg2) //call()的参数一个一个的传函数.call(第一个参数:想让函数中 this 指向谁,就传谁进来,后面的参数:本身函数需要传递实参,需要几个实参,就一个一个的传递即可);call 的作用: 1. 调用函数 2.指定函数中 this 指向 apply(obj,[arg1,arg2] //apply()的第二个参数则是一个数组函数.apply(第一个参数:想让函数中 this 指向谁,就传谁进来,第二个参数:要求传入一个数组,数组中包含了函数需要的实参)apply 的作用: 1. 调用函数 2, 指定函数中 this 的指向 bind(this) // bind()返回的其实是一个函数，并不会立即执行。函数.bind(第一个参数:想让函数中 this 指向谁,就传谁进来,后面的参数:本身函数需要传递实参,需要几个实参,就一个一个的传递即可)bind 的作用: 1. 克隆当前函数,返回 ...

vue 中的依赖注入 provide 和 injectprovide 选项允许我们指定我们想要提供给后代组件的数据/方法。 下面是一个组价刷新的案列 1234567891011121314151617181920212223242526272829<template> <div > <div class="view"> <router-view v-if="isRouterAlive"></router-view> </div> </div></template><script>export default { data() { return { isRouterAlive: true } }, provide() { return { reload: this.reload } ...

前端常见单位前端开发过程常常会遇到不同的单位，这些单位你真的了解过吗？ px屏幕像素 rem根据根节点改变自身大小，默认根字体大小为 屏幕宽度/根结点 em根据父节点改变自身大小 vhviewpoint height，视窗高度，1vh 等于视窗高度的 1% vwviewpoint width，视窗宽度，1vw 等于视窗宽度的 1%

QQ 互联避坑指南申请 APPID在 QQ 互联官网 h【ttp://connect.qq.com/】申请,根据项目需要，申请相应的接入。 按照官网指示操作注册成为开发者 注册成功后就可以创建自己的应用 审核成功后就可以得到自己的 APPID 与 APP KEY 这两个都会在后续接入中用到 放置 QQ 登录按钮网站需要下载“QQ 登录”按钮图片，并按照 UI 规范将按钮放置在页面合适的位置。 获取 Authorization Code打开浏览器，访问如下地址（请将 client_id，redirect_uri，scope 等参数值替换为你自己的）：1https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=[YOUR_APPID]&redirect_uri=[YOUR_REDIRECT_URI]&scope=[THE_SCOPE] 如果用户已经有登录态，会弹出提示一个确认页。如果还没有登录，会弹出登录页成功登录后，弹出授权框引导用户授权（仅在第一次成功 ...

Vue 中使用 rem 移动端适配方案 安装依赖 1npm install postcss-pxtorem -D 初始化根标签字体大小，设置 px 与 rem 的关系 123456789101112const baseSize = 46; //根据UI尺寸决定function setRem() { const scale = document.documentElement.clientWidth / 1080; //UI尺寸决定 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';}setRem();window.onresize = function () { setRem();}; 在 main 引入文件 1import './utils/rem.js'; 设置规则（更改 postcss.config.js,该文件为使用 vue-cli3 自动创建的文件） 123 ...