|不勤-CSDN博客

原创 webpack基本使用

1.webpack基本使用全局或者局部安装 webpack和webpack-clinpm init ：生成package.json文件dependencies 为生产环境依赖devDependencies 为开发环境依赖webpack.config.js 配置文件输入 webpack 命令自动寻找配置文件配置文件信息的六个概念：入口(entry)输出(output)loader 插件(plugin)模式(mode)浏览器兼容性(browser compatibi

2021-01-02 11:51:39 139

原创 Vue-组件

1.组件概念的简单介绍什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。组件化和模块化的不同：模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。全局组件定义的三种方式：使用 Vue.extend 配合 Vue.component 方法：var login = Vue

2020-12-31 10:49:13 122

原创七牛 - 网络资源上传文件

node 环境下使用七牛云服务器npm i qiniu -D创建各种上传凭证之前，我们需要定义好其中鉴权对象 var accessKey = "xxxxxxxxx"; //填入 accessKey var secretKey = "xxxxxxxxxx"; // 填入 secretKey //定义鉴权对象 var mac = new qin...

2020-12-16 02:27:53 625

原创 jquery-trigger

1. trigger简单使用介绍trigger() 方法触发被选元素的指定事件类型，也可以是自定义事件$(selector).trigger(event,[param1,param2,…])selector : 选择器event : (必选) 定义的事件params: (可选) 需要的参数$(.demo).on(function(e,a,b,c){ console.log(e) console.log(a,b,c)//10,20,30 }) $(.demo).trigger('

2020-05-21 22:39:12 351

原创 JS 之函数式编程

1. 函数组合应用由若干个纯函数、偏函数、柯里化函数组合成一个新的函数，同时，形成数据传递。挑选了一系列所需要的函数，把他们组合在一起，可以实现公共合作的效果。代码示例：function combination() { var args = Array.prototype.slice.call(arguments); return function(x)...

2019-08-19 16:44:42 156

原创 vue-表单数据

1. <div id="test"> <form action="" @submit.prevent="handleSubmit"> 用户名：<input type="text" v-model="username" /><br /> 密码：<input ty...

2019-08-13 19:52:53 170

原创 vue-列表过滤和排序

1. 列表过滤运用了Vue实例化的 computed （计算属性）例子： <div id="test"> <input type="text" v-model='searchName'> <ul> <li v-for= "(p,index) in filterP":key="index...

2019-08-12 21:55:32 678

原创 async和await

1. Promise 解决回调 const fs = require('fs') function myPromise(func){ return function(...arg){ return new Promise((res,rej)=>{ func(...arg,(err,data)=>{ ...

2019-08-10 21:27:37 201

原创 ES6-Generator

1. Generator 生成器2. Generator 基本使用 function *test(){ yield 'a' yield 'b' yield 'c' return 'd' } let oG = test() console.log(oG.next()) ...

2019-08-06 16:45:56 109

原创 ES6-Map存储

1. Map 简单介绍2.Map基本使用 let oMp = new Map([['name','tzh'],['age',18],['sex',true]]) console.log(oMp)对象作为属性值 let oMp = new Map([[{},'666']]) console.log(oMp)set设置属性和值 let oMp = new...

2019-08-05 17:51:28 598

原创 ES6-Set存储

1. Set简单介绍浏览器内置的构造函数2. Set基本使用数组参数：let oS = new Set([1,2,3,[66,77,88],{name:'LOL'}]) //oS打印的结果如下图字符串参数： let oS = new Set('123')//打印结果如下图Set原型上面的方法：Set可以通过两种方式遍历；自身提供的forEach和es6提供的 fo...

2019-08-03 20:23:32 293

原创 vue-基本使用

1.vue基本使用1.引入vue.js文件2.创建Vue实例对象(vm), 指定选项(配置)对象3.el : 指定dom标签容器的选择器4.data : 指定初始化状态数据的对象/函数(返回一个对象)5.在页面模板中使用{{}}或vue指令html文件 <div id="app"> <input type="text" v-model="...

2019-08-01 13:45:53 131

原创前端模块化之 CommonJs-AMD-CMD-ES6模块化

1. 模块化的一些方案防止变量冲突命名空间var obj1 = { a : 1, foo : function(){}}var obj2 = { a : 2, foo : function(){}}解决了变量的一些冲突，但是外部能够获取到私有变量和修改私有变量（obj1.a,obj2.a）闭包 (function(){ ...

2019-07-31 16:33:14 123

原创 HTML5-canvas

1. 使用 canvas目前canvas还没有3d效果2. 绘制线段beginPath() 方法开始一条路径，或重置当前的路径。使用场景：实现的样式只是作用于当前路径时使用 <canvas width="300" height="300"></canvas>如果canvas标签里面没有设置width、height会出现像素的误差；用css样式设置的...

2019-07-30 07:54:14 85

原创 ES6-Promise

1. promise 简单介绍一般的绑定事件等，都是回调的机制，例如点击事件onclick，当绑定了点击事件之后，会开启另外一个线程去辅助执行。2.高阶函数的定义函数参数包含函数或者函数返回值是函数；一般可称为高阶函数loadshloadsh：是一个javascript 实用工具库，提供各种方法提升开发效率，提供after高阶函数的辅助回调操作（具体使用情况可以去官网...

2019-07-29 07:39:49 226

原创 ES6-Class

1. Class 铺垫2. 回顾了解ES5构造函数私有属性和公有属性私有属性继承和公有属性继承 Union.prototype.public = function(){ console.log('公有属性访问') } function Union(){ this.name = 'LOL', t...

2019-06-28 22:01:59 125

原创 css3-transition

1. transition （过渡）transition 四个值依次是：transition-property: 规定应用过渡的 CSS 属性的名称。transition-duration: 定义过渡效果花费的时间。默认是 0。transition-timing-function: 规定过渡效果的时间曲线。默认是 “ease”。linear 规定以相同速度开始至结束的过渡效果e...

2019-06-28 01:01:14 232

原创 CSS3-弹性盒模型

1. flex 和 inline-flexflex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示2. flex-direction （属性规定项目的方向）row （默认值）; 灵活的项目将水平显示，正如一个行一样row-reverse 与 row 相同，但是以相反的顺序。尝试一下column 灵活的项目将垂直显示，正如一个列一样colum...

2019-06-10 03:33:55 222

原创 CSS-标准盒模型和IE6混杂模式

1. w3c标准盒模型以宽度举例（高度是同理的）boxWidth = 设置的宽( width ) + 边框的两边 ( border * 2 ) + 内边距两边（padding * 2）boxContentWidth ( 盒子内容区宽 ) = boxWidth2. IE6混杂模式（怪异模式）box-sizing: border-box 触发ie6混杂模型（默认值是 content-...

2019-06-09 05:56:00 396

原创 ES6 运算符

1、… 运算符简介：… 运算符收集作用： <script> function sum(...arg){ console.log(arg) //打印一个数组 } sum(1,2,3) </script> function sum(a,b,...arg){ con...

2019-06-09 03:46:09 836

原创 html5 - 地理位置信息

1. navigator.geolocation <script> console.log(window.navigator.geolocation) //打印结果如下图 </script>2. getCurrentPosition (success,error,option)success 成功的回调函数error 调用失败的...

2019-06-08 04:59:51 327

原创 JS - Proxy

1. Proxy 简单介绍Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）Proxy 之 get 和 set 简单使用 var oData = { name: "tzh" }; var pro = new Proxy(oData, { set(target, key,...

2019-05-31 01:33:53 947

原创 JS-Object.defineProperty

1. Object.defineProperty 简介不可配置:var a = 10 挂载到 window 上，执行 delete a 结果为false,枚举属性：var obj = { name : 'tzh', age : 20, __proto__ : { nihao : 'good' } ...

2019-05-29 19:06:57 172

原创 ES6 - lterator

1. 迭代器（内部迭代器和外部迭代器）迭代模式：提供一种方法顺序获得集合对象中的各个元素，是一种最简单也是最常见的设计模式，提供特定的接口。内部迭代器：本身是函数，定义好内部迭代规则，外部只需一次初始调用 ; 例如：Array.prototypr.forEach 、jQuery.each 等外部迭代器：本身是函数，执行迭代对象，迭代对象必须显示调用，调用复杂度增加...

2019-05-26 06:01:36 139

原创 ES6 之 symbol

1. symbol 使用基本数据类型有6种：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object） ES6新增了一种数据类型 symbolsymbol 使用时候不能 new ; 直接 symbol() ；例如：symbol(‘abc’) let os = Symbol('abc') console.log(typ...

2019-05-26 05:49:44 181

原创 CSS3 之 background

1. background-image 引用background-image: url( xxx.jpg ) 可以引用多个元素background-image: url( xxx.jpg ) ,url(xxx.png)一个容器引用多张图片是在 css3 新增的一种功能，引用多张图片后，需要调整各自元素的位置，否则元素会重叠在一起。（在规范情况下很少使用！！！）一般在图片容错机制下...

2019-05-26 00:33:00 121

原创 jquery 之 val

1. val 的应用场景用以下的html进行相关的操作form action="./" method="GET"> <h3>选择你最喜欢的明星</h3> <select name="star" id=""> <option value="s">詹姆斯</option...

2019-05-23 16:42:15 105

原创 jquery 之 css 的 attr 和 prop

1.css样式赋值（css方法是可以链式调用的）字符串样式：$('div').css('width','100px')多样式兼容：普遍写法 (options)$('div').css({width:'100px',height:'100px'})属性值 += / -= 的形式（animate）在原有基础上增减量$('div') .css({width:'...

2019-05-23 13:47:51 206

原创 jquery之类名操作

1. addClass 添加类名添加多个类名以空格隔开$('demo').addClass('active tzh')addClass 函数逻辑操作$('div').addClass(function(index,ele){ return 'tzh' + index })2. removeClass 移除类名移除多个类名以空格隔开$('div'...

2019-05-22 23:51:54 1322

原创 mongoose使用教程

提示：mongodb 的服务启动1. mongoose 连接数据库npm install mongoose代码示例：const mongoose = require('mongoose');(function(){ //链接数据库并使用新的url解析器（useNewUrlParser）； mongoose.connect('mongodb://local...

2019-05-22 19:15:40 3337

原创 mongodb开启服务教程

1. 安装 mongodb不同操作系统的 mongodb 版本按照网上教程提示安装2. 创建 MongoDB 数据存储目录MongoDB 数据存储目录不会自动创建，需要手动创建3. MongoDB 关联数据存储目录假设 MongoDB安装目录和数据存储目录都在 C 盘命令格式：MongoDB安装目录 + --dbpath + 数据存储目录；代码示例如下：...

2019-05-22 05:30:55 406

原创 jquery之html、text

1.jquery 之 html操作dom节点，使用html() 取值或赋值取值：原始值；类型是字符串typeof $('ul').html() //类型是 stringhtml方法示例： <ul> <li>1</li> <li>2</li> <li>3&...

2019-05-21 20:23:17 108

原创 CSS3 border-image

1. border-image 属性是一个简写属性，用于设置以下属性：border-image-source填充渐变颜色或者是图片border-image-slice 四条切割线方向上右下左如下图：border-image-slice:100 100 100 100 (不能写单位) 假设为300 * 300像素的图片切割之后的元素往边框...

2019-05-21 02:16:43 143

原创 CSS3 圆角与阴影

1. 决定 border-radius 的值是根据宽高计算的div{ width:100px; height:100px; border-radius:50%; /* border-radius: 50px;*/ /*根据自身宽高计算*/ }2. border-radius 四个方向值border-radius:10px四个方向的值都是10px;...

2019-05-20 23:55:26 445

原创 CSS3常用选择器

1.css3常用选择器:first-of-type 选中的元素在其类型中第一个元素不受其他元素节点的干扰:nth-last-child(n) 自然数从 1 开始在其集合类中的最后一位开始算起:nth-of-type(n) n 自然数从 1 开始:empty 被选元素为空元素为空是指完全没有节点元素，注释也是元素为空:checked 选择器匹配每个选中的元素（仅适用...

2019-05-20 08:36:00 90

原创 css3多功能选择器

伪类 == 被动1. :not(选择元素):not(selector) 选择器匹配非指定元素/选择器的每个元素。小案例（最后的下边框去除）：<style> ul{ width:300px; border:1px solid #999; } li{ height:50px; ...

2019-05-20 08:09:05 143

原创 CSS3兼容性

1.浏览器前缀缩写prefixbrowser-webkit-chrome、safari-moz-firefox-ms-IE-o-opera2.css3前缀由来css3 新标准制定出来后，由于各大厂商的先后使用了新标准，还有一部分厂商还没使用，先行使用新标准的厂商就制定了前缀来区分于其它厂商，后来新制定的标准慢慢普及，忽略前缀的写法就可以兼...

2019-05-20 01:38:34 298

原创封装ajax

1.创建ajax对象var xhr = new XMLHttpRequest()IE浏览器上面没有XMLHttpRequest 对象，需要做兼容处理IE提供的 ajax 对象 new ActiveXObject(‘Microsoft.XMLHttp’)2.初始化 open 方法使用 ajax对象上的 open方法，open三个参数依次是:请求方式；常用的有 get 和 ...

2019-05-20 00:43:18 162

原创 git与IDE

1.git 工作区块总体划分远程服务器本地仓库缓存区（缓存机制）工作区区块之间的服务行为远程服务至本地仓库或工作区的有克隆行为本地仓库至远程服务的有 push 行为本地仓库至工作区的有 checkout 、merge 行为工作区至缓存区的有 add 行为工作区至缓存区到本地仓库的有 commit 行为...

2019-05-19 17:50:09 397

原创 git和GitHub相关联

1.git基础概念git是分布式存储管理，客服端存的是原始代码的完整镜像，存储到本地，每一个客户的代码仓库都是一样的，任何部分代码出现问题，可以使用其他客户端代码修复2初始化本地仓库git init 生成一个 .git 的隐藏文件3.GitHub远程仓库使用注册登录，创建一个仓库本地环境配置和秘钥SSH配置git命令行输入 ssh-Keygen生成一个.ssh的文件，文件...

2019-05-18 20:35:04 110

空空如也

空空如也