- 博客(29)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 Vue中computed与method的区别
computed区别于method的两个核心在官方文档中，强调了computed区别于method最重要的两点computed是属性调用，而methods是函数调用computed带有缓存功能，而methods没有下面我们看一个具体的例子:<!--HTML部分--><div id="app"> <h1>{{message}}</h1...
2019-06-26 15:11:29
1320
原创 vue组件兄弟间通信
兄弟组件间通信（event）借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发var bus = new Vue();bus.$emit()bus.$on()熊大想要发消息给熊二接收方（熊二）：事件绑定bus.$on('customEvent',function(msg){//msg就是通过事件 传递来的数据})发送方（熊大）：触发事件bus...
2019-06-26 14:33:35
506
原创 手写jQuery轮播图（无缝回到第一张）
前言轮播图是学习前端必须会的，面试的时候经常会面试到。轮播图的难点在于最后一张到第一张怎么实现无缝滚动，这是一种思维方式的转变。原理我们以3张的轮播图为例讲解。如下图，制作三张轮播图时需要放4张图片，第四张和第一张一样。在如何从1转到2呢？在我们从3移到1后，我们需要把第4张变成第一张。惯性思维会认为需要从第四张1移动到第一张1。其实对计算机而言，并没有这个过程，加上移动只是为了是我...
2019-06-26 12:12:32
3449
3
原创 js事件委托
事件委托事件委托：也称事件代理 就是利用冒泡的原理 把事件加到父级上，触发执行效果说明你应该写过这样的程序，有一个列表，当鼠标移入每个li，背景颜色变红，于是我们写出了这样的代 码：window.onload = function(){ var oUl = document.getElementById('ull');//获取ul var aLi = document.g...
2019-06-24 09:49:20
110
原创 如何用 async/await 来处理异步
前言ES7的async/await语法在2016年就已经提出来了，用async/ await来发送异步请求，从服务端获取数据，代码很简洁，async/await 也已经被标准化。async先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数：asyn...
2019-06-23 19:43:31
1491
2
原创 CSS中多种常见居中方法
前言css居中是常见的需求，不同场景需要不同的居中方法，本文讨论多种常见居中方法，如有遗漏欢迎补充。水平居中内联元素给内联元素的父级加text-align:cente;.container{ text-align:center;}块级元素设置左右marign的值为auto.container{ margin:0 auto;}垂直居中1. 内联元素...
2019-06-23 16:03:36
351
原创 浅谈前端架构的工程化、模块化、组件化、规范化
前言一个项目组成分为 前端，服务端。传统的前端项目用三剑客 javascript html css 就传统的项目结构已经不能满足日益壮大的大型应用的需求了。现在前端的生态圈很繁荣，各种框架，组件的出现。让前端发展迅速，快速开发已经成为了前端的一个标准。如果你想构建一个易维护，代码简洁，性能优化程度高的项目就离不开前端的架构。这也就解疑了架构是不是必须的？架构的目的是什么？答案是提升质量和效率...
2019-06-22 16:18:00
1596
原创 使用canvas制作在线涂鸦画板
介绍点击预览：在线涂鸦画板项目源码：github地址主要功能调节笔颜色点击黑色，将画笔颜色改为黑色，并且加上active类，其他颜色删除active，实现点击处高亮。black.onclick = function () { context.strokeStyle = 'black' for (var i = 0; i < black.parentNode.chi...
2019-06-20 14:21:52
3911
2
原创 本地存储和离线缓存的作用和区别
前言前端的存储方式有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5离线存储等。各个存储方式有各自的优缺点，本文我们来探讨一下不同存储的功能及区别。本地存储1.cookie在h5之前，存储主要用的是cookie。cookie会随着每次http请求头信息一起发送，无形中增加了网络流量，另外，cookie能存...
2019-06-18 16:52:47
7220
原创 Ajax详细剖析
前言手写Ajax是前端面试常考的，所以对于手写Ajax是很必要的，不过我们不只要会默写更要理解。基本模板下面是Ajax请求的基本模板var xhr=new XMLHttpRequest();xhr.open("GET",url);xhr.onreadystatechange=function(){ if(xhr.readyState==4 && xhr.s...
2019-06-18 15:38:28
233
原创 浅析BFC原理及作用
什么是BFC块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。怎么创建BFC下列方式会创建块格式化上下文：上面太多了不太好记，主要可以记住以下四种：body 根元素浮动元素：float 除 none 以外的值绝对定位元素：position (absol...
2019-06-17 20:07:42
234
原创 双向绑定
前言单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。有单向绑定，就有双向绑定。如果用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。双向绑定什么情况下用户可以更新View呢？填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状...
2019-06-17 14:47:44
900
原创 单向绑定
简单理解单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。MVVM就是在前端页面上，应用了扩展的MVC模式，我们关心Model的变化，MVVM框架自动把Model的变化映射到DOM结构上，这样，用户看到的页面内容就会随着Model的变化而更新。例如，我们定义好一个JavaScript对象作为Model，并且把这个Mo...
2019-06-17 14:34:22
663
1
原创 滑块验证码实现及原理
前言滑块验证码也是生活中常见的，本文会介绍如何实现以及原理。如果对图片验证码感兴趣的话可以查看这篇文章：图片验证码的实现方法实现滑块验证码主要用到几个属性:clientX,screenX,pageX,offsetX,如果对此有疑惑可以查看这篇文章：clientX,screenX,pageX,offsetX的区别代码的解释在注释中已经写的很清楚了，还不了解的欢迎留言。<!DOCTY...
2019-06-17 12:54:10
15942
2
原创 图片验证码的实现方法
前言图片验证码是我们日常经常用到的，本文将介绍如何实现以及其原理，并没有过多注重css样式（有些简陋）。实现主要是利用canvas画布加上随机字母，以及适当的旋转，移动，颜色。这一块主要利用的是css3的内容。对于代码看不懂的可以看注释，注释标注的很详细。<!DOCTYPE html><html lang="en"><head> <...
2019-06-17 12:45:58
16174
3
原创 clientX,screenX,pageX,offsetX的区别
前言关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊，然后自己写了几个demo算是弄明白了，在这记录一下。定义一、clientX、clientY点击位置距离当前body可视区域的x，y坐标。可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。二、pageX、pageY对于整个页面来说，包括了被卷去的body部分的长度...
2019-06-17 12:02:35
4572
2
原创 vue-router的详细介绍使用
什么是路由？路由，其实就是指向的意思。例如:当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。点击之后，怎么做到正确的对应，比如，我...
2019-06-16 19:16:14
4219
原创 编程思想：面向对象和面向过程
前言什么是面向对象？面向过程又是什么？对于这编程界的两大思想，一直贯穿在我们学习和工作当中。也许我们心里对这两个概念有个模糊的理解，却又说不出个所以然。一、面向过程首先我们来认识下，什么是面向过程？如果咬文嚼字的话可以这样来理解，面向过程就是面向解决问题的过程进行编程。仔细思考一下，我们在学习和工作中，当我们去实现某项功能或完成某项任务时，是不是会不自觉的按部就班的罗列出我们要做的事情？而当...
2019-06-16 12:32:01
295
原创 css3动画
什么是 CSS3 中的动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。@keyframes语法：@keyframes animationname {keyframes-selector {css-styles;}}通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，...
2019-06-16 10:55:38
621
原创 redis与mysql的区别和使用
区别类型redis是一个key-value存储系统,是nosql,即非关系型数据库,和memcached都是缓存数据库.mysql是关系型数据库存储redis用于存储使用相对频繁的数据到内存中,mysql用于存放持久化数据到磁盘中速度redis读取速度快mysql相对速度较慢数据类型redis数据类型:字符串类型（string），散列类型（hash），列表类型（li...
2019-06-13 12:19:00
5384
原创 连接MySQL报错：Client does not support authentication protocol requested by server
在使用nodejs连接MySQL报错：Client does not support authentication protocol requested by server; consider upgrading MySQL client大概意思是：客户端不支持服务器请求的身份验证协议;考虑升级MySQL客户端原因：将mysql升级到5.x版本后，用客户端登录时出现了 Client doe...
2019-06-11 09:03:23
1085
原创 nodejs连接mysql
nodejs连接mysql想要成为一个全栈工程师，自然需要会后端，那nodejs连接mysql就更不能不会了。首先安装sql依赖：npm i sql编写代码连接const mysql = require('mysql')// 创建链接对象const con = mysql.createConnection({ host: 'localhost', user...
2019-06-11 08:56:38
168
原创 TCP的三次握手与四次挥手
TCP的位置TCP工作在网络OSI的七层模型中的第四层——Transport层，IP在第三层——Network层，ARP在第二层——Data Link层；在第二层上的数据，我们把它叫Frame，在第三层上的数据叫Packet，第四层的数据叫Segment。数据从应用层发下来，会在每一层都会加上头部信息，进行封装，然后再发送到数据接收端。这个基本的流程你需要知道，就是每个数据都会经过数据的封装...
2019-06-09 19:35:21
114
原创 flex弹性布局：justify-content
定义和用法justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。默认值：flex-start继承：否可动画化：否版本css3JavaScript 语法：object.style.justifyContent=“space-between”...
2019-06-04 09:21:58
2236
原创 rem、em的区别与使用方式
前言我们先来看看比较重要的两点：rem与em的本质区别rem(root element)是参照html的font-size,em(element)是参照父元素的font-size使用rem与em的优点以rem/em为单位比px更方便,屏幕尺寸发生变化时只需要更改html/body基数即可,不需要再重新给每个标签写不同的font-sizerem使用rem为单位,系统处理...
2019-06-03 13:10:45
1403
原创 移动端 1px 像素问题及解决办法
移动端1px变粗的原因为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句<meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>...
2019-06-02 10:18:57
640
原创 理解设备像素比devicePixelRatio
定义window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips理解移动端的设备多种多样，不同的设备又有不同的分辨率，低一点的有 800 * 400，中等的有 1280 * 720，高的有 1920 * 108...
2019-06-02 09:18:44
6816
3
原创 vue2.x过渡(transition)与动画(animationend)
transitionVue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点示例：<div id="demo"> <button v-on:click="show = !show"> Toggle </butto...
2019-06-01 13:21:21
3535
原创 Vue.js 2.0 中#$on与$emit如何理解使用
先看看官方文档的解释vm.$on( event, callback )参数{string | Array} event (数组只在 2.2.0+ 中支持){Function} callback用法监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。示例vm.$on('test', function (msg)...
2019-06-01 10:16:35
739
用HTML+CSS+JS构建的电商网站页面平台（完整代码），web前端CSS入门项目 简易读懂，适合学生以及课程报告参考用
2024-06-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人