JingG459-优快云博客

原创快速入门TypeScript（二）

一、前言上篇博客简单介绍了一下什么是 TypeScript ，简单总结了一下 TypeScript 与 JavaScript 的区别，还总结了十一个TypeScript 的类型，今天继续讲讲 TypeScript 的其他类型。二、数据类型上篇博客总结了原始类型、联合类型、数组类型、自定义类型-别名、函数类型、void、函数-可选参数、对象类型、接口、元组、字面量类型，TypeScript 除了这些还有许多类型，接下来一一讲解。1、枚举...

2021-12-01 08:44:12 1023

原创快速入门typescript（一）

一、TypeScript是什么呢？TypeScript 是JavaScript 的超集，它包含了JavaScript ，还额外增加了类型系统 typeTypeScript 语法是一个完全独立于 react 和 vue 框架的语法，它可以跟 react （React：TS + Hooks）一起使用，也可以和 vue3 （TS + Vue3）一起使用，但 vue2 对它就没那么友好了二、TypeScript 和 JavaScript 有什么区别呢？TypeS...

2021-11-24 16:51:16 970

原创如何理解及使用闭包

那么闭包到底是啥？根据MDN官方文档是定义：闭包 = 函数 + 周围状态（环境的）的引用。所以闭包不等于是函数，为了表述的方便，我称之为闭包结构。先来个超简单的栗子var name = 'lufei'function fn() { console.log(name)}fn+name 就形成了一个闭包的结构function ff() { var name = 'lufei' return function fn() { return name }}//这.

2021-11-22 14:45:24 1253

原创 JS表单验证

JS表单验证----12个常用的JS表单验证1. 长度限制<p>1. 长度限制</p><form name=a onsubmit="return test()"> <textarea name="b" cols="40" rows="6" placeholder="不能超过50个字符！"></textarea> <br /> <input type="submit" name="Submit"

2021-11-20 21:33:25 771

原创 React路由的使用

在React中路由的使用和vue-router非常相似1. 先下包react-router-dom@5.3.0 可以自己用npm yarn cnpm 进行下载,我使用的是5.3.0版本2. 导入并使用import { HashRouter as Router , Route, Link } from 'react-router-dom'export default function App () { return ( <div> <h1&...

2021-11-18 21:17:47 190

原创 vue中Render函数使用介绍

一、前言我刚在官网上研究了半天有关render的文档，我总结一下我个人的理解。render函数跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数，render函数更接近编译器。配合官方文档，总结一下我的心得二、render 拿官网的例子为例，通过父传子level，动态生成标题<template> <div...

2021-11-18 21:01:59 1283

原创 React 中 hooks 的使用

关于hooks的详解+（封装倒计时组件）

2021-11-17 20:26:48 1859

原创 react 项目配置 eslint

react项目中配置eslint

2021-11-17 18:44:50 1716

原创 React 和 Redux

文档：Redux中文文档Redux 官方文档对 Redux 的定义是：一个可预测的 JavaScript 应用状态管理容器。一、redux和react的关系Redux并不只为react应用提供状态管理，它还支持其它的框架。React 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 Reac...

2021-11-15 21:04:53 1597

原创多维数组降维的几种方法

一、数组字符串化 let arr = [[123456], [333], 789] arr += '' arr = arr.split(',') console.log(arr)二、递归 function demo(arr) { var newArr = [] for (var i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) { // 如..

2021-11-14 21:08:14 1639

原创 JavaScript 原生对象、内置对象、宿主对象的区别

我对三者的理解，三个的概念区别分别是：内置（Build-in）对象：总是在引擎初始化阶段就被创建好的对象，是原生对象的一个子集原生（Naitve）对象：除了内置对象，还包括了一些在运行过程中动态创建的对象宿主对象：宿主对象不是引擎的原生对象，而是由宿主框架通过某种机制注册到JavaScript引擎中的对象一、原生对象ECMA-262 把原生对象定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。包含 Object、Function、Array、String、Boo.

2021-11-14 20:29:16 855

原创 Javascript 创建对象的几种方式

我所熟悉的创建方式有以下几种：一、使用对象字面量的方式{} 代码如下：var person ={ name: "zs", age: 21, family: ["lisi","lisa","wangwu"],}在使用同一接口创建多个对象时，会产生大量重复代码二、使用Object 关键字方式来创建（工厂模式）代码如下：var wcDog = new Object(); wcDog.name="旺财"; wcDog.age=3;...

2021-11-13 16:37:46 2146

原创 react中创建自定义hooks

一、什么是自定义hooks逻辑复用简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。自定义hook是一个从use开始的调用其他hook的Javascript函数。二、不使用自定义hook时例1：当我们整个页面需要获取用户鼠标移动的坐标时，不使用hook的代码，我们可以这样写 const [position, setPosition] = useState({ x: 0, y: 0 }) useEffect(() =&g...

2021-11-12 21:39:14 1249

原创 VUE路由传值的方式有哪几种

Vue-Router 传参可以分为两大类分别是编程式的导航 router.push 和声明式的导航<router-link>一、编程式的导航 router.push编程式导航传递参数有两种类型：字符串、对象。字符串 :字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：this.$router.push("home");对象 :想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数...

2021-11-11 21:39:05 1101

原创 Vue 中操作 data 的数组方法哪些可以触发视图更新？

一、在vue中操作data的数组方法有以下几个方法可以触发视图更新：push()、pop()、shift()、unshift()、splice()、sort()、reverse()以上这些方法会改变被操作的数组； filter()、concat()、 slice() 这些方法不会改变被操作的数组，返回一个新的数组；以上方法都可以触发视图更新。二、不能触发视图更新的方法有以下几种：利用索引直接设置一个数组项，例：this.a...

2021-11-10 16:30:00 2806

原创 Vue 中怎么重置 data?

要初始化 data 中的数据，可以使用 Object.assign()方法，实现重置 data中的数据，以下就是对该方法的详细介绍，以及如何使用该方法，重置 data 中的数据1）Object.assign()方法基本定义Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。用法： Object.assign(target, ...sources)，第一个参数是目标对象，第二个参数是...

2021-11-10 16:00:00 832

原创 vue中必须注意点有哪些？

1、给对象添加属性的时候，直接通过给 data 里面的对象添加属性然后赋值，新添加的属性不是响应式的【解决办法】通过 Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的2、在 created 操作 dom 的时候，是报错的，获取不到 dom，这个时候实例 Vue实例没有挂载【解决办法】通过：Vue.nextTick(回调函数进行获取)...

2021-11-09 22:20:04 747

原创在 Vue 中使用插件

在vue中使用插件主要有两个步骤：1、采用 ES6 的 import ... from ... 语法或 CommonJS 的 require() 方法引入插件2、使用全局方法 Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })...

2021-11-09 22:06:29 2145

原创 $route 和$router的区别是什么？

1. $route 是“路由信息对象”，包括 path，params，hash，query，fullPath， matched，name 等路由信息参数。2. $router 为 VueRouter 的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如 history 对象，经常用的跳转链接就可以用 this.router.push 会往history 栈中添加一个新的记录。返回上一个 history 也是使...

2021-11-08 21:11:55 623

原创 query 和 params 之间的区别是什么？

query和Params都是用于跳转路由传参的，二者之间的区别我总结以下两点：1. query要用path来引入，params要用name来引入2. 接收参数时，分别是this.$route.query.name和this.$route.params.name...

2021-11-08 21:11:38 368

原创怎么定义 Vue-Router 的动态路由?

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 Vue-Router 的路由路径中使用“动态路径参数”来达到这个效果我们可以通过param和query两种方式获取动态参数params的类型:配置路由格式:/router/:id 传递的方式:在path后面跟上对应的值传递后形成的路径:/router/123query的类类型...

2021-11-08 20:49:53 3614 1

原创什么是 Vuex ?

根据我的理解，VUEX是一个开发模式或者说框架。就像PHP有thinkPHP，Java有spring等。vuex通过状态(数据源)集中管理驱动组件的变化vuex的特点我总结以下几点：应用级的状态集中放在store里面改变状态的方式是提交mutations，这里是同步的异步逻辑封装放在action中...

2021-11-07 15:04:10 231

原创为什么避免 v-if 和 v-for 用在一起

在官方文档中明确指出v-for和v-if不建议一起使用。原因：v-for 比 v-if 具有更高的优先级，每一次都需要遍历整个数组，造成不必要的计算，影响性能，即使100个list中只需要使用一个数据，也会循环整个数组。解决方案：一、在其父元素上进行v-if判断，在内部执行v-for循环二、如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项computed: { list () ...

2021-11-07 14:15:13 1153

原创怎么捕获 Vue 组件的错误信息？

总结以下几点如何捕获Vue组件的错误信息一、使用errorCaptured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播。二、使用errorHandler 为全局钩子，使用 Vue.config.errorHandler 配置，接收参数与 errorCaptured 一致，2.6 后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底...

2021-11-06 21:00:51 3510

原创怎么在组件中监听路由参数的变化？

最近在项目中遇到路由监听，现总结以下两种方式：一、在watch按照如下规则书写即可watch: { '$route' (val, old) { // 当前路由 console.log(val) // 上一个路由 console.log(old) }}二、在路由导航守卫时监听beforeRouteUpdate (to, from, next) { //这里监听},...

2021-11-06 20:50:26 781

原创 Vue 和 jQuery 两者之间的区别是什么？

jQuery：曾经是前端最流行的js库。Vue：是一个兴起的js库，是一个精简的MVVM。从技术角度讲。Vue.js专注于MVVM模型的ViewModel层，它通过双向数据绑定把view和Model层连接起来，通过对数据的操作完成对页面视图的渲染。二者的区别是：一、Vue和 jQuery 对比 jquery是使用选择器（）选取DOM对象，对其进行赋值、取值、事件绑定等操作，和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。二、Vue 则是通过Vue对.

2021-11-05 22:15:19 9174

原创 Vue 的最大的优势是什么？

根据我对于vue的理解，我总结的vue优势有以下五点：一、vue作为一款轻量级框架，门槛低，上手快，简单易学。二、vue可以进行组件化开发，数据与结构相分离，使代码量减少，从而提升开发效率，易于理解三、vue最突出的优势在于双向绑定，使用虚拟DOM 四、相较于传统页面通过超链接实现页面跳转，vue会使用路由跳转不会刷新页面五、vue是单页面应用，页面局部刷新，不用每次跳转都请求数据，提升了用户体验...

2021-11-05 22:05:05 28571

原创 vue中 v-if 和 v-show 的区别及用法

一、作用在vue项目中很多时候都需要用到显示和隐藏，v-if 和 v-show 都是用来控制动态显示或影藏 DOM 元素的二、区别1、v-showv-show只是通过控制css中的display属性来控制他的显示或隐藏； v-show只是简单的基于css切换 v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留；2、v-ifv-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果； ...

2021-11-05 18:59:49 665

原创深拷贝和浅拷贝

一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。1、基本数据类型的特点：直接存储在栈(stack)中的数据2、引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。二、浅拷贝与深拷贝深拷贝和浅拷贝是只针对Object和Array.

2021-11-04 20:42:57 164

原创 vue项目打包发布上线

vue项目开发完成后，我们需要将项目打包上线，同时我们希望可以在本地预览生产环境项目（以vue-cli脚手架生成的项目为例）一、运行打包命令npm run build//一般情况如果不改的话都是build运行后生成 dist 文件夹...

2021-11-03 22:22:49 883

原创 ABCD选项的排序方式

Array.prototype.sort()的排序稳定性排序稳定性（stablesorting）是排序算法的重要属性，指的是排序关键字相同的项目，排序前后的顺序不变。const arr = [ 'peach', 'straw', 'apple', 'spork'];const stableSorting = (s1, s2) => { if (s1[0] < s2[0]) return -1; return 1;};arr.sort(stable...

2021-11-02 22:02:33 2424

原创为什么element-ui中的row-key属性要写唯一值

设置表格的数据项为树形结构必须要给表格指定row-key <el-table border :data="list" row-key="id"> <el-table-column label="名称" prop="name" /> <el-table-column label="标识" prop="code" /> <el-table-column label="描述" pr...

2021-11-02 08:38:02 5320

原创项目错误点,难点总结

1.当vue项目中出现,只想显示单选框或者复选框,而不想被点击时可以在el-checkbox-group上绑定:value属性,这个时候就是单向显示了<el-checkbox-group :value="checkedCities"> <div v-for="city in list.options" :key="city.id"> <el-checkbox :label="city.code">{{ city.title }}&...

2021-10-31 22:17:16 168

原创 vue项目使用富文本加高亮效果

1.下载关联包npm install vue-quill-editor --save -dev // 富文本npm install highlight.js --save -dev // 代码高亮import 'quill/dist/quill.core.css’import 'quill/dist/quill.snow.css’import ‘quill/dist/quill.bubble.css’/* * 注册 - 业务模块 */// 注册富文本 import { quillEditor } fro

2021-10-30 23:30:22 573

空空如也

空空如也