学习TypeScript
TypeScriptTypeScript 介绍
TypeScript 官方文档
TypeScript 简称:TS,是 JavaScript 的超集,简单来说就是:JavaScript 有的 TypeScript 都有
TypeScript 实际上就是 JavaScript(弱类型) + Type (类型) , 即为 JS 添加类型支持,如图
12// 为username声明明确的变量类型 字符串类型let username: string = 'John';
TypeScript 为什么要为 JS 添加类型支持
Javascript 类型系统存在先天缺陷,我们在写代码时经常遇到类型错误(Uncaught TypeError)
这类错误的出现导致项目开发完成上线之后,要投入大量的精力和时间去测试,找 bug,改 bug,对于开发效率是一种降低。
问题为什么 JS 在开发时不能提前预知,预防这些错误呢?
因为 Javascript 属于动态类型的编程语言,动态类型最大的特点就是它只能在代码执行期间做类型的相关检查,所以往往你发现问题的时候,已经晚了。
...
bug的解决
对话框清空表单信息和表单校验:bug的描述:新增和修改公用同一个dialog,先点击修改,再点击新增,此时所有的表单检验项都会飘红
解决方法: 打开对话框时清空表单的信息,使用nextTick清空表单的校验信息(调用表单实例的resetFields方法) 注意:修改时使用nextTick给表单赋值,否则会影响resetFields方法的调用!!!
表单校验失败,跳转到第一个错误的地方bug的描述:ui组件库的表单校验失败,跳转到第一个错误的地方的功能不符合开发需求,需要自己手动写一个方法;
代码:(适用于element-ui/plus)
123456789const scrollView = () => { // 校验失败的数据会有一个'is-error'的类 let dom = document.getElementsByClassName('is-error')[0]; dom.scrollIntoView({ block: 'center', behavior: ...
Vue的组件通信
整理了vue2 和 vue3的组件通信方法,vuex,pinia不作为此次重点
父子:父组件与子组件通信
子父:子组件与父组件通信
vue组件通信1、props(父子,子父)父组件传递的并非函数:父亲给儿子传递数据
父组件传递函数:实质为儿子想给爹传数据
==注意==:vue3使用defineProps来接收父组件传递的信息
vue2代码实现:12345678910111213141516171819202122232425262728293031 <!-- 父组件 --><template> <div> <h2>我是父组件</h2> <div>我有一辆车---{{ msg }}</div> <div>儿子给的{{ fromSon }}</div> <!-- 子组件 updataCar是一个函数updataCar --& ...
vue3上手指南
了解 Vue3
官方文档: https://staging-cn.vuejs.org
1. 了解相关信息
2年多开发, 100+位贡献者, 2600+次提交, 600+次PR(Pulll Request)
Vue3支持vue2的大多数特性
更好的支持Typescript
2. 性能提升
打包大小减少41%
初次渲染快55%, 更新渲染快133%
内存减少54%
重写虚拟DOM的实现和Tree-Shaking
3. Composition API
也称组合 API
setup
ref 和 reactive
computed 和 watch
新的生命周期函数
自定义hooks函数
4. 其它新增特性
Teleport - 瞬移组件的位置
Suspense - 异步加载组件的loading界面
全局API的修改
创建vue3项目1. 使用 vue-cli 创建12345678910111213## 安装或者升级npm install -g @vue/cli --- 最好是在cmd中执行---system32/cmd---开始---cmd## 保证 vue cli 版本在 4.5 ...
react路由-v6
React Router 6 快速上手1. 准备1.1. 单页应用
SPA (single page application): 单页应用
也就是整个应用只有一个页面, 页面切换时, 做局部页面更新 (可能要获取新的数据 )
好处: 加载数据少, 基本不会出现切换页面时空白的情况
现代的前端应用很多都是SPA
1.2. 路由
路由: 一个 key: value 的映射组合
后端路由: path 与处理请求的回调及请求方式的映射组合
1app.get('/getUser', (req, res) => {})
前台路由: path 与 路由组件的映射组合
12<Route path='/about' element={<About/>}></Route><Route path='/home' element={<Home/>}></Route>
当请求某个路由路径时, 浏览器不会发 ...
