typescript
文章平均质量分 66
camellias_
这个作者很懒,什么都没留下…
展开
-
小程序(二十三)微信小程序左上角返回按钮触发事件
微信并没有为我们提供左上角返回上一页触发的事件。但是有的时候这个操作我们还是需要监听一下。下图红框标注的返回上一页按钮。最后实现的效果:点击返回上一页的时候,我需要重新加载上一页的数据:返回上一页按钮只会触发上一页的onShow生命周期函数,并不会触发onLoad函数。因此我们需要在onShow函数中做一些设置:大概是操作流程,从日程页跳转至实验列表页,再点击实验列表页 左上角的返回键,返回日程页重新获取页面数据。我这里直接上代码:实验列表页代码:onShow: function ()原创 2021-08-04 16:23:54 · 12089 阅读 · 6 评论 -
VUE3(三十一)html单页面使用VUE3
之前一直在VUE3的框架中使用VUE3。但是我们在做一个小页面的时候,没有必要独立创建一个VUE项目的时候,我们该如何使用VUE3呢?下边我这边直接放出一个示例,复制粘贴就能用这里我使用了VUE3+element-plus<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten原创 2021-07-26 09:39:21 · 8424 阅读 · 2 评论 -
Typescript(十三)泛型
泛型:[generic - 通用、泛指的意思],那最简单的理解,泛型就是泛指的类型。一:函数中的泛型1:定义一个泛型方法// 泛型function query<T>(param:T){ console.log(typeof param); console.log(param);}query<string>('sucess');// 输出:// string// sucess从上边的代码我们就可以看出,其实泛型这个很容易理解,就是我们在调用方法的原创 2021-05-24 08:54:45 · 506 阅读 · 0 评论 -
Typescript(十二)Enum 枚举类型
Typescript中的枚举(enum)可以参考C#中的枚举(enum)类型,毕竟都是微软开发的语言。枚举这个数据类型在原生javascript中是没有的。在编译成js之后其实就是一个键值对形式存储的对象。像官网介绍的,枚举是对 js 标准数据类型的补充,声明一组带名字的常量;一:数字枚举数字枚举,声明了一个枚举成员均不带初始化器的枚举,该枚举的成员值从 0 开始,依次递增(+1)// 定义一个数字枚举enum enumConst{ up = 1, down, left原创 2021-05-20 09:06:17 · 662 阅读 · 0 评论 -
Typescript(十一)联合类型和类型守护
联合类型:通俗点说就是一个变量可能有多种类型。比如:一个人(person)有可能是老师(teacher),也有可能是服务员(waiter),但是不可能同时是老师和服务员。interface teacher{ type:string; say:()=>{};} interface waiter{ type:string; run:()=>{};}// 调用function person(animal: waiter | teacher) {}an原创 2021-05-19 09:26:33 · 178 阅读 · 0 评论 -
Typescript(十)compilerOptions 配置项
1:removeComments 属性removeComments是complerOptions里的一个子属性,它的用处是告诉TypeScript对编译出来的js文件是否显示注释(注解)。比如我们现在把removeComments的值设置为true,就是在js中不显示注释。我们把上节课文件没有的Demo2.ts和生成的 JS 文件都删除掉,只留Demo.ts文件,然后再Demo.ts文件里,加入一个注释。// I‘m xhconst person: string = "xh";写完注释后,直接再原创 2021-05-18 16:57:43 · 3024 阅读 · 0 评论 -
Typescript(九)配置文件 tsconfig.json
TypeScript 使用 tsconfig.json 文件作为其配置文件,当一个目录中存在 tsconfig.json 文件,则认为该目录为 TypeScript 项目的根目录。通常 tsconfig.json 文件主要包含两部分内容:指定待编译文件和定义编译选项。1:生成 tsconfig.json 文件这个文件是通过tsc --init命令生成的,在桌面上新建一个文件夹TsDemo,然后打开VSCode,把文件托到编辑器中,然后打开终端Terminal,输入tsc --init。输入完成后,就原创 2021-05-14 09:25:41 · 1835 阅读 · 2 评论 -
Typescript(八)类的概念和使用
类是一个功能的集合。一:类的定义及基本使用1:定义一个类class lady{ content = "你好啊,我是camellia"; say(){ console.log(this.content); }} 2:调用类// 类的使用let camellia = new lady();camellia.say();// 输出:你好啊,我是camellia 二:类的继承1:定义一个girl类继承lady类class girl extend原创 2021-05-13 09:05:21 · 281 阅读 · 2 评论 -
Typescript(七)interface接口
1:接口作为约束与规范我们可以根据需求来定义接口,然后我们再定义类来实现这个接口。接口为一个或多个类提供规范。2:优化程序设计面向对象设计中我们追求的原则之一就是高内聚,低耦合。可是类与类之间往往会有千丝万缕的关系,比如泛化、实现、组合、聚合、关联、依赖。而接口则可以将一个类对另一个类的依赖性降到最低,这就是【接口隔离】以上是面向对象编程中接口的两个主要作用。1:普通定义举个例子:我们计划招聘几个女服务员,要求年龄30以下,身高165以上。正常我们是这样实现的:const normal =原创 2021-05-12 08:52:24 · 336 阅读 · 2 评论 -
Typescript(六)元组的使用和类型约束
TypeScript 中提供了元组的概念,这个概念是JavaScript中没有的。但是不要慌张,其实元组在开发中并不常用,也可能是我的精力还不够。一般只在数据源是CVS这种文件的时候,会使用元组。其实你可以把元组看成数组的一个加强,它可以更好的控制或者说规范里边的类型。1:元组的基本应用我们先来看一个数组和这个数组注解的缺点,比如我们有一个小姐姐数组,数组中有姓名、职业和年龄,代码如下:const xiaojiejie = ["dajiao", "teacher", 28];这时候把鼠标放到xia原创 2021-05-11 14:07:38 · 153 阅读 · 0 评论 -
Typescript(五)数组类型定义
1:一般数组类型的定义现在我们可以定义一个最简单的数组类型,比如就是数字类型,那么就可以这么写:const numberArr = [1, 2, 3];这时候你把鼠标放在numberArr上面可以看出,这个数组的类型就是 number 类型。这是 TypeScript 通过类型推断自己推断出来的。 如果你要显示的注解,也非常简单,可以写成下面的形式。const numberArr: number[] = [1, 2, 3];同样道理,如果你的数组各项是字符串,你就可以写成这样。const s原创 2021-05-10 09:49:43 · 2130 阅读 · 0 评论 -
Typescript(四)函数参数和返回类型的注解
Typescript其实我觉得就是强语法类型的javascript。当然,他也不彻底算是一种强类型的语言,他有类型推断这个功能。我们在开发过程中,最好是给其都显式的声明类型,增加代码的一个健壮性,有规矩才成方圆。我们在定义函数的时候,也是需要制定输入参数及返回值的类型的。1:简单类型定义/** * 简单类型定义 */function getTotal(one:number,two:number):number{ return one + two;}console.log(get原创 2021-05-08 15:03:07 · 689 阅读 · 2 评论 -
Typescript(三)类型注解和类型推断
1:type annotation 类型注解就是在声明变量的时候,显式的声明他的类型let count: number;count = 123;这段代码就是类型注解,意思是显示的告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解。是不是一下就明白了,其实程序这东西就这么简单,真正复杂的是人。2:type inferrence 类型推断let countInference = 123;这时候我并没有显示的告诉你变量countInference是一个数字类型,但是如果你把鼠标放到原创 2021-05-07 08:56:22 · 299 阅读 · 0 评论 -
Typescript(二)静态类型
静态类型:就是你一旦定义了,就不可以再改变他的类型了。一:定义静态类型1:定义let count:number = 1;2:赋值count = "str"; // 这样写会报错,count只能接受number类型的数据count = 55; // 这个样子写是没有问题的3:使用对应类型的方法你讲变量定义成了何种类型,那么这个变量对应就可以使用其类型对应的方法console.log(typeof count.toString());二:自定义静态类型你还可以自己去定义一个静态类型原创 2021-05-06 17:41:36 · 246 阅读 · 1 评论 -
Typescript(一)简单的介绍及安装
TypeScript 是由微软公司在 2012 年正式发布,现在也有 8 年的不断更新和维护了,TypeScript 的成长速度是非常快的,现在已经变成了前端必会的一门技能。TypeScript 其实就是 JavaScript 的超集,也就是说 TypeScript 是建立在 JavaScript 之上的,最后都会转变成 JavaScript。一:编辑器我这里推荐使用微软的vscode编辑器,目前,无论是开发PHP,前端,python基本上都是在使用这款编辑器。主要是他同时支持windows,lin原创 2021-04-28 08:45:02 · 567 阅读 · 0 评论 -
VUE3(二十九)自定义点击图片显示大图bigImg组件
上一篇中介绍了如何使用onclick为动态添加的dom元素绑定事件。我现在就可以自定义大图组件了。为ueditor编辑的html添加onclick这个步骤,我是在后端做的,后端返回到前端的值,就是已经拼装好的html。最后效果如下图所示:代码:BigImg.vue<template> <!-- 过渡动画 --> <div name="fade"> <div class="img-view" @click="bigImg"&g原创 2021-04-25 10:01:24 · 958 阅读 · 0 评论 -
VUE3(二十八)页面加载完成后,使用onclick为动态添加的dom元素绑定点击事件
博客做的比较早,那个时候还不知道有markdown编辑器这个玩意。所以我的文章都是用ueditor编辑的。我这里大概想做一个大图的自定义组件:需求是,点击文章中的图片,显示大图。那么这里就有一个问题,我怎么在页面加载完成之后给html绑定事件呢?Jquery有$.on方法,但是,我不想再vue里边使用jquery。哎呀,迷糊了,原生javascript有onclick呀。上代码:1:要有一段在页面加载完成之后添加的html代码let conten=`<button οnclick="c原创 2021-04-23 08:52:36 · 2664 阅读 · 1 评论