02 2021 档案
摘要：全局 API 修改 Global API Change Vue2 的全局配置 import Vue from 'vue' import App from './App.vue' Vue.config.ignoredElements = [/^app-/] Vue.use(/* ... */) Vue
阅读全文
摘要：Suspense - 异步请求好帮手第二部分 使用 async await 改造一下异步请求, 新建一个 DogShow.vue 组件 <template> <img :src="result && result.message"> </template> <script lang="ts"> im
阅读全文
摘要：Suspense - 异步请求好帮手第一部分 定义一个异步组件，在 setup 返回一个 Promise，AsyncShow.vue <template> <h1>{{result}}</h1> </template> <script lang="ts"> import { defineCompon
阅读全文
摘要：Teleport - 瞬间移动 第二部分 Modal 组件 <template> <teleport to="#modal"> <div id="center" v-if="isOpen"> <h2><slot>this is a modal</slot></h2> <button @click="
阅读全文
摘要：Teleport - 瞬间移动 第一部分 Teleport 文档地址 <template> // vue3 新添加了一个默认的组件就叫 Teleport，我们可以拿过来直接使用，它上面有一个 to 的属性，它接受一个css query selector 作为参数，这就是代表要把这个组件渲染到哪个 d
阅读全文
摘要：使用 defineComponent 包裹组件 defineComponent 文档地址
阅读全文
摘要：模块化结合typescript - 泛型改造 // 为函数添加泛型 function useURLLoader<T>(url: string) { const result = ref<T | null>(null) // 在应用中的使用，可以定义不同的数据类型 interface DogResul
阅读全文
摘要：模块化难度上升 - useURLLoader axios 文档地址 // 安装 axios 注意它是自带 type 文件的，所以我们不需要给它另外安装 typescript 的定义文件 npm install axios --save import { ref } from 'vue' import
阅读全文
摘要：模块化开发 第一部分 鼠标追踪器 // 在单组件内添加对应逻辑 const x = ref(0) const y = ref(0) const updateMouse = (e: MouseEvent) => { x.value = e.pageX y.value = e.pageY } onMou
阅读全文
摘要：侦测变化 - watch Watch 文档地址 // watch 简单应用 watch(data, () => { document.title = 'updated ' + data.count }) // watch 的两个参数，代表新的值和旧的值 watch(refData.count, (n
阅读全文
摘要：Vue3 生命周期 生命周期 在 setup 中使用的 hook 名称和原来生命周期的对应关系 beforeCreate → 不需要 created → 不需要 beforeMount → onBeforeMount mounted → onMounted beforeUpdate → onBefo
阅读全文
摘要：Reactive 函数 Reactive 函数 import { ref, computed, reactive, toRefs } from 'vue' interface DataProps { count: number; double: number; increase: () => voi
阅读全文
摘要：Ref 语法 setup 方法 ref 函数 <template> <h1>{{count}}</h1> <h1>{{double}}</h1> <button @click="increase">+1</button> </template> import { ref } from "vue" s
阅读全文
摘要：项目结构和插件 Eslint 插件 如果 eslint 不生效，可以在根目录创建 .vscode 文件夹，然后在文件夹中创建 settings.json 然后输入 { "eslint.validate": [ "typescript" ] } Vetur 插件
阅读全文
摘要：配置 vue3 开发环境 Vue cli // 安装或者升级 npm install -g @vue/cli # OR yarn global add @vue/cli // 保证 vue cli 版本在 4.5.0 以上 vue --version // 创建项目 vue create my-pr
阅读全文
摘要：内置类型 内置类型 const a: Array<number> = [1,2,3] // 大家可以看到这个类型，不同的文件中有多处定义，但是它们都是 内部定义的一部分，然后根据不同的版本或者功能合并在了一起，一个interface 或者 类多次定义会合并在一起。这些文件一般都是以 lib 开头，以
阅读全文
摘要：类型别名 和 交叉类型 类型别名 Type Aliases 类型别名，就是给类型起一个别名，让它可以更方便的被重用。 let sum: (x: number, y: number) => number const result = sum(1,2) type PlusType = (x: numbe
阅读全文
摘要：泛型第三部分 - 泛型与类和接口 class Queue { private data = []; push(item) { return this.data.push(item) } pop() { return this.data.shift() } } const queue = new Qu
阅读全文
摘要：泛型第二部分 - 泛型约束 在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法 function echoWithArr<T>(arg: T): T { console.log(arg.length) return arg } // 上例中，泛型 T 不一定包
阅读全文
摘要：泛型 Generics 泛型 Generics 泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。 function echo(arg) { return arg } const result = echo(123) // 这时候我们发
阅读全文
摘要：枚举 Enums 枚举 Enums // 数字枚举，一个数字枚举可以用 enum 这个关键词来定义，我们定义一系列的方向，然后这里面的值，枚举成员会被赋值为从 0 开始递增的数字, enum Direction { Up, Down, Left, Right, } console.log(Direc
阅读全文
摘要：类与接口 类实现一个接口 interface Radio { switchRadio(trigger: boolean): void; } class Car implements Radio { switchRadio(trigger) { return 123 } } class Cellpho
阅读全文
摘要：Class 类 面向对象编程的三大特点 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象， 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性。 多
阅读全文
摘要：类型推论，联合类型 和 类型断言 Typescript 文档地址：类型推论 - type inference 联合类型 - union types // 我们只需要用中竖线来分割两个 let numberOrString: number | string // 当 TypeScript 不确定一个联
阅读全文
摘要：函数 Typescript 文档地址：Functions Function 函数 在 JS 中，函数是一等公民 // 来到我们的第一个例子，约定输入，约定输出 function add(x: number, y: number): number { return x + y } // 可选参数 fu
阅读全文
摘要：interface 接口 Typescript 文档地址：Interface 对对象的形状（shape）进行描述 Duck Typing（鸭子类型） Duck Typing 概念： 如果某个东西长得像鸭子，像鸭子一样游泳，像鸭子一样嘎嘎叫，那它就可以被看成是一只鸭子。 // 我们定义了一个接口 Pe
阅读全文
摘要：Array 和 Tuple Typescript 文档地址：Array 和 Tuple //最简单的方法是使用「类型 + 方括号」来表示数组： let arrOfNumbers: number[] = [1, 2, 3, 4] //数组的项中不允许出现其他的类型： //数组的一些方法的参数也会根据数
阅读全文
摘要：原始数据类型 Typescript 文档地址：Basic Types Javascript 类型分类： 原始数据类型 - primitive values： Boolean Null Undefined Number BigInt String Symbol let isDone: boolean
阅读全文
摘要：安装 Typescript Typescript 官网地址: https://www.typescriptlang.org/zh/ 使用 nvm 来管理 node 版本: https://github.com/nvm-sh/nvm 安装 Typescript: npm install -g type
阅读全文
浙公网安备 33010602011771号