thanksKlan-CSDN博客

原创 vue前端工程化-爱学习的豪豪

希望你看到本文后能有所收获1.能够了解模块化的相关规范2.了解webpack3.了解使用Vue单文件组件4.能够搭建Vue脚手架5.掌握Element-UI的使用1.模块化的分类A.浏览器端的模块化1).AMD(Asynchronous Module Definition,异步模块定义)代表产品为：Require.js2).CMD(Common Module Definition,通用模块定义)代表产品为：Sea.jsB.服务器端的模块化服务器端的模块化规范是使用CommonJS规

2020-10-28 23:24:02 342 2

原创 vue路由

希望看过本文以后，你能有以下收获1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够实现嵌套路由，动态路由5.能够实现命名路由以及编程式导航1.路由的概念路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现，并完成资源的分发2).前端路由是依靠h

2020-10-26 23:53:06 238

原创（笔记整理）接口调用方式，(原生ajax、基于jQuery的ajax、axios重点)

接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程异步模式可以一起执行多个任务JS中常见的异步调用定时任何ajax事件函数promise主要解决异步深层嵌套的问题promise 提供了简洁的API 使得异步操作更加容

2020-10-23 12:40:17 271

原创（笔记整理）VUE组件

组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素，封装可重用的代组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象全局组件注册后，任何vue实例都可以用组件基础用<div id="example">  <my-component></my-

2020-10-23 12:38:09 109

原创（笔记整理）VUE特性指令及案例

Vue常用特性表单基本操作获取单选框中的值通过v-model  <input type="radio" id="m

2020-10-23 12:35:39 84

原创（笔记整理）VUE初识

Vue 是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合使用Vue将helloworld 渲染到页面上指令本质就是自定义属性Vue中指定都是以 v- 开头v-cloak防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器选择到带有属性 v-cloak的标签让他隐藏 */ [

2020-10-23 12:33:30 88

转载 require模块化

模块化规范模块的使用一般分为导入和导出，定义一个模块需要导出出去在需要使用的地方导入。所谓模块化规范就是规定了模块的使用方式，不同的规范制定了不同的导入和导出的方式。常见的模块化规范有如下几种：AMD 依赖前置：提前引入，文件开头把需要的模块一次性全部引入，后面直接使用前期消耗比较大，后期执行效率很高代表作是 require.jsCMD 按需加载：在代码执行过程当中需要一个模块了才去加载整个曲线比较平缓代表作是sea.js，但是现在已经很少使用了ES6 Module

2020-09-15 21:42:23 339

转载 gulp的使用和常规代码的打包

gulp的使用和常规代码的打包常用的工具grunt 比较古老，功能少，更新少，插件少，现在用的很少gulp pc端 jquery的项目打包更多使用gulpwebpack 最主流的打包工具，vue、react都是用的webpackgulp的介绍用自动化构建工具增强你的工作流程！gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。简单：代码优于配置、node 最佳实践、精简的 API 集，gulp 让工作前所未有的简单。高效：基于 node 强大的流(str

2020-09-14 21:52:25 242

原创购物车结算页面

品优购购物车结算页面当鼠标点击全选按钮时，会将所有商品checked<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服

2020-09-13 17:10:20 3758 3

原创突出显示

突出显示当鼠标经过图片时，其他图片增加透明度，鼠标移出时，如下显示代码：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding:

2020-09-13 17:05:30 364

原创手风琴案例

手风琴案例当鼠标经过小图时，改变li的宽度，小图淡出，大图淡入代码如下：<!doctype html><html><head> <meta charset="utf-8"> <title>手风琴案例</title> <style type="text/css"> * { margin: 0; padding: 0;

2020-09-13 17:02:33 458

原创 Node.js

当浏览器地址栏输入www.baidu.com，敲下回车会发生什么？利用DNS域名解析系统进行域名解析，将域名解析成IP因为域名只是一个别名，计算机只认识IP，所以需要DNS解析一下（如果有端口号需要识别端口号，否则进入默认端口：http协议默认端口号是80，https默认端口号是443）查找ip对应的主机服务器如果是第一次访问该服务器，会向网络供应商（移动、联通…）请求TCP的三次握手，经过三次在客户端和服务器之间传递报文，建立连接发起http请求，请求入口文件，后端接收到请求相关信息，返回入口

2020-09-11 21:27:14 148

原创用jquery写一个轮播图

用jquery写一个轮播图<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title><style>* {margin:0; padding:0; list-style:none;}#div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:re

2020-09-10 23:05:15 238

原创 jquery基本操作

jquery基本操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t

2020-09-09 19:17:23 118

原创 JS常见模式

工厂模式js中的工厂模式就是用来批量生产对象的工厂函数就是做一个对象创建的封装，并将创建的对象return出去function newObj(name,age){ var o = new Object(); o.name = name; o.age = age; return o;}var obj = newObj();单例模式：只允许存在一个实例的模式var Instance = (function(){ var obj; return fu

2020-09-08 20:36:31 410

原创闭包与继承

函数在创建的时候会创建两个对象，一个是函数对象本身，另一个是作用域链对象函数在调用的时候会创建一个执行环境对象（活动对象）闭包（ closure ）问题：全局变量和局部变量各自有什么缺点？全局变量：在函数体外定义的变量，每个函数都能使用修改，就会造成全局污染局部变量：在函数体内定义的变量，只有当前函数能使用，但是不能在全局重复使用既能重复使用，又不会污染全局？闭包！闭包有三步：1、外层函数嵌套内层函数2、内层函数使用外层函数的局部变量3、把内层函

2020-09-07 23:14:50 120

原创 Bootstrap初识

Bootstrap一、响应式网页1、响应式网页概述：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。三个特征：（1）流式布局（2）可伸缩的图片和字体（3）CSS3 Media Query2、编写响应式网页（1）设置viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">（2）避免使用绝对单位(px),用相对单位代替(%,auto,em等)

2020-09-04 21:45:04 247

原创 Promise常用方法

Promise-nesting<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../utils.js">

2020-09-03 23:54:22 1273

原创 Promise

浏览器的同源策略：浏览器安全策略，保障非同源资源之间数据访问的安全性。默认不允许非同源的资源直接访问。URL：协议://域名:端口/路径名称?查询字符串#位置标识符同源：协议、域名、端口完全一致，只要三个中有任何一个不一致，则是非同源http协议的默认端口号是80https协议的默认端口号是443mysql数据库的默认端口号是3306非同源资源间需要进行访问，则需要实现跨域。解决资源跨域访问：a. CORScross-origin resource sharing服务器

2020-09-03 23:12:28 241

原创 ajax初识

JS 是单线程的语言，所谓“单线程”就是一根筋，对于拿到的程序，一行一行的执行，上面的执行为完成，就会一直等着。var i, t = Date.now()for (i = 0; i < 100000000; i++) {}console.log(Date.now() - t) // 254 JS 对于这种场景就设计了异步 -— 即，发起一个网络请求，就先不管这边了，先干其他事儿，网络请求啥时候返回结果，到时候再说。这样就能保证一个网页的流程运行。Ajax（ Asynchronous Ja

2020-09-02 21:48:06 91

原创 cookie初识

cookie机制当用户第一次访问并登陆一个网站的时候，cookie的设置以及发送会经历以下4个步骤：客户端发送一个请求到服务器 --》服务器发送一个HttpResponse响应到客户端，其中包含Set-Cookie的头部 --》客户端保存cookie，之后向服务器发送请求时，HttpRequest请求中会包含一个Cookie的头部 --》服务器返回响应数据JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。JavaScript 中，创建 co

2020-09-01 23:40:27 132

原创 php+数据库

应用程序分类：B/S：Browser（浏览器）/ Server（服务器）C/S：Client（客户端）/ Server（服务器）http协议：基于TCP/IP的无状态通信协议前端（浏览器客户端）向后台（web服务器端）发送http请求获取数据http请求报文：一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和mult

2020-08-31 23:15:25 235

原创 JS制作简易贪吃蛇游戏

简易贪吃蛇游戏制作完成代码：food.jsclass Food{ constructor(options){ options = options || {} this.food = null this.map = document.querySelector('.map') this.width = options.width || 20 this.height = options.height || 20

2020-08-29 23:11:38 247

原创鼠标移动跟随效果

实现鼠标跟随效果代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">

2020-08-28 16:58:56 363 1

原创实现烟花效果

鼠标点击后，实现烟花效果当鼠标点击后，会有一个小点慢慢上升，上升到鼠标点击的高度后，就会炸开点击两个试试html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2020-08-27 22:36:09 439 1

原创放大镜、增加商品、tab切换功能实现

实现放大镜功能，增加商品功能，Tab切换功能index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

2020-08-26 21:51:33 343 1

原创放大镜功能

完成一个放大镜的功能当鼠标经过小方块时，旁边会出现一个放大镜，跟随鼠标的移动可以放大各种位置html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l

2020-08-25 22:23:06 405

原创面向对象

面向对象首先，我们要明确，面向对象不是语法，是一个思想，是一种编程模式面向：面（脸），向（朝着）面向过程：脸朝着过程 =》关注着过程的编程模式面向对象：脸朝着对象 =》关注着对象的编程模式实现一个效果在面向过程的时候，我们要关注每一个元素，每一个元素之间的关系，顺序，。。。在面向过程的时候，我们要关注的就是找到一个对象来帮我做这个事情，我等待结果例子 ????：我要吃面条面向过程用多少面粉用多少水怎么和面怎么切面条做开水煮面吃面面向对象找到

2020-08-24 22:19:54 96

原创轮播图（二）

轮播图二实现自动切换图片，小圆点跟图片一起动的效果代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <s

2020-08-23 20:04:08 98

原创轮播图(一)

轮播图功能实现自动进行图片轮播功能代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"

2020-08-22 17:41:42 360

原创运动学习（一）

实现功能点击按钮小球会在框内运动代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&

2020-08-21 22:33:30 144

原创 let、const、箭头函数、this指向

let、const、和var的区别1、let、const不允许声明相同的变量2、let、const 声明变量没有预解析所以不能在声明之前使用3、let 、const 声明的变量受所有的 { }所限制在{ }里面声明的变量在外面不能使用let 和 const 的区别1、let声明的变量在声明之后可以修改，const 声明的常量在声明之后不能修改2、let声明的变量声明的时候可以不赋值，const 声明的常量，声明的时候必须要赋值页面上是变量多还是常量多？常量多

2020-08-20 23:37:40 615

原创正则表达式

正则表达式（规则表达式）例字面量 var reg1=/abc/内置构造函数 var reg2=new RegExp(‘abc’)元字符\d 一个数字var reg1=/ \d /var str = ‘a1bc2d’test()console.log(reg1.test(str))test()是用来检验是否符合，返回值为布尔值\D 非数字var reg=/ \D /var str=‘b2345’console.log(res.test(str))\s 一个空格var

2020-08-19 23:26:03 401

原创事件(二)

事件的传播当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件目标点击在哪个元素身上了，那么这个事件的目标就是什么冒泡就是从事件目标的事件处理函数开始，直到window的事件处理函数触发捕获就是从window的事件处理函数，依次向内，只要事件目标的事件处理函数执行也就是从上向下的执行事件处理函数阻止冒泡首先要有e = e || window.event

2020-08-18 23:48:07 81

原创事件

JS通用通过选择器获取元素1.selector 要获取的元素的id/class/标签名2.context 从哪个范围获取3.return 获取到的元素或者元素伪数组 function my$(selector, context) { context = context || document if (selector.indexOf('#') === 0) { return document.getElementsById(selec

2020-08-17 22:22:31 104 2

原创节点（二）

创建一个节点createElement:用于创建一个元素节点var oDiv = document.createElement(“a”)console.log(oDiv);createTextNode:创建一个文本节点var oDiv = document.createTextNode(‘我是一个文字’)console.log(oDiv);向页面中加入一个节点appendChild:是向一个元素节点的末尾追加一个节点语法：父节点.appendchild(要插入的子节点)insertBef

2020-08-16 21:27:04 292

原创节点(一)

DOM 就是我们 html 结构中一个一个的节点构成的不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点DOM 的节点我们一般分为常用的三大类元素节点 / 文本节点 / 属性节点什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）比如我们标签里面写的文字，那么就是文本节点写在每一个标签上的属性，就是属性节点元素节点我们通过 getElementBy… 获取到的都是元素节点属性节点我们通过 getAttribute 获取的就是

2020-08-14 20:54:00 771

原创 DOM操作属性

DOM操作属性我们各种获取元素的方式获取到页面中的标签以后我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上 1.innerHTML: 获取元素内部的 HTML 结构 <div> <p> <span>hello</span> </p> </div> <script> 获取内部的HTML结构 var div = document.

2020-08-13 23:49:28 133

原创 BOM与DOM

JavascriptBOM +DOM+ECMAScript //BOM Browser Object Model ：浏览器对象模型 //浏览器给我们提供了一个顶级对象叫做 window // 我们可以操作这些内容: // 获取一些浏览器的相关信息（窗口的大小） // 操作浏览器进行页面跳转 // 获取当前浏览器地址栏的信息 // 操作浏览器的滚动条 // 浏览器的信息（浏览器的版本） // 让浏览器出现一个弹出框（ alert

2020-08-13 23:17:28 85

原创 Math与Date

Math 对象 1. Math.random() 0 - 1 之间的随机数 2. Math.pow() 求一个数的多少次方 3. Math.round() 四舍五入 var num = Math.round(4.5) console.log(num); // =>5 4. Math.ceil() 向上取整 console.log(Math.ceil(9.0001)) //=>10 5.Math.floor() 向

2020-08-12 23:17:08 184

品优购电商项目资料（案例笔记素材）

pingyougou-womeizuowan

Meituan mobile terminal_index.rar

JS简易贪吃蛇游戏.rar

空空如也