摘要：props是用来给组件接收外部数据的, 一般是父组件给子组件传值。可以是对象或者数组。 一、语法 1. 数组 props属性值如果是数组的话，那么主要就是用来接收数据的。 props: ['name', 'msg'] ⚠️ 注意：这里name,msg 是加引号的字符串。不要把引号给忘了！ 2. 对象 阅读全文

摘要：ref是用来给元素或组件注册引用信息的。换句话说，就是通过ref我们可以获取元素或组件。 在学习ref之前，我们可以根据document来获取元素的。像这样 <template> <div class="hello"> <h1 id="msg">{{msg}}</h1> </div> </templ 阅读全文

摘要：我们在使用vue组件的时候，可能搭个脚手架就开始创建.vue文件了，然后在需要使用的页面或组件中再引入组件开始使用，很少去关注组件内部的东西，其实VueComponent,也叫组件实例在vue组件中是个很重要的概念，能够帮助我们更深入理解组件，以及后面看vue源码也会更加容易。 组件到底是什么 从代 阅读全文

摘要：一、前言 创建Vue实例时，使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项}，所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外） 如： new Vue({ //选项配置 el: '#app', component 阅读全文

摘要：一、什么是组件？ ⏰ 宏观上组件 在软件开发中，组件（Component）是指具有独立功能和可重用性的模块化单元。它可以是一个软件系统的一部分，也可以是一个独立的软件单元。组件的设计目标是使系统更易于开发、测试、维护和扩展。 👀 注释：“软件单元：可以是一个类，一个函数，一个功能等；” ⏰ Vue 阅读全文

摘要：生命周期 生命周期是指组件从创建，运行到销毁的阶段。而生命周期函数（也叫生命周期钩子）是vue在关键的时刻帮我们调用的一些特殊名称的函数，会根据生命周期的阶段，依次执行。 从上图可以看出，vue的生命周期分为以下几个阶段： beforeCreate created beforeMount mount 阅读全文

摘要：过滤器顾名思义，是用来过滤数据的。其实在前端页面中并不常用的，能够帮我们简化代码，使模板变得更加清楚。虽然vue3中也已经取消了这个功能，但是了解并没有坏处。 自定义过滤器 过滤器是用来过滤数据的，一般用在模板中，主要是两个地方：插值语法中和v-bind表达式中。 自定义过滤器根据局部和全局可以分为 阅读全文

摘要：条件渲染 条件渲染，顾名思义，就是根据特定条件渲染内容。在使用条件渲染的时候，我们一般都会使用到两类指令：v-if和v-show v-if指令 v-if指令的意思就是说当指令的表示式返回的是true，那么就会加载渲染对应的DOM节点，否则就不会加载渲染。 ⏰ 基本用法 <div v-if="1 1" 阅读全文

摘要：我们在使用vue的时候，经常会涉及到数据绑定和响应式，这里我们主要就是详细地介绍数据绑定和响应式原理。只有理解透了这些原理，对于开发中常见的一些问题我们就能很快地找到解决方案 数据绑定 数据绑定通俗地讲就是将视图和数据绑定在一起，让页面能够展示正确的数据内容，这里我们就不得不提一下MVVM模型。 1 阅读全文

摘要：监测对象 我们在前面已经了解到，vue监测对象是使用Object.defineProperty()来进行数据劫持的，这样就给数据添加了一个代理，每次对象的属性被修改时就会调用setter, 对象的属性被获取的时候就会调用getter。 下面我们简单地实现一下vue的响应式 let obj = { n 阅读全文

摘要：什么是监听属性？ 所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应，监听属性，意思就是可以监视其他数据的变化。 基本用法 使用watch配置项，在配置项里面写上要监视的属性，每次属性值的变化都会触发handler函数回调，也可以监视计算属性的变化。 🌰示例 <!--templat 阅读全文

摘要：我们一般是在模板中放置的都是一些基础变量或者一些简单的运算，但是对于一些复杂的表达式是不建议写在模板中的，比如这个变量依赖于别的变量，这时候如果将所有的逻辑都放在模板里面就不利于维护也不利于复用，这时候就可以使用计算属性了。简单地说计算属性就是要用的属性不存在，需要通过已有的属性计算得来的。 什么是 阅读全文

摘要：一、监听 在vue中事件监听是通过v-on指令去监听的，并在触发的时候运行一些JavaScript代码。即v-on:后面加事件类型 <span class="btn" v-on:click="clearFun">点我触发点击事件</span> v-on指令也可以简写成@符 <span class=" 阅读全文

摘要：一、什么是指令 Vue指令是Vue.js框架中的一种特殊语法，用于在HTML模板中直接操作DOM。通过使用Vue指令，我们可以对DOM元素进行动态的绑定、条件渲染、列表渲染等操作，实现数据驱动的交互效果。 ⏰ 指令： 1. 本质就是自定义属性2. Vue中指定都是以 v- 开头，不管是内置指令，还是 阅读全文

摘要：一、安装 在创建vue项目之前，我们需要安装一些环境，比如：node, vue脚手架， npm等 1. 安装node 去官网下载：nodejs.org/en/ 下载最近版本，直接在首页下载就好 也可以下载之前的原始版本 nodejs.org/en/download… 如果之前已经安装过node, 可 阅读全文

摘要：一、什么是模板字面量类型 ( Template Literal Types ) typeScript 提供给我们的，用于字符串字面量扩展的有效工具 模板文本类型基于字符串字面量类型构建，并且能够通过联合扩展到多种字符串字面量类型。 语法： `${T}` 🔔注意：这里的 T 是类型占位，我们不知可以 阅读全文

摘要：一、概述 在大多数情况下，我们在使用对象前就可以确定对象的结构，并为对象中的属性添加准确的类型。 但是当我们无法确定对象中有哪些属性时，或者说对象中可以出现任意多个属性时，此时，我们就可以用索引签名类型了。 ⏰ 索引签名，主要是用来规定索引和属性值的类型，索引类型只能是 string 类型 或者 n 阅读全文

摘要：理解重载 用于实现不同参数输入并且对应不同参数输出的函数，在前面定义多个重载签名，一个实现签名，一个函数体构造，重载签名主要是精确显示函数的输入输出，实现签名主要是将所有的输入输出类型做一个全量定义，防止TS编译报错，函数体就是整个整个函数实现的全部逻辑。 函数重载 🌰应用例子： 一个班级有很多学 阅读全文

摘要：在你刚学 TypeScript 的时候，是不是遇到了很多令人抓狂的问题，最终你用上 any 大招把问题解决了。如果后期你没有系统的学习 TypeScript 的类型系统，你会发现你可能把 TypeScript 学成了 AnyScript。 在 TypeScript 中，any 类型被称为 top t 阅读全文

摘要：TS中的联合类型 | 和交叉类型的区别 联合类型 " | " : 会把2者的属性进行合并，也就是形成并集，进行类型声明的时候，你的属性可以是前者，属性不能少，当时声明了几个就要写几个，也可以是后者，也可以前者+后者。 type A = { name: string, age: number } ty 阅读全文