猪皮惡霸-CSDN博客

原创表单绑定

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span{ margin-right: 30px;}</style&g

2021-02-20 16:30:10 88

路由懒加载组件异步加载在需要的时候再加载路由对应的组件可以把组件分组打包 /* webpackChunkName: “about-group” */{ path: '/about', name: 'About',// 命名路由 // component: 在路由匹配的时候，执行这里的函数加载对应的组件 component: () => import(/* webpackChunkName: "about-group" */ '../views/About.vue')}

2021-02-20 16:29:17 161

原创路由传参及跨域

router.jsimport Box from './views/Box.vue'{ path: '/box', name: 'box', component: Box component: ()=>{ import('./views/Box.vue) } 异步路由 components: { default: ()=>{ import('./views/Box.vue) }, a: ()=>{ import('./views/Box1.vue)

2021-02-20 16:28:53 345

原创 vuex全局状态管理

vuex全局状态管理多组件之间共享状态（多组件之间共享数据）单向数据流，组件内部只能使用，不能修改当全局状态发生改变，所有使用此状态的组件都改变vuex和localStorage的区别？vuex存储的数据在内存中localStorage的数据以文件形式存储在本地当我们刷新页面时vuex的数据将会丢失localStorage的数据不会丢失vuex用于多组件之间共享数据localStorage用于多页面之间共享数据但是！！vuex为数据响应式！！数据变 -> 视图变（d

2021-02-20 16:27:54 244

原创 vue基本指令详解1

class绑定<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style></head><

2021-02-20 16:27:31 61

原创 vuex、辅助函数、守卫

vuex 全局状态管理多组件间共享数据任意一个组件改变状态，其他组件也跟着改变如何使用vuex安装 npm i vuex -Simport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { msg: 'hello', phone: 13422223333 }, mutations: { changeMsg (state

2021-02-20 16:27:09 86

原创守卫、组件过渡动画、混入mixin、事件修饰符

mapState 和 mapGetters 映射到组件计算属性中mapMutations 和 mapActions 映射到组件的methods中方便操作导航守卫导航->路由正则发送改变 /home -> /todo路由拦截全局前置守卫 // 可以拦截到所有路由的变化，一般用在main.js中进行拦截 router.beforeEach((to,from,next)=>{ // to 将要进入的目标路由信息对象 // from 从哪里来的路由信息对.

2021-02-20 16:26:25 162

原创打包上线、图片模块化

打包上线npm run serve启动一个web服务器自动打包（开发环境的包，在内存中运行，不会生成实际文件）启动后自动打开浏览器添加 --open 命令npm run build构建一个生成环境的包(上线的代码)js css文件名添加哈希值的作用：解决缓存问题vue.config.js中的配置项：publicPath 配置公共资源的路径js css引入路径问题，默认打包出来的是 ‘/’ 根目录(需要部署在服务器根目录)js css引入使用使用相对路径 ‘./’ (部署在服

2021-02-20 16:25:19 148

原创 axios.js封装

import axios from 'axios'const baseURL = 'http://localhost:8080'const version = '/api/v1'// 创建一个axios实例const instance = axios.create({ baseURL: baseURL+version, timeout: 7000, headers: {}})// 封装请求拦截器instance.interceptors.request.use(f

2021-02-20 16:24:36 254

原创 vue生命周期

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style><script> // var bo

2021-02-20 16:24:03 52

原创 vue基本指令

前端框架3架马车anguler 谷歌 m(model模型)v(view视图)c(controller控制器) 数据双向绑定react facebook(非死不可) view视图层的框架虚拟domvue 尤雨溪 mvvm mv* 数据双向绑定+虚拟domvue是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架vue的优势入门简单运行效率高（虚拟dom，减少dom操作）开发效率高（组件化开发）将开发者的精力从操作dom解放出来，主要关注

2020-11-16 22:49:38 117

原创 git详解

什么是git + 官方名称:分布式版本管理器 + 我们自己管理代码文件夹的问题 -->在原来的代码修改,一旦出问题,想回到前一个正常的功能比较麻烦 -->手动保存多个版本,版本一多,分不清楚了 + 私人解释:就是一个管理我们的文件的工具 -->可以保留所有的版本信息 + 就是我们安装一个软件

2020-11-16 22:44:33 112

原创 sass

SASSSASS官网世界上最成熟、最稳定、最强大的专业级CSS扩展语言！sass 是一个 css 的预编译工具也就是能够更优雅的书写 csssass 写出来的东西浏览器不认识依旧是要转换成 css 在浏览器中运行这个时候就需要一个工具来帮我们做安装 sass 环境以前的 sass 需要依赖一个 ruby 的环境现在的 sass 需要依赖一个 python 的环境但是我们的 node 强大了以后，我们只需要依赖 node 环境也可以

2020-11-16 22:32:10 110

原创 gulp

GULPgulp 是一个项目开发的自动化打包构建工具基于 node 环境来运行的什么是自动化打包构建工具比如我们在开发的过程中，会写到 js 文件，css 文件，等等我们的项目如果想上线，那么一定要体积小一点，文件大小越小越好而我们在写 js 文件的时候，会有很多换行/空格之类的东西这些换行/空格都是占文件体积的一部分那么我们在上线之前就要吧这些换行/空格尽可能的删除掉我们又不能一个文件一个文件的去删除就要用到一个自动化工具来帮助我们把这些多余的东西干掉这个

2020-11-16 22:30:34 104

原创 nodejs

NODEnode官网node中文网什么是 nodeNode.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。这个是 node 官网的解释其实 node 就是用 javascript 语言写后端也就是说，我们的 javascript 有了 node 以后，不光是一个前端语言，也是一个后端语言

2020-11-16 22:29:38 122

原创 jquery-ajax

发送 ajax 请求发送 get 请求// 直接使用 $.get 方法来发送一个请求/* 参数一：请求地址参数二：请求时携带的参数参数三：请求成功的回调参数四：返回的数据类型*/$.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')发送 post 请求// 直接使用 $.post 方法来发送一个请求/* 参数一：请求地址参数二：请求时携带的参数参数三

2020-11-16 22:28:27 83

原创 jquery2

jQuery元素操作创建一个元素var div = $('<div></div>')内部插入元素// 向 div 元素中插入一个 p 元素，放在最后$('div').append($('<p></p>'))// 把 p 元素插入到 div 中去，放在最后$('<p>hello</p>').appendTo($('div'))// 向 div 元素中插入一个 p 元素，放在最前$('div').prepe

2020-11-16 22:26:46 129

原创 jquery

Map 和 SetMap 和 Set 是 ES6 新增的两个数据类型都是属于内置构造函数使用 new 的方式来实例化使用Set使用方式就是和 new 连用const s = new Set()console.log(s)/* Set(0) {} size: (...) __proto__: Set [[Entries]]: Array(0) length: 0*/就是一个数据集合我们可以在 new 的

2020-11-16 22:25:25 95

原创设计模式

设计模式设计模式是我们在解决问题的时候针对特定问题给出的简洁而优化的处理方案我们有很多的设计模式单例模式组合模式观察者模式…今天我们就聊一下这三个设计模式单例模式 / 组合模式 / 观察者模式单例模式什么是单例模式呢？我们都知道，构造函数可以创造一个对象我们 new 很多次构造函数就能得到很多的对象单例模式：就是使用构造函数实例化的时候，不管实例化多少回，都是同一个对象也就是一个构造函数一生只能 new 出一个对象也就是说，当我们使用构造函数，每一次

2020-11-16 22:24:09 120

原创闭包和继承

闭包闭包是我们函数的一种高级使用方式在聊闭包之前我们要先回顾一下函数函数的两个阶段我们一直说函数有两个阶段定义阶段调用阶段函数定义阶段开辟一个存储空间把函数体内的代码一模一样的放在这个空间内（不解析变量）把存储空间的地址给函数名函数调用阶段按照函数名的地址找到函数的存储空间形参赋值预解析将函数存储空间中的代码拿出来执行（才解析变量）重新定义函数调用阶段按照函数名的地址找到函数的存储空间形参赋值预解析在内存中开辟一个

2020-11-16 22:22:20 72

原创浅拷贝与深拷贝

一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。1、基本数据类型的特点：直接存储在栈(stack)中的数据2、引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。堆内存二、浅拷贝与深拷贝深拷贝和浅拷贝是只针对Object和Array这

2020-10-16 09:00:42 79

原创 PROMISE和ASYNC/AWAIT

封装 AJAXajax 使用起来太麻烦，因为每次都要写很多的代码那么我们就封装一个 ajax 方法来让我们使用起来简单一些确定一下使用的方式因为有一些内容可以不传递，我们可以使用默认值，所以选择对象传递参数的方式// 使用的时候直接调用，传递一个对象就可以ajax({ url: '', // 请求的地址 type: '', // 请求方式 async: '', // 是否异步 data: '', // 携带的参数 dataType: '', // 要不要执行 json

2020-10-15 19:10:16 70

原创原生ajax原理

AJAXajax 全名 async javascript and XML是前后台交互的能力也就是我们客户端给服务端发送消息的工具，以及接受响应的工具是一个默认异步执行机制的功能AJAX 的优势不需要插件的支持，原生 js 就可以使用用户体验好（不需要刷新页面就可以更新数据）减轻服务端和带宽的负担缺点：搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到AJAX 的使用在 js 中有内置的构造函数来创建 ajax 对象创建 ajax 对象以后，我们就使用 aja

2020-10-15 19:06:45 182

原创 HTTP 和 cookie

HTTPhttp 是我们前后台交互的时候的传输协议（即超文本传输协议）HTTP 的工作流程和服务器建立链接建立链接后，发送一个请求给服务器（请求）服务器接受到请求以后进行相应的处理并给出一个回应（响应）断开于服务器的链接和服务器建立链接怎么和服务器建立链接呢？需要保证客户端的接受和发送正常，服务器端的接受和发送正常这里就涉及到一个东西叫做 TCP/IP 协议建立链接的主要步骤叫做三次握手客户端发送一个消息给到服务端此时：服务端知道了客户端可以正常

2020-10-13 19:07:24 100

原创 PHP基础知识点

服务器的简单理解我们不可能把数据库丢在用户的电脑上一个是太大，一个是不安全所以我们要把数据库放在网络的另一端（远程）所以当前端人员向后端人员索要数据的时候需要网络我们也不可能把页面也放在用户的电脑上所以用户也是需要网络来向前端人员索要页面服务器的认识我们现在的市场上有一些常见的服务器可以承载内容我们目前比较常用的就是 Apache 和 Tomcat我们今天要学习的就是 Apache 服务器是一个和 php 语言合作比较紧密的一个服务器到底什么是服务器其实说白了，服务器就是

2020-10-13 19:05:33 137

原创面向对象思想及对象属性

面向对象首先，我们要明确，面向对象不是语法，是一个思想，是一种编程模式面向：面（脸），向（朝着）面向过程：脸朝着过程 =》关注着过程的编程模式面向对象：脸朝着对象 =》关注着对象的编程模式实现一个效果在面向过程的时候，我们要关注每一个元素，每一个元素之间的关系，顺序，。。。在面向过程的时候，我们要关注的就是找到一个对象来帮我做这个事情，我等待结果例子 ????：我要吃面条面向过程用多少面粉用多少水怎么和面怎么切面条做开水煮面吃面面向对象找到

2020-10-12 16:53:33 69

原创 DOM动画的基本条件

DOM动画效果让一个元素从左至右进行运动 <div id="box"></div> var box = document.getElementById("box"); var t = null; t = setInterval(function(){ })运动的终止条件t = setInterval(function(){终止条件}) // 元素的属性值 === 目标点 if(dom.attr =

2020-10-12 16:36:59 259

原创 ES5和ES6新增

ES5 增加的数组常用方法数组方法之 forEachforEach 用于遍历数组，和 for 循环遍历数组一个道理语法：数组.forEach(function (item, index, arr) {})var arr = ['a', 'b', 'c']// forEach 就是将数组循环遍历，数组中有多少项，那么这个函数就执行多少回arr.forEach(function (item, index, arr) { // 在这个函数内部 // item 就是数组中的每一项

2020-10-12 11:57:21 131

原创了解正则基础知识

正则表达式，又名 “规则表达式”由我们自己来书写 “规则”，专门用来检测字符串是否符合 “规则” 使用的我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检测字符串是不是合格var reg = /\d+/var str1 = '123'var str2 = 'abc'console.log(reg.test(str1)) // trueconsole.log(reg.test(str2)) // false上面的变量 reg 就是定..

2020-10-10 10:20:49 87

原创 EVENT（下）

事件的传播就像重叠的两个图片一样，我们点击在小盒子身上的同时，也是点击在了大盒子上这个是既定事实，那么两个盒子的点击事件都会触发这个就叫做事件的传播当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件就像上面的图片一样点击在小盒子上的时候，会触发大盒子的点击事件也是点击在了大的盒子上，也会触发小盒子的点击事件也是点击在了 body 上，也会触发 body 的点击事件也是点击在了 html 上，也会触发 html 的点击事件也是点击在了 docume

2020-10-10 10:18:50 140

原创 EVENT（上）

什么是事件一个事件由什么东西组成触发谁的事件：事件源触发什么事件：事件类型触发以后做什么：事件处理函数var oDiv = document.querySelector('div')oDiv.onclick = function () {}// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv// 触发什么事件 => onclick => 这个事件类型就是 click// 触发之后做什么 => function () {} =&gt

2020-10-10 10:15:24 173

原创 Math 和 Date方法

–Math 是 js 的一个内置对象，提供了一堆的方法帮助我们操作数字–Date 是 js 的一个内置对象，提供了一堆的方法帮助我们操作时间Math没有什么多余的东西，就是一堆的方法来操作数字randomMath.random() 这个方法是用来生成一个 0 ~ 1 之间的随机数每次执行生成的数字都不一样，但是一定是 0 ~ 1 之间的生成的数字包含 0 ，但是不包含 1var num = Math.random()console.log(num) // 得到一个随机数

2020-10-10 10:11:58 85

原创 BOM / DOM基础小知识点

BOMBOM（Browser Object Model）：浏览器对象模型其实就是操作浏览器的一些能力我们可以操作哪些内容获取一些浏览器的相关信息（窗口的大小）操作浏览器进行页面跳转获取当前浏览器地址栏的信息操作浏览器的滚动条浏览器的信息（浏览器的版本）让浏览器出现一个弹出框（alert/confirm/prompt）BOM 的核心就是 window 对象window 是浏览器内置的一个对象，里面包含着操作浏览器的方法获取浏览器窗口的尺寸innerHeight 和 i

2020-10-10 10:07:23 125

原创 ES5/String

ES5/String严格模式（了解）我们都知道 js 是一个相对不很严谨的语言而且开发的时候，一些代码也不是很严格要求而严格模式就是对开发的时候写的一些内容做了要求开启严格模式想开启严格模式，直接在代码最开始的位置写上字符串 use strict<script> 'use strtic' // 下面代码书写就要按照严格模式来书写</script>严格模式的规则声明变量必须有 var 关键字'use strtic'var num = 10

2020-10-06 14:31:20 127

原创数组基础原理

数组什么是数组？字面理解就是数字的组合其实不太准确，准确的来说数组是一个数据的集合也就是我们把一些数据放在一个盒子里面，按照顺序排好[1, 2, 3, 'hello', true, false]这个东西就是一个数组，存储着一些数据的集合数据类型分类number / string / boolean / undefined / null / object / function / array / …数组也是数据类型中的一种我们简单的把所有数据类

2020-10-06 11:40:46 264

原创前端需要知道的HTTP协议

前端需要知道的HTTP协议文章目录前端需要知道的HTTP协议一.简介二.HTTP协议主要特点三.HTTP报文1.请求报文1.1.请求行(request line)1.2.请求头(header)1.3.空行1.4.请求体 2.响应报文2.1.状态行2.2.响应头...

2020-10-05 17:21:54 465 1

原创 Git基本指令使用方法

Git工作常用文章目录 Git工作常用一.合并远程仓库到本地1.方法一2.方法二二.解决冲突三.提交指定文件四.建分支写代码五.本地分支和远程分支改名六.切换远程仓库路径一.合并远程仓库到本地 1.方法一 git fetch orig...

2020-10-05 17:17:04 144

猪皮惡霸的博客