- 博客(64)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 重学 vue3 中的 computed
它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。一个计算属性的声明中描述的是如何根据其他值派生一个值。计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改。，一个计算属性仅会在其响应式依赖更新时才重新计算。应该更新它所依赖的源状态以触发新的计算。
2024-04-17 11:03:29
467
原创 vue3.4 新特性 defineModel() 宏
官网是这样解释v-model的v-model的功能是，实现数据的双向绑定【本质上是:value和@input语法糖】如果是表单元素，下面两种写法是一样，这时v-model就是语法糖，帮你简化了操作如果是自定义的组件，那就相当于</constconst</其实也是一个语法糖，是对v-model再包装的语法糖帮你获取到了prop 中的 modelValue，且当 值发生变化时，会自动帮你调用。
2024-04-11 19:46:19
1294
原创 nrm 使用简介，快速切换下载镜像
nrm(npm registry manager)是npm的镜像源管理工具，有时候国外资源太慢，使用nrm可以快速的在npm源之间切换。
2024-03-13 16:48:47
183
原创 vue3 中使用 TinyMCE 富文本编辑器
找到官网，找到下载vue版本的地址上执行下载命令，将官网上的实例代码复制粘贴上去注册账号，获取免费的API-key汉化优化组件行为动作，比如上传图片。
2024-03-05 14:41:12
872
1
原创 git命令行、撤销中间某次merge的代码（最新的也可以这样操作）
场景：假设你有一个A分支，现在A分支merge 到master分支上了，你想撤销A分支的merge，将master分支回退到A分支merge之前的状态。
2023-12-19 21:02:30
405
原创 nvm学习与使用
1. 什么是nvmnvm是node的版本管理工具，帮助我们在开发中不同的项目使用不同的node版本nvm下载选择下载这一项（我这边下载的是1.1.7版本，最好不要下载最新版本，我下载的时候，最新版本是1.1.9版本）下载完之后，解压，安装切记，自定义一个文件目录，这个目录最好不要有中文、空格、各种乱七八糟的符号、就简简单单一个nvm然后放到c盘、d盘或者其他盘就行了、否则很容易出现各种乱七八糟的问题其次你还要找到你安装node的文件，如果你安装node的时候，选择的是默认安装路径，那直接下一步
2022-04-25 14:35:53
502
1
原创 前端学习路线-知识点总结-HTML篇
1. 对HTML语义化的理解（语义化标签是什么？）什么是HTML语义化：通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构。良好的语义化代码可以直接从代码上就能看出来那一块到底是要表达什么内容。HTML语义化优点：标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。有利于构建清晰的结构，利于团队的开发、维护。常用的一些语义化标签：<h1> ~ <h6> 标题标签<p><table>、<thead.
2021-11-12 14:02:28
480
原创 业务相关，element-ui（el-upload上传）使用http-request自定义上传方式，实现图片的上传，下载，删除
本文是自己平时业务需求中的总结，如果你需要借鉴本文，那么你的上传行为应该是：项目中下载ali-oss依赖，我这里使用的是^6.0.1版本使用阿里云oss，将图片上传到阿里云，然后阿里云将图片地址返回，我们拿到图片地址，将它传递给后端本文主要使用this.$refs.upload.uploadFiles，获取到，el-upload上传组件中的默认上传列表，无论上传失败还是成功，都会将图片保存在这里，所以我们只需要对他进行操作，就能实现我们想要的功能1. 初始化阿里云对象，并获取阿里云token，用于上
2021-11-10 21:00:13
4871
原创 vue使用 html2canvas 导出页面，及将图片转成 pdf 格式
1. 下载 html2canvas，下载 jsPDFvue引入的形式npm install --save html2canvasnpm i jspdf --save在vue文件中使用，这样前期的准备工作就完成了import html2canvas from 'html2canvas';import JsPDF from 'jspdf';2. 将DOM元素渲染成canvas，并下载，html2canvas最基本的用法// elementId，是你要渲染的DOM的ID值，这个ID以下的所有
2021-08-24 16:24:09
1553
原创 echarts大小自适应，width=100%实际100px的问题
1. 首先要在data中定义一个为null的空值，用来保存你实例化图表的对象 data() { return { // echarts图表 myCharts: null, // 获取网页可见区域宽 screenWidth: document.body.clientWidth, }; },2. 在mounted生命周期中定义新的onresize函数，获取当前的窗口大小，并将值赋值给data中定义的screenWidth，这样在wa
2021-08-23 17:20:16
3110
原创 JS知识点梳理
JS数据类型【基本数据类型】、【引用数据类型】区别：【基本数据类型】：直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。【引用数据类型】：同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。包括：【基本数据类型】：String、Number、Boolean、Null、Undefined【Symbol（es
2021-07-19 15:21:25
133
原创 Array.slice和spilce的区别，看了忘，忘了又看，烦！
slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。...
2021-06-10 16:10:10
211
原创 moment.js 常用时间格式
moment.js官网 [点击跳转]const date = moment() // 获取一个moment对象的事件日期格式const date = moment().locale('zh-cn') // 默认和这个中国当前时间是一样获取当前时间const nowDate = moment().format('YYYY-MM-DD hh:mm:ss');// 2021-06-08 01:35:27获取三天前的时间，并将时间设置成 00:00:00一般作为查询时间的初始时间const th
2021-06-08 14:20:26
767
原创 数组 reduce 简介及使用场景
1 . 数组求和，求乘积2 . 计算数组中每个元素出现的次数3 . 数组去重4 . 数组扁平化（将二维，或者多维数组转化为一维数组）5 . 对象里的属性求和reduce的参数，只接收两个参数，一个回调函数（必填），一个 initValue 初始值（非必填）注意：回调函数有四个参数1 . Accumulator （累计器)，上一次回调函数的返回值，如果有initValue，他就表示为initValue的值2 . Current Value 当前正在处理的数组元素3 . Current Ind
2021-06-04 17:32:40
1629
原创 vue引入字体文件踩坑
vue引入字体文件的正常步骤走一遍1 . 下载字体文件并放入项目中2 . 新建一个文件，font.css（不新建也行，.less和.scss也行）只要能引入到单页面或者main.js中就可以注意！！！：这个css文件一定要和字体文件在同级目录下，要不然可能会出现字体不起作用的情况font.css文件里就这样写就完事了，压根不用写什么format后缀@font-face { font-family: 'D-DIN'; src: url('D-DIN.ttf'); font-weight
2021-05-18 16:06:09
2594
3
原创 table表格，隔行，格列变色
隔行变色每隔 奇数 行变色一次tr:nth-child(odd) { background-color: #eee;}每隔 偶数 行变色一次tr:nth-child(even) { background-color: #eee;}隔列变色每隔 奇数 行变色一次td:nth-child(odd) { background-color: #fff065;}每隔 偶数 行变色一次td:nth-child(even) { background-color: #fff
2021-05-07 11:51:04
961
原创 JS 预编译
js执行的三部曲 1.语法检查 2.预编译 3.解释执行（也就是代码从上往下逐条执行） 预编译（预编译会在代码执行的前一步发生，其主要有三个作用）（预编译可以理解为在内存中开辟一些空间，存放一些变量和函数） 1.函数声明 提升（这里是函数声明，不是函数表达式，函数表达式本质和变量定义是一个东西） 2.变量声明 提升 3.找到形参，将实参和形参对应（把实参值传到形参里）作用域在创建的过程中，会有一个与之对应的JS的变量对象，被称为OA对象，这个OA对象我们是访问不到的，是供JS引擎访
2021-04-26 17:55:02
85
原创 vue 父子组件传值
父子组件传值 最常用的方法（4种）1 . 父组件 传递数据 给子组件（props）vue官方文档特别注意！！特别注意！！特别注意！！props传值的类型如果是Object类型，如对象，数组等，传递过去的是地址，在子组件中修改这些数据，会连带的把父组件中的值一并修改，强烈建议在子组件中深拷贝之后再使用这些值。然后使用$emit的形式，将修改好的值再传递给父组件，这样数据就会以一种单向的，可预测的形式进行修改（如果不深拷贝，会造成数据被修改后，很难找到修改源头，非常恶心）父组件父组件，定义变量tes
2021-04-25 17:32:18
613
原创 css经典面试题总结
CSS 并不是面试的重点考察项，这也导致现在国内业界对 CSS 的专注不够，真正精通并专注于 CSS 的团队和人才并不多。因此如果能在 CSS 领域有自己的见解和经验，反而会为相当的加分并脱颖而出。1 . 盒子模型 （box-sizing）理论上盒子模型可以分为四种，但现在 w3c 与 mdn 规范中均只支持 content-box 与 border-box；content-box (W3C 标准盒模型)border-box (IE 盒模型)padding-box (FireFox 曾经
2021-03-12 17:55:08
235
原创 vuex 基础总结
（一）为什么要使用vuexVuex的定义： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（简单说就是，一个公共的数据共享中心，在任何地方都能调用数据共享中心的数据，并且在一处修改，其他位置也会跟着修改）Vuex主要解决了： 复杂组件之间的数据共享问题（二）使用vuex的步骤1 . 安装 vuexnpm install vuex --save2 . 在 src 目录下创建 store
2021-03-10 09:37:45
273
原创 async 与 await 基础详解
（一）async，await的作用async ， await 一起使用，实际是为了解决异步操作的新方法但是区别于 promise ，promise 是对异步操作进行封装，解决回调地狱的一种解决方案，本质上是为了让程序员书写异步代码更加方便，阅读起来更加简洁，明朗，可以说promise就是异步操作的一个容器而async ， await，则是promise的一个容器，他对已经包裹好的异步操作的promise进行二次包装，使异步代码看起来像同步一样执行，比promise更加形象的把代码呈现出来传统prom
2021-03-05 17:51:22
831
原创 v-slot与废弃的slot，slot-scope的对比与区别
（一）slotslot插槽，是Vue提供的一种HTML模版，由子组件提供的一种暴露给父组件的可以传入自定义内容的出口。slot 有 匿名插槽，具名插槽，作用域插槽 三种。匿名插槽（一个元素里只能有一个匿名插槽）// 子组件<div class="child1"> <!--匿名插槽--> <slot>匿名插槽按钮</slot></div>// 父组件<child1> <div>插入子组
2021-03-05 10:57:32
1955
3
原创 vue + element-ui 实现 后台管理 大体layout 布局
大致效果是这样的项目地址1 . 创建layout文件并布局这里使用的是element-ui提供的布局，经典的header，aside，main形式布局（具体要什么样的自己设置，这里例举其中一种形式）这里最重要的是，在el-main，放一个router-viewrouter-view的作用是，嵌套路由下面的嵌套组件，渲染到该位置同样的App.vue中的router-view，是在根节点下，所以路由里的所有内容都会渲染在这里<transition mode="out-in"> &
2021-03-03 15:29:21
3477
4
原创 vue-router，vue路由简介
（一）命名路由命名路由是目前开发当中使用最频繁的形式通过一个名称 name：属性来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，可以直接指定name值进行跳转这就是一个最简单的命名路由import Vue from "vue";import Router from "vue-router";import HelloWorld from "@/components/HelloWorld";Vue.use(Router);let router = new Rou
2021-03-03 14:43:17
147
原创 JS 与（ && 逻辑与 ）或（ || 逻辑或 ）详解
&& 逻辑与逻辑与的运算规则console.log(true && true); // trueconsole.log(true && false); // falseconsole.log(false && true); // falseconsole.log(false && false); // falseconsole.log( 1 && 2 ); // 2console.log
2021-02-25 16:06:18
860
原创 ES6 Promise
Promisepromise对象从语法上来看呢，是一个构造函数，用来生成Promise实例，用来封装异步操作，并提供成功后或失败后的结果所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果Promise对象有以下两个特点。1 . 对象的状态不受外界影响Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这
2021-02-24 17:26:31
77
原创 JS深浅拷贝
JS深浅拷贝的基础知识js实现深浅拷贝的理论基础是，不同的数据类型在内存中存储的方式不同js数据类型分为：基本数据类型，引用数据类型基本数据类型：string、number、boolean、null、undefined、（Symbol）引用数据类型：object（object、array、function、date、RegExp）数据类型在内存中的存储形式，点击此链接查看详情浅拷贝基本数据类型的浅拷贝，不会有任何副作用和影响，实质是栈的 传值var a = 100var b = aa
2021-01-19 16:50:58
266
原创 webpack 创建的 React 项目，的基础目录树作用介绍
webpack 创建的 React 项目，的基础目录树作用介绍刚创建的最基础的目录由以下这些文件夹和文件组成1 . yarn.lock 文件yarn.lock文件中存放的是，整个项目所依赖的第三方模块的各种各样的信息，其中包括模块名称，和模块具体的版本号。这个文件基本不要乱动，一旦改错，整个项目都会崩溃，一般来说也不需要大家做任何的修改，放着就行了2 . README.md 文件关于项目的所有说明，都会写在这个文件里项目该开始时，里面会有一些默认的项目说明，我们可以根据自己的需求删掉，并写上
2021-01-08 10:21:36
322
原创 现有vue-cli项目做SEO迁移到nuxt.js下
现有vue-cli项目做SEO迁移到nuxt.js下1 . 简单描述一下以下几个概念1 . SPA ： (single page web application，SPA)单页面应用，基于vue框架开发的项目很多都属于单页面应用；2 . SSR：server side rendering，服务端渲染，网页是通过服务端渲染生成后输出给客户端，SSR特点：众所周知使用SSR是为了优化SEO；3 . SEO： 搜索引擎优化，指通过对网站进行站内优化、修复和站外优化，从而提高网站的网站关键词排名以及公司产品的
2021-01-05 11:38:30
1372
原创 背景图片，banner图片随屏幕大小变化而变化
背景图片变化业务背景：一个固定高度，固定最小宽度的横幅式banner<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document<
2020-12-28 10:44:41
1040
原创 超详细！！vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript
vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript注意注意注意：本文章所有例举内容，页面均为纯静态页面，没有任何ajax请求，例子适用官方网站等不需要动态渲染的网站，至于能不能依葫芦画瓢应用在带ajax的页面上，这里没做验证例子采用的各种环境版本：node版本为：v14.15.0（node -v）npm版本为：6.14.8（npm -v）@vue/cli 4.5.6（vue -V）举个例子，这里我创
2020-12-25 11:28:07
791
1
原创 JS、阻止 a 标签的默认点击事件，阻止默认的所有事件
JS、阻止 a 标签的默认点击事件，阻止默认的所有事件1 . javascript：void(0) 空处理缺点：当超链接有target="_blank"属性时，点击后任然会跳出空白页面 <a href="https://www.baidu.com/" target="_blank">超链接1</a> <a href="javascript:void(0);">超链接2</a> <a href="javascript:void(0);"
2020-12-15 13:56:51
1719
1
原创 JavaScript 防抖、节流
浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，这就出现了防抖和节流。防抖（debounce）（ 防抖 ）：短时间内，多次触发同一个函数，只会执行最后一次（在规定的延迟时间内，如果再次触发函数，则会清掉上一次函数，重新触发一个新函数，不停地触发则会不停地清除上一次函数，直到停止操作，然后延迟时间之后，该函数被执行，延迟时间一般较短）// 普通方
2020-11-13 14:12:19
126
原创 JS类型转换（强制类型转换，隐式类型转换）
类型转换有两种：一种是显式转换（强制类型转换），即需要程序员手动写代码强制转换；另一种是隐式转换（隐式类型转换），由JavaScript解释器自动转换。JavaScript提供以下函数进行显式转换：1. 转换为数值类型：Number(mix)、parseInt(string，radix)、parseFloat(string)2. 转换为字符串类型：toString(radix)、String(mix)3. 转换为布尔类型：Boolean(mix)（一）转换为数值类型Number(mix)函数
2020-11-09 18:08:09
529
原创 vue常用正则表达式，只能输入纯数字，且首位不能是0，只能输入小数点后两位数字
vue 正则表达式，只能输入正整数，且首位不能是 0适用场景，手机号正则验证，优惠券张数验证等<template> <div> <input v-model="valueData" placeholder="正则验证测试表单" /> <span>只能输入正整数，且首位不能为0</span> </div></template><script>export default
2020-11-09 15:09:39
7327
原创 git操作，删除远端分支，在某一分支上切出一个新的分支，合并代码
（一）删除远端分支1 . 首先 使用 git branch -a 查看项目中所有的分支2 . 切换到master分支上 git checkout master3 . 使用 git push origin --delete 分支名的形式删除远端分支（二）在某一分支上切出一个新的分支问题描述：目前想从 A 分支上，切出一个新分支并命名为 B1 . 先把分支切到 A 分支上 git checkout A2 . git checkout -b B 此时回车之后就在 A 分支上切出一个新分支并命名为
2020-10-22 18:03:19
1252
原创 vue中 slot 的使用总结
vue中slot的使用总结slot是Vue中的插槽，首先它是使用在 子组件 中的slot一般都是子组件定义了主体部分，父组件引入，然后父组件根据需求不同需要向里面添加不同的内容1 . 普通 slot 插槽父组件（ 记得将子组件引入，并且将组件在components注册后才能使用 ）<template><!-- 父组件 --> <div> <slotTest> </slotTest> </div>
2020-09-30 17:00:00
6700
1
原创 如何使用 sessionStorage 和 localStorage 进行简单的数据存储与获取
如何使用 sessionStorage 和 localStorage 进行简单的数据存储与获取localStorage和sessionStorage是Web提供的两种本地存储方式。相比较cookie而言，localStorage和sessionStorage的存储大小很大，localStorage能够长期保存，sessionStorage在会话期间保存。localStorage1 . 设置 localStorage （setItem）： var localStorage = window
2020-09-25 14:59:10
867
按字母A——Z排列的中国城市（地级市）json数据
2020-09-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人