VUE3/TS/TSX入门手册指北

VUE3入门手册

vue3入门

首先 查看 官方文档:https://cn.vuejs.org/guide/quick-start.html

如果有vue2基础,速成课程:https://www.zhoulujun.co/learning-vue3/component.html(官方文档 还是建议 翻一遍)

VUE3深入

首先看源码是个不错的学习手段,限于时间,可以看精略版:https://www.zhoulujun.co/vue3-docs/index.html

从vue2到vue3之路

vue2升级vue3项目经验: https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/

typescript入门手册:

对于没有CS基础(如JAVA、C#)的同学,建议先看官方手册:

https://www.typescriptlang.org/docs/handbook/intro.html

https://www.tslang.cn/docs/handbook/basic-types.html(中文

其他的入门教程,大同小异,比如:https://ts.xcatliu.com/

对于已入门的同学,需要关注TS这个几个关键点:

  • 内置类型:《TS数据类型(0):一些需要注意的地方笔记+typescript 内置类型》
  • 联合类型、枚举:TS数据类型:类型别名/联合类型/字面量类型/类型推论等纲要、联合枚举类型:从C语言看枚举与联合类型到TypeScript/Python
  • 装饰器:《Typescript装饰器Decorators浅析》、从java注解漫谈到typescript装饰器——注解与装饰器
  • 泛型:《从java泛型来聊typescript泛型变量和泛型》

图书推荐:

TSX入门手册

.jsx是javascript文件并表明使用了JSX语法。

.tsx表明是typescript文件并使用了JSX语法。

JSX 可以更好的描述 UI 应该呈现出它应有交互的本质形式。JSX 看起来有点类似模版语言,但它具有 JavaScript 的全部功能。

JSX在React中使用给我们带来了很大的便利,而TSX,弥补了JSX缺乏类型系统、类型校验等弊端,大大降低了我们代码出错的概率

如何学习JSX

先看官方文档:

  • https://zh-hans.reactjs.org/docs/introducing-jsx.html
  • https://zh-hans.reactjs.org/docs/jsx-in-depth.html

VUE3+TSX

Vue一直都是支持JSX语法的,3.0对TypeScript的支持又非常好,所以我开始尝试用Vue + TSX来做开发。

Vue 3.0相比2.x有一些变化,不能再使用原来的vue-jsx插件。

Vue 3.0也提供了一个对应React.createElement的方法h。但是这个h方法又和vue 2.0以及React都有一些不同。

例如这样一段代码:

<div class={['foo', 'bar']} style={{ margin: '10px' }} id="foo" onClick={foo} />

在vue2.0中会转换成这样:

h('div', {
  class: ['foo', 'bar'],
  style: { margin: '10px' }
  attrs: { id: 'foo' },
  on: { click: foo }
})

可以看到vue会将传入的属性做一个分类,会分为class、style、attrs、on等不同部分。这样做非常繁琐,也不好处理。

在vue 3.0中跟react更加相似,会转成这样:

h('div', {
  class: ['foo', 'bar'],
  style: { margin: '10px' }
  id: 'foo',
  onClick: foo
})

基本上是传入什么就是什么,没有做额外的处理。

当然和React.createElement相比也有一些区别,例如:

  • 子节点不会作为以children这个名字在props中传入,而是通过slots去取,这个下文会做说明。
  • 多个子节点是以数组的形式传入,而不是像React那样作为分开的参数

案例代码:

https://github.com/TencentBlueKing/bkui-vue3

https://github.com/Tencent/tdesign-vue-next

JavaScript基础加强:

https://www.zhoulujun.co/javascript-history/

https://www.zhoulujun.cn/html/webfront/ECMAScript/js6/

本文转载于网络 如有侵权请联系删除

相关文章

  • Python3实现自动发送邮件

    财务阿姨们最近遇到一项重复的工作,需要开具大量的电子发票并发送到客户指定的邮箱,故找到我们帮忙弄一个小工具提高工作效率,SMTP协议首先了解SMTP(简单邮件传输协议),邮件传送代理程序使用SMTP协议来发送电邮到接收者的邮件服务器。SMTP协议只能用来发送邮件,不能用来接收邮件,而大多数的邮件发送服务器都是使用SMTP协议。SMTP协议的默认TCP端口号是25。上面说了是使用SMTP协议发送的邮件,所以需要先查看你的发件人邮箱是否有开启SMTP协议,如没有,则需要开启,我测试使用的是163.com的邮箱作为发信人邮箱,在设置中开启SMTP协议如下图所示。测试的前提是你需要开通客户端授权,开通后会让你设置密码,那个密码要记好,下面的passwd接收的是授权密码而不是邮箱密码!否则会出现下图所示的错误提示:安装库文件 pipinstallsmtplib pipinstallemail复制小栗子:基础版importsmtplib fromemail.headerimportHeader fromemail.mime.textimportMIMEText #第三方SMTP服务 mail_h

  • 走进 JDK 之 Byte

    今天来说说Byte。类声明publicfinalclassByteextendsNumberimplementsComparable<Byte> 复制和之前的一模一样,不可变类,继承了抽象类Number,实现了Comparable接口。字段privatefinalbytevalue;//包装的byte值 publicstaticfinalbyteMIN_VALUE=-128;//最小值是-128 publicstaticfinalbyteMAX_VALUE=127;//最大值是127 publicstaticfinalClass<Byte>TYPE=(Class<Byte>)Class.getPrimitiveClass("byte"); publicstaticfinalintSIZE=8;//byte占8bits publicstaticfinalintBYTES=SIZE/Byte.SIZE;//byte占一个字节 privatestaticfinallongserialVersionUID=-718369823155912

  • 源码系列:基于FPGA的任意分频器设计(附源工程)

    大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是缘分。大侠可以关注FPGA技术江湖,在“闯荡江湖”、"行侠仗义"栏里获取其他感兴趣的资源,或者一起煮酒言欢。 今天给大侠带来基于FPGA的任意分频器设计,附源码,获取源码,请在“FPGA技术江湖”公众号内回复“任意分频器设计源码”,可获取源码文件。话不多说,上货。设计概述在FPGA设计中,分频器一直都担任着很重要的角色,我相信很多人都已经想到了利用计算器来计算想要使用的时钟频率,但问题是仅仅利用计数器来分频,只可以实现偶数分频,而如果我需要三分频,五分频,七分频等等奇数类分频,那究竟怎么办呢?在这里,让我介绍一个可以实现任意整数分频的方法,这个办法也是同样利用了计数器来计算,跟偶数分频不一样的地方是任意整数分频利用了两个计数器来实现。设计原理本次设计主要是设计一个可调的分频器,设置其参数,可以调节其输出的占空比,占空比的意思就是高电平所占周期的多少。我们通知计算高电平的时间和低电平的时间来实现,其实就是我们用两个计数器来控制的。设计架构设计框架图: 状态转移图:通过对两个计数器的计数,一个计算到了跳转下一个状态,等

  • 【未完成】【leetcode第 165 场周赛】分割回文串 III

    版权声明:本文为博主原创文章,遵循CC4.0BY版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/shiliang97/article/details/1033345025278.PalindromePartitioningIIIYouaregivenastringscontaininglowercaselettersandanintegerk.Youneedto:First,changesomecharactersofstootherlowercaseEnglishletters. Thendividesintoknon-emptydisjointsubstringssuchthateachsubstringispalindrome. Returntheminimalnumberofcharactersthatyouneedtochangetodividethestring.Example1:Input:s="abc",k=2 Output:1 Explanation:Youcansplitthestringinto&

  • 为什么别人一点就透,我却迟迟学不会?

    笔者在网上发布了一门课程:机器学习极简入门课(扫描下面二维码可见)。天明同学是这门课的一位非常用功的学生。之前,他就自己的学习经历、心得和收获写了一篇《我是这样入门“机器学习”的》。之后关于学习过程,天明同学又进行了进一步的思考,并和笔者讨论了这方面的问题。本文就是这次讨论的内容。学习的困惑【天明同学首先发问】: 老师,过了这么久,今天我才回想起您在课程里强调过的:高质量的数据对机器学习模型训练与进化的重要性。 还是自己当初没有领悟和体会到啊,要是天赋高的或者当时看得清楚的,应该直接就能深有体会了。 很多事都是,当别人说第一遍的时候,无法体会话语的真正含义,自己太后知后觉了。这其实是一个非常常见的问题,可以说这是一个每个人都会遇到的问题。往大了说这是教育学的终极问题:“老师如何教导&学生如何学习”的问题。现实中,如果一件事真的能够一听就会,说明你早就经历过、体会过,而且自己总结过。别人的讲述、指导,是对你旧有认识的更深刻和更精辟的提炼。经历的必要性【天明又问】: 没有天赋极高,一点就透的那种人吗?确实存在“一点就透”的人。不过要注意,极少有人是在任何领域都一点就透的,一般也就是

  • Apache、struts1、struts2文件上传下载的3种方式

    /*jsp的上传(导入第三方upload.jar)*///用Apache的SmartUpload方式上传,共5部//1.引入SmartUploadSmartUploadsu=newSmartUpload();//2.设定允许上传的文件类型,格式之间用逗号隔开su.setAllowedFilesList("jpg,jpeg,gif");//3.设定允许上传的文件的大小su.setMaxFileSize(3*1024*1024);//4.初始化接收页面提交过来的请求su.initialize(this.getServletConfig(),request,response);//5.上传su.upload();//注意:使用SmartUpload这种上传方式,接收页面请求不能使用HttpServletRequest//务必使用SmartUpload自带的Request,否则接收全部为空Requestmyreq=su.getRequest();Stringname=myreq.getParameter("myname");Stringpass=myre

  • 【C语言】指针进阶知识终章

    ✨作者:@平凡的人1 ✨专栏:《C语言从0到1》 ✨一句话:凡是过往,皆为序章 ✨说明:过去无可挽回,未来可以改变文章目录 @[toc]?前言?有趣的代码?简单计算器?函数指针数组?指向函数指针数组的指针?回调函数?冒泡排序优化版?qsort函数的使用?冒泡排序通用版?结语?前言回顾我们前面学习了指针数组、数组指针以及简单介绍了函数指针,传参问题等。下面我们将在这些学习过的内容之上继续延展下去,通过这一篇博客,你可以收获更多的知识与内容,同时夯实自己的基础。本篇内容可能比较多,请耐心仔细阅读!? ?有趣的代码开始之前,基于前面的基础,我们先来看看两个有趣的代码//代码1 (*(void(*)())0)(); //代码2 void(*signal(int,void(*)(int)))(int);复制这两个代码是什么意思呢?先想一想代码1: 想看里面的部分void(*p)();p是函数指针,所以对于void(*)()是函数指针类型,0本身是个值,0之前放了个类型,强制类型转换,然后进行解引用。所以说代码1是一次函数调用,调用的0作为地址处的函数. 1.把0强制类型转换为:无参,返回类型是

  • 腾讯云容器安全服务查询单个集群的详细信息api接口

    1.接口描述接口请求域名:tcss.tencentcloudapi.com。 查询单个集群的详细信息 默认接口请求频率限制:20次/秒。 APIExplorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。您可查看每次调用的请求内容和返回结果以及自动生成SDK调用示例。 2.输入参数以下请求参数列表仅列出了接口请求参数和部分公共参数,完整公共参数列表见公共请求参数。 参数名称 必选 类型 描述 Action 是 String 公共参数,本接口取值:DescribeClusterDetail。 Version 是 String 公共参数,本接口取值:2020-11-01。 Region 否 String 公共参数,本接口不需要传递此参数。 ClusterId 是 String 集群id 3.输出参数 参数名称 类型 描述 ClusterId String 集群id ClusterName String 集群名字 ScanTaskProgress Integer 当前集群扫描任务的进度,100表示扫描完成.

  • 线性回归模型的 MXNet 与 TensorFlow 实现

    本文主要探索如何使用深度学习框架MXNet或TensorFlow实现线性回归模型?并且以Kaggle上数据集 USA_Housing 做线性回归任务来预测房价。 回归任务,scikit-learn亦可以实现,具体操作可以查看 线性回归模型的原理与scikit-learn实现。 载入数据 importpandasaspd importnumpyasnp 复制 name='../dataset/USA_Housing.csv' dataset=pd.read_csv(name) train=dataset.iloc[:3000,:] test=dataset.iloc[3000:,:] print(train.shape) print(test.shape) 复制 (3000,7) (2000,7) 复制 查看有无缺失值: print(np.unique(train.isnull().any())) print(np.unique(test.isnull().any())) 复制 [False] [False] 复制 dataset.columns#查看所

  • DS哈希查找—线性探测再散列

    题目描述  定义哈希函数为H(key)=key%11,输入表长(大于、等于11)。输入关键字集合,用线性探测再散列构建哈希表,并查找给定关键字。 --程序要求-- 若使用C++只能include一个头文件iostream;若使用C语言只能include一个头文件stdio 程序中若include多过一个头文件,不看代码,作0分处理 不允许使用第三方对象或函数实现本题的要求 输入  测试次数t 每组测试数据为: 哈希表长m、关键字个数n n个关键字 查找次数k k个待查关键字   输出 对每组测试数据,输出以下信息: 构造的哈希表信息,数组中没有关键字的位置输出NULL 对k个待查关键字,分别输出:0或1(0—不成功,1—成功)、比较次数、查找成功的位置(从1开始)   样例输入 1121022192189303341514422563017 样例输出 22303314415NULLNULL1982191110616201 提示 #include<iostream> usingnamespacestd; #defineIN

  • 【插补搜寻法】

      /* 有问题 插补搜寻法 说明: 如果却搜寻的资料分布平均的话,可以使用插补(Interpolation)搜寻法来进行搜寻,在搜寻的对象大于500时,插补搜寻法会比 二分搜寻法来的快速。 */ #include<stdio.h> #include<stdlib.h> #include<time.h> #defineMAX10 #defineSWAP(x,y){intt;t=x;x=y;y=t;} voidquicksort(int[],int,int); intintsrch(int[],int); intmain(void){ intnumber[MAX]={0}; inti,find; srand(time(NULL)); for(i=0;i<MAX;i++){ number[i]=rand()%100; } quicksort(number,0,MAX-1); printf("数列:"); for(i=0;i<MAX;i++) printf("%d",number[i]); printf("\n输入寻找

  • php版雪花算法生产唯一ID 分库分表专用

    <?php classSnowFlake { constTWEPOCH=1288834974657;//时间起始标记点,作为基准,一般取系统的最近时间(一旦确定不能变动) constWORKER_ID_BITS=5;//机器标识位数 constDATACENTER_ID_BITS=5;//数据中心标识位数 constSEQUENCE_BITS=12;//毫秒内自增位 private$workerId;//工作机器ID private$datacenterId;//数据中心ID private$sequence;//毫秒内序列 private$maxWorkerId=-1^(-1<<self::WORKER_ID_BITS);//机器ID最大值 private$maxDatacenterId=-1^(-1<<self::DATACENTER_ID_BITS);//数据中心ID最大值 private$workerIdShift=self::SEQUENCE_BITS;//机器ID偏左移位数 private$datacenterIdShift=self:

  • [TypeScript][文档]接口

    一、理解 接口类似于一种规则,用来约束传递参数的一方(实参)和使用参数的一方(形参) 对于函数实参,必须符合接口的规则:包含相应名称和类型的数据 而对于形参一方,则只能使用接口中定义了的字段了, 即对于函数而言,只能“看见”接口中定义好的属性,而传递过来的实参也必须包含这些属性,这样就形成了一种“规则”或者“约束”。 interfaceLabelledValue{ label:string; } functionprintLabel(labelledObj:LabelledValue){ console.log(labelledObj.label); console.log(labelledObj.size);//错误,只能使用接口中存在的属性,即label } letmyObj={size:10,label:"Size10Object"};//对于多出来的属性size我们不关心,只要myObj实现了接口里面的属性就可以了 printLabel(myObj);复制 二、接口属性 1.可选属性 interfaceSquareConfig{ color?:string; widt

  • Spark 0.9.0启动脚本——启动总结

    1.设置主目录和配置目录2.启动Mastersbin/spark-daemon.shstartorg.apache.spark.deploy.master.Master1--ip$SPARK_MASTER_IP--port$SPARK_MASTER_PORT--webui-port$SPARK_MASTER_WEBUI_PORT3.启动slaves单实例:sbin/start-slave.sh1spark://$SPARK_MASTER_IP:$SPARK_MASTER_PORT 多实例:sbin/start-slave.shispark://$SPARK_MASTER_IP:$SPARK_MASTER_PORT --webui-port<8081++>slave机执行命令:sbin/spark-daemon.shstartorg.apache.spark.deploy.worker.Worker ispark://$SPARK_MASTER_IP:$SPARK_MASTER_PORT --webui-port<8081++&g

  • 蓝桥杯完美按键(无延时)

    通过改变KEY的值改变模式 .h #ifndef_key_h#define_key_h#include<STC15F2K60S2.h>#defineu8unsignedchar#defineu16unsignedint#defineKEY1sbitkey1=P4^4;sbitkey2=P4^2;sbitkey3=P3^5;sbitkey4=P3^4;sbitkey_row1=P3^0;sbitkey_row2=P3^1;sbitkey_row3=P3^2;sbitkey_row4=P3^3;externu8key_value;externbitkey_flag;voidKey_Scan();voidKey_Judge(); #endif     .c   #include<key.h>u8key_value=0;bitkey_flag=0;#ifKEYu8pdatakey_catch[4]={0xff,0xff,0xff,0xff};u8pdatakey_backup[4]={1,1,1,1};u8pdatakey_state[4]

  • 移动API-restful的设计原则和参考

    移动应用API设计10大技巧 http://jingyan.baidu.com/article/455a9950fd27ffa166277825.html   RESTfulAPI设计指南 http://www.ruanyifeng.com/blog/2014/05/restful_api.html   理解RESTful架构 http://www.ruanyifeng.com/blog/2011/09/restful.html   移动APP服务端API设计应该考虑到的问题 http://www.360doc.com/content/15/0624/15/9200790_480371111.shtml   RESTfulAPI设计最佳实践 http://blog.jobbole.com/41233/   我所理解的RESTfulWebAPI[设计篇] http://www.cnblogs.com/artech/p/restful-web-api-02.html  

  • 【LeetCode】647. 回文子串 [C++]

    【题目描述】 给你一个字符串s,请你统计并返回这个字符串中回文子串的数目。 回文字符串是正着读和倒过来读一样的字符串。 子字符串是字符串中的由连续字符组成的一个序列。 具有不同开始位置或结束位置的子串,即使是由相同的字符组成,也会被视作不同的子串。   【思路】 计算有多少个回文子串的最朴素方法就是枚举出所有的回文子串,而枚举出所有的回文字串又有两种思路,分别是: 1.枚举出所有的子串,然后再判断这些子串是否是回文;2.枚举每一个可能的回文中心,然后用两个指针分别向左右两边拓展,当两个指针指向的元素相同的时候就拓展,否则停止拓展。 【代码】 classSolution{ public: intcountSubstrings(strings){ intn=s.size(); intl,r,ans=0; for(inti=0;i<2*n-1;++i) { l=i/2,r=l+(i&1); while(l+1&&n-r&&s[l]==s[r]) { ++ans; --l; ++r; } } returnans; } };复制  

  • java中|运算符和 ||运算符

    1inti=5; 2intj=10; 3intk=15; 4//6,15 5if((i++<j)||(k-->j)){ 6System.out.println("valueofi:"+i+"valueofk:"+k); 7} 8 9//7,14 10if((i++<j)|(k-->j)){ 11System.out.println("valueofi:"+i+"valueofk:"+k); 12} 13复制 如上述代码, |:当两边操作数的位有一边为1时,结果为1,否则为0。如1100|1010=1110 ||:逻辑或的关系 5行中,当第一个条件为真时,则不需要执行第二个条件的判断。所以k不需要减一。 10行中,两个条件均需要进行判断,无论第一个条件是否为真,都要进行条件二的判断。所以k要进行减一操作。    

  • jquery如何退出each循环,接着退出function方法

    转自:(33条消息)jquery如何退出each循环,再退出function的_zhengbo0的博客-CSDN博客   jquery如何退出each循环的?   在回调函数里使用returnfalse即可,大多数jq的方法都是如此的 ===================================   返回'false'将停止循环(就像在普通的循环中使用'break')。返回'true'跳至下一个循环(就像在普通的循环中使用'continue')。   以下举例如何退出each,接着再结束function:    

  • Servlet源码分析

    ServletAPI的核心就是javax.servlet.Servlet接口,所有的Servlet类(抽象的或者自己写的)都必须实现这个接口。在Servlet接口中定义了5个方法,其中有3个方法是由Servlet容器在Servlet的生命周期的不同阶段来调用的特定方法。       先看javax.servlet.servlet接口源码:   Java代码 packagejavax.servlet; //Tomcat源码版本:6.0.20   importjava.io.IOException;      publicinterfaceServlet{          //负责初始化Servlet对象。容器一旦创建好Servlet对象后,就调用此方法来初始化Servlet对象      publicvoidinit(ServletConfigconfig)t

  • 泛型

    (一). 泛型 1.1介绍   泛型是JDK5.0新增加的一个特性,泛型的本质是参数化类型,即所操作的数据类型都被指定为一个参数。这种类型参数可以用在类、接口、和方法的创建中,分别称为泛型类、泛型接口、泛型方法。Java语言引入泛型的好处是安全简单。 1.2认识泛型   在JDK5.0之前,没有泛型的情况下,通过对类型Object的引用来实现参数的"任意化",但"任意化"带来的缺点是需要显示的强制类型转换,此种转换要求开发者对实际参数类型预知的情况下进行的。对于强制类型转换错误的情况,编译器可能不会提示错误,但在运行的时候会出现异常,这是一个安全隐患。 1.3泛型的优势   使用泛型的优势在于编译期间检查类型,捕捉类型不匹配错误,并且所有的转换都是自动和隐式多的,提高代码复用率。 (二). 泛型的使用  2.1 泛型定义   实例化泛型类的语法结构如下:   1classname<type-param-list>obj=newclassname<type-param-list>(cons-arg-list);&n

相关推荐

推荐阅读