- 博客(57)
- 收藏
- 关注
RSS订阅原创 TypeScript基础小课堂五
泛型-基本介绍泛型，顾名思义，就是可以适用于多个类型，使用类型变量（比如T）帮助我们捕获传入的类型，之后我们就可以继续使用这个类型。本质是参数化类型，通俗的讲，就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和函数的创建中，分别成为泛型类，泛型接口、泛型函数泛型函数： 这个函数的参数类型或者返回值的类型是可变的泛型函数定义格式function 函数名<类型变量1,类型变量2,...>(参数1:类型1,参数2:类型2,...): 返回值类型 {}在.
2021-11-28 22:27:19
728
原创 Vue3对比Vue2的一些差异及特性
1. Vue3和Vue2的风格对比Vue2一般称之为选项式(Options)APIVue3一般称之为组合式(Composition)API2. Vue2选项式和Vue3组合式API的关系 组合式API的目的是增强，不是取代选项式API，vue3对两种API都支持 简单的场景使用选项式API更加简单方便 需要强烈支持TS的项目首选组合式API 需要大量逻辑复用的场景首选组合式API 3. Vue3对比Vue2的一些注意事项vue2 中的 temp..
2021-11-28 20:42:38
2501
原创 简单的整理一下Vue3的组合API
1. Vue3的生态和优势 社区生态 - 逐步完善 整体优化 - 性能优化/TS支持优化/组合式API加持 市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3 社区生态组件（插件）名称 官方地址 简介 ant-design-vue Ant Design Vue ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步 element-plus A Vue 3 U
2021-11-28 19:55:39
1060
原创 TypeScript基础小课堂四
枚举类型定义enum，枚举。它用来描述一个值，该值只能是 一组命名常量 中的一个注意：没有type之前，用枚举比较多，现在用的少了。枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值格式enum 枚举名 { 可取值1,可取值2,.. }说明： 使用 enum 关键字定义枚举 一般约定首字符大写 使用格式枚举名.可取值示例// 定义枚举类型enum Direction { Up, Down, Left, Right }
2021-11-27 22:28:08
143
原创 TypeScript基础小课堂三
对象类型格式const 对象名: { 属性名1：类型1 属性名2：类型2 方法名1：(形参1: 类型1，形参2: 类型2)： 返回值类型 （普通函数） 方法名2：(形参1: 类型1，形参2: 类型2) => 返回值类型 （箭头函数）} = { 属性名1: 值1，属性名2：值2 }示例:const goodsItem:{name: string, price: number, func: ()=>string } = { name: '手机',...
2021-11-27 20:01:29
265
原创 TypeScript基础小课堂二
上期简单的介绍了一下TS的安装和运行环境，现在正式进入知识点阶段。1.TS类型注解TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统 TS中定义变量（常量）可以指定类型。 A类型的变量不能保存B类型的数据。 可以显示标记出代码中的意外行为，从而降低了发生错误的可能性 // 类型注解格式：// let 变量名: 类型 = 初始值 // 例如：let age: number = 18// 说明：代.
2021-11-24 21:53:32
1792
1
原创 TypeScript基础小课堂一（介绍及安装运行）
先来简单的介绍一下TypeScript:TypeScript一般简称为：TS。TS是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行。它是 JavaScript 的超集，可以编译成纯JS。（简单来说就是：JS 有的 TS 都有。）TS在 JS 基础之上，为 JS 添加了类型支持。TypeScript =Type+ JavaScript1. TS和JS的区别： ts完全兼容javascript，它可以编译成javascript 使用TS...
2021-11-24 20:08:48
205
原创 React中Sass CSS Modules的基本使用
1.下载引入包npm i scss -D2.修改样式文件名从xx.scss -> xx.module.scss（React脚手架中的约定，与普通 CSS 作区分）3.组件中进行使用import styles from './index.module.scss'<div className={styles.css类名}></div>4.最佳用法每个组件的根节点使用 CSSModules 形式的类名（ 根元素的类名：root）其他所有的子节...
2021-11-20 09:10:53
1320
原创 React中使Vscode识别@路径并给出路径提示
步骤1: 在项目根目录创建 jsconfig.json 配置文件 在配置文件中添加以下配置 jsconfig.json 中：{ "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": {
2021-11-17 21:37:07
1215
原创 整理一下react的知识点之react-router的基本使用(持续更新)
在使用react-router之前先来简单介绍一下React路由：1. React路由介绍现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射规则，在React中，是URL路径与组件的对应关系 使用 React 路由简单来说就是：配置路径和组件（
2021-11-17 20:00:03
663
原创 整理一下react的知识点之redux-devtools-extension基本使用(持续更新)
1. 下载相关包npm i redux react-redux redux-thunk redux-devtools-extension2.安装react开发工具（chrome浏览器插件）3. 安装redux的开发工具（chrome浏览器插件） 4.在store/index.js中进行配置导入 import { createStore, applyMiddleware } from 'redux'import rootReducer from './reduce...
2021-11-15 21:43:01
8256
1
原创 整理一下react的知识点之redux-thunk中间件的基本使用(持续更新)
1. redux-thunk的作用:Redux store 仅支持同步数据流。使用redux-thunk中间件可以帮助在 Redux 应用中实现异步性。redux-thunk中间件允许redux处理函数形式的action。在函数形式的 action 中就可以执行异步操作代码，完成异步操作。2. 使用步骤2.1 下载相关包:npm i redux react-redux redux-thunk2.2 使用:如下所示: 在store/index.js 中导入使用即可impo.
2021-11-15 21:14:22
888
原创 重新整理一下Vue的技术点---常用修饰符(持续更新)
常用的修饰符有一下几种：1.v-model修饰符：1、.lazy：输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg">2、.trim：输入框过滤首尾的空格：<input v-model.trim="msg">3、.number：先输入数字就会限制输入只能是数字，先字符串就相当于没有加number.
2021-11-13 11:25:26
910
原创 整理一下react的知识点之事件(持续更新)
1. 事件绑定格式:<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 } ></元素>注意：React 事件名采用驼峰命名法，比如：onMouseEnter、onFocus、 onClick ......示例:import React from 'react'import ReactDOM from 'react-dom'const title = <h1>react中的事件</h1>export ..
2021-11-12 20:52:53
325
原创 整理一下react的知识点之组件（持续更新）
1.函数式组件-使用函数创建组件 1.1定义组件使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件 约定1：函数名首字符大写 必须以大写字母开头，React 据此区分组件和普通的 HTML 约定2：必须有返回值 表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null 示例：// 1. 使用普通函数创建组件：function Hello() { return <div>这是我的第一个函数组件!</div>}f...
2021-11-11 23:04:31
100
原创 Vue-cli 项目中 src 目录文件的作用?
src目录结构1. assets: 放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。(之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式)；2. components: 放置通用模块组件。(项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作)；3. utils: 放置
2021-11-08 23:04:22
1520
原创 重新整理一下Vue的技术点---Vue 渲染模板时怎么保留模板中的 HTML 注释(持续更新 )
Vue在渲染<template>时默认不渲染模板里的注释, 不过在Vue2.4版本后新增了comments属性,在<template>标签内设置该属性后即可保留注释.comments: 类型：boolean 默认值：false 限制：这个选项只在完整构建版本中的浏览器内编译时可用。 详细：当设为true时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。 效果如图所示:...
2021-11-07 15:49:03
578
原创 重新整理一下Vue的技术点---Vue怎么实现跨域(持续更新)
跨域是前端开发中经常会遇到的问题，说到跨域就不得不介绍一下它出现的原因：发送ajax请求返回数据时受到浏览器的同源策略的限制。浏览器的同源策略：是指两个页面"协议+域名+端口"三者相同(有一点不同即为跨域)，同源策略是浏览器最核心也是最基本的安全功能。（跨域是指：一个请求中url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域）第一种解决方案: 使用 Vue-cli 脚手架搭建项目时在项目中创建vue.config.js文件。vue2中使用proxy配置；vue3中使用proxyT
2021-11-07 11:42:05
203
原创 整理一下react的知识点之jsx（持续更新）
1. JSX介绍React 使用 JSX 来替代常规的 JavaScript。 JSX：是 JavaScript XML的缩写。 JSX， 一种 JavaScript 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。 JSX 用于在 React 中描述用户界面。 JSX 是在 JavaScript 内部实现的。示例代码：// 导入react和react-domimport React from 'react'impo
2021-11-07 10:20:40
671
1
原创 整理一下react的知识点之创建（持续更新）
1. React 是用于构建用户界面的 JavaScript 库主要构建用户界面 是javscrtipt库。不是框架。（vue是渐进式的JS框架） react 全家桶才是框架 react: 核心库 react-dom: dom操作 react-router：路由 redux：集中状态管理 2.React 特点声明式：react中通过数据驱动视图的变化，当数据发生改变react能够高效地更新并渲染DOM。组件化：组件是react中最重要的内容，组件用于.
2021-11-06 22:08:05
87
原创 React项目适配ESLint
1.下载依赖包npm i eslint -D2.按交互提示安装相关插件npx eslint --init具体配置如下图2-1.检查语法，发现问题并执行代码风格2-2 这些都不是2-3 使用那个框架2-4 使用typescript配置前需要先下载typescript2-5 浏览器、node中运行代码2-6 流行代码风格2-8 Standard风格指南2-9 js格式2-10 npm立即运行3.工作区中配置{ "eslint.r...
2021-11-06 21:37:47
215
原创 重新整理一下Vue的技术点---页面导航(持续更新)
最近写Vue项目,感觉有很多技术知识点用的不是很熟练了,所以特来整理一番51: Vue中页面导航分为声明式导航和编程式导航第一:声明式导航声明式导航是通过点击链接实现页面跳转的路由导航的方式例如: 网页中的<a>链接或者vue中的<router-link>第二:编程式导航(重点)编程式是通过调用JavaScript形式的API来实现页面跳转的导航方式例如: 网页中的location.href经过查阅vue-router官方文档了解到: 编程式导航中一些
2021-11-05 22:47:27
359
1
原创 Vue中v-if和v-show的区别
1. v-if(创建和销毁)v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 具有惰性：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。2. v-show (基于CSS display:none进行显示隐藏)v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；不管初始条件是什么，元素总是会被渲染，只是简单地基于 CSS 进行切换。3. 总结 (少次使用v..
2021-11-05 20:44:31
261
原创 Element表单校验的基本使用
1.表单校验基本结构<template> <div id="app"> <!-- 卡片组件 --> <el-card class='login-card'> <!-- 登录表单 --> <el-form style="margin-top: 50px"> <el-form-item> <el-input placeholder="请输
2021-11-05 20:13:43
395
原创 Vue富文本编辑器
Vue-Quill-编辑器Vue 的Quill 编辑器组件，支持SPA 和SSR。基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。使用方式:1. 下载npminstallvue-quill-editor--save2. 挂载(一般为局部挂载,也可全局挂载)// main.js 全局挂载import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor'import 'qui...
2021-10-31 09:08:58
121
原创 Vue国际化支持(i18n)
1. 国际化概述开发时，项目能同时应对世界不同地区和国家的访问，并针对不同地区和国家的访问，提供相应的、符合来访者阅读习惯的页面或数据。国际化(internationalization)又称为i18n(读法为i18n，据说是因为internationalization(国际化)这个单词从i到n之间有18个英文字母，i18n的名字由此而来)。2. Vue + Element国际化支持vue项目中的国际化语言支持使用的是vue-i18n插件 1. 安装国际化的包npm i vue-i18.
2021-10-28 18:27:50
1822
2
原创 前端如何处理跨域?
说到跨域就不得不简单说一下浏览器的同源策略:一. 同源策略同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同(反之则是跨域)，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为：1. Cookie、LocalStorage 和 IndexDB 无法读取2. DOM 和
2021-10-27 22:25:11
63
原创 Vue组件传值的若干种方式
01 父传子props：props可以是数组或对象，用于接收来自父组件通过v-bind传递的数据。当props为数组时，直接接收父组件传递的属性；当props为对象时，可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。app.vue<template> <div id="app"> Hello <!-- 想改变传递过去的数据，直接在自己的组件里面修改..
2021-10-26 22:23:15
1285
原创 Vue中插槽的基本使用
插槽插槽就是子组件提供给父组件使用的一个占位符，用标签<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。作用：能够提升封装组件的灵活性，主要应用于组件封装vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定义为插槽,方便使用的时候插入所需要的结构1. 匿名插槽通过slot标签可以添加匿名插槽组件内用<slot
2021-10-24 21:51:18
2436
原创 Element-ui 表单的基础使用
1. 基本三大组件<el-form> <el-form-item> <el-input/> </el-form-item></el-form>2. 数据收集在el-form上面指定 model，在el-input组件加 v-model 进行双向数据绑定3. 数据校验在el-form上面指定 rules 校验规则，在el-form-item组件加 prop，指定要校验的字段&...
2021-10-23 00:09:15
1683
原创 Element-ui分页的坑点
先来认识一下分页组件:<template> <div> <el-pagination background // 开启分页背景颜色 :current-page="currentPage4" // 当前页数 :page-sizes="[100, 200, 300, 400]" /
2021-10-21 21:17:25
549
2
原创 Element-ui中table表格组件如何让上一页序号延续
最近做项目时使用table表格的时候发现:在序号中定义了属性type="index" 如图所示:序号是显示出来了,但是翻页之后序号又从1开始排列了,按正常逻辑来说翻页之后的序号应该是上一页末尾的序号加1递增显示的.所以又去翻了翻Element的文档.终于发现:设置了type="index"属性之后 可以通过传递index属性自定义索引.代码如下 :data() { return { // 页码数据 pageparams: { page: 1...
2021-10-21 19:30:21
280
原创 性能优化之防抖与节流
防抖和节流都是一种性能优化的手段1. 防抖（debounce）实现原理:函数被触发时,先延迟执行的时间,在延迟的时间内如果再次被触发,则取消之前的延迟,再重新开始新的一轮延迟,达到只执行最后一次请求,其他请求则被过滤掉的效果。通俗来讲就是:持续触发（事件）不执行，不触发的一段时间后才执行.（例如英雄回城）实现思路：首次运行时把定时器赋值给一个变量，第二次执行时，如果间隔没超过定时器设定的时间则会清除掉定时器，重新设定定时器，依次反复，当停止下来时，没有执行清除定时器，超过一定时间后触发回调.
2021-10-20 21:21:23
185
原创 关于v-model和sync修饰符
1. .sync修饰符.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。// 正常父传子： <son :a="num" :b="num2"></son>// 加上sync之后父传子： <son :a.sync="num" .b.sync="num2"></son> // 它等价于<son :a="num" @update:a="val=>num=val" :b="num2" @.
2021-10-19 20:58:50
305
原创 Vue中的watch(侦听器)介绍
1. watch的定义watch是一个观察动作.可以侦听指定名称属性值(data/computed)的变化,属性值一旦发生变化时就会触发侦听器,然后侦听器执行相应的业务代码.2. 简单侦听(主要针对变量和简单数据类型)语法: watch: { // newVal: 当前最新值// oldVal: 上一刻的值 变量名 (newVal, oldVal){ // 变量名对应值改变这里自动触发 } }<tem...
2021-10-19 18:52:19
612
原创 数组转对象---demo
const arr = ["b", "c", "b", "c", "a", "b", "c"];let obj = arr.reduce(function (obj, str) { // 使用in判断obj对象里面是否有这个元素 if (str in obj) { obj[str]++; } else { obj[str] = 1; } return obj;}, {});console.log(obj);// obj: {b.
2021-10-18 16:27:41
86
2
原创 如何在新项目全局使用svg-icon组件
1.安装依赖npm i svg-sprite-loader@4.1.32.项目中配置 vue.config.js文件const path = require('path')function resolve (dir) { return path.join(__dirname, dir)}module.exports = { chainWebpack (config) { // 设置 svg-sprite-loader 插件 config.module ..
2021-10-18 16:11:08
138
原创 Vue中$route和$router的区别
1. $route$route 表示当前激活的路由对象信息，包含了当前URL解析得到的信息,有以下属性:// 在.js文件中获取当前的路由信息 router.currentRoute //在.vue文件中获取当前的路由信息 this.$route$route.fullPath:完成解析后的 URL，包含查询参数和 hash 的完整路径。 $route.hash:当前路由的 hash 值 (不带 #) ，若是没有 hash 值，则为空字符串。 $rou...
2021-10-18 11:09:58
351
原创 Vue使用Vant适配移动端
目的：Vant UI 和设计稿一起使用进行适配移动端1.如何进行 REM 适配// 下载插件npm i amfe-flexible// 在main.js中引入import 'amfe-flexible'2. REM 适配原理利用媒体查询或 JS 动态检测设配的宽度，不同宽度下设置对应的根元素字体大小，这样所有使用 REM 作单位的元素就跟着变化. 2.1如何把写的 px 转换成 remnpm install postcss-pxtorem@5 -D # -D 是...
2021-10-17 20:02:01
415
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人