- 博客(68)
- 收藏
- 关注
RSS订阅原创 vuex中的state getters mutations actions modules
Vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex是单向数据流；安装Vuex命令行：vue add vuex安装完成以后在src文件夹中多了一个store文件夹，这个index.js文件是vuex的主文件index.js中要有Vue.use(Vuex) //在vue构造函数中去注入vuex，在vue实例对象中有$store一般下载后就有Vuex的stor
2020-08-09 14:42:36
389
原创 vue-router导航守卫
vue-router导航守卫导航守卫导航守卫分类全局守卫全局前置守卫 beforeEach全局解析守卫 beforeResolve全局后置钩子 afterEach路由独享守卫 beforeEnter组件守卫beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave导航解析流程导航守卫导航守卫，也可以叫路由守卫，“导航”表示路由正在发生改变。正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的
2020-08-08 12:02:42
688
原创 Vue组件的基本介绍
组件 (Component) 是 Vue.js 最强大的功能之一，使用组件化方式开发，可以封装可重用的代码，减少重复劳动组件分为全局组件，局部组件组件的使用<body> 组件的使用和标签的使用是一样的,都遵循html的语法规范 <demo-component></demo-component> </test-component></test-component></body>全局组件 Vue.compone
2020-08-02 16:53:02
415
原创 vue中的方法、计算属性和侦听器的区别
计算属性 和方法的区别<div id="app"> {{ name }} {{ age }} <br> {{ getPreson1() }} <br> {{ getPreson2 }}</div>var vm = new Vue({ el:"#app", data: { // 前提：后台给的 name : "wh", age : 21,
2020-08-02 15:05:06
1212
原创 Vue的生命周期
生命周期：每个 Vue 实例在被创建时都要经过一系列的初始化过程。官网的生命周期图示：同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 var vm = new Vue({ el:"#app", data:{ name : "wh", age : 21, msg : "哈哈哈哈", }, methods:{ abc(){} },
2020-08-02 14:02:46
169
原创 Redis在node.js中的使用
Redisredis的简介redis的特点node中的使用为什么使用redisredis的简介Redis是一个开源的使用ANSI C语言编写、遵守BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。它通常被称为数据结构服务器，因为值（value）可以是 字符串(String), 哈希(Map), 列表(list), 集合(sets) 和 有序集合(sorted sets)等类型。redis在对数据的读写上速度非常快，被许多公司所使用redis的特点
2020-08-02 12:40:21
483
原创 学习MongoDB的心得
MongoDB工具以及准备使用数据库因为项目的需要，最近学习了一下MongoDB，分享一下我的学习心得。MongoDB是NoSQL，也就是非关系型的数据库，是面向海量数据访问的文档类型数据库工具以及准备mongodb 安装包robomongo 视图工具（图表工具）postman 测试接口工具配置环境变量在mongodb安装文件里面找到bin文件，获取路径此电脑 鼠标右键属性 高级系统设置 环境变量 用户环境变量path 添加bin文件路径使用数据库创建一个新的文件夹，这个文件夹
2020-07-19 17:47:16
1344
原创 js的防抖和节流以及区别
js的防抖和节流为什么使用防抖和节流使用场景防抖节流区别为什么使用防抖和节流在项目开发中，我们常常会去监听滚动事件或者用户输入框验证事件，如果事件处理没有频率限制，当用户不断触发事件时，就会加重浏览器的负担，影响用户的体验，造成不必要的损失，所以，我们可以采取防抖（debounce）和节流（throttle）来处理，减少调用事件的频率，达到较好的用户体验。使用场景js的防抖和节流主要用在监听输入框、监听页面滚动，点击等一些高频触发事件，让这些事件既能保持高频触发，但又不浪费性能。防抖函数防抖 是
2020-07-19 15:59:30
596
原创 前端性能优化
前端性能优化请减少HTTP请求优化资源加载使用JSON格式来进行数据交换减少重绘与回流前端性能优化是每一名前端必须会的技能，它直接影响着我们的用户，同时也影响着产品本身，前端优化应该按照实际情况来，不要照搬别人的方法，不出bug，这是最基本的要求。请减少HTTP请求http请求过多会消耗大量时间，会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担，会让用户感到页面卡顿，用户体验不佳。合并图片，使用css sprites，降低图片数量，可以减少网站的HTTP请求数量，但是当整合图片
2020-07-12 21:29:58
159
原创 Node.js的fs模块以及http模块
Node.js的fs模块以及http模块介绍fs文件系统模块http服务器模块介绍Node.js中有很多内置模块，今天我要说的就是fs文件系统模块以及http服务器模块,是node的核心模块之一。安装好node.js后，引入模块，除了内置模块，还可以自定义模块，使用module.exports 和 exportsfs文件系统模块fs模块是用来操作文件的一、引入fs模块const fs = require("fs");二、fs的API基本上所有方法都有异步和同步,基本上同步的方法 都是在异
2020-07-12 16:49:58
287
原创 ES6 中的Reflect和Proxy简单介绍
ES6 中的Reflect和ProxyReflect 反射Proxy 代理Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。Reflect 反射Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式，函数式编程。它的方法与 Proxy 是对应的。Proxy 代理Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些
2020-07-05 19:09:09
368
原创 ES6 Array新增API
ES6 Array新增API静态方法Array.of(arg)Array.from(arg)实例方法find(callback)findIndex(callback)fill(data)copyWithin(target,[start],[end])includes(data)-静态方法Array.of(arg)创建一个具有可变数量参数的新数组 ,用于将一组值，转换为数组const arr = Array.of(5);console.log(arr) //[5]const arr1 = Arr
2020-07-04 11:33:07
253
原创 ES6 Symbol（符号描述）
ES6 Symbol(符号描述）Symbol是什么Symbol的特点Symbol的基本用法Symbol.for()Symbol.keyFor()Symbol的应用场景Symbol是什么 ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。最大的用法是用来定义对象的唯一属性名。 Symbol 函数栈不能用 new 命令，因为 Symbol 是原始数据类型，不是对象 可以接受一个字符串作为参数，为新创建的 Symbol 提供描述，用来显示在控制台或者作为字符串的时候使用，便于区分。Sym
2020-06-27 19:18:33
254
原创 ES6新增特性Promise
PromisePromise是什么Promise的特点Promise的缺点Promise的基本用法Promise的好处Promise是什么Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。Promise的特点Promise对象的状态不受外界影响，Promise对象代表一个异步操作,有三种状态:pending(进行中),fulfilled(已成功),rejected(已失败).只有异步操作的结
2020-06-27 15:33:00
605
原创 jQuery中的Ajax
在jQuery中对Ajax进行了封装，让我们使用起来更加方便。在jQuery使用 $.ajax() $.ajax({ url:'01.php', type : 'POST', dataType:'jsonp', data : { username : 'lilei', password : '123456' }, success:function(response){ }, error:function(
2020-06-21 21:51:03
173
原创 保护对象的属性
在js中对象的属性，在没有做任何处理的情况下，是随时可以修改属性值 、添加新属性，删除属性的，非常不安全，对于一些重要的数据，我们不希望它不能进行删除，修改等操作。所以这时候，就诞生了相关的方法。对象属性的四大特征可以通过Object.getOwnPropertyDescriptor(obj, prop)来查看。obj 需要查找的目标对象prop 目标对象内属性名称如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined。
2020-06-14 22:40:55
282
原创 Ajax请求的步骤
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。Ajax的使用一、创建xhr对象var xhr = new XMLHttpRequest();//所有现代浏览器均支持如果是IE5 和 IE6 使用 ActiveXObject，使用兼容性写法 var xhr = null; if(windo
2020-06-14 21:59:21
553
原创 PHP数组
php数组的创建使用array()建立数组<?php $list = array(1,2,3,4,true);?>使用[ ] 建立数组<?php $list =[1,2,3,4,'a',true];?>输出数组 var_dump($list1); echo '<br>'; var_dump($list2);数组的读取 echo $list1[1]; //1数组追加一个元素 $list1[ count($list) ] = '
2020-06-07 21:43:28
641
原创 php的基本介绍
PHP一种服务器端的 HTML 脚本/编程语言,是一种简单的、面向对象的、解释型的、健壮的、安全的、性能非常之高的、独立于架构的、可移植的、动态的脚本语言。PHP含义早期PHP：Personal HomePage，Rasmus Lerdorf后期PHP：PHP：Hypertext Preprocessor，超文本预处理器运行在服务端，支持大部分的服务器，如Apache,IIS。可以使用XAMPP，自带服务器。php创建创建一个.php的文件，在页面上写<?php //代码写在里面
2020-06-07 20:23:37
289
原创 计算机网络的一些基本知识
互联网起源于1969美国的阿帕网,首先用于军事连接。通常internet泛指互联网，而Internet则特指因特网。互联网、因特网、万维网三者的关系是：互联网包含因特网，因特网包含万维网，凡是能彼此通信的设备组成的网络就叫互联网。网络核心协议 TCP/IP协议因特网使用TCP/IP协议让不同的设备可以彼此通信。但使用TCP/IP协议的网络并不一定是因特网，一个局域网也可以使用TCP/IP协议。因特网是基于TCP/IP协议实现的，TCP/IP协议由很多协议组成，不同类型的协议又被放在不同的层，其
2020-05-31 14:36:32
267
原创 全屏滚动插件fullPage.js
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。全屏网站用在很多地方，尤其是一些国外官网，这种网站非常简约，显得格外的高端大气上档次。fullPage.js的主要功能有：支持鼠标滚动、支持前进后退和键盘控制、多个回调函数、支持手机、平板触摸事件、支持 CSS3 动画、支持窗口缩放、窗口缩放时自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。下载fullPage.js 以及jQuery.js文件 https://www.do
2020-05-30 22:18:15
245
原创 jQuery中的 $.extend() 和 $.fn.extend()
$.extend() 和 $.fn.extend() 这两个方法都是给jQuery进行拓展，开发jQuery插件时经常使用在jQuery源码中，你会看到关于这两个方法的代码的第一行是这样的jQuery.extend = jQuery.fn.extend = function(){}可以看出两个方法共用的是同一个函数体，所有的操作都是一样的，只不过两个方法使用的对象不同。$.extend是为jQuery类添加添加类方法，可以理解为添加静态方法（工具方法） $.extend({ min: fu
2020-05-24 06:39:59
391
原创 jQuery中关于尺寸的API
获取并设置各种 CSS 属性所代表的尺寸.width()为匹配的元素集合中获取第一个元素的当前计算宽度值或给每个匹配的元素设置宽度。.height()获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。.width() 和 .height()总是返回内容(content)宽度/高度,不管CSS box-sizing属性值<style> .box{ width: 100px; height: 100px; padding: 10px
2020-05-23 22:07:40
139
原创 jQuery中添加元素的方法
insertBefore()方法 和 before() 方法 都是在被选元素之前插入insertBefore没有使用insertBefore之前使用之后可以看出 insertBefore 是剪切操作before与insertBefore不同的是，before前面是在哪个元素前面插入，后面是插入的内容元素效果：与insertBefore一样，都是剪切操作。可以直接使用字符，可以是html代码insertAfter() 和 after() 都是在被选元素后面插入insert
2020-05-17 08:50:42
1475
原创 JQuery的取值 赋值相关的方法
html()方法设置或返回被选元素的内容类似于 innerHTML只能读写到双标签取值：在li中会有一个特殊情况，会取第一个li的值。赋值：效果：text()方法设置或返回被选元素的文本内容基于innerText与html的使用差不多，但是赋值时写入标签名，也不会识别为标签，只能是字符串文本。html 和 text 都可以使用函数。size()方法返回被 jQuery 选择器匹配的元素的数量。从下面可以看出与length差不多addClass() 方法向被选元素添加一
2020-05-16 22:58:51
483
原创 LESS
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。less使用方法：在客户端使用less.js 编译执行这个工作教给浏览器在服务端使用less 需要安装nodejs在vscode使用：安装插件：easy less打开 settings.json 配置文件，设置 "less.compile": { "compress": false, // true
2020-05-10 20:23:18
274
原创 Bootstrap 4
Bootstrap 4 的改变:从Bootstrap 3的less 变成 Sass 编写，有5种栅格类，使用rem和em为单位（除部分margin和padding使用px），使用弹性盒模型（flexbox）的布局方式，放弃对IE8及低版本IE的支持。Bootstrap4的5种栅格：超小屏幕（col-）(<576px)小屏幕（col-sm-）(≥576px)中等屏幕（col-md-）(≥768px)大屏幕（col-lg-） (≥992px)超大屏幕（col-xl-）（≥1200px）B
2020-05-10 17:33:29
504
原创 jQuery简介
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。在写之前，在HTML页面引入jQuery库入口函数 //第一种写法 $(document).ready(function(){ }) //简洁写法 $(funct...
2020-05-05 20:26:08
193
原创 用css写bootstrap栅格系统
Grid 栅格布局Grid(网格) 模块为 display 属性提供了一个新的值：grid。当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个 网格容器(grid container)，它的所有直接子元素就成了 网格项(grid items)。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏...
2020-05-03 19:30:05
263
原创 Bootstrap 表单
Bootstrap 表单Bootstrap 表单分为三种表单布局：垂直表单（默认）内联表单为 form 元素添加 .form-inline 类水平表单为 form 元素添加 .form-horizontal 类在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%;所有设置了 .form-control 类的 input、textarea 和...
2020-05-03 17:10:40
614
原创 Bootstrap栅格系统
栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。在 .container （固定宽度） 或 .container-fluid （100% 宽度） 中 添加 行（row）,行（row）中添加列（column），内容放在列（co...
2020-05-03 15:49:51
322
原创 CSS3关键帧动画(animation keyframes)
关键帧动画animation通过定义一段动画中的关键点、关键状态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制分为两步：一、定义关键帧动画@keyframes 动画名称{ 时间点 {元素状态}}时间点可以用from (表示起始点) 和 to（表示终点）表示也可以用百分比表示 0%~100%。二、绑定关键帧动画在需要添加动画的元素的css中添...
2020-04-26 22:57:47
3830
原创 CSS3过渡 transition
过渡transition是个复合属性，包括了transition-property、transition-duration、transition-timing-function、transition-delay这四个属性，配合这四个属性完成一个完整的过渡动画效果。其中transition-duration是是必需值且不能为0只能规定开始和结束的状态transition-property: 过渡...
2020-04-26 21:39:45
456
原创 弹性盒子flex轴的说明
弹性盒子flex中，有两种轴 一种是主轴，一种是交叉轴（侧轴）。flex默认轴布局是这样的：flex-direction 是决定主轴的方向row 从左到右水平排列元素（默认值）如上图row-reverse 从右向左排列元素column 从上到下垂直排列元素column-reverse 从下到上垂直排列元素justify-content 定义项目在主轴的对齐方向.flex...
2020-04-19 21:07:50
1051
原创 CSS3一些伪类选择器
伪类选择器 ：为元素的不同状态或不确定存在的元素设置样式规则CSS3中新增了很多伪类选择器，使我们对元素的样式控制变得更加方便一、:target用于控制具有锚点目标元素的样式此时id 为box 的盒子color为红色二、:root根元素选择伪类，即html,两者效果一样三 、:empty选择没有子元素的元素，也不能包括文本元素，空格换行等四、:first-child 和 las...
2020-04-19 14:54:20
339
原创 Canvas的介绍，并且用Canvas写一个小球粒子效果
HTML5 canvas 标签用于绘制图像（通过脚本，通常是 JavaScript）在这里插入代码片
2020-04-12 23:29:53
324
原创 百度地图Javascript API的使用
在使用之前申请成为百度开发者，获取服务密钥（ak）ak申请时，创建项目时应用类型选择浏览器端，详细步骤官网有写官网：http://lbsyun.baidu.com一、在HTML页面引用百度地图API文件 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl...
2020-04-12 22:24:37
858
原创 ES6 箭头函数
箭头函数ES6标准新增了一种新的函数：Arrow Function（箭头函数）语法： var fn1 = (a, b) => { return a + b } (a, b) => { return a + b }简写 //没有参数 var fn1 = function() {} var fn1 = () => {} // 单个...
2020-03-28 12:32:30
107
原创 ES6 解构赋值以及…运算符
解构赋值ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）数组解构赋值 let [a, b, c] = [1, 2, 3];// a = 1 b = 2 c = 3可嵌套 let [a, [[b], c]] = [1, [[2], 3]];// a = 1 b = 2 c = 3可忽略 let [a, , b] =...
2020-03-28 11:55:08
277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人