joker.ma-优快云博客

原创首次使用git遇到的问题总结

一、新建项目1、打开github 登录2、点击 Stat a project二、上传1、找到要上传的文件夹进入如果文件夹中没有.git文件夹（隐藏文件夹），则需要初始化输入 git init 回车2、状态信息展示输入 git status回车3、将修改添加到暂存区输入 git add . 回车（注意 . 与a...

2019-08-10 10:35:30 436

原创封装AJAX

import MainModel from "./mainModel.js";export default class AJAX { constructor() { this.oneBool = false; this.bindHandler = this.loadHandler.bind(this); this.xhr = new XM...

2019-08-10 10:25:02 248

转载 JS-案例-实现拖拽不出浏览器距边50px吸附

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> html,body{ margin: 0; pa...

2019-08-10 10:23:14 569

转载 Vue.config常用配置项

const path = require('path') module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 lintOnSave: false, // eslint-loader 是否在保存的时候检查 // see https://github.com/vuejs...

2019-08-10 10:18:56 1598

原创二次封装axios

import axios from "axios";import qs from "qs"import loading from "../lib/loading/index.js" let vm = loading()const server = axios.create({ // baseURL:"", timeout:5000, withCredenti...

2019-08-10 10:16:07 286

转载文本省略

p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） -webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上...

2019-08-10 10:14:29 161

原创 vue-案例-利用组件传值的todolist（todolist升级版）

效果图第一部分，填写信息，点击添加将信息在黄色框外显示（框内，框外是连个不同的组件）点击相应的信息行会变色（灰色）第二部分，点击某一信息行的修改按钮，将上方组件更换为修改信息组件并将相应的数据传递给上方的输入框中，修改数据，点击红色修改框内的修改按钮，将信息替换到相应的信息行的位置第三部分，不论是添加还是修改过程中只要点击删除按钮，就可以删除相应的一个信息行的信息。...

2019-07-30 17:08:47 511

原创单项数据流

什么是单项数据流举个小例子父组件App.vue给子组件绑定一个message属性传值1999父组件App.vue中的代码：<template> <div id="app"> <Home :num="message"/> </div></template> <script&g...

2019-07-27 15:22:09 392

原创组件中的data为什么是一个函数而不是一个对象

组件中的data为什么是一个函数而不是一个对象官方的解释为：通俗的讲就是：因为对象是一个引用数据类型，如果data是一个对象的情况下会造成所有组件共用一个data。而当data是一个函数的情况下，每次函数执行完毕后都会返回一个新的对象，这样的话每个组件都会维护一份独立的对象（data）...

2019-07-27 14:31:17 3844

原创 Vue-封装-$on $emit $off（封装事件订阅）

/* 事件池 eventList = { handle:[fn1,fn2,fn3] abc:[fn1,fn2,fn3] } || eventList = { } $on(eventName,callback) 判断当前事件名称是否存在，如果不存在则创建一个key值为事件名称 va...

2019-07-25 10:46:30 1280

原创 Vue-案例-todolist（二）

只写了能实现功能的部分，具体细节样式没有写完整代码如下在表单（一）的基础上进行修改，列表上边的按钮实现类似选项卡的效果，只写了能实现功能的部分，具体细节样式没有写完整代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...

2019-07-24 23:27:37 223

原创 Vue-案例-todolist（一）

只写了能实现功能的部分，具体细节样式没有写完整代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....

2019-07-24 23:22:50 329

原创 Vue-案例-实现简单的拖拽效果

自定义指令v-dragl 存在时只能横向拖拽t 存在时只能纵向拖拽l t都存在时可以任意方向拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...

2019-07-24 14:29:18 898

原创 Vue-案例-实现简单的选项卡效果

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="maximum-scale...

2019-07-23 14:12:33 506

原创什么是回流和重绘

什么是回流和重绘当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时候就会发生回流。每个页面都至少发生一次回流，也就是页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的元素部分失效，并重新绘制这个部分的渲染树，完成回流以后，浏览器会重新绘制受到影响的部分元素到屏幕中，这个过程就是重绘。什么时候会发生回流？1、添加或者删除可见的DOM...

2019-07-23 09:13:36 2070 1

原创 vue中vue-if与v-show的区别，以及使用场景

区别方式：v-show底层原理是操作元素的display属性，v-if底层是操控元素的创建/销毁编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载）...

2019-07-22 22:25:47 1579

原创 vue的全局API

vue的全局APIVue.extendVue.nextTickVue.setVue.deleteVue.directiveVue.filterVue.componentVue.useVue.mixinVue.compieVue.observableVue.version

2019-07-22 22:08:03 341

原创前后端的数据交互有哪些

前后端的数据交互有哪些数据交互的目的是什么？取：将数据渲染到dom文档中给：提交数据到后台后，后台会继续返回我们一个数据，拿到这个数据，然后渲染页面1、利用cookie前台通过登录来存储cookie后台通过req.cookies（）来获取存储的cookie信息2、利用Ajax在学习NodeJS之前最常用的前后端交互大都利用ajax 和JQuery中已经封装好的$.a...

2019-07-22 19:42:38 2410

原创关于登录验证

一、登录的验证流程当用户请求登录的时候，如果没有问题，我们在服务端生成一条记录，这个记录里可以说明一下登录的用户是谁，然后把这条记录的ID号发送给客户端，客户端收到以后把这个ID号存储在Cookie里，下次这个用户再向服务端发送请求的时候，可以带着这个Cookie，这样服务端会验证一个这个Cookie里的信息，看看能不能在服务端这里找到对应的记录，如果可以，说明用户已经通过了身...

2019-07-18 16:12:51 370

原创服务端渲染和客户端渲染的区别

服务端渲染和客户端渲染的区别概念服务端渲染（吐）服务端在返回html之前，在特定的区域，符号里用数据填充，再给客户端，客户端只负责解析HTML客户端渲染（填）html仅仅作为静态文件，客户端在请求时，服务端不做任何处理，直接以原文件的形式返回给客户端，然后客户端根据html上的JavaScript，生成DOM插入html。利弊服务端渲染客户端渲染 ...

2019-07-17 08:32:48 805

转载 application/x-www-form-urlencoded 数据序列化

表单提交表单有两种提交方式，POST和GET。通常我们会使用POST方式，一是因为形式上的安全；二是可以上传文件。我之前经常忽略掉表单的编码类型，觉得它特别长比较难记，而且不设置也似乎不影响什么。表单的编码类型，用来控制表单中的数据的编码格式。POST 提交方式默认 enctype=“application/x-www-form-urlencoded”，数据以键值对的方式传送到服务器，...

2019-07-15 22:07:11 2382

原创什么是模块化，模块化的好处是

什么是模块化，模块化的好处是？模块化是一种处理复杂系统分解为更好的可管理模块的方式。所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数。模块化开发使用代码耦合度降低，模块化的意义在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求。模块化的好处优点：a .可维护性1、灵活架构，焦点分...

2019-07-15 20:25:43 23774

原创什么是传统的DOM渲染方式

什么是传统的DOM渲染方式？（通俗的说就是浏览器的渲染方式是怎么渲染的？）分为以下五步，创建DOM树——创建样式表——创建render树——布局Layout——绘制Painting1、用HTML解析器，分析HTML元素，构建一颗DOM树。2、用CSS解析器，分析CSS文件和元素上的inline样式，形成页面的样式表。3、将DOM树和样式表，关联起来，构建一颗Render树（这一过程...

2019-07-15 18:23:13 737

原创 Object.assign

if(!Object.assign){ Object.assign1=function(){ if(arguments.length<2) return; for(var i=1;i<arguments.length;i++){ for(...

2019-07-15 10:45:03 94

原创寄生式组合继承

function Box(_f){ this.f=_f; } // 这样直接将原型指向一个对象,会将原有的constructor覆盖 Box.prototype={ a:1, b:function(){ this.a++; ...

2019-07-15 10:43:50 209

原创 JS---原型下的concat还原写法

<!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-...

2019-07-04 23:22:56 185

原创 JS----简单的柯里化写法

<!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...

2019-07-03 23:34:23 482

原创 JS--深复制

2019-06-29 08:56:51 108

原创 JS-案例-简单放大镜效果

封装js，主要用到ce 用来创建div的样式var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgL...

2019-06-28 12:38:56 283 1

原创 jQuery-案例-五星评价

用到的imgnpm i jquery 下载node_modules，引用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...

2019-06-25 23:36:03 384

原创 JS-案例-Promise简单实现信号灯效果

<!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-...

2019-06-20 08:58:42 516

原创 JS-案例-瀑布流懒加载

封装函数部分var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...

2019-06-13 17:05:11 271

原创 JS-案例-全js轮播图

图片预加载封装//Utils.js //封装预加载图片var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) {//图片地址回调函数 var img=new Image(); img.num=0;/...

2019-06-13 09:01:25 514

原创 JS-案例-跳动小球

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> class Ball{ ...

2019-06-10 23:25:37 852

原创 JS-案例-数组去重

//Plan1 var arr = [1, 3, 5, 2, 3, 5, 4, 6, 2, 3, 5, 2, 5, 3]; var arr1 = []; for(var i = 0; i < arr.length; i++) { var bool = true; console.log(arr[i]); for(var j ...

2019-06-05 17:14:36 248

原创 JS-案例-随机点名

第一种，点击一次鼠标，输出一个name<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:...

2019-06-05 12:15:44 505

原创 JS-案例-div随机位置（随机颜色）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head> <style> div{ width: 100px;...

2019-06-05 12:01:31 6033

原创 JS-案例-div自动右下左上移动（随机变色）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{margin:0;padding:0;} div{ ...

2019-06-05 11:43:21 865

原创 JS-案例-点击div使其随机变色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div0{ width: 100px; ...

2019-06-05 11:21:52 2954 1

原创 JS-案例-input中鼠标选中英文转大小写

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" name="user" id="user"/...

2019-06-05 08:36:03 192

空空如也

空空如也