- 博客(73)
- 资源 (4)
- 收藏
- 关注
原创 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
360
2
原创 vue路由
希望看过本文以后,你能有以下收获1.能够说出什么是路由2.能够说出前端路由的实现原理3.能够使用Vue-Router实现前端路由4.能够实现嵌套路由,动态路由5.能够实现命名路由以及编程式导航1.路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现,并完成资源的分发2).前端路由是依靠h
2020-10-26 23:53:06
258
原创 (笔记整理)接口调用方式,(原生ajax、基于jQuery的ajax、axios重点)
接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程异步模式可以一起执行多个任务JS中常见的异步调用定时任何ajax事件函数promise主要解决异步深层嵌套的问题promise 提供了简洁的API 使得异步操作更加容
2020-10-23 12:40:17
298
原创 (笔记整理)VUE组件
组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件基础用<div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-component></my-
2020-10-23 12:38:09
117
原创 (笔记整理)VUE特性指令及案例
Vue常用特性表单基本操作获取单选框中的值通过v-model <!-- 1、 两个单选框需要同时通过v-model 双向绑定 一个值 2、 每一个单选框必须要有value属性 且value 值不能一样 3、 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值,我们只需要实时监控他的值就可以了 --> <input type="radio" id="m
2020-10-23 12:35:39
90
原创 (笔记整理)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
93
转载 require模块化
模块化规范模块的使用一般分为导入和导出,定义一个模块需要导出出去在需要使用的地方导入。所谓模块化规范就是规定了模块的使用方式,不同的规范制定了不同的导入和导出的方式。常见的模块化规范有如下几种:AMD 依赖前置:提前引入,文件开头把需要的模块一次性全部引入,后面直接使用 前期消耗比较大,后期执行效率很高 代表作是 require.jsCMD 按需加载:在代码执行过程当中需要一个模块了才去加载 整个曲线比较平缓 代表作是sea.js,但是现在已经很少使用了ES6 Module
2020-09-15 21:42:23
353
转载 gulp的使用和常规代码的打包
gulp的使用和常规代码的打包常用的工具grunt 比较古老,功能少,更新少,插件少,现在用的很少gulp pc端 jquery的项目打包更多使用gulpwebpack 最主流的打包工具,vue、react都是用的webpackgulp的介绍用自动化构建工具增强你的工作流程!gulp 将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间、创造更大价值。简单:代码优于配置、node 最佳实践、精简的 API 集,gulp 让工作前所未有的简单。高效:基于 node 强大的流(str
2020-09-14 21:52:25
261
原创 购物车结算页面
品优购购物车结算页面当鼠标点击全选按钮时,会将所有商品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
3834
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
368
原创 手风琴案例
手风琴案例当鼠标经过小图时,改变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
466
原创 Node.js
当浏览器地址栏输入www.baidu.com,敲下回车会发生什么?利用DNS域名解析系统进行域名解析,将域名解析成IP因为域名只是一个别名,计算机只认识IP,所以需要DNS解析一下(如果有端口号需要识别端口号,否则进入默认端口:http协议默认端口号是80,https默认端口号是443)查找ip对应的主机服务器如果是第一次访问该服务器,会向网络供应商(移动、联通…)请求TCP的三次握手,经过三次在客户端和服务器之间传递报文,建立连接发起http请求,请求入口文件,后端接收到请求相关信息,返回入口
2020-09-11 21:27:14
157
原创 用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
243
原创 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
128
原创 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
431
原创 闭包与继承
函数在创建的时候会创建两个对象,一个是函数对象本身,另一个是作用域链对象函数在调用的时候会创建一个执行环境对象(活动对象)闭包( closure )问题:全局变量和局部变量各自有什么缺点? 全局变量:在函数体外定义的变量,每个函数都能使用修改,就会造成全局污染 局部变量:在函数体内定义的变量,只有当前函数能使用,但是不能在全局重复使用既能重复使用,又不会污染全局?闭包!闭包有三步:1、外层函数嵌套内层函数2、内层函数使用外层函数的局部变量3、把内层函
2020-09-07 23:14:50
123
原创 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
262
原创 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
1293
原创 Promise
浏览器的同源策略:浏览器安全策略,保障非同源资源之间数据访问的安全性。默认不允许非同源的资源直接访问。URL: 协议://域名:端口/路径名称?查询字符串#位置标识符同源:协议、域名、端口完全一致,只要三个中有任何一个不一致,则是非同源http协议的默认端口号是80https协议的默认端口号是443mysql数据库的默认端口号是3306非同源资源间需要进行访问,则需要实现跨域。解决资源跨域访问:a. CORScross-origin resource sharing服务器
2020-09-03 23:12:28
253
原创 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
105
原创 cookie初识
cookie机制当用户第一次访问并登陆一个网站的时候,cookie的设置以及发送会经历以下4个步骤:客户端发送一个请求到服务器 --》 服务器发送一个HttpResponse响应到客户端,其中包含Set-Cookie的头部 --》 客户端保存cookie,之后向服务器发送请求时,HttpRequest请求中会包含一个Cookie的头部 --》服务器返回响应数据JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。JavaScript 中,创建 co
2020-09-01 23:40:27
143
原创 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
247
原创 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
255
原创 鼠标移动跟随效果
实现鼠标跟随效果代码:<!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
384
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
456
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
357
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
419
原创 面向对象
面向对象首先,我们要明确,面向对象不是语法,是一个思想,是一种 编程模式面向: 面(脸),向(朝着)面向过程: 脸朝着过程 =》 关注着过程的编程模式面向对象: 脸朝着对象 =》 关注着对象的编程模式实现一个效果在面向过程的时候,我们要关注每一个元素,每一个元素之间的关系,顺序,。。。在面向过程的时候,我们要关注的就是找到一个对象来帮我做这个事情,我等待结果例子 ????: 我要吃面条面向过程用多少面粉用多少水怎么和面怎么切面条做开水煮面吃面面向对象找到
2020-08-24 22:19:54
104
原创 轮播图(二)
轮播图二实现自动切换图片,小圆点跟图片一起动的效果代码:<!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
108
原创 轮播图(一)
轮播图功能实现自动进行图片轮播功能代码:<!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
368
原创 运动学习(一)
实现功能点击按钮 小球会在框内运动代码:<!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
156
原创 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
635
原创 正则表达式
正则表达式 (规则表达式)例字面量 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
421
原创 事件(二)
事件的传播 当元素触发一个事件的时候, 其父元素也会触发相同的事件, 父元素的父元素也会触发 相同的事件目标 点击在哪个元素身上了, 那么这个事件的目标就是什么冒泡 就是从事件目标的事件处理函数开始, 直到window的事件处理函数触发捕获 就是从window的事件处理函数,依次向内,只要事件目标的事件处理函数执行 也就是从上向下的执行事件处理函数 阻止冒泡 首先要有e = e || window.event
2020-08-18 23:48:07
95
原创 事件
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
113
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
301
原创 节点(一)
DOM 就是我们 html 结构中一个一个的节点构成的不光我们的标签是一个节点,我们写的文本内容也是一个节点,注释,包括空格都是节点DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点什么是分类,比如我们在获取元素的时候,通过各种方法获取到的我们叫做元素节点(标签节点)比如我们标签里面写的文字,那么就是文本节点写在每一个标签上的属性,就是属性节点元素节点我们通过 getElementBy… 获取到的都是元素节点属性节点我们通过 getAttribute 获取的就是
2020-08-14 20:54:00
791
原创 DOM操作属性
DOM操作属性我们各种获取元素的方式获取到页面中的标签以后我们可以直接操作 DOM 元素的属性,就能直接把效果展示在页面上 1.innerHTML: 获取元素内部的 HTML 结构 <div> <p> <span>hello</span> </p> </div> <script> 获取内部的HTML结构 var div = document.
2020-08-13 23:49:28
142
原创 BOM与DOM
JavascriptBOM +DOM+ECMAScript //BOM Browser Object Model :浏览器对象模型 //浏览器给我们提供了一个顶级对象叫做 window // 我们可以操作这些内容: // 获取一些浏览器的相关信息( 窗口的大小) // 操作浏览器进行页面跳转 // 获取当前浏览器地址栏的信息 // 操作浏览器的滚动条 // 浏览器的信息( 浏览器的版本) // 让浏览器出现一个弹出框( alert
2020-08-13 23:17:28
95
原创 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
198
Meituan mobile terminal_index.rar
2020-09-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人