- 博客(37)
- 收藏
- 关注
RSS订阅原创 typeScript 基础类型
布尔值最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。let isDone: boolean = false;数字和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。let decLiteral: number = 6;let hex
2021-11-30 14:45:42
130
4
原创 js常用正则
/* * @Author: * @Date: 2021-03-22 10:32:21 * @LastEditTime: 2021-11-19 14:00:28 * @LastEditors: * @Description: 公共校验方法 *//* 是否手机号码*/export function validatePhone(rule, value, callback) { const reg = /^(1[3-9]\d{9})$|^([5|6|8|9]\d{7})$|^([6]\d{
2021-11-19 14:07:05
368
原创 JavaScript Location对象
location对象用于获取或设置窗体的URL，并且可以用于解析URL。语法location.[属性|方法]
2021-11-09 14:09:35
717
原创 树形结构下拉组件vue-treeselect
vue-treeselect是一个多选组件，具有对Vue.js的嵌套选项支持。具有嵌套选项支持的单个和多个选择模糊匹配异步搜索延迟加载（仅在需要时加载深层选项的数据）键盘支持（使用Arrow Up＆Arrow Down键导航，使用键选择选项Enter等）丰富的选项和高度可定制支持各种浏览器https://www.vue-treeselect.cn/一、基本使用流程1、首先npm’安装依赖npm install @riophae/vue-treeselect --save2、然后在需
2021-11-08 09:32:10
510
原创 js获取当前时间和N天前时间
获取当前时间 // 获取当前时间 let date = new Date() let Y = date.getFullYear() let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1) let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate() let hours = date
2021-06-22 15:16:25
218
原创 Array
Array在 ES6 中新增了很多实用的原生 API，方便开发者对 Array 的操控性更强，如 for…of、from、of、fill、find、findIndex等。ES5 中数组遍历方式let arr = [1, 2, 3, 2, 4]for循环for (let i = 0; i < arr.length; i++) { console.log(arr[i])}后来语法有所升级，到 ES5 遍历数组的 API 多了起来，其中有 forEach、every、filter等
2021-04-02 17:45:31
100
原创 解析赋值
解构赋值 Desctructuring在 ES6 中新增了变量赋值的方式：解构赋值。允许按照一定模式，从数组和对象中提取值，对变量进行赋值。如果对这个概念不了解，我们可以快速展示一个小示例一睹风采：let arr = [1, 2, 3]let a = arr[0]let b = arr[1]let c = arr[2]想从数组中找出有意义的项要单独赋值给变量，在 ES6 中就可以这样写了：let [a, b, c] = [1, 2, 3]TIP解构赋值重点是在赋值，赋值的元素是要拷贝
2021-04-02 17:24:31
300
原创 let,const详解
LetES6 新增了let命令，用来声明变量。1. let 声明的全局变量不是全局对象window的属性这就意味着，你不可以通过 window. 变量名 的方式访问这些变量，而 var 声明的全局变量是 window 的属性，是可以通过 window. 变量名 的方式访问的。var a = 5console.log(window.a) // 5let a = 5console.log(window.a) // undefined2. 用let定义变量不允许重复声明这个很容易理解，使用
2021-04-02 09:13:53
588
1
原创 样式
1.动态样式:class <div :class="[a1,a2]">动态数组的语法</div> <div :class="{'test-1':a3}">动态对象语法</div> <div :class="obj">动态对象语法</div>data(){ return { a1: 'texr-1', a2: 'texr-2', a3: false, obj:{
2021-03-25 22:37:46
187
原创 pdfjs使用
1.下载地址https://mozilla.github.io/pdf.js/<div style="width: 100vw; height: 100vh"> <iframe :src="'/pdf/web/viewer.html?file=' + pdfUrl" style="width: 100vw; height: 100vh;overflow-x: hidden;" /> </div>
2021-02-25 14:55:28
133
原创 Vue.js中过滤器（filter）的使用
1.src目录下创建filter文件filter文件夹封装一个金额三位一个逗号分隔const Amount = num =>{ return num.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')}export{Amount}2.main.js文件全局引入//过滤器import * as filters from './filter'//过滤器注册Object.keys(filters).forEach(key=
2021-02-24 11:41:40
202
原创 vue this.$route.params和this.$route.query的区别
1.this.$route.query的使用1、传参数：this.$router.push({ path: '/app', query:{ id:id, }}）2、获取参数：this.$route.query.id3、在url中形式（url中带参数）http://localhost:8080/#/app?id=14、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在2.this.$rou
2021-01-04 16:15:32
169
原创 sessionStorage 属性
保存数据语法：sessionStorage.setItem(“key”, “value”);读取数据语法：var lastname = sessionStorage.getItem(“key”);删除指定键的数据语法：sessionStorage.removeItem(“key”);删除所有数据：sessionStorage.clear();...
2021-01-04 15:13:10
107
原创 绘制飞线
解析 <path> 标签应该算是 SVG 中最为强大的标签了，各种图形都可以用他绘制。本文使用 path 标签的贝塞尔曲线 Q 指令绘制弧线。用法<path d="M30 90 Q115 139 200 90"></path> //M30 90 起点 Q115 139弧度 200 90终点path 标签常用指令：M = movetoL = linetoH = horizontal linetoV = vertical linetoC =
2020-12-31 18:21:58
269
原创 js退出登录，如何一次性清除所有session
localStorage、sessionStorage操作localStorage PC浏览器（永久保存）sessionStorage PC浏览器（关闭窗口就删除数据）操作保存数据 sessionStorage[key] = value保存数据 sessionStorage.setItem(key,value);获取数据 var value = sessionStorage[key];获取数据 var value = sessionStorage.getItem(key);删除数据 sess
2020-12-31 17:53:07
1159
原创 window.location对象详解
前端开发人员对 window.location对象应该不陌生，通过它不但可以获取当前页面的地址信息，还可以修改某些属性，实现页面跳转和刷新等。我们以一个常见的 URL 为例，看看window.location包含哪些属性和方法。window.location.href → 'https://www.jianshu.com/search?q=JS#comments' .origin → 'https://www.jianshu.com'
2020-12-30 17:53:20
166
原创 js获取当前位置的经纬度
JS获取当前位置经纬度以及地址信息（借用高德地图API）1.需要先引用高德api<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=0536558dc54a7700d4c1e0ad85747d32"></script> // 计算两地距离 space(lat1, lng1, lat2, lng2) { var radLat1 = lat1
2020-12-28 17:44:53
3260
1
原创 this.$set的正确使用
1.this.#set(obj, key, value)我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性当我们点击按钮，为student添加一个age属性，看看视图层是否能够更新在这里我们发现虽然这个对象身上已经有了该属性，但是视图层并没有更新该数据，是什么造成的呢？由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据
2020-11-26 17:20:01
306
原创 nginx反向代理配置去除前缀
使用nginx做反向代理的时候，可以简单的直接把请求原封不动的转发给下一个服务。设置proxy_pass请求只会替换域名，如果要根据不同的url后缀来访问不同的服务，则需要通过如下方法方法一：加"/"server { listen 8000; server_name abc.com; access_log "pipe:rollback /data/log/nginx/access.log interval=1d baknum=7...
2020-11-25 17:44:13
84
原创 vue仿小米商城
Github源码地址：https://github.com/XiZi-6/MaMall演示地址：http://109.206.245.39/#/index1.商城内容首页商城首页登录商城产品站购物车订单确认订单支付(微信/支付宝)订单列表组件系统导航组件底部组件服务条组件产品参数组件订单头部组件加载组件弹框组件无数据组件支付组件2.技术栈 vue2.6 VueRouter3.1 vuex3.1 Axios ElementUI2.9 Scss Vue-Trans
2020-10-30 17:19:59
1170
原创 Vue 给UI库添加按需加载时启动项目时 babel-preset-es2015 报错
项目使用vue cli3脚手架工具构建按照element 官方文档中所示。npm install babel-plugin-component -D然后添加.babelrc文件{“presets”: [[“es2015”, { “modules”: false }]],“plugins”: [[“component”,{“libraryName”: “element-ui”,“styleLibraryName”: “theme-chalk”}]]}报如下错误：Error:
2020-10-24 18:01:20
308
原创 什么是PHP，PHP能干什么
一、什么是PHPPHP，全称 Hypertext Preprocessor ，中文翻译“超文本预处理器”。在PHP的官网是这样介绍PHP的：PHP is a popular general-purpose scripting language that is especially suited to web development.Fast, flexible and pragmatic,...
2020-03-17 19:31:51
198
原创 JavaScript API基础
JavaScript 中的 APIJavaScript 有许多可用的 API，通常被定义为浏览器 API或第三方 API。我们来分别学习它们。浏览器 API浏览器 API 内置于浏览器中 —— 包含来自浏览器的数据。通过这些数据，我们可以做很多有用的事情，从简单地操作 window 或 element 到使用 WebGL 之类的 API 生成复杂的效果。一些常见的浏览器 API 是：用于...
2020-01-04 15:48:17
128
原创 JavaScript查找HTML元素
通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：通过id找到HTML元素通过标签名找到HTML元素通过类名找到HTML元素html标签和元素的区别html元素：元素是标签中包含了文本、内容…的一个整体。比如：< p >我是p标签< /p>httml标签：标签不必多说吧，比如< h1...
2020-01-04 15:38:02
238
原创 Javascript DOM
1. 什么是DOMDOM 全称是 Document Object Model，也就是文档对象模型。DOM 就是针对 HTML 和 XML 提供的一个API。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。我们可以把一个HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 这些标签都看做一个对象，每个对象都叫做一个节点（n...
2019-12-28 15:29:04
77
原创 JavaScript作用域链
作用域作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。全局作用域 AO1函数外面定义的变量拥有全局作用域2未定义直接赋值的变量自动声明为拥有全局作用域3.window对象的属性拥有全局作用局部作用域 GO局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所以在一些地方会把这种作用域成为函数作用域。作用域链当代码在一个环境中执行...
2019-12-24 18:52:39
51
原创 javascript RegExp对象
javascript RegExp对象RegExp 对象用于规定在文本中检索的内容,RegExp是正则表达式的缩写，当你索引某个文本时，可以使用一种模式来描述要检索的内容，RegExp就是这中模式，简单的模式可以是一个单独的字符，更复杂的模式包括了更多的字符，并可用于解析，格式检查，替换等等，你可以规定字符串中的检索位置，以及要检索的字符类型，等等.定义RegExp对象用于存储检索模...
2019-12-22 15:33:12
109
原创 JS正则表达式
JS正则表达式1.两种模糊匹配1.1 横向模糊匹配横向模糊指的是，一个正则可匹配的字符串的长度不是固定的，可以是多种情况的。其实现的方式是使用量词。譬如{m,n}，表示连续出现最少m次，最多n次。比如/ab{2,5}c/表示匹配这样一个字符串：第一个字符是“a”，接下来是2到5个字符“b”，最后是字符“c”。测试如下：var regex = /ab{2,5}c/g;var strin...
2019-12-21 10:56:54
56
原创 APi数组使用
什么是APIAPI是应用程序编程接口的意思，开放API就是开放应用程序编程接口。如果说程序开放API就是说开放接口，以让别人的程序能够调用你的程序数据。就像你的电脑、手机等有一些USB接口，也可以说是开放了接口，有了这些接口别人就可以用他来做插U盘，充电等之类的功能。数组API修改splice(开始下标,删除的个数, 插入的值…) 会修改原数组var a=[1,2,3,4,5,6,7,...
2019-12-12 18:45:16
107
原创 JavaScript数组
JavaScript数组1.什么是数组内存中连续存储多个数据的一块存储空间数组对象的作用是：使用单独的变量名来存储一系列的值。2.创建数组方式var arr = []; 创建一个空数组var arr = []; arr[0] = 'one';arr[1] = 'two';var arr = ['one','two'];//实例后赋值。var arr = new A...
2019-12-11 20:20:13
69
原创 JavaScript 循环
while循环while语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。语法：while (条件) { 要执行的代码块}例：while (i < 10) { text += "数字是 " + i; i++;}while循环...
2019-12-08 15:54:43
75
原创 CSS Sprites精灵图
什么是CSS SpritesCSS Sprites通常被称为css精灵图， 在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。 就是将导航的背景图，按钮的背景图等有规则的合并成一张背景图，即多张图合 并为一张整图， 然后再利用background-position进行背景图定位的一种技术为什么需要css spritesCSS Sprites 并不是一门新的技术了，目前他发展...
2019-12-08 15:01:38
110
原创 JavaScript基础知识整理
1 什么是JavaScriptJavaScript一种直译式脚本语言，一种基于对象和事件驱动并具有安全性的客户端脚本语言；也是一种广泛应用客户端web开发的脚本语言。简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。2 JavaScript的基本结构<script type="text/javascript"> JS语句;</scr...
2019-11-30 14:50:04
130
原创 渐变
1.什么是渐变渐变指的是多种颜色平缓变化的一种显示效果。2渐变分别分为两种1.线性渐变2.径向渐变线性渐变：以直线的方向来填充颜色属性：background-image取值：linear-gradient(angle,color-point1,color-point2…)angle:表示渐变的填充方向或角度取值：to top 从下向上的填充—— 0deg 等同于to topt...
2019-11-24 22:04:56
380
原创 position(定位)
position:static 默认值，relative相对定位， absolute 绝对定位static 默认值static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是 不起作用的的。relative 相对定位相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还...
2019-11-23 22:08:31
134
原创 后代选择器和子代选择器的优先级
1，子代选择器：>号.father>div{ border: 1px solid red; }2，后代选择器：空格.father div{ border: 1px solid pink;}两者优先级比较：.father div{ border: 1px solid p...
2019-11-11 22:26:28
487
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人