前端
关注
分享
扫一扫
文章平均质量分 72
满舰饰v
var obj = new Object();
展开
-
nvm学习与使用
1. 什么是nvmnvm是node的版本管理工具，帮助我们在开发中不同的项目使用不同的node版本nvm下载选择下载这一项（我这边下载的是1.1.7版本，最好不要下载最新版本，我下载的时候，最新版本是1.1.9版本）下载完之后，解压，安装切记，自定义一个文件目录，这个目录最好不要有中文、空格、各种乱七八糟的符号、就简简单单一个nvm然后放到c盘、d盘或者其他盘就行了、否则很容易出现各种乱七八糟的问题其次你还要找到你安装node的文件，如果你安装node的时候，选择的是默认安装路径，那直接下一步原创 2022-04-25 14:35:53 · 601 阅读 · 1 评论 -
业务相关，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 · 5161 阅读 · 0 评论 -
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 · 1893 阅读 · 0 评论 -
vuex 基础总结
（一）为什么要使用vuexVuex的定义： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（简单说就是，一个公共的数据共享中心，在任何地方都能调用数据共享中心的数据，并且在一处修改，其他位置也会跟着修改）Vuex主要解决了： 复杂组件之间的数据共享问题（二）使用vuex的步骤1 . 安装 vuexnpm install vuex --save2 . 在 src 目录下创建 store原创 2021-03-10 09:37:45 · 319 阅读 · 0 评论 -
async 与 await 基础详解
（一）async，await的作用async ， await 一起使用，实际是为了解决异步操作的新方法但是区别于 promise ，promise 是对异步操作进行封装，解决回调地狱的一种解决方案，本质上是为了让程序员书写异步代码更加方便，阅读起来更加简洁，明朗，可以说promise就是异步操作的一个容器而async ， await，则是promise的一个容器，他对已经包裹好的异步操作的promise进行二次包装，使异步代码看起来像同步一样执行，比promise更加形象的把代码呈现出来传统prom原创 2021-03-05 17:51:22 · 906 阅读 · 0 评论 -
v-slot与废弃的slot，slot-scope的对比与区别
（一）slotslot插槽，是Vue提供的一种HTML模版，由子组件提供的一种暴露给父组件的可以传入自定义内容的出口。slot 有 匿名插槽，具名插槽，作用域插槽 三种。匿名插槽（一个元素里只能有一个匿名插槽）// 子组件<div class="child1"> <!--匿名插槽--> <slot>匿名插槽按钮</slot></div>// 父组件<child1> <div>插入子组原创 2021-03-05 10:57:32 · 2199 阅读 · 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 · 4182 阅读 · 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 · 192 阅读 · 0 评论 -
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 · 950 阅读 · 0 评论 -
ES6 Promise
Promisepromise对象从语法上来看呢，是一个构造函数，用来生成Promise实例，用来封装异步操作，并提供成功后或失败后的结果所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果Promise对象有以下两个特点。1 . 对象的状态不受外界影响Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这原创 2021-02-24 17:26:31 · 128 阅读 · 0 评论 -
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 · 421 阅读 · 0 评论 -
webpack 创建的 React 项目，的基础目录树作用介绍
webpack 创建的 React 项目，的基础目录树作用介绍刚创建的最基础的目录由以下这些文件夹和文件组成1 . yarn.lock 文件yarn.lock文件中存放的是，整个项目所依赖的第三方模块的各种各样的信息，其中包括模块名称，和模块具体的版本号。这个文件基本不要乱动，一旦改错，整个项目都会崩溃，一般来说也不需要大家做任何的修改，放着就行了2 . README.md 文件关于项目的所有说明，都会写在这个文件里项目该开始时，里面会有一些默认的项目说明，我们可以根据自己的需求删掉，并写上原创 2021-01-08 10:21:36 · 398 阅读 · 0 评论 -
现有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 · 1500 阅读 · 0 评论 -
背景图片，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 · 1143 阅读 · 0 评论 -
超详细！！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 · 962 阅读 · 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 · 1970 阅读 · 1 评论 -
JavaScript 防抖、节流
浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，这就出现了防抖和节流。防抖（debounce）（ 防抖 ）：短时间内，多次触发同一个函数，只会执行最后一次（在规定的延迟时间内，如果再次触发函数，则会清掉上一次函数，重新触发一个新函数，不停地触发则会不停地清除上一次函数，直到停止操作，然后延迟时间之后，该函数被执行，延迟时间一般较短）// 普通方原创 2020-11-13 14:12:19 · 178 阅读 · 0 评论 -
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 · 612 阅读 · 0 评论 -
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 · 7845 阅读 · 0 评论 -
vue中 slot 的使用总结
vue中slot的使用总结slot是Vue中的插槽，首先它是使用在 子组件 中的slot一般都是子组件定义了主体部分，父组件引入，然后父组件根据需求不同需要向里面添加不同的内容1 . 普通 slot 插槽父组件（ 记得将子组件引入，并且将组件在components注册后才能使用 ）<template><!-- 父组件 --> <div> <slotTest> </slotTest> </div>原创 2020-09-30 17:00:00 · 7086 阅读 · 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 · 979 阅读 · 0 评论 -
webpack 搭建 React 项目
使用 webpack 打包 React 项目根据官方文档上面说你的机器上安装的 Node >= 8.10 和 npm >= 5.61 . 所以第一步检查自己的 node 版本2 . 根据官方文档上说的，直接运行下面三句话，创建 react 项目并运行npx create-react-app my-appcd my-appnpm start（ 但是也许你在执行者三句话时，会出现一些错误 ）比如：这时需要这样解决，全局下载 create-react-appnpm inst原创 2020-09-21 16:39:04 · 227 阅读 · 0 评论 -
webpack手把手搭建vue项目，并实现webpack使用less编写css
使用webpack打包项目1 . 首先安装好 git 和 vue 之后，检查一下是否安装成功，有这三个就代表安装成功了，可以开始了2 . 在开始前，还需要在引入一个东西，引入 vue/cli-init要不然后面的语句执行不了 npm install -g @vue/cli-init3 . 开始打包项目vue init webpack yourprojectnamevue init webpack 为固定格式，yourprojectname 代表你的项目名称（一定要注意，项目名称不能出现大原创 2020-09-21 15:24:13 · 1295 阅读 · 0 评论 -
GIT的使用及常用命令，代码的上传，下载
GIT的下载打开 Git官网，下载 Git 对应操作系统的版本。因为没有vpn（科学上网），所有东西下载的都很慢得话就可以去找镜像！官网（肯定）下载太慢，我们可以使用 淘宝镜像下载：http://npm.taobao.org/mirrors/git-for-windows/Git 的安装安装：无脑下一步即可！安装完毕就可以使用了！检查是否安装成功：鼠标在任意地方点击右键，会出现这两个选项，就代表你安装成功了设置用户名与邮箱（用户标识，必需）当你安装Git后首先要做的事情是设置你的 用户原创 2020-09-19 14:33:50 · 250 阅读 · 0 评论 -
控制段落只显示，一行，两行，三行等，其余文字用...表示
控制段落只显示，一行，两行，三行等，其余文字用…表示首先是，控制段落只显示一行，多出文字用…表示overflow: hidden;white-space: nowrap;text-overflow: ellipsis;深入认识一下每个属性的含义overflowoverflow，定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么overflow: visible ;默认值。内容不会被修剪，会呈现在元素框之外overflow: hidden;多出的内容会被修剪，并且多原创 2020-09-04 10:42:57 · 1377 阅读 · 0 评论 -
Vue项目搭建流程中的知识点（移动端）
项目初始化1 . 对 Index.html 文件中 mate标签进行完善禁止移动端用户缩小放大页面，比例始终是1:1<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">2 . reset.css1 . 先引入 reset.css ，就是重置页面样式表（把不同手机的初始化样式做一个统一）rese原创 2020-05-18 21:47:16 · 285 阅读 · 0 评论 -
VUE基础知识
条件渲染 v - ifVue会尝试复用页面上的DOM，如切换 input 但是 input 的值却没有发生改变如下，当 v-if 改变成 v-else时，input中的内容时不会改变的（v-show的隐藏和显示的实质是，在css添加display:none属性，如果要频繁的隐藏和显示最好用v-showv-if 的隐藏和显示的实质是，将不将这个DOM插进页面去） <div v-if="show=== 'A'"> 用户名：<input />原创 2020-05-14 16:24:07 · 242 阅读 · 0 评论