- 博客(66)
- 收藏
- 关注
RSS订阅转载 this.$router.push、replace、go的区别
keep-alive用法keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素用户每次进入页面都会发起一个请求，这样对网页性能优化是不利的，那怎样可以避免这种情况呢？vue推荐在组件上面包裹一层keep-alive组件，如下：//App.vue<template> <di...
2019-08-14 11:25:39
182
原创 vue中路由传参
vue中路由传参使用router-link进行路由导航，传递参数父组件中使用标签进行导航//child是子页面路由路径，123是需要传递的参数<router-link to="/child/123">click</router-link>子组件中使用this.$route.params.num来接收路由参数<template> <...
2019-08-13 15:59:19
162
转载 JavaScript 执行机制
这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：javascript是按照语句出现的...
2019-07-09 14:33:42
143
原创 记一次笔试题
1.filter方法filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意： filter() 不会对空数组进行检测。如果没有符合条件的元素则返回空数组。注意： filter() 不会改变原始数组。var a = [0,1,2];a[10]=10;console.log(a); //(11) [0, 1, 2, empty × 7, 10]...
2019-04-16 21:25:34
164
原创 less
一、Less Css定义：Less Css是一种动态样式语言，属于css预处理语言的一种，它类似css的语法，为css丰富了动态语言的特性，如变量、继承、运算、函数，更方便css的编写的维护。Less Css可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务器端。二、编译工具：koala编译：可以开发LESS\SASS的编译工具下载地址：http://koala-app.com/...
2019-04-15 21:42:24
134
原创 移动端适配
一、移动端为什么要做适配移动端大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者需要考虑横竖屏的问题，此时就要解决在不同手机上，不同情况下的展示效果了。另外一点，UI一般给的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑），这时候开发人员就要针对这一份设计稿，让其在不同屏幕宽度下显示一致。...
2019-04-15 18:57:02
132
原创 Media Query（媒介查询）
一、媒体类型all 所有媒体screen 彩屏设备print 用于打印机和打印预览speech 应用于屏幕阅读器等发声设备braille 应用于盲文触摸式（已废弃 ）embossed 用于打印的盲人印刷设备（已废弃 ）projection 用于投影设备（已废弃 ）tty 不适用像素的设备（已废弃 ）tv 电视（已废弃 ）二、关键字and 并且 连接条件not 用...
2019-04-15 14:19:56
714
转载 ES6 模块与 CommonJS 模块的差异
ES6 模块与 CommonJS 模块的差异讨论 Node 加载 ES6 模块之前，必须了解 ES6 模块与 CommonJS 模块完全不同。它们有两个重大差异。CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。 CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。第二个差异是因为 CommonJS 加载的是一个对象（即module.expor...
2019-04-08 19:01:47
129
转载 RESTful API 最佳实践
RESTful是目前最流行的 API 设计规范，用于 Web 数据接口的设计。它的大原则容易把握，但是细节不容易做对。本文总结 RESTful 的设计细节，介绍如何设计出易于理解和使用的 API。一、URL 设计1.1 动词 + 宾语RESTful 的核心思想就是，客户端发出的数据操作指令都是"动词 + 宾语"的结构。比如，GET /articles这个命令，GET是动词，/ar...
2019-04-08 10:15:22
98
转载 express与koa对比
使用体验koaconst Koa = require('koa');const app = new Koa();app.use(ctx => { ctx.body = 'Hello Koa';});app.listen(3000);expressconst app = require("express")();app.use((req,res,next)=>{...
2019-04-07 22:17:09
712
转载 vue面试常见问题
一、对于MVVM的理解？MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，Vi...
2019-04-05 21:58:15
120
原创 浅析Vuex
vuex的定义Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（数据管理仓库） 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。状态自管理应用包含以下几个部分：state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化。Vuex 可以帮助我们管理共...
2019-04-04 16:49:45
185
转载 js中的事件委托或是事件代理详解
js中的事件委托或是事件代理详解起因：1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思...
2019-04-02 10:58:17
114
转载 vue中 key 值的作用
1 .index值不是一定不变的，如果不加key值的话，删除前面的项。后面的index可能变也可能不变，比如加个定时器的时候会变，不加定时器不会变2 .不加key的话，更新机制的进行diff的时候是会全部比较的，比如删除第一个的话，后面的元素其实都不一样，会一项一项的比较。然后全部元素都替换，没有做到最小更新。而且里面的传的值也会变，如果这个时候你要根据里面的值删除元素的话，就会出错，尤其是加了...
2019-04-01 22:55:49
6621
原创 三列布局
方法一：flex<style type="text/css"> * { margin: 0; padding: 0; } .container{ display: flex; min-height: 300px; } .main{ flex-grow: 1;/* //flex-grow属性定义项目的放大比例，默认为...
2019-04-01 21:58:37
233
原创 左边固定右边自适应
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>左边固定右边自适应</title> ...
2019-04-01 21:49:04
208
原创 动态的前后端的数据交互
方法一：jsonpJSONP原理：浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就可以很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特点来实现的，当向第三方站点请求时，我们可以将此请求放在//数据渲染：function getData(dat...
2019-04-01 19:51:49
409
原创 vue-router
vue-routerVue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。Vue.js 路由需要载入 vue-router 库.安装1、直接下载 / CDNhttps://unpkg.com/vue-router/dist/vue-router.js2、NPM...
2019-04-01 11:05:56
119
原创 vuejs给组件绑定原生事件:
vuejs给组件绑定原生事件:<div id='root'> <child @click.native='handleClick'></child></div><script>Vue.component('child',{ template:'<div>hello</div>'})var vm...
2019-04-01 10:42:32
421
原创 单向数据流
单向数据流数据从父组件流向（传递）子组件，只能单向绑定，在子组件内不应该修改父组件传递过来的数据。改变prop的情况：1.作为data中局部数据的初始值使用；2.作为子组件中的computed属性；<body> <div id="app"> <h3>父组件用了count</h3> <p>{{count}}<...
2019-03-31 20:00:09
303
原创 vue生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。 beforeCreate:在实例初始化之后，数据观测 (data observer) 和 even...
2019-03-31 19:43:43
126
原创 几种常见UI框架
ElementUI介绍：Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库链接：https://element-cn.eleme.io/#/zh-CNMint UI介绍：基于 Vue.js 的移动端组件库链接：https://mint-ui.github.io/#!/zh-cnMui介绍：最接近原生APP体验的高性能前端框架（不是基于VU...
2019-03-31 17:13:06
2961
原创 vue全家桶
vue全家桶vue vue-cli axios vue-router vue-vueXvue-cli 脚手架 一个基于vue的构建工具 搭建vue项目的环境 好处 兼容 方便 快速 可以不用 脚手架（vue-cli） 就可以基于 webpack 打包工具 ，要自己去进行配置...
2019-03-31 17:08:14
469
原创 vue学习笔记
VueJS框架一、 插件或框架的好处 从久远的时代到现在，我们的网页更加动态化与强大，大家在学习的过程中，发现或了解过很多很多的插件或框架，用过的都知道，方便、快速、重用性高、维护成本低、兼容性好、稳定性强 这些插件或框架的出现，是因为JavaScript的强大，在之前我们开发大型的项目，由于业务逻辑非常复杂，html网页结构累赘，css样式庞大，造成了资源的浪费，性能低下，体验差，开发...
2019-03-31 17:04:19
132
原创 MVVM和MVC和MVP
MVC(Model View Controller)View 传送指令到 Controller Controller 完成业务逻辑后，要求 Model 改变状态 Model 将新的数据发送到 View，用户得到反馈MVC有两个很明显的问题：1.m层和v层直接打交道，导致这两层耦合度高2.因为所有逻辑都写在c层，导致c层特别臃肿MVP (Model-View-Pre...
2019-03-31 16:19:32
178
原创 HTTP是什么
1、概述HTTP全称是HyperText Transfer Protocal，即超文本传输协议，从1990年开始就在WWW上广泛应用，是现今在WWW上应用最多的协议，HTTP是应用层协议，当你上网浏览网页的时候，浏览器和web服务器之间就会通过HTTP在Internet上进行数据的发送和接收。HTTP是一个基于请求/响应模式的、无状态的协议。即我们通常所说的Request/Response...
2019-03-30 09:24:53
1999
原创 浏览器缓存机制详解
浏览器缓存机制详解什么是浏览器缓存：简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果...
2019-03-29 20:27:08
138
原创 transform、animation、transition
transform（CSS3 2D 转换）通过 CSS3 转换，我们能够对元素进行移动（translate()）、缩放、旋转（rotate()）、缩放（scale()）或倾斜（skew()）、矩阵变形matrix（）。translate() 方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。例： transla...
2019-03-29 19:59:54
101
原创 BFC
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。BFC布局规则：1.内部的Box会在垂直方向，一个接一个地放置。2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠3.每个元素的margin box的左边， 与包...
2019-03-28 14:18:28
122
原创 koa
koaKoa是基于Node.js平台的下一代web开发框架，通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。安装Koa 依赖 node v7.6.0 或 ES2015及更高版本和 async 方法支持。$ nvm install 7$ npm i koa$ no...
2019-03-26 16:15:55
134
原创 async 函数
async 函数含义ES2017 标准引入了 async 函数，使得异步操作变得更加方便。async 函数是 Generator 函数的语法糖。什么是语法糖？意指那些没有给计算机语言添加新功能，而只是对人类来说更“甜蜜”的语法。语法糖往往给程序员提供了更实用的编码方式，有益于更好的编码风格，更易读。不过其并没有给语言添加什么新东西。反向还有语法盐：主要目的是通过反人类的语法，让你更...
2019-03-24 14:51:14
574
原创 Iterator
Iterator概念迭代器是一种接口、是一种机制。为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用有三个：为各种数据结构，提供一个统一的、简便的访问接口；使得数据结构的成员能够按某种次序排列；主要供for...of消费。Iterator本质上，就是一个指针对象。...
2019-03-24 11:01:59
386
转载 Symbol
Symbol为啥需要SymbolES5里面对象的属性名都是字符串，如果你需要使用一个别人提供的对象，你对这个对象有哪些属性也不是很清楚，但又想为这个对象新增一些属性，那么你新增的属性名就很可能和原来的属性名发送冲突，显然我们是不希望这种情况发生的。所以，我们需要确保每个属性名都是独一无二的，这样就可以防止属性名的冲突了。因此，ES6里就引入了Symbol，用它来产生一个独一无二的值。Symb...
2019-03-24 10:08:03
112
转载 Set 和 Map 数据结构
Set 和 Map 数据结构Set基本用法ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.l...
2019-03-24 10:07:16
134
转载 对象的扩展
对象的扩展属性的简洁表示法ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};方法也可以简写。const o = { method() { return "Hello!"; ...
2019-03-24 10:05:50
132
转载 Promise和Reflect
Promise概念Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所`Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。特点对象的状态不受外界影响。一旦状态改变，就不会再变，任何时候都可以得到这个结果。状态Promise对象代表一个异步操作，有三种状态：pending（进行中）、f...
2019-03-24 10:03:28
317
转载 Proxy
Proxy概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”，即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。var obj = new ...
2019-03-24 10:02:01
121
转载 变量的解构赋值
数组的解构赋值基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。es5一次声明多个变量var a = 1, b = 2, c = 3, ...;es6一次声明多个变量let [a,b,c] = [1,2,3];//a = 1//b = 2//c = 3本质上，这种写法属于“模式匹配”，...
2019-03-22 21:35:24
196
原创 let命令
let命令基本用法跟使用es5的var一样BUT不存在变量提升var会存在变量提升现象，let和const则不会有这种情况暂时性死区 简称 TDZ只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError l...
2019-03-22 16:22:32
139
原创 关于浏览器的那些事儿
一、五大主流浏览器及内核IE tridentchrome webkit/blinksafair webkitfirefox geckoopera presto二、浏览器历史1. 1990年蒂姆 伯纳斯 李 开启超文本分享资讯 world wide web 移植到...
2019-03-05 15:52:26
143
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人