- 博客(61)
- 收藏
- 关注
RSS订阅原创 vuex使用案例（下）
5. state访问状态对象使用computed计算<template> <div class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="$store.commit('jia')">+</button> <button @cli
2020-08-08 15:18:00
173
原创 Vuex的使用案例（上）
什么是vuex状态管理？就是我们vue里的核心数据库安装$ npm install vuex --save在main.js 主入口js里面引用store.jsimport Vue from 'vue'import App from './App'import router from './router' import store from './vuex/store' //引用store.jsVue.config.productionTip = false //阻止在启动时
2020-08-08 15:12:58
208
原创 VUe的生命周期分析
生命周期：一个组件从创建到销毁的这个过程叫做生命周期 生命周期钩子函数1、组件从创建到销毁的过程1、创建前 创建后2、挂载前 挂载后3、更新前 更新后4、销毁前 销毁后如下图：beforeCreate当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loadingcreated:(*****)创建后:1、在当前生命周期函数中我们可以访问到vm身上所有的属性和方法2、当前生命周期函数会将data和methods身上所有的属性和方法都挂载在vm的实例身上3、当
2020-08-01 16:25:02
199
原创 VUe的使用以及指令v-model与v-bind区别
vue起步：1、引包 2、启动new Vue({el:目的地，template：模板内容}) 其中options参数除了 el、template还有数据data在html中如何使用vue：按照上述步骤， 引包 <script src='./node_modules/vue/dist/vue.js'></script>new Vue对象 new Vue({el:"#app",//预留填坑位置，比如html页面有一个<div id='app'&
2020-08-01 16:04:26
760
原创 mongo的简介及基本操作
MongoDB 是一个基于分布式文件存储的数据库，由 C++ 编写，旨在为 WEB 应用提供可扩展、高性能的数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库中功能最丰富、最像关系数据库的。在高负载的情况下，添加更多的节点，可以保证服务器性能。简介MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象，字段值可以包含其他文档，数组及文档数组。{ field1:value1,
2020-07-19 11:19:41
358
原创 node 的QueryString模块和Path模块
"QueryString模块"“QueryString” 模块用于实现URL参数字符串与参数对象的互相转换：举例：1 var url = require('url');2 var qs = require('querystring');3 var queryUrl = "http://localhost:8888/bb?name=bigbear&memo=helloworld" ;4 queryUrl = url.parse(queryUrl).query ;5 console.l
2020-07-19 11:15:55
230
原创 node模块与操作文件目录
客户端与服务端意思就是js文件是在客户端环境运行（在浏览器中打开）还是在服务端环境（直接终端运行命令 node index.js）运行nodejs原生服务器const http = require("http")const server = http.createServer((req, res) => { res.write("使用node启动一个服务器") res.end()})server.listen(3000)node 模块 (遵循commonjs规范co
2020-07-12 20:37:42
260
原创 页面防抖函数
防抖（debounce）什么是防抖？在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。应用场景(1) 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源；(2) window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让其只触发一次；还是上述列子，这里加入防抖来优化一下，完整代码如下：<!DOCTYPE html><html lang="
2020-07-12 20:30:12
530
原创 ES6中set与map的使用和操作方法
SetES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。// 例一var set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4]var s = new Set();[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x));for (let i of s) { console.log(i);}/
2020-07-05 20:59:20
442
原创 ES6要会结构
解构解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。解构模型在解构中，有下面两部分参与：解构的源，解构赋值表达式的右边部分。解构的目标，解构赋值表达式的左边部分。数组模型的解构（Array）基本let [a, b, c] = [1, 2, 3];// a = 1// b = 2// c = 3可嵌套let [a, [[b], c]] = [1, [[2],
2020-07-05 20:45:02
99
原创 箭头函数与普通函数的区别
箭头函数的特点箭头函数相当于匿名函数，并且简化了函数定义。箭头函数是匿名函数，不能作为构造函数，不能使用new箭头函数不绑定arguments，用…代替function A(a){ console.log(arguments);}A(1,2,3,4,5,8); // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]let B = (b)=>{ console.log(arguments);}B(2,92
2020-06-27 19:31:58
151
原创 ES6箭头函数的作用域this指向
作用域这个箭头函数的作用域和其他函数有一些不同,如果不是严格模式，this关键字就是指向window，严格模式就是undefined，在构造函数里的this指向的是当前对象实例,如果this在一个对象的函数内则this指向的是这个对象，this有可能指向的是一个dom元素，例如当我们添加事件监听函数时,可能这个this的指向不是很直接，其实this（不止是this变量）变量的指向是根据一个规则来判断的：作用域流。下面我将演示this在事件监听函数和在对象函数内出现的情况：在事件监听函数中：docume
2020-06-27 18:24:23
849
原创 ajax的CORS跨域
简介因为浏览器的“同源策略”，协议、域名、端口号若有一个不同，则不能访问。AJAX本身是不能跨域的，AJAX直接请求普通文件存在跨域无权限访问的问题，只要是跨域请求，一律不准；但是配合后台可以跨域。因为同源策略限制的是浏览器但是对服务器不限制，服务器可以跨域。那是不是用JavaScript无法请求外域（就是其他网站）的URL了呢？方法还是有的，以下介绍CORS跨域CORS跨域CORS（Cross-Origin Resource Sharing，跨源资源共享）是W3C的一个草案，定义了在必须访问跨域
2020-06-21 21:37:01
223
原创 ajax同步请求与异步请求的介绍及区别
同步异步简介同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。所以，要我请你吃饭就用同步的方法，要请我吃饭就用异步的方法，这样你可以省钱。同步请求$.ajax({ t
2020-06-21 21:31:20
344
原创 XHR简介及基本使用
XHR简介XHR是XMLHttpRequest 的简写XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。XHR接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL，浏览器格式化请求并管理每个连接的完整生命周期，所以XHR仅仅允许应用自定义一些HTTP首部，但更多的首部是不能自
2020-06-14 20:21:32
7434
原创 typescript与javascript的优势以及区别
什么是TypeScriptTypeScript是微软开发的，javascript的超集，遵循ES6规范（2015年推出）javascript实现了ES5规范，TypeScript实现了ES6规范es6属于js的规范实现，浏览器会去适配，ts不会以后浏览器升级，就会按照ES6的方向类适配然而typscript只是说我们开发人员用的语言，到时候还是要编译成ES5、ES6的规范的，才能在浏览器跑js理论上可以在任何环境跑，但是es6离开了浏览器就不能跑了你在浏览器运行，浏览器知道他是个啥，在安卓跑他
2020-06-14 19:56:09
1316
原创 php与javascript语言的区别
PHP的介绍1:变量与常量命名以$开头,变量的标志,变量名称用字母,数字,下划线字,并且数字不能开头.作用域默认情况,函数内部不能访问到外部的全局变量,但能访问到超级全局变量.$_GET,$_POST等大小写变量和常量区分大小写.可否重置其值变量可以重新赋值.而常量一旦定义,不能注销,也不能重新赋值.2:函数的参数可以声明0-N个,但是在调用时,要求调用时的参数与声明时的参数个数一样.和js相比,PHP中的函数可有默认值.3:逻辑运算符在PHP中,逻辑运算符返回的运算结果为布尔值
2020-06-07 21:02:58
407
原创 PHP的字符串拼接
在php里声明一个字符串有2种方式一种是用单引号一种是用双引号两者最大的区别就是当字符串中包含变量时，单引号不能输出变量的值，而是直接输出变量名，双引号就可以输出变量的值。<?php$a = 'hello';$b = 'world';echo '$a $b'; //输出$a $becho "$a $b"; //输出hello world ?>另外单引号里只能有2种转义字符，’(表示单引号)和\(表示反斜杠)，双引号就没这个限制。<?phpecho '\'hell
2020-06-07 20:50:13
2816
原创 fullpage 的方法介绍及使用
fullpage 的方法moveSectionUp(): 向上滚动一页moveSectionDown(): 向下滚动一页moveTo(section,slide): 滚动到第几页 第几个幻灯片 section从1开始 slide从0开始使用方式$.fn.fullpage.XXX()selientMoveTo(): 滚动到第几页和moeTo一样 只不过没有动画效果moveSlideRi
2020-05-31 16:51:01
2586
原创 fullpage 全屏插件的功能介绍
简介fullpage 全屏插件全屏滚动效果，原生js也很好实现，主要是用 mousewheel 鼠标滚轮滚动事件， 来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理及比较麻烦啦！fullPage.js 是一个基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。主要功能有：支持鼠标滚动支持前进后退和键盘控制多个回调函数-支持手机、平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动
2020-05-31 16:33:37
222
原创 jquery的移除事件
移除事件使用各种事件样式达到各种结果，适合开发目的才是最好的，一下对一些jquery事件的详细说明及使用 unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind(); //移除所有 对于只需要触发一次的，随后就要立即解除绑定的情况，用one()$('#btn').one("click",function(){.......}); 模拟操作可以用
2020-05-24 23:07:00
600
原创 jquery中clone与clone(true) 的区别
简介作用：clone(); 只是单纯的复制,复制后的节点 不具备 任何行为。clone( true ) ,它的含义是 复制元素的同时，复制元素中所绑定的事件。以下案列分析：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="<s
2020-05-24 22:51:31
370
原创 jquery的实用api
加载事件$(document).ready(function()) 当DOM准备就绪时，指定一个函数来执行。API.add(“p”) 匹配元素后添加元素.addClass(“类名”) 匹配元素添加样式.after(’’) 匹配元素后外添加HTML.animate({},2000) 匹配元素根据css执行一组动画，时间.append("") 匹配元素内部最后添加HTML.attr(‘属性’,‘值’)
2020-05-17 22:32:09
115
原创 jquery中API的html()和text()的关系
下面由无参和有参来进行两个的分析无参html（）：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个String例子：html页面代码：<div><p>Hello</p></div>jquery代码：$("div").html();结果：Hello2.有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象html
2020-05-17 22:21:08
218
原创 Bootstrap 模态框插件技巧使用
简介：模态框（Modal）是覆盖在父窗体上的子窗体通过 data 属性或 JavaScript 调用模态框插件，可以根据需要动态展示隐藏的内容。1、模态框插件模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、 dialog(窗口声明层)、content(内容层)在内容层里面，还有三层，分别为 header(头部)、body(主体)、footer(注脚)//模态框去掉 show，增加一个 id//点击触发模态框显示 点击弹窗 //弹窗的大小有三种，默认情况下是正常
2020-05-10 21:28:29
205
原创 Bootstrap表单样式使用技巧
Bootstrap表单样式使用技巧表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：.table：基础表格.table-striped：斑马线表格.table-bordered：带边框的表格.table-hover：鼠标悬停高亮的表格.table-condensed：紧凑
2020-05-10 20:56:26
368
原创 什么是JQuery?JQuery的优缺点
什么是JQuery?JQuery是一个优秀的javascript框架。JQuery是继Prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库，这是其它的js库所不及的，它兼容CSS3，还兼容各种常用浏览器。JQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTML ...
2020-05-05 20:58:08
695
原创 使用BootstrapCSS样式修改按钮的样式
在使用Bootstrap全局CSS样式，我们更方便的给指定的元素添加指定的css样式，它们主要有：布局容器栅格系统排版代码表格表单按钮图片辅助类响应式工具布局容器栅格系统首先我写了一些按钮的样式，代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
2020-05-05 20:39:52
1474
原创 BootStrap框架的优缺点
随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我们更快更好地实现一些现代化的界面，包括一些移动设备的网页界面风格设计。接下来就是要详解Bootstrap框架：首先，我们要知道为什么使用框架的原理。CSS框架是一系列CSS文件的集合体，包含了基本的元素重置，页面...
2020-05-05 20:19:45
8233
1
原创 Bootstrap的栅格系统
Bootstrap栅格系统Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：1.行...
2020-05-05 20:06:21
477
原创 CSS transform（3D）的坐标轴及透视观察者
CSS transform 简介CSS Transform效果是指通过在浏览器里让网页元素移动、旋转、透明、模糊等方法来实现改变其外观的技术。在CSS里定义的变化动作会在页面生成前应用到网页元素上，所以你看不到发生的过程。然而，这些变化动作也可以由mouseover或其它相似事件触发，这样我们就可以看到它的动作过程。本文将详细介绍关于transform变形3D的内容，但需以了解transfor...
2020-04-26 23:19:46
2138
原创 CSS3 animation动画与js动画的优缺点
CSS的animation属性在网页中加入动画是一件很有意思的事情，一般我们可以使用js添加事件来实现动画。但还有一种方法可以实现动画效果，就是使用css 的animation属性。CSS3中添加的新属性animation是用来为元素实现动画效果的。但是animation无法单独担当起实现动画的效果。这个我们会在后面讲到。我们先来讲讲animation的相关用法。这里我的代码均是采用标准的cs...
2020-04-26 23:04:37
805
原创 弹性盒子
一 , Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀。.box{ display: -webk...
2020-04-20 12:43:09
129
原创 css3中的选择器
一、属性选择器其特点是通过属性来选择元素，具体有以下5种形式：1、E[attr] 表示存在attr性即可； div[class]2、E[attr=val] 表示属性值完全等于val； div[class=mydemo]3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；div[class*=mydemo]4、E[attr^=val] 表示的属性...
2020-04-20 12:22:32
125
原创 html5的canvas画布与svg的介绍与区别
**一、canvas的简介**canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。在矩形区域的画布上，控制其每一像素，JavaScript来绘制2D图形，逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。1.创建画布<canvas id="Canvas" width...
2020-04-12 21:44:57
461
原创 百度地图API的使用
一、百度地图的简介百度地图API是可以给开发人员调用的开放API，我们可以用Javascript语言进行调用；调用方法如下<html> <head> <!--引用百度地图--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=...
2020-04-12 21:15:10
509
原创 ES6的箭头函数
箭头函数=>一、基本语法ES6中允许使用箭头=>来定义箭头函数，具体语法，我们来看一个简单的例子：// 箭头函数let fun = (name) => { // 函数体 return `Hello ${name} !`;};// 等同于let fun = function (name) { // 函数体 return `Hello ...
2020-03-29 14:26:16
135
原创 ES6的字符串模板
一. 字符串模板` ${变量的名字} ``一般情况下我们写字符串的时候需要用 + 号和" "来拼接，比较麻烦，也不够简洁，所以在ES6里面出现的一种独特的拼接字符串的方法用`（反引号）标识，用将变量括起来。上面的例子可以用模版字符串写成下面这样：语法：把字符串写在‘‘里面，{}将变量括起来。上面的例子可以用模版字符串写成下面这样：语法：把字符串写在``里面，将变量括起来。上面的例子可...
2020-03-29 13:10:13
157
原创 ES6的一些特点
基本的字符串格式化.先看一下ES5的var way = ‘String’console.log(‘ES5:’ + way)下面是ES6的//ES6let way = ‘String Template’console.log(ES6: ${way}多行拼接先看一下ES5的var msg =" Himan !’’下面是ES6的const template =hello wor...
2020-03-22 17:04:32
289
原创 ES6的let以及const
在ES6中我们通常用let和const来声明。let表示变量、const表示常量，let和const都是块级作用域。一般let和const的作用域在{}大括号内的代码块里let 的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。const 声明的变量都会被认为是常量，表示它的值被设置完成后就不能再修改了。如果const的是一个对象，对象所包含的值是可以被修改的。就是对象所指向的...
2020-03-22 14:56:38
86
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人