weixin_43727391-优快云博客

原创【无标题】数组对象根据某个属性求和

const arr = [ {count: 1}, {count: 2} ]const sum = arr.reduce((pre, cur) => { return pre + cur.count }, 0)

2022-05-05 10:37:50 335

data() {return {timer: null,}},mounted() {this.loadData()this.refreshTimer()},methods:{refreshTimer() {this.clearTimer()this.timer = setInterval(() => {this.loadData()}, 10000)},clearTimer() {if (this.timer) {clearInterval(this.timer)

2022-03-30 18:21:22 1136

原创 css元素四种水平垂直居中的方法

首先来两个元素<div class="box"> <div class="son"></div> </div>给元素添加样式.box{height:400px;width:400px;background-color: #ccc;margin: 100px auto;}.son{width:200px;height:200px;background-color: red;}1.在知道元素的宽高情况下

2021-10-29 16:52:25 164

原创 vue-router 基本使用及vue Router——进阶篇

工作闲暇时间熟悉了下vue路由官方文档，结合往上写的文章发现有两篇写得很好特地记录下vue-router 基本使用vue-router 基本使用vue Router——进阶篇vue Router——进阶篇

2021-10-29 15:08:09 320 2

原创 vue中两种路由传参的方式

在项目的开发过程中，不同的项目传参方式有的不一样，感觉总是记不住，特地研究了下query传参和params传参的区别query传参app.uve中<router-link :to="{ name: 'User', query: { id: 123 } }">User</router-link>router/index.jsuser.vue文件中获取2.params传参app.uve中<router-link :to="{ name: 'User', par

2021-10-28 17:50:58 104

原创组件内导航之beforeRouteUpdate的使用

使用场景：组件复用；路由跳转；beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` },export default{ data(){

2021-10-28 15:24:12 278

原创深拷贝常用的方法

1.JSON转换var targetObj = JSON.parse(JSON.stringify(copyObj))let arr4 = JSON.parse(JSON.stringify(arr))2.普通递归函数function deepClone(source){ // 深拷贝 if(!isObject(source)) return source let target = Array.isArray(source)?[]:{} for(var k in sourc

2021-10-27 16:39:07 88

原创 JS函数防抖和节流及其应用场景

函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。通俗来讲就是：假设一个按钮在2000毫秒内被点击100次，等到最后一次触发该函数开始计时，过了delay毫秒后才会触发一次函数。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=

2021-10-25 18:19:57 82

原创浅谈Object.prototype.toString.call()方法

在JavaScript里使用typeof判断数据类型，只能区分基本类型，即：number、string、undefined、boolean、object。对于null、array、object来说，使用typeof都会统一返回object字符串。要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法，判断某个对象之属于哪种内置类型。分为null、string、boolean、number、undefined、array、func

2021-10-25 17:48:27 176

原创深入理解javascript之typeof和instanceof

主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方。typeof先来说说typeof吧。首先需要注意的是，typeof方法返回一个字符串，来表示数据的类型。语法讲解我们先看看各个数据类型对应typeof的值：数据类型TypeUndefined“undefined”Null“object”布尔值“boolean”数值“number”字符串“string”Symbol (ECMASc

2021-10-20 15:18:20 104

原创 javascript中call()、apply()、bind()的用法终于理解

之前的那个写蒙了，看到一篇文章后豁然开朗，原来可以很简单的去理解其实是一个很简单的东西，认真看十分钟就从一脸懵B 到完全理解！先看明白下面：例 1obj.objAge; // 17obj.myFun() // 小张年龄 undefined例 2 shows() // 盲僧比较一下这两者 this 的差别，第一个打印里面的 this 指向 obj，第二个全局声明的 shows() 函数 this 是 window ；1，call()、apply()、bind() 都是用来重定义

2021-10-20 11:27:40 76

原创 JS中call、apply、bind使用

为什么需要这些？主要是因为this，来看看this在使用中的一些问题box.onclick = function(){　　function fn(){　　　　console(this); // window　　}　　fn();};我们原本以为这里面的this指向的是box,然而却是Window。一般我们这样解决：box.onclick = function(){　　var _this = this;　　function fn(){　　　　console.log(_this); 　　

2021-10-20 10:35:27 70

原创理解js中this的指向

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的)1.普通函数function a(){ var user = "1024"; console.log(this.user); //undefined console.log(this

2021-10-19 17:37:19 69

原创 Js日期函数-Date方法

一.Date对象简介1 使用时必须使用new来调用创建我们的日期对象（既构造对象）构造当前时间对象主要有以下4中方法：var MyDate = new Date()var MyDate = new Date(milliseconds)var MyDate = new Date(string)var MyDate = new Date(y, m, d, h, min, sec, ms)2 创建date的时候，传入要设置的时间参数参数形式有以下5种：参数格式（以2021年10月19

2021-10-19 14:22:02 1264

原创 js中各种时间的转换、各种时间处理

js中各种时间的转换、各种时间处理将中国标准时间转换成yyyy-mm-dd hh:mm:ss中国标准时间：Thu May 12 2019 08:00:00 GMT+0800 (中国标准时间)var d = new Date('Thu May 12 2019 08:00:00 GMT+0800 (中国标准时间)'); d=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':'

2021-10-18 18:26:49 621

原创 axios封装

src下新建request文件夹,在request文件夹下1.index.js// http.jsimport axios from "axios";// 环境的切换// if (process.env.NODE_ENV === "development") {// axios.defaults.baseURL = "http://www.baidu.com";// } else if (process.env.NODE_ENV === "production") {// ax

2021-09-07 11:02:49 133

原创 vue中vue.config.js的配置

constpath=require("path");module.exports={//部署应用包时的基本URL,用法和webpack本身的output.publicPath一致publicPath:"./",//输出文件目录outputDir:"dist",//eslint-loader是否在保存的时候检查lintOnSave:true,//是否使用包含运行时编译器的Vue构建版本runtime...

2021-09-07 10:55:40 355

原创 vue 之this.$router.push、replace、go的区别

一、this.$router.push说明：跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面使用：//字符串this.$router.push('/user')//对象this.$router.push({path:'/user'})//带查询参数，变成 /register?plan=privatethis.$router.push({ path: "register", query: { plan: "private" } });//这里的路由匹配 nam

2021-08-27 15:57:02 261

原创 vue开发中一些问题记录

解决：VUE项目Avoided redundant navigation to current location: “/XXX“.问题在src\router\index.js 中重写Router.prototype.push// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题const originalPush = VueRouter.prototype.push;VueRouter.prototype.push = function push(locat.

2021-08-27 14:01:23 68

原创 vuex store使用总结

原文链接：https://blog.youkuaiyun.com/nicepainkiller/article/details/90409673

2021-08-25 11:53:23 60

原创 VUE插槽slot用法，三种插槽

原文链接：https://blog.youkuaiyun.com/Oralinge/article/details/103896320

2021-08-24 17:16:03 88

原创 js中数组常用的方法总结

1.push() 后增push()方法可以向数组后添加一个新的元素，并返回新数组的长度。末尾添加，返回长度，改变原数组var a = [1,2,3]var b = a.push(4) console.log(a) // [1,2,3,4] console.log(b) // 42.unshift() 前增unshift()可以向数组前添加一个或多个元素，并返回新的长度首部添加，返回长度，改变原数组var a = [2,3,4]var b = a.unshift(0,1)

2021-08-24 15:08:00 637

原创 JS字符串常用方法总结

1、toLowerCase(): 把字符串转为小写，返回新的字符串。var str="Hello World";var str1=str.toLowerCase();console.log(str); //Hello Worldconsole.log(str1); //hello world2、toUpperCase(): 把字符串转为大写，返回新的字符串。var str="hello world";var str1=str.toUpperCase();console.log(str);

2021-08-24 10:58:09 48

原创 Vue的配置安装与项目创建

配置需要下载安装node.js解释器检测是否安装好node.js在终端输入node -v检测是否安装好npm在终端输入npm -v下载源配置由于镜像源在国外，因此npm下载时很可能出现网络慢或者下载错误百度搜索npm淘宝镜像淘宝NPM镜像终端输入淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org以后使用cnpm下载即可npm 脚手架安装cnpm install -g @vu

2021-08-24 10:27:20 118

原创 vue项目中使用axios时的请求拦截和封装

vue项目中使用axios时的请求拦截和封装1、在src下创建目录utils，在utils下新建文件request.js//request.jsimport axios from 'axios';import { Message,Loading } from 'element-ui';const service = axios.create({ baseURL:process.env.BASE_API, timeout:10000})let loadingInstance;

2021-08-23 11:52:23 555

原创 git常用命令及vscode提交代码

git常用命令及vscode提交代码1cd / 回到根目录git --version 查看git版本git config --list 查看git当前有哪些配置文件（配置列表）git clone 克隆项目git config --global user.name “your_username” # 配置用户名git config --global user.email “your_email” # 配置邮箱git config --global credential.helper

2021-08-19 18:19:33 184

原创 vscode 前端常用插件推荐

1.Auto Close Tag (必备)　　自动闭合HTML/XML标签2.Auto Rename Tag(必备)　　自动完成另一侧标签的同步修改3.Beautify (必备) 格式化 html ,js,css (另一款 Prettier) 格式化JavaScript / TypeScript / CSS4.ESLint (推荐)　　js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置5.GitLens...

2021-08-17 16:11:15 171

原创简单使用vuex状态管理的mapState和mapMutations

store.jsimport Vue from ‘vue’import Vuex from ‘vuex’Vue.use(Vuex)export default new Vuex.Store({state: {cityName:“张三”},mutations: {changeStr(state,cName){state.cityName=cName}},actions: {...

2019-11-26 22:15:06 222

原创如何通过地址栏传递参数及获得参数

在通过地址栏进行参数的传递及取值时，首先应该了解一下URL的组成部分及其每部分的取得方法和作用说明：URL即:统一资源定位符 (Uniform Resource Locator, URL)完整的URL由这几个部分构成：scheme://host:port/path?query#fragmentscheme:通信协议常用的通信协议有：http,ftp,maito等host:主机服务器(...

2018-12-13 10:58:20 1177

原创 jquery与dom对象互转

jQuery对象与DOM对象是不一样的通过一个简单的例子，简单区分下jQuery对象与DOM对象：我们要获取页面上这个id为imooc的div元素，然后给这个文本节点增加一段文字：“hello,world”，并且让文字颜色变成红色。通过标准JavaScript处理：var p = document.getElementById(‘imooc’);p.innerHTML = ‘hello...

2018-11-28 13:56:23 103

原创 onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

这行代码这样解释onbeforepaste 意思是在用户执行粘贴动作之前。clipboardData.setData(‘text’, xxx) 是把xxx的内容复制到剪贴板clipboardData.getData(‘text’) 是读出当前剪贴板里的内容，.replace(/[^\d]/g,’’) 是正则替换，把里面除了数字以外的字符全部都去掉，整个语句的功能是，每当用户执行粘贴操作前...

2018-11-26 09:29:24 2990

原创 H5之进度条progress与度量器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--进度值：max:最大值 value：当前进度值--&

2018-11-18 13:40:25 599

原创 H5新增表单事件oninput,oninvalid及setCustomValidity设置提示信息

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="">

2018-11-18 13:32:46 4563

原创 H5之datalist

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt;

2018-11-18 13:14:20 969

原创 H5表单其他新增属性

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--placeholder提示文本，提示占位--&gt

2018-11-18 13:01:48 148

原创 H5新增表单type属性

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="">

2018-11-18 12:35:01 345

原创 H5的语义化标签

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> header{ width: 100%; h200px

2018-11-18 12:12:48 106

原创什么是H5

&amp;lt;!--html:5 +tab--&amp;gt;&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;zh&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&a

2018-11-18 12:08:48 238

原创 H5新特性之sessionStorage

sessinStorage的使用：存储数据到本地。存储的容量5mb左右。这个数据本质是存储在当前页面的内容中 2.他的生命周期为关闭当前页面，会自动清除页面关闭就没了 setItem(key,value):存储数据，以键值对的方式存储 getITem(key):获取数据，通过指定名称的key获取对应的value值 removaItem(key):删除数据，通过指定名称...

2018-11-18 11:56:04 817 1

原创 H5新特性之localStorage

localStorage的使用：存储数据到本地。存储的容量20mb左右。不同浏览器不能共享数据同一个浏览器的不同窗口可以共享数据数据存储在硬盘上，不会随着页面或浏览器的关闭而清除如果想清除，必须手动清除 setItem(key,value):存储数据，以键值对的方式存储 getITem(key)...

2018-11-18 11:49:32 252

空空如也

空空如也