摘要:vscode 打开文件时如果会覆盖掉原来窗口中打开的未做修改的文件,非常影响使用体验 ###解决方法: ####1、ctrl/command+shift+p 快捷键打开 json 设置 ####2、在 json 设置中添加以下两行或将对应属性设置成 false/true "workbench.edi 阅读全文
posted @ 2020-09-29 15:03 Leophen 阅读(18) 评论(0) 推荐(0) 编辑
摘要:###一、API 简介 Page Visibility API 用来检测页面当前是否可见,以及打开网页的时间等 以前监听用户正在离开页面常用的方法是下面三个事件: 1、pagehide 2、beforeunload 3、unload 但这些事件在手机上不触发,因为手机系统可以将进程直接转入后台,然后 阅读全文
posted @ 2020-09-21 20:12 Leophen 阅读(31) 评论(0) 推荐(0) 编辑
摘要:###一、通过 $emit 实现 这里以 mounted 为例,在父组件 Parent 和子组件 Child 中,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现: // Parent.vue <Child @mounted="doSomething"/> // C 阅读全文
posted @ 2020-09-15 21:22 Leophen 阅读(42) 评论(0) 推荐(0) 编辑
摘要:###为什么 Vue 中的 data 必须是个函数? 官方文档的解释如下: ###为什么会出现上述“影响到其它所有实例”的情况呢? 其实这个问题取决于 JS 原型链知识,而非 Vue 我们先来看不是函数的情况: function Component() { } Component.prototype 阅读全文
posted @ 2020-09-14 21:13 Leophen 阅读(37) 评论(0) 推荐(0) 编辑
摘要:Vue.js 的源码都在 src 目录下,其目录结构如下: src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared # 共享代码 阅读全文
posted @ 2020-09-11 21:09 Leophen 阅读(27) 评论(0) 推荐(0) 编辑
摘要:###一、什么是 Flow Flow 是 facebook 出品的 JavaScript 静态类型检查工具 Vue.js 的源码利用了 Flow 做了静态类型检查,所以了解 Flow 有助于我们阅读源码 ###二、为什么用 Flow JavaScript 是动态类型语言,它的灵活性有目共睹,但是过于 阅读全文
posted @ 2020-09-10 18:21 Leophen 阅读(48) 评论(0) 推荐(0) 编辑
摘要:举个例子:对以下数组按 lastName 的值进行去重 let listData = [ { firstName: "Rick", lastName: "Sanchez", size: 18 }, { firstName: "Morty", lastName: "Smith", size: 6 }, 阅读全文
posted @ 2020-09-08 20:41 Leophen 阅读(187) 评论(0) 推荐(0) 编辑
摘要:举个例子:对以下数组按 lastName 的值进行分组分类 const listData = [ { firstName: "Rick", lastName: "Sanchez", size: 18 }, { firstName: "Morty", lastName: "Smith", size: 阅读全文
posted @ 2020-09-06 20:27 Leophen 阅读(163) 评论(0) 推荐(0) 编辑
摘要:###一、实现从右往左输入 实现代码: input { direction: rtl; } ###二、实现反向倒序输入 实现代码: input { direction: rtl; unicode-bidi: bidi-override; } 阅读全文
posted @ 2020-09-01 19:51 Leophen 阅读(93) 评论(0) 推荐(0) 编辑
摘要:###一、JS 实现方式 实现代码: <input type="text" /> <button>一键复制</button> const inputText = document.getElementsByTagName("input")[0]; const copyButton = documen 阅读全文
posted @ 2020-08-25 21:48 Leophen 阅读(56) 评论(0) 推荐(0) 编辑
摘要:###一、input 实现代码: <input onfocus="this.select()"> ###二、textarea 实现代码: <textarea onfocus="this.select()"> 阅读全文
posted @ 2020-08-21 21:20 Leophen 阅读(70) 评论(0) 推荐(0) 编辑
摘要:###一、单行省略号 实现代码: <div class="text-container">AAAAAAAAAAAAAAAAAAAAAAAAA</div> .text-container { width: 100px; white-space: nowrap; overflow: hidden; te 阅读全文
posted @ 2020-08-15 20:55 Leophen 阅读(15) 评论(0) 推荐(0) 编辑
摘要:###一、下拉实心尖角标 实现代码: <div class="angle" /> .angle { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; bord 阅读全文
posted @ 2020-08-12 20:24 Leophen 阅读(92) 评论(0) 推荐(0) 编辑
摘要:命名空间一个最明确的目的就是解决重名问题,其定义了标识符的可见范围,一个标识符可在多个名字空间中定义,它在不同名字空间中的含义是互不相干的。 这样,在一个新的名字空间中可定义任何标识符,它们不会与任何已有的标识符发生冲突,因为已有的定义都处于其他名字空间中。 一、TypeScript 命名空间 Ty 阅读全文
posted @ 2020-08-10 09:19 Leophen 阅读(199) 评论(0) 推荐(0) 编辑
摘要:泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性 举个例子,以下的 join 函数参数可以是 string 或 number 如果想要实现:前一个参数是什么类型,后一个参数就跟着是什么类型 这时就需要用到泛型 一、函数泛型 上述情况可用 阅读全文
posted @ 2020-08-06 22:07 Leophen 阅读(124) 评论(0) 推荐(0) 编辑
摘要:TypeScript 中使用联合类型经常会有下面的错误出现: 这时就需要用到类型保护,类型保护允许你使用更小范围下的对象类型,常见的类型保护如下: 一、类型断言的类型保护 二、in 语法的类型保护 三、typeof 类型保护 先来看另一种常见的错误: 通过 typeof 类型保护: 四、instan 阅读全文
posted @ 2020-08-04 22:29 Leophen 阅读(40) 评论(0) 推荐(0) 编辑
摘要:一、立即触发回调 watch 最初绑定时是不会执行的,需要等监听的内容改变时才执行监听计算 那我们想要一开始绑定的时候就执行该怎么办呢? 可以修改一下 watch 写法,如下: watch: { firstName: { handler(newName, oldName) { this.fullNa 阅读全文
posted @ 2020-07-31 15:56 Leophen 阅读(384) 评论(0) 推荐(0) 编辑
摘要:一、类型注解(Type annotation) 所谓类型注解,就是人为为一个变量指定类型,例如: const a: number = 123; 在 vscode 中鼠标移入 a 出现提示,冒号后面就是类型注解: 当不添加类型注解时,TypesScript 也能知道变量 a 是一个数字,这就是 Typ 阅读全文
posted @ 2020-07-22 22:17 Leophen 阅读(435) 评论(0) 推荐(0) 编辑
摘要:一、什么是接口 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型 接口是一系列抽象方法的声明,是一些方法特征的集合,第三方可以通过这组抽象方法调用,让具体的类执行具体的方法 TypeScript 中接口除了可用于对类的一部分行为进行抽象以外,还可用于对「对象的形状( 阅读全文
posted @ 2020-07-09 22:52 Leophen 阅读(534) 评论(0) 推荐(0) 编辑
摘要:一、TypeScript 的安装及使用 1、安装 npm i typescript -g // ts 全局包 npm i ts-node -g // 使用 ts-node 直接运行 ts 文件 2、使用 将 TypeScript 转换为 JavaScript 代码: tsc test.ts 使用 n 阅读全文
posted @ 2020-07-06 22:49 Leophen 阅读(75) 评论(0) 推荐(0) 编辑