- 博客(45)
- 收藏
- 关注
RSS订阅原创 vue的model选项
今天在看vue-property-decorator时，遇到了@Model选项，也就是vue2.2中新增的实例model选项。原来只知道v-model属性实现双向绑定，对这个model选项突然不是很理解。所以这里重新对v-model和自定义组件的v-model做一个回顾，加深印象后，再去理解model选项到底是做什么的，有什么作用。vue中的v-model指令实现了表单的双向...
2019-05-15 15:01:08
29572
12
转载 safari返回后页面不刷新的解决问题
这几天在开发项目时，遇到的一个问题：1.自己封装了按钮组件，文字有3个状态，点击前，点击中，点击后。2.在购买商品页面，初始化了购买按钮，点击购买时，文字从‘购买’ -> ‘正在购买’ -> ‘购买成功’，再跳转到其他页面3.点击浏览器的返回，在chrome里面按钮会重新渲染初始化，显示‘购买’；在safari中仍然显示‘购买成功’初步认为safari的返回页面没有刷新...
2019-05-10 10:30:34
4266
2
原创 Vue.nextTick的理解
官网说明：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。原理：当我们在一个Vue实例里面更新绑定的数据时，也就是data里面的值，可以分为两种情况，同步更新和异步更新。这里说下同步和异步，js是单线程的，从上至下执行到同步那里的代码时，数据就发生变化。当执行异步时，运行机制是：1.所有的同步都是在主线程上执行，形成一个执行栈2.主...
2019-04-28 14:42:26
384
转载 CSRF介绍和防御
CSRF（Cross Site Request Forgery, 跨站域请求伪造）是一种网络的攻击方式。CSRF 攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点，从而在并未授权的情况下执行一些需要认证身份的操作。举例说明，比如现在存在正常需要访问的A网站，黑客的B网站，和用户C。要完成一次CSRF攻击，用户需要完成两步：1.登录受信任网站，并在本地生成Cook...
2019-04-25 15:44:42
2118
转载 前端web登录
了解为啥要登录我们知道HTTP是无状态的协议，就是在两次请求之间服务器不会保存任何的数据。所以，登录就是用某种方法让服务器在多次请求之间能够识别出你，而不是每次请求的时候都带上用户名和密码这样的信息。从登录成功到登出的这个过程，服务器一直维护了一个可以识别出用户信息的数据结构，广义上来说，这个过程就叫做session，也就是保持了一个会话。常见的两种登录方式:服务端session + ...
2019-04-24 18:41:33
3223
转载 js函数柯里化
最近在学习js的路上，遇到函数柯里化相关的内容，这里记录下自己的理解：首先，什么是柯里化？函数的柯里化，就是把一个接收多个参数的函数，转化成可以接收单一参数的函数。举个简单的栗子：// 一个接收两个参数的函数，实现加法function add(a, b){ return a+b;}add(1,2);// 转化成接收一个参数function add(a){ ...
2019-04-24 17:23:46
713
转载 多行文本省略
1.单行文本省略css代码：p{ width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }2.多行文本省略，效果：css代码：.box{ width: 100px; display: -webkit-box; ...
2019-04-23 14:39:47
1920
原创 beforeRouteLeave在子组件中没有生效
考虑这么一种情况，在页面中存在父子组件，当需要离开当前页面时，要触发某个子组件中的事件。这里尝试了两种方式：1.添加路由守卫在子组件的.vue文件中，使用beforeRouteLeave钩子，然而并没有触发。debug测试发现，在父组件中添加的beforeRouteLeave可以触发。2.使用beforeDestory钩子子组件使用beforeDestory钩子，当离开页面时，...
2019-04-10 14:36:20
16640
3
转载 js关闭页面提示Scripts may close only the windows that were opened by it
在页面中触发window.close()，页面没有按照预期那样关闭，控制台提示警告：Scripts may close only the windows that were opened by it意思是脚本只能关闭通过脚本打开的页面，当我们在浏览器地址栏输入URL打开页面，是不会通过window.close()关闭的网上找到的解决方法，亲测有效：function closeP...
2019-03-13 17:36:16
25396
16
转载 php的魔术方法__call()和__callStatic()方法
1.__call()方法：<?phpclass Test{ public function __call($method, $arg){ echo '调用了不存在的'.$method.'方法<br/>'; echo '还传了一个参数<br/>'; echo print_r($arg).'<br/&...
2019-03-13 11:34:29
272
原创 HTTP 400错误
向后端发送ajax请求时，当出现http 400错误-请求无效（bad request）；首先，请求没有进入到后端的服务里，问题一般出现在前端代码里：1.前端提交的数据字段名称和后端获取的不一致2.前端提交的数据类型，和Content-Type中设置的类型不符，应该是json字符串，但是传的是json对象开发中常见的小坑，这里记录一下~...
2019-03-12 17:26:23
4291
转载 常见的POST提交数据方式
HTTP的请求方法POST是再常见不过的了，这里详细地说明四种常用的提交数据方案，巩固下基础。在说POST之前，先看下HTTP请求的结构，分为三个部分：状态行、请求头、消息主体<method> <request-URL> <version><headers><entity-body>我们在代码中，通过new一个XMLH...
2019-03-12 17:21:27
9485
转载 获取Express路由参数
express的路由文件中，需要获取路由参数，例如获取指定的某个学生信息，/student/id，如何在回调里面获取呢？router.get('/student/:id',function(req, res, next){ })使用req.params方法router.get('/student/:id',function(req, res, next){ va...
2019-03-12 16:38:37
2426
2
转载 jquery中的prop和attr
上周在做业务时，遇到的一个小问题，根据后台传的值，初始化表单页面的状态，在设置下拉列表的选中值时，有些没有生效。$("#card_type").attr('selected','selected');后面改成了$("#card_type").prop('selected',true);找了下两者的区别，这里记录下： 对于checkbox,select这类的标签，...
2019-03-04 10:55:28
591
原创 php的延迟静态绑定static
在公司学习laravel框架过程中，慢慢也在学习php这门后端语言，经常会遇到一些新的知识点，做下记录，加深印象。首先，延迟静态绑定，适用的对象是类中的静态属性或者静态方法。class A{ static $name = "Tom"; public function printName() { echo self::$name.'\n'; ...
2019-03-04 10:33:01
501
原创 项目实战中使用SVG的记录
项目实际开发时，当需要用到小图标，比如分类、选项侧边的icon、以及tab切换的icon，可以考虑使用SVG来显示。关于SVG的优点和缺点就不分析了，这里只是记录如何使用。上图是一些SVG图标，那么该怎么用到我们的项目中去呢？首先我们先选择一个SVG图标，拖到浏览器中去显示，右键显示网页源代码，应该是类似下面这样的内容：这就是所选择的SVG图标的代码了，我们拷贝代码，放到项目的...
2018-10-24 16:24:31
1252
原创 && ||的使用
在js中经常会用到&&和||进行赋值操作，例如在获取返回值时，var data = res.data || res获取res.data的值，如果res.data存在就直接返回res.data，否则返回res&&的作用:var a = 1 && 0; // 0var a = 1 && 2; // 2如果&...
2018-10-21 22:55:03
356
原创 理解async和await 和其他异步操作
在学习wepy做小程序开发时，经常看到.wpy文件中会声明异步函数，于是专门去找了这块儿的东西看了看。结合之前使用的promise，写一下自己的理解：之前做异步操作时，比较常用promise和then()，由于then()返回的仍然是priomise对象，所以这是一种链式的书写方式。例如当我写一个请求时：import axios from 'axios'function send...
2018-10-13 16:58:32
291
原创 Can't set headers after they are sent
在学习express时，使用多个中间件，报错Can't set headers after they are sent。原因是当在一个callback中res.xxx（res.render、res.send）后，也就是响应了请求之后，后面的callback继续res.xxx，导致报错。 ...
2018-10-13 16:56:50
744
原创 vue无限滚动插件使用记录
今天在看前同事做的项目时，了解到一款可以实现无限加载的vue插件vue-infinite-loading具体实现后的效果就是，当你在下拉一个菜单时，当下拉一定数量时，有一个加载等待的效果，然后再继续显示。并且利用插槽slot实现获取菜单完成后的提示。贴上链接：https://peachscript.github.io/vue-infinite-loading/#!/现在，我们通过一个简单的...
2018-09-28 21:27:14
1600
原创 Object的一些方法记录
今天在和一个腾讯出来的面试官聊天，被问到了几个关于对象和原型的基础问题。用的比较少，所以有些知识就忘记了，晚上重新温故一下。1.如何获取一个对象的原型对象，或者重新设置一个对象的原型对象？第一反应想到的是通过_proto_来获取，重新指向新的对象。然而，这个是现代浏览器提供的一个指针对象，而JS提供了这样的方法Object.getPrototypeOf(obj)和Object.setPro...
2018-09-18 21:48:15
199
转载 vue移动端的适配rem和vw记录
在接触移动端开发的时候，适配是必须要解决的一个问题。个人在开发过程中，也是边做边学，使用了一些常用的解决方案，这里一一列举出来：前提：移动端的适配更多关注的是宽度的适配，也就是说元素在不同设备上通过改变自身宽度来实现在页面的比例一样，这样布局就不会乱掉1.百分比代替px在最开始做移动端页面时，能想到的只有使用百分比，简单直接 <style> bod...
2018-09-17 22:48:34
1886
原创 原生ajax和jQuery中的ajax使用
Ajax是一种能够向服务器请求额外的数据而不需刷新页面，会带来更好的用户体验。Ajax技术的核心是XMLHttpRequest对象。IE7及现在浏览器中，使用原生XHR创建：var xhr = new XMLHttpRequest();ajax请求有两种，同步请求和异步请求，在open()中第三个参数设置是否异步(true代表该次请求异步，false代表同步)同步请求时，代码必须等待请...
2018-09-17 22:00:35
160
原创 web存储
常见的web存储主要有cookie、sessionstorage、localstorage三个，这里分别记录三者的用法以及区别1.cookie每次http请求都会在请求头cookie中发送到服务器，比如我们打开csdn时，在控制台找到一个XHRcookie是有大小限制的，差不多4KB，当超过这个最大尺寸限制，该cookie会被默认丢掉。cookie有几个信息组成：名称、值、域、...
2018-09-16 18:20:50
723
原创 js中的事件委托
最近面试的过程中，经常被问到这个问题，那么这里记录一下，加深印象。在使用js中的事件时，比如click、focus、mouseenter、mouseover等等常用的事件，我们知道这么给一个元素添加事件监听：var btn = document.getElementById('myButton');// DOM0级添加事件btn.onclick = function(e){ /...
2018-09-14 23:48:39
294
原创 js中的浅拷贝和深拷贝
谈浅拷贝和深拷贝之前，先了解js中的值类型，我们知道的类型有Number、string、Array、Boolean、Object、null、undefined、Function，其中基础类型包括Number 、string、Boolean、null、undefined，他们是按值访问的，我们可以直接操作保存在变量中的值。引用类型包括Array、Object、Function，他们的值是存在堆内存中...
2018-08-31 23:07:58
182
原创 vue的异步组件
在使用vue做单页应用或大型的网站时，随着功能的增多，组件文件也会随着增加，如果在第一次运行应用时，就加载所有的组件，就会造成性能影响，导致打开时间很长。在实际开发中，一个应用都是多个小组件组成的，对于一些非核心组件，不是立刻就需要加载的内容，就可以使用异步组件。vue允许使用一个工厂函数定义组件，这个工厂函数会异步解析组件。只有在这个组件被渲染的时候，才会触发这个工厂函数，且会把结果...
2018-08-21 21:13:38
1524
原创 vue中static文件夹
使用vue-cli创建项目时，发现文件结构中有一个叫做static的文件夹。图片一类的静态文件，应该放在这个static文件夹下，这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径，就可以访问这些静态文件了例如在head.vue组件中使用图片时：...
2018-08-15 16:19:02
24555
1
原创 Array的几种常用的遍历方法
forEach、map、filter、every、some五个常用的数组方法,用于处理数组中子项1.forEach()方法用于调用数组的每个元素，并将元素传递给回调函数array.forEach(function(currentValue, index, arr), thisValue)参数描述：currentValue：必需，当前元素index：可选，当前元素的索引值ar...
2018-08-14 11:41:42
3860
转载 webpack使用extract-text-webpack-plugin打包时提示错误
最近使用webpack打包时，报了一个extract-text-webpack-plugin的错误，查找了一下，原来是extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。在package.json里面看下，果然我使用的webpack版本是v4.16.3，extract-text-webpack-plugin默认安装到的版本是v3.0.2报错信息：...
2018-08-06 14:26:00
3581
1
原创 webpack生产环境和开发环境的配置
最近在做公司游戏预约页面的时候，在配置webpack的时候，忽略了生产模式切换，导致开发过程中有些痛苦，当改动样式或者某个插件配置时，本地server要等待编译很久才生效。用了很久的webpack做开发，之前一直没太在意，现在特地整理下，也为以后做项目更加规范吧。在配置前，还是先了解下生产环境和开发环境有哪些区别，知道这些后，才知道我们到底要做些什么开发环境(development)和生产...
2018-08-05 21:31:14
6590
转载 vue组件中样式的scoped属性
在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，这是一个非常好的举措一个公共组件button，为了样式模块化，给其加上scoped属性//button.vue<template> <div class="button-warp"> <button class="...
2018-07-31 23:13:39
653
转载 修饰符sync
sync修饰符只是作为一个编译时的语法糖存在，会被扩展为一个自动更新父组件属性的v-on监听器<child-component :foo.sync="bar"></child-component>会被扩展为：<child-component :foo="bar" @update:foo="val => bar = val"><
2018-07-31 22:46:42
169
转载 vue2使用bus.js进行兄弟组件通信
前言，父子组件中可以用props和$emit()如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，在相互通信的兄弟组件之中，都引入Bus，之后通过分别调用Bus事件触发和监听来实现组件之间的通信和参数传递创建一个bus.js文件，导出一个vue的实例import Vue from 'vue'export default new Vue()接下来就是要组...
2018-07-31 20:40:22
339
转载 router.push()
除了使用<router-link>创建a标签来定义导航链接，还可以借助router的实例方法，使用router.push方法。当点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link :to="...">等同于调用router.push(...)该方法的参数可以是一个字符串路径，也可以是一个描述地址的对象 r...
2018-07-30 19:58:33
1629
转载 vue-cli的坑 Invail CSS after load the style
在使用scss时需要添加loader，例如{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader'],}然而在使用vue-cli脚手架创建项目的时候，可能会出现报错：Invalid CSS after "...load the styles": expected 1 selector or at-r...
2018-07-30 19:56:01
3010
转载 理解javascript中的class
转载自https://segmentfault.com/a/1190000008338987在 ES6 规范中，引入了 class 的概念。使得 JS 开发者终于告别了，直接使用原型对象模仿面向对象中的类和类继承时代。但是JS 中并没有一个真正的 class 原始类型， class 仅仅只是对原型对象运用语法糖。所以，只有理解如何使用原型对象实现类和类继承，才能真正地用好 class...
2018-07-30 19:50:36
1615
转载 js单例模式及应用场景
单例模式单例就是保证一个类只有一个实例，实现方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。单例模式的思路：一个类能返回一个对象的引用（并且永远是同一个）和一个获得该实例的方法（静态方法，通常使用 getInstance 名...
2018-07-27 15:08:14
6136
转载 原型链中Object Function 实例关系
每个函数对象都有一个显示的prototype属性，指向了对象的原型（Function.prototype函数对象是个例外，没有prototype属性）__proto__:每个对象都有一个名为__proto__的内部隐藏属性，指向于它所对应的原型对象(chrome、firefox中名称为__proto__，并且可以被访问到)。原型链正是基于__proto__才得以形成(note：不是基于函数对象...
2018-07-26 19:49:45
920
2
原创 js中的原型链和继承
js中将原型链作为实现继承的主要方法，基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。先来捋清楚一下实例、构造函数、原型三者的关系：定义一个构造函数：function Test() { //some code} var a = Test();实例a是一个obj对象，在js中所有对象都有一个隐藏属性_proto_，通过a._proto_可以访问到...
2018-07-26 14:26:59
277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人