henrenzhengdere-CSDN博客

原创 Pinia

PiniavuexvueVue3选项式API组合式APIVue2devtoolsTypeScriptPinia是一个简单实用的状态管理工具，和菠萝一样香。

2023-01-01 14:55:41 124 1

项目中安装的第三方库里面都是打包后的JS代码，但是我们使用的时候却有对应的TS类型提示，这是为什么呢？在第三方库中的JS代码都有对应的TS类型声明文件什么是类型什么文件？通俗地来讲，在 TypeScript 中以 .d.ts 为后缀的文件，我们称之为 TypeScript 类型声明文件。它的主要作用是描述 JavaScript 模块内所有导出成员的类型信息。.ts文件.d.ts文件作用是啥？.ts 文件:既包含类型信息又可执行代码可以被编译为 .js 文件，然后，执行代码用途：编写程序代码的地方。

2023-01-01 09:49:26 477

原创 TypeScript核心

number, end: number）这样是不行的。有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。通过类似箭头函数形式的语法来为函数添加类型，只适用于。字面量类型配合联合类型来使用，表示：一组明确的可选的值。以上的代码虽然没有报错提示，但是将来是可能出现错误的。例如：性别只能是男和女，不会出现其他值。的使用越多，程序可能出现的漏洞越多，因此。类型，这个数组的类型如何书写？练习：给一个定时器 ID 加类型。思考：这两个变量的类型是什么？类型，尽量避免使用。

2023-01-01 09:39:27 116

原创 TypeScript起步

官方网站：https://www.typescriptlang.org/TypeScript是一种带有类型语法的 JavaScript语言，在任何使用 JavaScript 的开发场景中都可以使用**注意：**TS需要编译才能在浏览器运行TS是JS的超集，支持了JS语法和扩展了类型语法。

2023-01-01 09:38:19 76

原创 Vue3基础

this.;},},};

2022-12-31 00:00:46 145

原创 Vite构建工具

组件一个根节点非必须创建应用挂载到根容器入口页面，ESM加载资源平常组件 < div > 节点一 < div > 节点二 < div > 节点一 < div > 节点二 < div > 节点一 < div > 节点二

2022-12-30 01:30:30 79

原创面经H5端-Vant（上）

移动端Vue2技术栈

2022-12-20 15:11:48 1035

原创 Vuex基础

在newlist.js中定义获取头条内容的数据state : {} }定义更新头条内容的mutations// payload 载荷 {1:[],2:[],3:[]} updateList(state , {定义根据分类标识获取新闻的action// 获取新闻列表数据 // 分类id只能通过传递的方式传进来 async getNewList(context , cataId) {const {data : {data : {...

2022-08-27 19:35:18 587

原创网易云音乐案例

下载网易云音乐node接口项目，在本地启动，为我们vue项目提供数据支持项目地址：https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e5%ae%89%e8%a3%85**备用地址：**https://github.com/Binaryify/NeteaseCloudMusicApi/tree/master/docs下载后，安装所有依赖，在本地启动起来，测试访问此地址是否有数据http://locallhost:3000,看到如下页面就成功了初始化

2022-08-25 10:11:47 530 1

原创 Vue-Router路由系统

目标：设备和ip的映射关系目标：接口和服务的映射关系目标：路径和组件的映射关系官网：https://router.vue.jsorg/zh/vue-router模块包它和Vue.js深度集成可以定义 - 视图表(映射规则)模块化的提供2个内置全局组件声明式导航自动激活的CSS class的链接目标：vant是一个轻量、可靠的移动端Vue组件库，开箱即用**Vant官方：**https://vant-contrib.gitee.io/vant/#/zh-CN/

2022-08-25 10:06:33 199

原创 Vue组件-进阶

需求：完成一个注册功能页面，2个按钮切换，一个填写注册信息，一个填写用户简介信息在App.vue引入UseDynaminc.vue并使用显示使用Vue内置的keep-alive组件，可以让包裹的组件报错在内存中不被销毁语法： Vue内置的keep-alive组件包起来要频繁切换的组件补充生命周期：vue提供组件插槽能力，允许开发者在封装组件时，把不确定的部分定义为插槽需求：以前折叠面板案例，想要实现不同内容显示，我们把折叠面板里的Pannel组件，添加组件插槽方式语法口诀：Pannel.vue -

2022-08-25 10:02:53 469

原创 Vue组件-提升

Vue-生命周期作用：特定的时间点，执行特定的操作场景：组件创建完毕后，可以在created生命周期函数中发起Ajax请求，从而初始化data函数分类：4大阶段8个方法components/Life.vue - 创建一个文件App.vue - 引入使用4. 挂载阶段含义讲解template选项检查有-编译template返回render渲染函数无-编译el选项对应标签作为tempate(要渲染的模板)虚拟DOM挂载成真实DOM之前- 声明周期钩子函数被执行Create… - 把

2022-08-25 09:58:47 186

原创 Vue组件

以前做过一个折叠面板需求：现在想要多个收起展开的部分方案1：复制代码案例用less写的样式，所以下载模板标签-在这个基础上，把要复用的多复制几份（讲解不好的地方引入解决方案）上面复制3份，发现变化一起变化，解决方案：不同的部分，用不同的isShow变量2. vue组件_概念**组件化：**封装的思想，把页面上封装为，从而方便项目的开发和维护一个页面，可以拆分一个个组件，一个组件就是一个整体，每个组件可以有自己独立的结构样式和行为（html,css和js）注意：使用步骤：创建组件com

2022-08-25 09:53:55 615

原创 Vue基础

目标：项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.jssrc 并列处新建vue.config.js/*覆盖webpack的配置*/devServer: { // 自定义服务配置open: true, // 自动打开浏览器}}目的：转换格式，过滤器就是一个函数，传入值返回处理后的值过滤器只能用在，插值表达式和v-bind表达式Vue中的过滤器场景字母转大写，输入"hello",输出"HELLO"......

2022-08-15 20:24:14 584

原创 webpack(模块打包工具)

问题：每次修改代码，重新yarn build打包，才能看到最新的效果，实际工作中，打包yarn build 非常耗时（30s - 60s）从0构建依赖磁盘读取对应的文件到内存，webpack开始加载再用对应的loader进行处理将处理的内容，输出到磁盘指定目录解决：起一个开发服务器，缓存一些语句打包过的内容，只重新打包修改的文件，最终运行在内存中给浏览器使用总结：webpack开发服务器，把代码运行在内存中，自动更新，实时返回给浏览器显示。...

2022-08-13 14:23:59 326

原创 ES6模块化与异步编程高级用法

ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需要再额外学习AMD、CMD或CommonJS等模块化规范。每个JS文件都是一个独立的模块导入其他模块成员使用import关键字向外共享模块成员使用export关键字// 1. 方法的名称为getFile // 2. 方法接收一个形参fpath,表示要读取的文件的路径 function getFile(fpath) {......

2022-08-12 20:20:55 338