路上捡来的博客-CSDN博客

原创 VUE3+TS项目搭建

项目的创建运行 vue create ‘项目名称'或 vue ui 图形化配置项目选择自己配置：选择基础配置：选择是否使用类样式组件：是否使用babel编译TS：选择router模式：选择css预处理器：选择eslint规范：（我选第三 eslint+prettier)选择eslint的时间：配置文件存放：一. 代码规范1.1. 集成editorconfig配置EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编

2022-03-14 09:02:06 11314 2

原创 Typescript笔记-总

1. TS的数据类型TS常用类型类型描述String字符串类型Nubmer数字类型Boolean布尔值类型Object对象类型Array数组类型any任意类型(不推荐)unknown类型安全的any类型void空值（undefined)never不能是任何值tuple元组，TS新增类型，固定长度数组enum枚举，TS新增类型1.1 基础类型声明// 1.字符串类型let sayHi: str

2022-02-27 09:15:00 660

原创 typescript笔记三：接口以及补充

1. 泛型泛型的作用场景：当我们定义函数或类时，如果遇到类型不明确的就可以使用泛型，本质上来说就是参数的类型化。参数的类型化：在定义这个函数时, 我不决定这些参数的类型,而是让调用者以参数的形式告知,我这里的函数参数应该是什么类型。（不定义为any的原因是会丢失类型信息）function demo<T>(nbr: T): T { return nbr}// 调用方式1：明确传入类型demo<number>(20)demo<string>("你好"

2022-02-26 04:00:00 450

原创 typescript笔记二：类与接口

1. class类类的基础知识—ES6+ 类1.1 constructor构造函数类通过class关键字来定义一个类。类可以有自己的构造函数constructor，当我们通过new关键字创建一个实例时，构造函数会被调用。构造函数不需要返回任何值，默认返回当前创建出来的实例。class father { // 在默认的strictPropertyInitialization模式下面我们的属性是必须初始 // 化的，如果没有初始化，那么编译时就会报错 name: strin

2022-02-23 16:01:09 586

原创 typescript笔记一：基础类型

1. TS的数据类型TS常用类型类型描述String字符串类型Nubmer数字类型Boolean布尔值类型Object对象类型Array数组类型any任意类型(不推荐)unknown类型安全的any类型void空值（undefined)never不能是任何值tuple元组，TS新增类型，固定长度数组enum枚举，TS新增类型1.1 基础类型声明[外链图片转存失败,源站可能有防盗链机制,建议将图片

2022-02-23 15:44:02 624

原创 webpack5基础笔记

了解webpack5原理之前可以先了解一下tapable。https://github.com/webpack/tapable/tree/tapable-11. webpack安装创建package.json 项目依赖管理文件npm init 2. 安装局部|全局webpacknpm install webpack webpack-cli -D //局部npm install webpack webpack-cli -g //全局3. 根目录创建webpack.config..

2022-02-07 10:03:31 865

原创 vue3 高阶语法

1.2 h函数的基本使用h函数接收三个参数：type，props 和 children。type类型：String | Object | Function详细：HTML 标签名、组件、异步组件或函数式组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。props类型：Object详细：一个对象，与我们将在模板中使用的 attribute、prop 和事件相对应。可选。children类型：String | Array | Object详细：

2022-01-18 11:46:46 1633

原创 Vue3组件化高级基础

1.父子组件通信1.1父组件传值给子组件：父组件自定义属性传值： <div> <header :navList="list" :title="你好"></header> </div></template><script>import header from "./Header.vue";export default { components: { header, }, // 定义属性

2022-01-14 09:54:51 976

原创 Vue3.Router路由的使用

vue3和vue2路由基础部分变动不大，基础详情查看，该篇是针对之前的文章进行补充。vue2router基础。1. router-link 属性属性描述to要跳转的路由replace设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()；active-class设置激活a元素后应用的class，默认是router-link-activeexact-active-class链接精准激活时，应用于渲

2022-01-10 15:48:20 9039

原创 Vue3 compositionAPI等知识补充

1. 了解composition APIOptions API的弊端：vue2中使用的时Options API,其一大特点就是在对应的属性中编写对应的功能模块；比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命周期钩子。但是这种代码有一个弊端：当我们实现某一功能时，这个功能对应的代码逻辑会被拆分到各个属性中，阅读困难，当我们处理单个逻辑关注点时，需要不断的跳到相应的代码块中。compositions API 的出现解决了这个大组件逻

2022-01-06 23:11:28 564

原创 VUE3深入源码了解key

1. 为什么要使用key??Vue官网中对此有相关介绍：key 特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示，以在比对新旧节点组时辨识 VNodes。延申：什么是VNodes?VNodes即虚拟节点，是存在于内存当中一个的JavaScript的对象。Vue中模板引擎会先将每一个标签最后都会渲染成一个个Vnode，组成VNode Tree，再转成真实DOM（为了多平台的适配）。如：为什么需要这个key属性呢？这个其实和Vue内部也使用了虚拟DOM有关系（和小程序、

2021-12-07 16:29:17 972 1

原创 20分钟了解TypeScript

1. 为什么要学习TypeScript?javaScript的书写自由度非常高，最为突出的就是JavaScript没有类型的概念。该笔记是在学习尚硅谷李立超老师的学习视频结合官方文档所做。例如以下代码：//JS声明的变量是动态类型let a = 0 //数值类型 a='你好'// a又变成字符串类型 a=true// a又变成布尔类型这样看起来书写方便，但是在项目开发时不易于维护，因为变量类型容易被修改。当多个地方需要使用该变量时，不小心修改了类型。即使发生了报错也不会在修改的地方报错

2021-04-16 22:34:49 258

原创前端ES6+基础总结

highlight: a11y-darktheme: juejin1.什么是ES6ES6即ECMA Script, 是由ECMA国际标准化组织,制定的一项脚本语言的标准化规定。ES6很多时候是一个泛指，指在ESMA Script 2015之后的版本。2. let声明变量ES6中新增的用于声明变量的关键字。1.let 声明变量只在所处的块级有效if (true) { // let声明有块级作用域的概念而var没有这方面的概念 let a = 0 var b.

2021-03-31 08:57:26 1775 1

原创 JSON格式基础

1. 什么是JSON？JSON全称 (JavaScript Object Notation) ,是一种轻量级的数据交换格式。因为JSON 本身就是参考JavaScript对象的规则定义的，其语法与JavaScript定义对象的语法相同。简单的说JavaScript是JSON的主场啊，前端必会。2. JSON的语法规则1.数组（Array) 使用 []表示//JSON格式中数组中的每个元素可以不相同[0,null,false,['二','三','四'],'五']2.对象(Object)用{}

2021-03-28 14:32:18 1286

原创 promise的基本使用

Promise的出现的目的是解决异步编程中的地狱回调的问题。1. 同步和异步1.1 JS的事件循环机制**事件循环机制：**主线程不断重复获得任务，执行任务的过程。JS是一门单线程语言。HTML5提出新标准，允许JS创建多个线程，于是出现了同步和异步。简单的理解：**同步：**同步任务都在主线程上执行，形成了一个执行栈。比如烧水煮饭，等水开了（10分钟后），再去切菜。异步：异步通过回调函数实现。回调函数添加到任务队列中。比如烧水煮饭，利用水烧开的十分钟时间先去切菜。1.2 同步和异步的区别

2021-03-24 10:56:16 163

原创原来这就是axios啊

1. axios的基本特质axios是基于Promise用于浏览器和node.js的HTTP客户端。axions的基本特征在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API能拦截请求和响应自动转换为JSON格式能转换请求和响应数据2. axios基本用法第一步导入axios通过命令安装axiosnpm install axios --save第二步将axios导入main.js入口文件import Vue

2021-03-23 13:35:35 441

原创 Vue2.0 学习笔记六 VueX

1. 什么是VueXVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。1.1 单页面的状态管理1.2 多界面状态管理Vue已经帮我们做了单界面的状态管理，但是如果多个

2021-03-23 08:55:39 522

原创 Vue2.0 学习笔记五路由

1. 路由发展阶段vue2.0 B站有个大佬讲的很好，很多概念都是从他那里学习来的，包括一部分笔记。叫ilovecoding老师。路由时一个比较广义和抽象的概念，路由的本质是对应关系。路由的发展分为后端路由和前端路由，1.1 后端路由阶段当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户.这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.概念根据不同的用户URL请求,返回

2021-03-19 13:46:15 285

转载 Vue cli报错npm ERR! testroute@0.1.0 serve: `vue-cli-service serve`

Vue cli报错npm ERR! testroute@0.1.0 serve: vue-cli-service servenpm ERR! errno 1npm ERR! testroute@0.1.0 serve: vue-cli-service servenpm ERR! Exit status 1npm ERR!npm ERR! Failed at the testroute@0.1.0 serve script.npm ERR! This is probably not a probl

2021-03-15 19:34:40 2381 2

原创 Vue2.0 学习笔记四组件化开发

1. 什么是组件化组件化就是把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强。Vue 的组件分为全局组件和局部组件。2. 全局组件与局部组件2.1 全局组件和局部组件的区别全局组件：全局组件注册后，任何Vue实例都可以使用。局部组件：只能在当前组测它的Vue实例中使用2.2 全局组件2.3 局部注册局部注册效果图：2.4 代码部分2.4.1 全局组件注册代码<!DOCTYPE

2021-03-15 10:59:11 224

原创 Vue2.0学习笔记二基础语法

1. Mustache语法Mustache语法也叫插值表达式，Mustache语法式通过{{}}渲染到页面，并且数据是响应式的。数据的响应式：数据的变化导致页面的内容随之变化[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fGYQkKzS-1614693619778)(\images\插值表达式1.png)]效果图：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qrcFF6Lr-1614693619780)(\images\插值表达式效

2021-03-02 22:01:15 530

立场简单的博客