Carrie_ali的博客

原创 TS 类型别名

前面的type固定不变，取类型别名建议大写字母开头。比较复杂，我们可以使用。

原创 TS类型注解

/表示该数组要么全是字符串型，要么全是数字型。⭐记住后面还有 [ ]

原创 vue3 #跨组件通信

const money = inject('money') //获取数据。provide( 'money' , money ) //提供数据。

原创 vue3 #组件通信#子传父#defineEmits

button @click = "handleClick"> 子组件触发 </button>console.log(val) //val就是子组件传过来的数据。<h2>子组件</h2><h1>父组件</h1>

原创 vue3 #组件通信#父传子#defineProps

⭐如果后续想要在script中使用父组件传递的数据，可以const props = defineProps( ) ,: string, //?interface Props { //定义传过来的数据类型。赋值给一个变量，如果想获取car的值，使用props.car即可。const car = ref('五菱宏光')父组件//在子组件中（son.vue）子组件

原创 vue3 #watch监听器

⭐ref将user变为了响应式数据的同时，对user也进行了包装，所以读取user的name属性，只能通过 user.value.name 获取。四、监听对象中某个属性的变化。二、监听多个ref数据。

原创 vue3 计算属性

set(val:number) { //设置改变age的值。get() { //用于获取。一、简单写法（只用获取）二、完整写法（双向绑定）

原创 vue3生命周期

在 Vue 3 中，生命周期方法的名称有所改变。

原创 vue3 #ref #reactive

一、reactive函数将复杂类型的数据包装为响应式数据。一、ref 函数将简单类型的数据包装为响应式数据。

原创 vue3 #setup写法

/script>

原创 vue3 项目创建初期#安装插件

1.vue2如果安装的vetur插件，在vue3的项目中需要禁用vetur,因为在vetur插件中使用vue3的语法会报错。2.vue3的入口变为了main.js,vite的入口是index.html。一、安装vsCode插件。

原创 vue3 组合式API-setup函数

/return后，在模板字符串中才能使用。

原创 vue 作用域插槽

原创 自定义指令

全局注册举例：

原创 vue组件通信#父传子#子传父

父传子：子传父：

原创 vue组件 #局部注册#全局注册

全局注册不用再引入组件，可以直接使用。

原创 vue生命周期

原创 vue #watch侦听器

1.监听简单属性：

原创 vue #computed计算属性

计算属性会对计算出来的结果进行缓存，下一次使用直接读取缓存，依赖性(数据)变化了，才会重新计算，并再次缓存，性能较高。

原创 TS #数组 #函数 #对象 #接口

为对象的类型注解命名，方法复用对象，interface表示接口，接口名称约定用 I 开头。如果数组中的元素是 number 型 ，那么创建数组为。void 表示对象的方法没有返回值。

原创 TS #类型注解

常用的基本数据类型有5个：numberstringboolean。

原创 TS #简介#开发环境搭建

一、TS简介二、TS开发环境搭建

原创 数组 #map方法#join方法

join()方法用于把数组中的所有元素转换为一个字符串。map 可以遍历数组处理数据，并且返回新的数组。map有返回值，forEach没有返回值。

原创 在script中修改静态样式

原创 对象#对象的操作#对象中的方法#遍历对象

fn : function (x , y) { // 在对象里面叫方法 ， 在对象外面叫函数。k ) ，是因为 k 在对象中 指的是 ‘ uname ’ 、 ' age ' ，如果使用obj。内置对象：javaScript内部提供的对象（已经写好的对象方法），方便开发者直接使用。obj.gender = ' 男 ' //直接添加obj中没有的属性。obj.age = 17 //直接修改obj中已有的属性。delete obj.age //直接删除obj中已有的属性。

原创 封装计算时间函数

return ` 转换完毕之后是 ${h}小时 ${m}分钟 ${s}秒`小时：h = parseInt ( 总秒数 / 60 / 60 % 24 )let second = +prompt ( ' 请输入秒数： ' )分钟：m = parseInt ( 总秒数 / 60 % 60 )秒数：s = parseInt ( 总秒数 % 60 )

原创 函数#函数的使用#函数传参#返回值return

因为函数是有函数作用域的，如果不使用 return , 那么在函数体中赋值，在函数外是不能使用的。return后面的代码不会再被执行，会立即结束当前函数，所以return后面的 数据不要换行写。console.log( num1 + num2 ) // 打印出来的结果为3。// 结果为20 ， 相当于执行了 fn() = 20。// 相当与 num1 = 1， num2 = 2。需要调用者传入数据，那么就需要用带参数的函数。函数是执行特定任务的代码块，//函数不调用，自己不执行。

原创 #冒泡排序

if ( arr [ j ] > arr [ j ] + 1 ) { // 第一个数大于第二个数才交换。let temp = arr [ j ] // 开始交换两个变量。console.log ( arr ) // 结果为 [ 1 , 2 , 3 , 4 , 5 ][ 5 , 4 , 3 , 2 ,1 ] 变化为 [ 1 , 2 , 3 , 4 , 5 ]长度就是 数组长度 减去1 （ arr.length - 1 ）5个数据我们一个需要走4趟（比较4次）

原创 数组#增加、删除、修改数组元素

console.log(arr) //结果为 [ ' a ' , ' c ' , ' d ' ]console.log(arr) //结果为 [ 4 , 1 , 2 , 3 ]console.log(arr) //结果为 [ 1 , 2 , 3 , 4 ]console.log(arr) //结果为 [ 2 , 22 , 5 ]console.log(arr) //结果为 [ 1 , 2 ]console.log(arr) //结果为 [ 2 , 3 ]

原创 #路由传参#页面缓存

filter=name&sort=desc （传参通过？否则， 页面组件会失去缓存效果（命名时需要按照严格的命名规范）

原创 关于vue的组件缓存

属性，Vue 默认会使用组件的文件名作为组件的名称。这样会导致在组件切换时，由于每个组件的名称都是不同的，这个组件的主要作用是在组件切换时保留组件的状态，以避免重新渲染和销毁组件。组件无法将状态保存下来，从而失去了缓存的效果。组件时，需要为每个组件设置一个唯一的。因此，为了能够让组件缓存生效，在使用。组件能够正确地缓存和还原组件的状态。组件能够正确地缓存和还原组件的状态。这样可以确保在组件切换时，来实现组件的动态切换，并且通过。给每个组件设置了一个唯一的。Vue 的组件缓存是通过。在下面的例子中，使用了。

原创 for语句#遍历数组

1.continue ： 退出本次循环，一般用于排除或者跳过某个选项的时候，可以使用continue。2.break : 退出整个for循环，一般用于结果已经得到，后续不再需要循环的时候使用。//退出本次循环（ i 等于 3 时的循环）//退出整个循环（ i 等于 3 时的循环）控制台输出结果为 1 2 4 5。控制台输出结果为 1 2。

原创 语句#if语句#三元表达式#switch语句#while循环#for循环

num 是否大于10，如果大于10，控制台输出true；否则控制台输出false。//switch后面的值===case后面的值（必须为全等）满足条件执行的代码 ： 不满足条件时执行的代码。console.log('没有符合条件的')//break退出switch，否则会往下渗漏。为了看到清楚：用的是中文符合。

原创 vue项目文件说明

17. package-lock.josn ->维护每一个具体的版本，以及下载地址，校验。19. ReadmME 项目的说明，描述文件 有两个，一个是中文，一个是英文。5.项目的运行需要，从main.js开始 -> 创建vue实例化 ->4.settings -> 公共的一些样式配置，比如标题，logo。10. .eslintrc.js eslint配置文件。permission.js 权限相关，登录权限，页面权限。settings.js 公共的配置， 整个网页的标题。

原创 将代码上传到git仓库

git commit -m '名字'git glone 项目的url。

原创 页面跳转时，想要弹出一个新的tab页，而不是跳转到原有的tab页

把获取到的id,传进去，小编这里的id，传的是row.deploymentId，你们可以根据自己从数据中拿到的id传进去。点击跳转时，每次都会传入不同的id，这样每次跳转的路由就不一样了，所以就不会跳转到之前已有的tab页面了。我们在原有的 path: 'definition/model' , 后面加入id 做为唯一标识。1.可以在路由跳转时，配置一个标识符。2.在router.js文件中。

原创 配置淘宝镜像

npm config set registry http://registry.npmmirror.com #设置淘宝镜像地址。npm config get registry #查看镜像地址是否设置成功。具体信息可以搜索 npm mirror , 镜像官网查看相关信息。