随笔分类 - 前端学习
自己看前端视频的一些基础学习，加油，颜孙达
摘要：vue3中路由器的工作模式 主要有两种，history和hash模式 history vue2 -> model:history vue3 -> history:createWebHistory() React:BrowserRouter history具有的优点：URL更加美观，不带有#，更接近传
阅读全文
摘要：hooks实现将一个功能的所有数据、方法、生命周期函数放到一块去使用。 我们在src底下定义个Hooks文件夹，将我们要进行模块化的功能设置为use功能名。 例如：我要将点我加一这个功能进行hooks，则使用useSum.ts这个文件定义功能逻辑。 在这个ts里面需要export default 函
阅读全文
摘要：父组件 <template> <person :list="personList" /> </template> 子组件用defineProps 来接收 const props = defineProps({ list: { type:Array, required:true, }, }); con
阅读全文
摘要：watchEffect和watch的对比 都能监听数据的变化，不同的是监听数据的方式不同。 watch要明确指出要监听的数据 watchEffect不用明确指出要监听的数据，函数中用到哪些属性就监听那些属性。 watchEffect(() => { if (person.age > 22) { co
阅读全文
摘要：使用watch时，如果想监视对象的内部属性值。需要使用watch的第三个参数的配置对象，手动开启深度监视。 //使用watch时如果想监视对象内部的属性值，需要使用watch的第三个参数，手动开启深度监视 watch(person, (newValue, oldValue)=>{ console.l
阅读全文
摘要：watch 监听定义的数据发生改变的时候执行什么函数 watch 方法有两个参数 watch(sum，箭头函数) 这个箭头函数里面有两个参数(newValue,oldValue)=> {},如下代码 <template> <!-- watch；监视数据变化 vue3 可以监视一下四种数据类型： re
阅读全文
摘要：computed 的作用就是监测变量是否发生改变。如果变量发生了改变，那么computed定义的方法就会执行。 在vue3中computed新增get 和set方法。分别对应修改和设置值
阅读全文
摘要：可以看链接 https://blog.csdn.net/weixin_46146718/article/details/139269419
阅读全文
摘要：有两种方式可以搭建： 一：使用vue-cli中的webpack创建 第二：推荐使用vite来创建项目 vite是新一代前端构建工具，新的前端构建工具，比webpack要快一些。 npm create vue@latest 创建完项目后，我们可以看到项目最外层有index.html Vite项目中，i
阅读全文
摘要：当我们要对事件定义类型。一种是通过console.log(e)来看事件的类型。另外一种是@事件名的时候，将$event写好，鼠标放上去看事件类型。再讲$event删除。 如下： 然后我们定义函数的时候就可以指定事件类型了 const clickMi = (e:MouseEvent)=>{ conso
阅读全文
摘要：我们平时的写法 import { ref } from "vue"; const msg = ref("你好世界"); 使用TS的写法 import { ref } from "vue"; const msg = ref<string>("你好世界"); listType表示数组里面放对象，我们可以
阅读全文
摘要：向父元素发送消息 之前的语法： 在TS语法中，我们既要对defineEmits做类型约束，又要对emits做类型约束。 最主要是对defineEmits做一个泛型的约束。 //在泛型对象中，有几个事件就写几个约束 type emitsType = { //()中有n个参数,第一个固定的是e，其他有具
阅读全文
摘要：小知识点：在vscode中定义好子组件的vue视图后。我们可以直接使用<子组件/>来使用子组件，因为我们使用了import插件，他会自动import 所需文件。 使用一：父向子传值，我们之前父向子传值的时候，子组件是如下： defineProps({ house: { type: String, r
阅读全文
摘要：泛型是可以在保证类型安全的前提下，让函数等与多重类型一起工作，从而实现复用。常用于：函数、接口、class中。 泛型在定义的时候并不知道具体是什么类型，只有在调用的时候才知道是什么类型。 如下： /* 需求：定义一个getId方法，传入一个值，返回这个值 */ function getId<T>(v
阅读全文
摘要：先看两端代码 let str = "hello" const str1:string = "hello" const str2 = "hello" 在上述代码中用let声明的变量是字符类型的 而用const 没有指定类型的话,其是字面量类型，不能随意进行变更。
阅读全文
摘要：接口类型 作用：给对象约束属性和方法 基础语法： interface 接口名 { 属性名：类型 } 接口名称推荐以I开头 接口声明后，直接使用接口名称作为变量类型 interface person { name: string age: number gender: string sayHi: ()
阅读全文
摘要：数组的定义 普通定义： let arr: number[] = [4, 6, 7, 9]; //需求：希望数组里面可以存数字或者字符串 联合数据类型： //联合数据类型：|的优先级比较低，需要用（）包裹提升优先级 //一旦使用联合查询，说明arr里面的值既可能是number也可能是string，所以
阅读全文
摘要：Node.js/浏览器，只认识JS代码，不认识TS代码，需要将TS代码转化为JS代码，然后才能运行。 安装命令：npm i -g typescript 或者 yarn global add typescript 注意：Mac电脑安装全局包时，需要通知添加sudo获取权限。sudo npm i -g
阅读全文
摘要：由于对象采用的是引用赋值。所以直接用“=”,修改属性的时候也会将原来的变量改变掉。 因此，就有了浅拷贝与深拷贝 用{...obj}和object.assign表示浅拷贝，其只拷贝外围对象的一层，而不会拷贝多层。 方法二：使用Object.assign 深拷贝的实现 其一是通过递归实现拷贝。其二lod
阅读全文
浙公网安备 33010602011771号