笔记
JingG459
加油!
展开
-
快速入门TypeScript(二)
一、前言上篇博客简单介绍了一下什么是 TypeScript ,简单总结了一下 TypeScript 与 JavaScript 的区别,还总结了十一个TypeScript 的类型,今天继续讲讲 TypeScript 的其他类型。二、数据类型上篇博客总结了原始类型、联合类型、数组类型、自定义类型-别名、函数类型、void、函数-可选参数、对象类型 、接口、元组、字面量类型,TypeScript 除了这些还有许多类型,接下来一一讲解。1、枚举...原创 2021-12-01 08:44:12 · 928 阅读 · 0 评论 -
快速入门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 · 915 阅读 · 0 评论 -
如何理解及使用闭包
那么闭包到底是啥?根据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 · 1213 阅读 · 0 评论 -
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 · 700 阅读 · 0 评论 -
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 · 161 阅读 · 0 评论 -
vue中Render函数使用介绍
一、前言 我刚在官网上研究了半天有关render的文档,我总结一下我个人的理解。render函数跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数,render函数更接近编译器。配合官方文档,总结一下我的心得二、render 拿官网的例子为例 ,通过父传子level,动态生成标题<template> <div...原创 2021-11-18 21:01:59 · 1227 阅读 · 0 评论 -
React 中 hooks 的使用
关于hooks的详解+(封装倒计时组件)原创 2021-11-17 20:26:48 · 1813 阅读 · 0 评论 -
react 项目配置 eslint
react项目中配置eslint原创 2021-11-17 18:44:50 · 1666 阅读 · 0 评论 -
React 和 Redux
文档:Redux中文文档Redux 官方文档对 Redux 的定义是:一个可预测的 JavaScript 应用状态管理容器。一、redux和react的关系Redux并不只为react应用提供状态管理, 它还支持其它的框架。React 是 DOM 的一个抽象层(UI 库),并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。对于大型的复杂应用来说,这两方面恰恰是最关键的。因此,只用 Reac...原创 2021-11-15 21:04:53 · 1558 阅读 · 0 评论 -
多维数组降维的几种方法
一、数组字符串化 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 · 1591 阅读 · 0 评论 -
JavaScript 原生对象、内置对象、宿主对象的区别
我对三者的理解,三个的概念区别分别是:内置(Build-in)对象:总是在引擎初始化阶段就被创建好的对象,是原生对象的一个子集 原生(Naitve)对象:除了内置对象,还包括了一些在运行过程中动态创建的对象 宿主对象:宿主对象不是引擎的原生对象,而是由宿主框架通过某种机制注册到JavaScript引擎中的对象一、原生对象ECMA-262 把原生对象定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。包含 Object、Function、Array、String、Boo.原创 2021-11-14 20:29:16 · 758 阅读 · 0 评论 -
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 · 2000 阅读 · 0 评论 -
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 · 1202 阅读 · 0 评论 -
VUE路由传值的方式有哪几种
Vue-Router 传参可以分为两大类分别是编程式的导航 router.push 和声明式的导航<router-link>一、编程式的导航 router.push编程式导航传递参数有两种类型:字符串、对象。字符串 :字符串的方式是直接将路由地址以字符串的方式来跳转,这种方式很简单但是不能传递参数:this.$router.push("home");对象 :想要传递参数主要就是以对象的方式来写,分为两种方式:命名路由、查询参数...原创 2021-11-11 21:39:05 · 1060 阅读 · 0 评论 -
Vue 中怎么重置 data?
要初始化 data 中的数据,可以使用 Object.assign()方法,实现重置 data中的数据,以下就是对该方法的详细介绍,以及如何使用该方法,重置 data 中的数据1)Object.assign()方法基本定义Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。用法: Object.assign(target, ...sources),第一个参数是目标对象,第二个参数是...原创 2021-11-10 16:00:00 · 763 阅读 · 0 评论 -
Vue 中操作 data 的数组方法哪些可以触发视图更新?
一、在vue中操作data的数组方法有以下几个方法可以触发视图更新:push()、pop()、shift()、unshift()、splice()、sort()、reverse()以上这些方法会改变被操作的数组; filter()、concat()、 slice() 这些方法不会改变被操作的数组,返回一个新的数组;以上方法都可以触发视图更新。二、不能触发视图更新的方法有以下几种:利用索引直接设置一个数组项,例:this.a...原创 2021-11-10 16:30:00 · 2718 阅读 · 0 评论 -
vue中必须注意点有哪些?
1、给对象添加属性的时候,直接通过给 data 里面的对象添加属性然后赋值,新添加的属性不是响应式的【解决办法】通过 Vue.set(对象,属性,值)这种方式就可以达到,对象新添加的属性是响应式的2、在 created 操作 dom 的时候,是报错的,获取不到 dom,这个时候实例 Vue实例没有挂载【解决办法】通过:Vue.nextTick(回调函数进行获取)...原创 2021-11-09 22:20:04 · 719 阅读 · 0 评论 -
在 Vue 中使用插件
在vue中使用插件主要有两个步骤:1、采用 ES6 的 import ... from ... 语法或 CommonJS 的 require() 方法引入插件2、使用全局方法 Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })...原创 2021-11-09 22:06:29 · 2108 阅读 · 0 评论 -
$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 · 586 阅读 · 0 评论 -
query 和 params 之间的区别是什么?
query和Params都是用于跳转路由传参的,二者之间的区别我总结以下两点:1. query要用path来引入,params要用name来引入2. 接收参数时,分别是this.$route.query.name和this.$route.params.name...原创 2021-11-08 21:11:38 · 334 阅读 · 0 评论 -
怎么定义 Vue-Router 的动态路由?
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如, 我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲 染。那么,我们可以在 Vue-Router 的路由路径中使用“动态路径参数”来达到这个效果我们可以通过param和query两种方式获取动态参数params的类型:配置路由格式:/router/:id 传递的方式:在path后面跟上对应的值 传递后形成的路径:/router/123query的类类型...原创 2021-11-08 20:49:53 · 3568 阅读 · 1 评论 -
什么是 Vuex ?
根据我的理解,VUEX是一个开发模式或者说框架。就像PHP有thinkPHP,Java有spring等。vuex通过状态(数据源)集中管理驱动组件的变化vuex的特点我总结以下几点:应用级的状态集中放在store里面 改变状态的方式是提交mutations,这里是同步的 异步逻辑封装放在action中...原创 2021-11-07 15:04:10 · 201 阅读 · 0 评论 -
为什么避免 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 · 1056 阅读 · 0 评论 -
怎么捕获 Vue 组件的错误信息?
总结以下几点如何捕获Vue组件的错误信息一、使用errorCaptured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回false以阻止该错误继续向上传播。二、使用errorHandler 为全局钩子,使用 Vue.config.errorHandler 配置,接收参数与 errorCaptured 一 致,2.6 后可捕捉 v-on 与 promise 链的错误,可用于统一错误处理与错误兜底...原创 2021-11-06 21:00:51 · 3397 阅读 · 0 评论 -
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 · 8929 阅读 · 0 评论 -
Vue 的最大的优势是什么?
根据我对于vue的理解,我总结的vue优势有以下五点: 一、vue作为一款轻量级框架,门槛低,上手快,简单易学。 二、vue可以进行组件化开发,数据与结构相分离,使代码量减少,从而提升开发效率,易于理解三、vue最突出的优势在于双向绑定,使用虚拟DOM 四、相较于传统页面通过超链接实现页面跳转,vue会使用路由跳转不会刷新页面 五、vue是单页面应用,页面局部刷新,不用每次跳转都请求数据,提升了用户体验...原创 2021-11-05 22:05:05 · 28036 阅读 · 0 评论 -
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 · 635 阅读 · 0 评论 -
深拷贝和浅拷贝
一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和对象数据类型。1、基本数据类型的特点:直接存储在栈(stack)中的数据2、引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。二、浅拷贝与深拷贝深拷贝和浅拷贝是只针对Object和Array.原创 2021-11-04 20:42:57 · 143 阅读 · 0 评论 -
vue项目打包发布上线
vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目(以vue-cli脚手架生成的项目为例)一、运行打包命令npm run build//一般情况如果不改的话都是build运行后生成 dist 文件夹...原创 2021-11-03 22:22:49 · 842 阅读 · 0 评论 -
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 · 2290 阅读 · 0 评论 -
为什么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 · 5160 阅读 · 0 评论 -
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 · 483 阅读 · 0 评论