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数据类型:类型别名/联合类型/字面量类型/类型推论等纲要、联合枚举类型:从C语言看枚举与联合类型到TypeScript/Python
装饰器:《Typescript装饰器Decorators浅析》、从java注解漫谈到typescript装饰器——注解与装饰器
图书推荐:
TSX入门手册
.jsx是javascript文件并表明使用了JSX语法。
.tsx表明是typescript文件并使用了JSX语法。
JSX 可以更好的描述 UI 应该呈现出它应有交互的本质形式。JSX 看起来有点类似模版语言,但它具有 JavaScript 的全部功能。
JSX在React中使用给我们带来了很大的便利,而TSX,弥补了JSX缺乏类型系统、类型校验等弊端,大大降低了我们代码出错的概率。
如何学习JSX
先看官方文档:
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/
VUE3/TS/TSX入门手册指北的更多相关文章
- Redis 入门权威指北
前言 看看业务遇到了什么问题? 我们要从互联网架构的演变之路开始说起Redis的前世今生. 在我们小的时候,网络世界好像就是只有通过大屁股台式机才能进入一样,彼时的手机只是用来打打电话,发发短信,网上 ...
- 后端API入门到放弃指北
后端API入门学习指北 了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一 ...
- Angular 从入坑到挖坑 - Router 路由使用入门指北
一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...
- git宝典—应付日常工作使用足够的指北手册
最近公司gitlab又迁移,一堆git的命令骚操作,然鹅git命令,感觉还是得复习下——其实,git现在界面操作工具蛮多,比如intellij 自带的git操作插件就不错,gitlab github ...
- Python 简单入门指北(二)
Python 简单入门指北(二) 2 函数 2.1 函数是一等公民 一等公民指的是 Python 的函数能够动态创建,能赋值给别的变量,能作为参传给函数,也能作为函数的返回值.总而言之,函数和普通变量 ...
- Python 简单入门指北(一)
Python 简单入门指北(一) Python 是一门非常容易上手的语言,通过查阅资料和教程,也许一晚上就能写出一个简单的爬虫.但 Python 也是一门很难精通的语言,因为简洁的语法背后隐藏了许多黑 ...
- 关于supervisor的入门指北
关于supervisor的入门指北 在目前这个时间点(2017/07/25),supervisor还是仅支持python2,所以我们要用版本管理pyenv来隔离环境. pyenv 根据官方文档的讲解, ...
- Celery入门指北
Celery入门指北 其实本文就是我看完Celery的官方文档指南的读书笔记.然后由于我的懒,只看完了那些入门指南,原文地址:First Steps with Celery,Next Steps,Us ...
- 颓废选手在 Ubuntu/Noilinux 下的生存指北
颓废选手在 Ubuntu/Noilinux 下的生存指北 Hint: 这里的 "#" 都是假注释,复制的时候记得删除 一些基本的生存命令 ctrl + alt + t #调出终端 ...
- [转] iOS开发者的Weex伪最佳实践指北
[From] http://www.cocoachina.com/ios/20170601/19404.html 引子 这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享 ...
随机推荐
- Qt5 学习积累
目录 1.cout/cin 2.随机数 3.QSting. string.QChar,.char等的转换 4.退出 5.Qt::tr() 6.QFrame::shape,shadow 7.QCombo ...
- 23. 从零用Rust编写正反向代理,流控小姐姐的温柔一刀!
wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,内网穿透,后续将实现websocket代理等,会将实现 ...
- 【pwn】整数溢出
这是ctfshow上面的一道题 这边v1和v2定义时都是int,有符号整数,想让v1-v2=9,可以考虑负数,但是这个函数过滤了负号 if ( strchr(s, 45) ) return ...
- 一篇文章让你理解:什么是Spring???
背景 市场上,随便一个Java工程师的招牌要求上,都可以看到SSM.Spring.SpringMVC...类似字样.这玩意到底是个啥? 这是中邮消费招聘的岗位要求,可以看到第3点: 3.熟悉Strut ...
- C语言已知四位数3025具有一个特殊性质:它的前两位数字30与后两位数字25之和是55,而55的平方正好等于3025。编程找出所有具有这种性质的四位数。
#include<stdio.h> void main() { int n, i, j; for (n = 1000; n < 10000; n++) { i = n / 100; ...
- RAM 低功耗
常见的ram低功耗方法包括的shutdown信号,1 关闭,0不关闭正常功能. ls低睡眠,深度睡眠. 关闭时节省90%功耗,数据丢失. 重新启动需要50ns以上. ram clk +gate
- Head First Java学习:第十章-数字很重要
1.Math 方法:最接近全局的方法 一种方法的行为不依靠实例变量值,方法对参数执行操作,但是操作不受实例变量状态影响,那么为了执行该方法去堆上建立对象实例比较浪费. 举例: Math mathOb ...
- parameterType的用法
在mybatis映射接口的配置中,有select,insert,update,delete等元素都提到了parameterType的用法,parameterType为输入参数,在配置的时候,配置相应的 ...
- 生产升级JDK 17 必读手册
原文点这里,查看更多优质文章 DK 17 在 2021 年 9 月 14 号正式发布了!根据发布的规划,这次发布的 JDK 17 是一个长期维护的版本(LTS). Java 17 提供了数千个性能.稳 ...
- ElasticSearch之cat datafeeds API
命令样例如下: curl -X GET "https://localhost:9200/_cat/ml/datafeeds?v=true&pretty" --cacert ...