- 博客(41)
- 收藏
- 关注
RSS订阅
原创 VS Code常用快捷键总结(新手必备)
一、主命令框 F1或Ctrl+Shift+P（俗称万能键） ：打开命令面板。在打开的输入框内，可以输入任何命令,如下图(图片较大，如果查看不清晰，可以在图片上右键 “在新的标签页中打开图片”，查看原图，下同)： 例如:按一下 Backspace(退格键) 会进入到 Ctrl+P 模式在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式在 Ctrl+P 窗口下还可以直接输入文件名，跳转到该文件 在Ctrl+P...
2021-10-14 21:11:57
2975
原创 如何理解闭包(干货满满)
摘要本文介绍了闭包的定义，作用，及常见的理解中的误区，并没有引入其他的专业词汇。定义闭包对应的英文是closure，下边的定义是来自MDN。Aclosureis the combination of a function bundled together (enclosed) with references to its surrounding state (thelexical environment).In other words, a closure gives you ac...
2021-12-06 15:00:06
307
原创 React入门 ③ -- React 组件介绍
组件对特定功能的封装，主要用来对UI进行拆分。特点独立 可复用 可组合分类基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件 业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框 区块组件：由基础组件组件和业务组件组合成的UI块 页面组件：展示给用户的最终页面，一般就是对应一个路由规则React 组件的两种创建方式React 组件有两种创建方式使用 JS 中的函数创建组件 使用 JS 中的class...
2021-11-24 00:44:41
627
原创 React入门② -- 扩展 - 配置Eslint
前言一千个人写代码有一千种风格，每次合并同事的代码，拉出来一跑直接崩溃，所以我们最好统一一下代码风格,配置一下 eslint步骤 npm i eslint typescript -D 在项目根目录，运行npx eslint --init 按交互提示安装相关插件 它会自动生成eslint的配置文件 3. 设置vscode的自动保存格式化把eslint 安装包启用代码在项目根目录下，补充配置文件：.vscode\settings.jso...
2021-11-23 22:06:11
660
原创 React基础 ① -- 从零开始
React 介绍React 是用于构建用户界面的 JavaScript 库 构建用户界面. User Interface，对咱们前端来说，简单理解为：HTML 页面 javscrtipt库。不是框架，是库。 vue: 是渐进式的javascript框架 react 全家桶是框架 react: 核心库 react-dom: dom操作 react-router：路由 redux：集中状
2021-11-21 22:45:52
1276
原创 Vue的双向绑定原理
1. 基本认知Vue2是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty() 去劫持对象的访问器(Getter、Setter), 当对象的属性值发生变化时可获取变化,然后根据变化来作后续响应;(一个一个属性的劫持)个人理解: Vue是采用数据劫持结合发布者- 订阅者模式的方式, 通过Object.defineProperty() 来劫持各个属性的setter、getter,在数据变动时,发送消息给订阅者,触发相应的接听回调Vue3中,则是通过Pr...
2021-11-18 20:33:53
610
原创 Vue 常用的指令都有哪些？并且说明其作用
Vue官方提供的指令总共是有14个，常用的指令有10个，分别是：1. v-model作用:多用于表单元素实现双向数据绑定,也可实现父子组件传值,本质上是一个语法糖，底层原理是由@input事件+value实现的 <input v-model="name" /> // name 需要再data中定义,需要接收v-model传递过来的参数 data() { return {name:''} }2. v-b...
2021-11-13 15:18:19
5529
原创 Vue 组件里的定时器要怎么销毁?
销毁定时器的操作一般是在beforeDestroy钩子中进行，根据定时器的数量不同可以有两种解决方式：1. 组件中有多个定时器（1）在data函数里创建一个对象timer，给每个定时器取个名字一一映射在对象timer中;（2）在beforeDestroy钩子函数中通过循环这个对象,来清除每一个定时器。for（let k in this.timer）{ clearInterval（k）}2. 组件中只有一个定时器（1）const timer = setInterval..
2021-11-11 21:05:42
3323
原创 vue中v-if 和 v-show的区别
1. 相同点v-if 和 v-show 都可以动态地控制元素的显示与隐藏。2. 不同点2.1 实现本质方法不同v-if 是动态的向DOM树内添加或者删除DOM元素；v-show 是通过设置DOM元素的display样式属性控制显隐；2.2 编译的区别v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的控制css样式切换；2.3 编译的条件不同v-if 是惰性的，如果初始条件为false，则什么也不做；只有在条件第一
2021-11-08 20:10:10
174
原创 Vue 中怎么重置 data
在某些情况下，需要重新使用data中的数据，但是data中的数据已经被各种表单、变量等赋值，那么怎么重置data的值呢？那么此时我们有两种办法1. 逐个赋值...data() { return { name: '', sex: '', desc: '' }}...// 逐个赋值this.name = ''this.sex = ''this.desc = ''但这种方法只在对象数量少的时候可以用一下，一个一个去重新赋值比较麻烦,而且代码看起来也会比较乱.
2021-11-07 16:05:17
3134
原创 请说出 Vue-cli 项目中 src 目录每个文件夹和文件的用法？
Vue-cli项目中 src 目录1. assets文件夹是放静态资源2. components 文件夹是放全局组件的3. router 文件夹是定义路由相关的配置4. store 文件夹是管理 vuex管理数据的位置 模块化开发 全局getters5. views 视图所有页面 路由级别的组件6. App.vue入口页面 根组件7. main.js入口文件 加载组件 初始化等扩展:vue-admin-template的目录├── build ...
2021-11-07 15:21:58
4224
1
原创 Vue 渲染模板时怎么保留模板中的 HTML 注释呢？
在组件中设置comments属性，当设为true时，将会保留且渲染模板中的 HTML 注释。官网默认为舍弃注释<template comments> ...</template>官方文档
2021-11-07 11:45:52
431
原创 active-class 属于哪个组件中的属性？该如何使用？
active-class是 vue-router模块中 router-link 组件中的属性，主要作用是用来实现选中样式的切换。一、active-class 的使用方式在 vue-router 中使用 active-class 有两种方式:1.在 router-link 中写入 active-classactive-class 选择样式时根据路由中的路径（to=“/home”）去匹配，然后显示<router-link to="/home" class="menu-home" .
2021-11-07 11:38:34
4356
原创 你是怎么认识 Vuex 的?
1. Vuex是什么?官方解释是:vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。 你可以理解为vuex一种开发模式或框架。比如 PHP 有 thinkphp，java 有 spring 等，通过状态(数据源)集中管理驱动组件的变化(好比 spring 的 IOC 容器对 bean 进行集中管理)。2. 为什么要用 Vuex1. 因为多个组件依赖...
2021-11-06 22:40:10
488
原创 怎么在 watch 监听开始之后立即被调用？
在选项参数中指定immediate: true将立即以表达式的当前值触发回调： let vm=new Vue({ el:"#first", data:{msg:'liuneng'}, watch:{ msg:{ handler (newMsg,oldMsg){ console.log(newMsg); }, ..
2021-11-06 21:38:59
205
原创 Vue 常用的修饰符都有哪些？
常用的修饰符一般分为 表单修饰符(v-model修饰符) 和事件修饰符。一、表单修饰符1. .lazy输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据:<input type="text" v-model.lazy="value">2. .trim输入框过滤首尾的空格：<input type="text" v-model.trim="value">3..number先输入数字就会限制输入只能是数字，先字符串.
2021-11-06 21:22:36
1175
原创 怎么在组件中监听路由参数的变化？
当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。那如果我们要在组件中监听路由参数的变化,就只能通过watch (监测变化)$route对象,或使用beforeRouteUpdate的组件内守卫。方式一: 监听 $routeconst User = { template: '...', watch: { ...
2021-11-06 19:46:52
1313
原创 Vue 生命周期总共分为几个阶段？
生命周期就是组件从创建到销毁的整个过程。生命周期钩子函数就是在生命周期某个时间点自动触发的函数,作用是在特定的时间点,可以执行特定的操作。Vue生命周期 总共有 11 个,一般又分为常用和不常用两部分,那我们先来谈一谈常用的阶段。先来官方的图镇楼:我们常用的又可以分为4大阶段,8个方法一、初始化阶段1. beforeCreate (创建前)在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配 置之前被调用。...
2021-11-06 18:29:30
2165
原创 前端模拟上线 解决上线后跨域问题 在nodejs环境中布署应用
正常项目上线流程 :我们的目标是 :将打包好的代码打包上线(本地模拟)1. 使用 koa 框架部署项目1.1 建立web服务文件夹hrServer1.2 在该文件夹下，初始化npmnpm init -y1.3 安装服务端框架koa(也可以采用express或者egg)npm install koa koa-static1.4 hrServer中新建public目录，将打包好的项目dist拷贝到hrServer/public下1.5 在根目录下创...
2021-11-02 22:30:38
471
原创 hash路由模式与history路由模式
1. hash路由模式hash模式：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user参考: hashChange2. history模式history模式： 美化后的hash模式，路...
2021-11-02 20:48:00
8616
原创 Vue国际化支持(i18n)
1. 国际化概述开发时，项目能同时应对世界不同地区和国家的访问，并针对不同地区和国家的访问，提供相应的、符合来访者阅读习惯的页面或数据。国际化(internationalization)又称为i18n(读法为i18n，据说是因为internationalization(国际化)这个单词从i到n之间有18个英文字母，i18n的名字由此而来) 2. Vue + Element国际化支持vue项目中的国际化语言支持使用的是vue-i18n插件2.1安装国际化的包...
2021-11-01 21:51:47
1388
1
原创 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-26 21:35:18
303
原创 把平铺的数组结构转成树状结构数组
1. 使用非递归方法 -- 数组转树<script> /** * 把平铺的数组结构转成树形结构 */ const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pid': '2c', 'name
2021-10-26 21:22:40
339
原创 性能优化之防抖与节流
防抖和节流都是一种性能优化的手段1. 防抖（debounce）实现原理:函数被触发时,先延迟执行的时间,在延迟的时间内如果再次被触发,则取消之前的延迟,再重新开始新的一轮延迟,达到只执行最后一次请求,其他请求则被过滤掉的效果。通俗来讲就是:持续触发（事件）不执行，不触发的一段时间后才执行.（例如英雄回城）实现思路：首次运行时把定时器赋值给一个变量，第二次执行时，如果间隔没超过定时器设定的时间则会清除掉定时器，重新设定定时器，依次反复，当停止下来时，没有执行清除定时器，超过一定时间后触发回调.
2021-10-24 20:43:28
105
原创 watch监听器的基本使用
1. watch 的定义watch是一个观察动作.可以侦听指定名称属性值(data/computed)的变化,属性值一旦发生变化时就会触发侦听器,然后侦听器执行相应的业务代码.侦听器一般来说是用来监听数据的变化，默认是在数据发生变化时执行。监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值。在vue中，使用watch来响应数据的变化，关于watch的用法大致有三种。2. 简单侦听(主要针对变量和简单数据类型)语法: watch: { ...
2021-10-22 22:52:22
5148
原创 树形控件中的svg图标的使用
初始样式:完成之后的样式:我们需要解决的有以下几点:先给没有下属节点的对象加上图标 如何消除默认的展开收起图标(小三角) 有下属节点的通过是否展开,来修改加号和减号 难点一:如何给没有下属节点的对象加一个头像<svg-icon v-if="data.children.length !== 0" icon-class= 'add' /> <svg-icon v-else icon-class="user1" /> <...
2021-10-21 21:47:11
418
原创 数组转换成树
const data = [ { id: "01", name: "张大大", pid: "", job: "项目经理" }, { id: "02", name: "小亮", pid: "01", job: "产品leader" }, { id: "03", name: "小美", pid: "01", job: "UIleader" }, { id: "04", name: "老马", pid: "01", job: "技术leade...
2021-10-21 11:17:50
731
原创 element-ui 带序号表格如何让序号递增
在使用element-UI的el-table时，我们添加了type=“index” ，如果设置了 index 则显示该行的索引（从 1 开始计算）。但是每一页都是从1开始计算。当我们想要切换页码时，希望序号接着上一页的，实现表格翻页序号递增/延续。原来效果:下面演示如何实现分页切换时序号递增，代码如下：<template> <div> <el--card> <!-- type:index会自动生成序号 -->
2021-10-20 21:35:04
3680
1
原创 reduce方法 -- 统计每个元素出现的次数
<script> const arr = ["b", "c", "b", "c", "a", "b", "c"] const obj = arr.reduce((allNum, num) => { if (num in allNum) { allNum[num]++ } else { allNum[num] = 1 } return allNum },{}) console.log(obj)</script>
2021-10-20 09:56:05
655
原创 .sync和v-model的区别
两者共同点v-model的本质<!--v-model写法--><my-component type="text" v-model="value"><!--展开语法糖后的写法--><my-component type="text" :value="value" @input="value = $event.target.value"><!--默认针对原生组件input事件，但是如果子组件定义了针对事件model: {
2021-10-18 14:05:54
149
原创 Vue中的.native修饰符
.native 是什么？.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。比方说:你想在某个组件的根元素上绑定事件，直接使用 @click=''function' 是不生效的，我们可以添加.native修饰符 @click.native=''function''...
2021-10-18 11:23:50
494
转载 Vue中$router和$route的区别
1.$router对象$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。以history对象来举例：$router.push({path:'home'})，本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录$router.replace({path:'home'})，//替换路由，没.
2021-10-17 17:55:57
172
原创 数组的常用方法(1)
1. push() 方法定义:push()方法,向数组末尾添加新元素, 并返回新长度, 会改变原数组的长度。实例:let arr = [1,2,3,4,5]console.log(arr.push(8)) // 6console.log(arr) // [1,2,3,4,5,8]2. pop() 方法定义:pop() 方法,移除数组的最后一个元素，并返回该元素,会改变原数组的长度。实例:let arr = [1,2,3,4,5]console.log(arr...
2021-10-16 23:58:58
557
原创 git的基本使用
1. 本地仓库第一步：初始化一个git的本地仓库git init第二步：查看当前仓库的状态git status第三步：将当前的文件提交到暂存区 # 将所有的文件提交到暂存区git add .# 将单个文件提交到暂存区git add 文件名第四步：将暂存区里面的文件提交到本地仓库 一定要记得 -m 要写提交信息git commit -m 提交信息2. 将本地仓库里面的代码提交到仓库第一步：我们需要去远程仓库新建一个空的仓库第二步：复制将...
2021-10-16 00:01:37
62
原创 Vuex详解
什么是Vuex?Vuex是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。要点： vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具 集中式管理数据状态方案 (操作更简洁)data() { return { 数据, 状态 }} 数据变化是可预测的 (响应式) vue官方提供的独立于组件体系之外的，管理公共数据的工具Vuex中有5个内容需要学习： state： 统一定.
2021-10-14 18:52:21
199
原创 购物车渲染
代码:<template> <div> <div class="book" v-for="(item, index) in list" :key="index"> <img :src="item.img" class="img" /> <div>{{ item.name }}</div> <div>{{ item.price }}</div> ...
2021-10-05 23:42:11
64
原创 Vue 计算属性 -- 购物车结算案例
代码:<template> <div> 手机: 价格 <input type="number" placeholder="手机价格" v-model.number="mobilePrice" /> 数量 <input type="number" placeholder="手机数量" v-model.number="mobileNum" /> 小计 <span>{{ mobileAll }...
2021-10-05 22:57:52
385
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人