前端学习笔记

原创已于 2025-01-04 20:58:55 修改 · 377 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #笔记

于 2024-11-26 10:23:09 首次发布

API 风格

为啥会有这一个章节？
——对于初学者来说在项目中，经常会看到在这里插入图片描述
但是在官网文档上也会看到

就比较纳闷了，其实仔细看文档就可以了解到

了解

需要了解ES、JavaScript、VUE、TS、ant design之间的关系

变量定义

变量定义方法与ES版本有关系。
目前有var、let、const，var用的较少。

数据类型

ts属于强类型，类型列表如下（带继续补充），后续会补充官网链接

类型分类	类型	说明
数字	number	数字，长了会被裁断
数字	big int	数字，长了不会被裁断
字符串	string
集合	Array
集合	Map

可选属性

在这里插入图片描述

vue3的数据绑定

参考资料：
https://blog.youkuaiyun.com/h8062651/article/details/143254339?spm=1001.2014.3001.5506

Vue 3 提供了 reactive 和 ref 两个主要函数来创建响应式对象。

reactive：用于创建包含多个属性的响应式对象。当对象的属性发生变化时，会触发响应式更新。 reactive 会递归地将对象的每一层都转换为响应式，包括嵌套的对象和数组。

ref：通常用于创建单个值的响应式引用。虽然 ref 也可以接受一个对象作为初始值，但这种情况下，只有整个对象被替换时才会触发响应式更新，对象内部的属性变化不会触发更新。
因此，对于深度嵌套的对象，ref 不是最佳选择。

官网教程解释在这里插入图片描述

antdesign vue3实现双表头

https://www.cnblogs.com/fifteen-home/p/17888385.html

antdesign vue3表格合并单元格

https://blog.youkuaiyun.com/2202_75324165/article/details/141959510

ts官网

https://www.typescriptlang.org/
对于后端开发者入门建议文档阅读：https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html

从数据传递到modal

https://cloud.tencent.com/developer/information/%E5%B0%86%E6%95%B0%E6%8D%AE%E4%BB%8Eantdesign%E8%A1%A8%E8%A1%8C%E4%BC%A0%E9%80%92%E5%88%B0modal-ask

数据父传子props的watch

https://developer.aliyun.com/article/1621721
https://blog.youkuaiyun.com/weixin_46689373/article/details/135449946
在这里插入图片描述
count为props，需要先定义props

扩展运算符

扩展运算符属于javascript的，可以在ts官网找相关资料
https://blog.youkuaiyun.com/qq_42857603/article/details/129366840
https://blog.youkuaiyun.com/dyk11111/article/details/133820709
很好用，但是有待继续学习

插槽的使用

vue官网资料：https://cn.vuejs.org/guide/components/slots.html#slots
基于ant-design的tabs
实现超长的tab的名字显示为…同时鼠标放上去会有tooltip
在对应的vue文件中（SFC单文件组件）
背景：不知道为何这个a-tab-pane的:title不生效

<template>
	<a-tabs v-model:activeKey="activeTab" tabPosition="left">
	      <a-tab-pane v-for="item in list" :key="item.id" >
	        <template #tab>
	          <div style="" class="xTab" :title="item.name">
	            {{ item.name }}
	          </div>
	        </template>
	      </a-tab-pane>
	</a-tabs>
</template>

<style lang="less" scoped>
.xTab {
  text-align: left;text-overflow: ellipsis;white-space: nowrap;width: 180px;overflow: hidden; color: dark;
}
// 将这句直接写在div的style里面也是可以的
//text-align: left;text-overflow: ellipsis;white-space: nowrap;width: 180px;overflow: hidden; color: dark;
</style>

antdesign select使用

Ant Design Select支持一键全选/空选
https://blog.youkuaiyun.com/qq_42203909/article/details/107511009

antdesign TreeSelect使用

后端返回数据里面有一个disable如果值为true则前端会设置这个项不可选

antdesign table固定表头

vue禁止复制粘贴

<template>

  <div @copy.prevent @cut.prevent @contextmenu.prevent class="no-select">


    <!-- 页面内容 -->


  </div>


</template>

<style lang="less" scoped>
.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
  }
</style>