JavaScript
关注
分享
扫一扫
在养一只虎纹�
这个作者很懒，什么都没留下…
展开
-
vue配置启动项目自动打开浏览器
vue配置启动项目自动打开浏览器1.找到项目中的config文件夹内的index.js，里面有一个配置是autoOpenBrowser:false；设置为true即可(或者全局搜索autoOpenBrowser设置为true)2.打开package.json找到启动命令npm run dev 跟npm run serve(这两种命令都可以) 后面增加 --open3.在根目录下新建vue.config.js文件vue.config.js代码如下module.exports = {原创 2022-02-27 12:53:57 · 2471 阅读 · 0 评论 -
vue slot插槽初识
vue中，一般组件定义好之后在使用的时候往两个标签之间插入内容是无效的，如下图，子组件中的hi vue内容并不会出现。但是在定义的时候加入slot标签后，使用时插入的内容就会被添加到slot所处的位置。组件定义 let componentA = { template: `<a> <slot></slot> </a>`原创 2020-12-07 15:48:10 · 133 阅读 · 0 评论 -
vue组件的5中传参方式总结
1. props： 子组件使用父组件中的数据使用关键步骤：父组件中定义好数据–>子组件props中定义父组件传入数据的类型 --> 父组件使用子组件时，子组件v-bind绑定props中定义的数据到父组件的数据名， 此时在子组件中也能正常使用父组件的数据了。父组件// 在子组件中使用父组件定义的数据<template> <div> <div>我是父组件</div> <props-son :dat原创 2020-12-04 17:53:36 · 531 阅读 · 0 评论 -
理解防抖和节流
1.防抖什么是防抖？为什么需要防抖？在一段时间内频繁触发DOM事件监听并引起函数调用很消耗性能，并且在很多时候是不必要的。比如用户注册用户名时，前端获取用户的输入并且判断用户名是否合理，没必要在每次用户输入一个值时都一直提示。此时就需要用到防抖，实现在用户输入完成一段时间后再真正调用函数。简单来说，防抖的原理就是在事件触发n秒（自定义）后再调用回调函数，如果在这n秒内又被触发，则重新计时。以input文本输入框j为例： <div class="title">1. 防抖案例</d原创 2020-12-03 17:35:48 · 150 阅读 · 0 评论 -
vue-cli2 uninstall 出现问题
使用 npm uninstall -g vue-cli删除vue-cli2时出现 update to 0.00Xs , 没有删除成功的提示。运行安装新版vue命令后用vue -V检查还是出现的2.XX, 老的版本。后面查了stackoverflow 发现是因为vue cli和npm 安装在不同的目录下导致的，如果出现类似的报错，可以用which vue 和which npm 命令查看这两者各自的安装地址，如果不太一样就把旧版的vue-cli找出来整个文件夹删掉，然后再vue -V就会自动更新成最新版本的vu原创 2020-11-28 20:59:52 · 256 阅读 · 0 评论 -
CSS 5 种居中方法总结
元素的居中主要分为垂直居中和水平居中，其中不同类型的元素，比如块级元素，行内元素，文本等有不同的居中对齐方式。水平居中块级元素水平居中：元素设置宽高后 margin: 0 autoHTML <div id="mydiv"> 块级元素 </div>CSS #mydiv { width: 300px; height: 100px; background-c原创 2020-10-12 13:13:29 · 274 阅读 · 0 评论 -
echart车流量数据可视化
数据：3000条轨迹（模拟），首尾点经纬度坐标，每条轨迹的权重。权重可简单理解为同首尾点轨迹重复的次数。数据格式为：[起始点经度，起始点纬度，末尾点经度，末尾点纬度，权重]需求：可视化每条航线，并根据不同的权重给予不同的颜色。只需在本地做简单的展示就可以。以下为全部的HTML代码（注意百度地图开发者AK密码需要替换为自己的），读取的OD.JSON数据放在同一文件夹下即可：<!DOCTYPE html><html lang="en"><head> &l原创 2020-06-04 14:29:54 · 2773 阅读 · 0 评论 -
echart+百度地图demo
记录在引入bmap.js时踩过的坑：首先准备3个引入：<script src="echarts.min.js"></script><script src="node_modules/echarts/dist/extension/bmap.js"></script><script src="http://api.map.baidu.com/api?v=2.0&ak=你自己的百度开发AK密码"></script>其中原创 2020-06-02 14:19:27 · 1254 阅读 · 0 评论 -
使用GitHub Pages部署静态页面
尝试一下将前端静态页面部署到GitHub上：如图，在github创建一个新仓库，我的已经创建好了，就叫EchartDemo:复制GitHub中EchartDemo工程地址，git clone + http:XXXX 到你想要的文件夹中，最后再把整个前端工程复制到你从github上克隆下来的EchartDemo文件夹中：3. 接下来就是提交代码了：首先cd EchartDemo进入到...原创 2020-04-29 12:00:59 · 548 阅读 · 0 评论 -
Echart入门（二）
使用rollup自定义构建参考echart官方文档：自定义构建echarts步骤 1首先在在根目录中使用npm安装rollup: 其中commonjs文件是为了支持在浏览器中使用requre保留字。npm install rollup --save-devnpm install rollup-plugin-node-resolve --save-devnpm install rollu...原创 2020-04-13 12:31:15 · 398 阅读 · 0 评论 -
Echart入门（一）
依照echart官网教程学习实现简单的饼图使用npm安装后，在echart practice文件夹下运行以下命令行失败：node node_modules/echarts/build/build.js --help报错显示有很多依赖的包没有安装，因此手动npm再次安装需要的包。...原创 2020-04-09 11:20:57 · 473 阅读 · 0 评论 -
JS高级程序设计-第十二章：DOM2和DOM3
DOM1级主要定义的是HTML和XML文档的底层结构。2和3在此基础上引入了更多的交互能力，支持更高级的XML特性。样式HTML中有三种定义样式的方法：通过link元素包含外部样式文件，style元素定义嵌入式，style特性定义特定元素的样式。var div = document.getElementById('mydiv'); //通过div的style属性设置背景颜色...原创 2020-03-11 13:12:47 · 142 阅读 · 0 评论 -
JS高级程序设计-第十一章：DOM扩展
DOM主要有两个扩展，一个是Selector API, 一个是HTML5。选择符API1.querySelector()方法 返回与该模式匹配的第一个元素 //querySelector 取ID名，元素名，类名等 var body = document.querySelector('body'); var div = document.query...原创 2020-03-08 19:02:58 · 129 阅读 · 0 评论 -
JS高级程序设计-第十章：DOM
DOM是针对HTML，XML文档的一个应用程序编程接口(API)。它描绘了一个层次化的节点树，方便开发人员添加，修改和删除页面中的一部分。页面中的每一个标记都可以通过DOM中的一个节点表示，一共有12中节点类型，HTML元素通过元素节点表示，特性通过特性节点表示，文档通过文档类型节点表示，注释通过注释节点表示。每个节点都有一个nodeType属性，来表明节点的类型。并不是所有节点类型都受到...原创 2020-03-08 13:18:43 · 181 阅读 · 0 评论 -
JS高级程序设计-第八章：BOM
window对象使用var 语句 和 直接定义在window对象上的变量的区别，前者不可使用delete方法删除，而后者可以 var age = 23; window.color = 'pink'; delete age; //没有删除成功 delete window.color; console.log(age)...原创 2020-03-06 10:27:53 · 226 阅读 · 0 评论 -
JS高级程序设计-第七章：函数表达式
函数声明和函数表达式的区别使用函数声明的方法定义函数时，会有变量提升，但是函数表达式则不会；使用函数表达式来实现递归：function factorial(num) { if(num <= 1) { return 1 } else { // arguments.callee ...原创 2020-03-04 14:58:43 · 267 阅读 · 1 评论 -
JS高级程序设计-第六章：面向对象的程序设计
对象的数据属性，可以使用Object.defineProperty 方法修改和设置。Configurable， Enumerable， Writable， Value 共四个特征描述数据属性。 //数据属性的四个特征 var person = { name: 'Nicholas' }; //设置为只读属性，不可...原创 2020-03-03 17:00:07 · 109 阅读 · 0 评论 -
JS高级程序设计-第五章：引用类型
转换方法：所有对象都具有toLocalString, toString, valueOf 方法。调用toString可返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组alert(colors.toString()); // red,blue,greenalert...原创 2020-03-01 22:26:20 · 122 阅读 · 0 评论 -
JS高级程序设计-第四章：变量，作用域和内存问题
数据类型：基本数据类型：简单的数据段，为第三章讨论的五种基本数据类型：string, number, undefined, null, bolean. 可以操作保存在变量中的实际的值。引用数据类型：保存在内存中的对象，JS不允许直接访问内存中的位置，因此是在操作对象的引用而不是实际对象。引用数据类型是按引用访问的。引用类型可以动态的为其添加属性。函数的参数按值传递：传递参数为基本数据类型...原创 2020-02-29 16:44:28 · 108 阅读 · 0 评论 -
JS高级程序设计-第三章 基本概念
第三章：基本概念JS语句用分号 " ; " 结尾；在控制语句中使用代码块，哪怕只有一条语句。函数中用var定义的变量为局部变量，函数退出后就会被销毁，不能在函数外使用。省略var操作符后就会创建全局变量，可以在函数外部被访问到。五种简单数据类型：字符串，数字，布尔值，undefined, null。一种复杂数据类型：Object， 本质是无序的名值对组成。使用typeof操作符识别...原创 2020-02-28 14:41:33 · 172 阅读 · 0 评论 -
JS高级程序设计-第一，二章
疫情原因在家时间比较长，计划两个月把JS小红书刷一遍，2020年2月26-2020年4月26。环境配置为win10系统+VScode。第一章 JS 简介JS的实现主要包括三个部分：核心语法（ECMAScript） ：提供核心语言功能。文档对象模型（DOM）：提供访问和操作网页内容的方法和接口。浏览器对象模型（BOM）：提供与浏览器交互的方法和接口第二章 在HTML中使用JS使用...原创 2020-02-26 18:14:10 · 144 阅读 · 0 评论 -
常用git语法
刚开始接触使用git管理代码的时候对版本版本控制和协同开发都没什么概念有些命令行走过一次，但是没有理解整个流程，还是会经常出错。这里记录一下已经熟悉了的：1.查看代码状态: git status2.添加代码到缓存区：git add . (注意空格之后有一个"." )3.提交代码到本地仓库：git commit -m “feat: XXX” (填写对代码所做的更改，比如添加新功能等)4.将代...原创 2020-02-17 17:59:16 · 337 阅读 · 1 评论 -
canvas学习(一)动态扩散圆
之前看到一个用纯canvas制作渐变色扩散圆的博客，感觉效果挺好的，应该能用在地图上用作效果展示，就拿过来重新写了一下。主要将原帖中构造函数的方法改为了类，以及去掉了随机生成圆心位置的数组。原帖为：https://blog.csdn.net/www93111/article/details/72940843下面是我自己的代码：<!DOCTYPE html><html la...原创 2020-02-05 17:11:35 · 1172 阅读 · 0 评论 -
谷歌浏览器cors policy跨域问题
问题最近想在自己的电脑上写一些pixi js 的 demo, 编辑器是VScode，配置open in browser 插件，使用默认谷歌浏览器打开html之后发现因为cros policy 的问题，文件不能打开本地的图片文件。报错如下：解决方案按照网上大家的建议，我在桌面上添加了谷歌浏览器的图标，修改属性：修改完毕之后VScode默认的打开方式还是不能访问本地图片，但是将链接复制到从桌...原创 2020-02-05 11:37:03 · 1990 阅读 · 0 评论 -
廖雪峰JavaScript---filter用法
廖雪峰JavaScript—filter用法filter可以把array中的某些元素过滤掉，它可以把传入的函数依次作用于每个元素。然后根据返回值是true则保留，false 则删除元素。实例1：去除数组中的偶数var arr=[1,2,4,5,6,9,15];var r=arr.filter(function(x) { return x%2！==0 }) // 2为...原创 2019-09-12 09:01:36 · 325 阅读 · 0 评论 -
廖雪峰JavaScript课程--map/reduce用法
廖雪峰JavaScript课程–map/reducemap使用map把某一个函数作用在数组上。reduceArray的reduce()把一个函数作用在这个array的[x1,x2,x3…]上，这个函数必须接受两个参数，reduce()把结果继续和序列的下一个元素做累积计算，效果为：练习1： 利用reduce()求积：'use strict;'function product(ar...原创 2019-09-11 15:41:27 · 259 阅读 · 0 评论