- 博客(36)
- 收藏
- 关注
RSS订阅原创 eventBus 你不知道的事
我们会发现，当组件A已经触发了事件getSomething的时候，第一次切换到组件B时，控制台会打印一次value的值，也就是1；但是当第二次切换到组件B时，会打印两次1，第三次会打印三次，如此累加，这样就会导致很多问题。法二：在生命周期beforeDestroy里面调用$off卸载掉事件。
2022-10-14 14:27:12
281
1
原创 -Vue生命周期钩子
vue生命周期钩子官方文档==vue生命周期钩子介绍vue从创建到销毁过程中，会执行的一些回调函数==钩子一种回调函数例如window.onload=function(){dom加载完毕，外部资源加载完毕就执行}生命周期vue实例从出生到扑街的过程出生创建vue实例创建data数据创建el挂载点将data数据渲染到el挂载点扑街vue实例被销毁这里销毁不是指vue实例变成了null，而是指解除data与el的关联说人话修改了data，页面不会被渲染不能是。...
2022-07-15 22:40:35
430
1
原创 Vue Cli与组件化开发（vue 全家桶01）
vuecil-demo#项目目录├──node_modules#项目依赖的第三方包├──public#静态文件目录├──favicon.ico#浏览器小图标└──index.html#单页面的html文件(网站首页，vue会帮我们配置好，使用较少)├──src#业务文件夹(项目核心文件夹，我们写的项目代码都放在这个文件夹里面)├──assets#静态资源（一般项目图片、css都放在这里）项目文件夹第三方包管理文件夹publicsrc项目核心文件夹。...
2022-07-15 22:08:14
400
原创 vue基础 指令篇
Vue.js 1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架Vue是一个Vue是一个用于的框架Vue是一个用于构建用户界面得2.渐进式框架介绍a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的类似于Nodejs,拆分成很多个小模块b. 在项目中我们用到什么，就导入什么这样可以保证我们用到的最少c. 说人话：Vue相当于是一个五星级自助餐，我们想要用什么就拿什么，这样可以最大限度避免浪费资源(1)Vue是什么？js框架(2)Vue干什么用
2022-07-09 23:02:53
281
原创 webpack（重点）
==注意: 如果yarn实在安装不上可以用npm==快速、可靠、安全的依赖管理工具。(类似npm作用)中文官网地址: Yarn 中文文档下载地址: 安装 | Yarn 中文文档windows - 软件包(在笔记文件夹里)==建议不要安装到中文路径下====建议和node安装到一个盘符下==mac - 通过命令安装(也可还用npm)如果上面不行, 试试这个使用yarn与npm类似, 可以试试, 新建一个空白文件夹, 执行以下命令尝试一下yarn可能遇到的问题如果报错参考报错文档: 报
2022-07-09 16:07:36
229
原创 跨域和递归
编程中的同源，比较的是两个url是否同源。主要看下面三个方面：协议是否相同（http https file）主机地址是否相同（www.xxx.com 127.0.0.1）端口（0~65535）（http默认端口是80；https默认端口是443；MySQL默认端口3306）协议、主机地址、端口组成一个“源”。如果两个url的协议、主机地址、端口都相同，那么这两个url是同源的，否则就是非同源。如果非同源，那么以下三种行为会受到限制：Cookie 无法操作DOM 无法操作Ajax请求无效（请求可以发送，服务器
2022-07-09 15:48:33
66
原创 express和服务器
网络通信三大要素: 协议，域名(IP)，端口号;通过ip找到计算机，再通过端口找到应用程序，符合规则就可进行数据传输。 传输协议：规定数据传输的规则，http或https或file；前端目前只接触这三项。 网络通讯的格式; 请求报文/响应报文; 域名或 IP：电子设备（计算机，服务器）在网络中的唯一标识。 localhost代表本机地址; 127.0.0.1代表本机地址; 端口：应用程序在计算机中的唯一标识。0~65535之间，0~1023的端口可能被系统占用。 80是 http 用; 443是 https
2022-07-09 15:45:28
181
原创 promise对象
node.js 遵循了 CommonJS 的模块化规范。其中：导入其它模块使用 require()方法模块对外共享成员使用 module.exports 对象模块化开发的好处有很多，其中：实现了在JS文件中引用其他文件避免命名冲突的问题大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用只需关心当前模块本身的功能开发，需要其他模块的支持时，在模块内调用目标模块即可在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD 、 CMD 、 CommonJ
2022-07-09 15:42:33
82
原创 NPM（重点）
npm（node package manage）node 包 管理器。管理node包的工具。包是什么？包就是模块。（包约等于模块，一个包可以包括一个或多个模块）npm这个工具，在安装 node 的时候，就已经安装到你的计算机中了。命令行中执行： ，如果看到版本号，说明安装成功了。非node自带的模块。也不是自定义的模块。是别人写的模块，然后发布到npm网站，我们可以使用npm工具来下载安装别人写的模块。第三方模块，都是在node核心模块的基础之上，封装了一下，实现了很多非常方便快速简洁的方法。目前，npm
2022-07-01 22:08:45
883
原创 初识Node.js与模块
浏览器中的JSECMAScript（核心语法）ES3 --> ES4 --> ES5 --> ES6(2015) --> ES2016 -->ES2017 .....变量、常量数据类型函数流程控制（if、switch、for、while、for...in、continue、break）运算符JS内置对象（Array、String、RegExp、Date、Math....）WebAPI （浏览器提供的API）DOM（文档对象模型，document）BOM（浏览器对象模型，location、history、..
2022-07-01 21:56:15
97
原创 Git 版本管理系统简介和远程仓库
版本和我们平常说的软件、游戏等的版本是一个意思，比如 1.2.8 版本、比如 第1版，比如webstorm2020。所以，版本指的就是代码编写进度当中的一些节点。比如一个项目：搭建好目录结构 --- 第1版本完成登录页面布局 --- 第2版本完成登录功能 --- 第3版本完成分类页面布局 --- 第4版本...........【记录】记录代码开发的过程，每一次代码的变化。【回退】将代码回退到之前的版本【查看】查看所有的版本【协作】配合远程仓库，实现多人协作工作场景一：项目的需求不断的变化，改来改去，也可能需
2022-06-21 21:50:46
362
原创 1.XMLHttpRequest 的基本用法和防抖和节流的使用
本章节讲解: XMLHttpRequest的概念、XMLHttpRequest的使用、GET请求携带参数、POST请求携带参数、数据交换格式JSON、ajax封装XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装的！主要的
2022-06-21 21:38:58
632
原创 Ajax 提交表单数据的用法 拦截器的用法
本章节讲解: 表单的组成、表单的提交事件和阻止默认行为、jQuery 的 serialize()函数、axios请求方法别名网页中采集数据的表单由三个部分组成，分别是：表单标签（form）、表单域（input、textarea、select）、表单按钮（submit或者reset）。表单的作用就是收集数据。1.3 jQuery 的 serialize()函数$('form').serialize() 获取到的form表单数据类型为 a=1&b=2&c=3 可以直接发送给服务器使用注意: 表单
2022-06-21 21:34:13
183
原创 ajax认识
本章节讲解: 客户端、服务器、客户端与服务器通信的过程、URL 地址与资源。在前端开发中，客户端特指“Web 浏览器”。实际开发中，只要可以访问服务器的一端都属于客户端（手机、平板、电脑中的各种软件都可以是客户端）。概念：服务器是提供服务的设备。 作用：在上网过程中，服务器专门负责存放资源和对外提供服务。客户端与服务器之间的通信过程，分为请求 - 响应两个步骤。其中：请求的概念：客户端通过网络去找服务器要资源的过程，叫做 “请求”响应的概念：服务器把资源通过网络发送给客户端的过程，叫做 “响应” 一个完
2022-06-21 21:29:13
97
原创 JavaScript 进阶--04
首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象，简单来说，浅拷贝只复制一层对象的属性，二深拷贝则复制了所有的层级。对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会 改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。二、异常处理2.1 throw异常处理是指预估代码执行过程中可能发生的错误，
2022-06-15 22:03:17
153
原创 JavaScript 进阶--03
了解面向对象编程的一般特征掌握基于构造函数原型对象的逻辑封装掌握基于原型对象实现的继承理解什么原型链及其作用能够处理程序异常提升程序执行的健壮性面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、继承、多态。1.1 封装封装的本质是将具有关联的代码组合在一起，其优势是能够保证代码复用且易于维护，函数是最典型也是最基础的代码封装形式，面向对象思想中的封装仍以函数为基础，但提供了更高级的封装形式。命名空间先来回顾一下以往代码封装的形式：以往以普通对象（命名空间）形式封装的代码只是单纯把一系列的
2022-06-15 21:57:57
118
原创 JavaScript 进阶--02
了解面向对象编程中的一般概念能够基于构造函数创建对象理解 JavaScript 中一切皆对象的语言特征理解引用对象类型值存储的的特征掌握包装类型对象常见方法的使用1.1 构造函数构造函数是专门用于创建对象的函数，如果一个函数使用 关键字调用，那么这个函数就是构造函数。总结：使用 关键字调用函数的行为被称为实例化实例化构造函数时没有参数时可以省略 构造函数的返回值即为新创建的对象构造函数内部的 返回的值无效！注：实践中为了从视觉上区分构造函数和普通函数，习惯将构造函数的首字母大写。1.2 实例成员
2022-06-15 21:52:18
133
原创 JavaScript 进阶--1
理解作用域对程序执行的影响能够分析程序执行的作用域范围理解闭包本质，利用闭包创建隔离作用域了解什么变量提升及函数提升掌握箭头函数、解析剩余参数等简洁语法作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。1.1 局部作用域局部作用域分为函数作用域和块作用域。函数作用域在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。总结：函数内部声明的变量，在函数外部无法被访问函数的参数也是函数内部的局部变量不同函数内部声明的变量无法互相
2022-06-10 00:04:57
2263
原创 Web APIs--5
语法： 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop） ➢ 后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如 网易云音乐 history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。 浏览器查看本地数据:...
2022-06-08 21:52:08
117
原创 Web APIs---4
掌握 Date 日期对象的使用，动态获取当前计算机的时间。ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。方法getFullYear 获取四位年份getMonth 获取月份，取值为 0 ~ 11getDate 获取月份中的每一天，不同月份取值也不相同getDay 获取星期，取值为 0 ~ 6getHours 获取小时，取值为 0 ~ 23getMinutes 获取分钟，
2022-06-08 21:28:54
47
原创 Web APIs---3
事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。如上图所示，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。简言之，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。了解了什么是事件流之后，我们来看事件流是如何影响事件执行的：执行上述代码后发现，当单击事件触发时，其祖先元素的单击事件也【相继触发】，这是为什么呢？结合事件流的特征，我们知道当某个元素的事件被触发时，事件总是会先经过其祖先才能到达当前元素，然后再由当
2022-06-06 12:34:06
50
原创 Web APIs --2
学习会为 DOM 注册事件，实现简单可交互的网页特交事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。 完成事件监听分成3个步骤：获取 DOM 元素通过 方法为 DOM 节点添加
2022-06-06 12:26:16
60
原创 Web APIs---1
复习：splice() 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。删除数组：splice(起始位置， 删除的个数)比如：1 添加元素splice(起始位置，删除个数，添加数组元素)Web APIs介绍知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能。严格意义上讲，我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变
2022-06-06 12:04:53
95
原创 JavaScript 基础 （对象）
对象对象（object）：JavaScript里的一种数据类型 可以理解为是一种无序的数据集合， 注意数组是有序的数据集合 用来描述某个事物，例如描述一个人 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能 如果用多个变量保存则比较散，用对象比较统一 比如描述 班主任 信息： 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示 动态行为 (点名, 唱, 跳, rap) => 使用函数表示..
2022-05-28 14:19:18
599
原创 JavaScript 基础 -函数
理解封装的意义，能够通过函数的声明实现逻辑的封装，知道对象数据类型的特征，结合数学对象实现简单计算功能。 理解函数的封装的特征 掌握函数声明的语法 理解什么是函数的返回值 知道并能使用常见的内置函数 函数理解函数的封装特性，掌握函数的语法规则声明和调用函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。声明（定义）声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体
2022-05-25 21:58:24
69
原创 JavaScript for语句
前提了解：if 多分支语句和 switch的区别： 共同点 都能实现多分支选择， 多选1 大部分情况下可以互换 区别： switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。 switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次 switch 一定要注意 必须是 === 全等，一
2022-05-24 21:33:09
172
原创 JavaScript 基础 入门
JavaScript是什么JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。JavaScript作用JavaScript作用:确定网页的行为交互(教网页做事情)JavaScript组成 ECMAScript - JavaScript的核心 ECMAScript定义了JavaScript的语言规范 JavaScript的核心：描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
2022-05-23 14:06:56
203
原创 流程控制
运算符赋值运算符赋值运算符：对变量进行赋值的运算符赋值运算符(=)将等号右边的值赋予给左边, 要求左边必须是一个容器其它赋值运算符:+=,-=,*=,/=,%=;使用这些运算符可以在对变量赋值时进行快速操作let num = 1 // 采取赋值运算符 // num = num + 1 // num += 1 num += 3 console.log(num)一元运算符一元运算符:正负号前置自增:++i后置自增:i++前置自增
2022-05-23 11:53:35
230
原创 响应式网页开发
媒体查询能够根据设备宽度的变化，设置差异化样式开发常用写法 媒体特性常用写法 max-width（从大到小） min-width（从小到大）完整写法媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等外链式CSS引入bootstrap1. ui框架UI框架概念 将常见效果进行统一封装后形...
2022-05-20 15:37:51
638
原创 web移动适配
rem ： 目前多数企业在用的解决方案 vw / vh：未来的解决方案rem网页效果 屏幕宽度不同，网页元素尺寸不同（等比缩放） px单位或百分比布局可以实现吗？ px单位是绝对单位 百分比布局特点宽度自适应，高度固定 l 适配方案 rem rem单位 相对单位 rem单位是相对于HTML标签的字号计算结果 1rem = 1HTML字号大小 使用媒体查询设置差异化CSS样式媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式...
2022-05-20 15:04:12
77
原创 弹性盒子换行（重点）
弹性盒子换行（重点）特别是多行的情况下，我们需要给弹性盒子换行，给 父盒子 弹性容器加。flex-wrap: wrap;设置主轴方向（重点）flex-direction: column;让我们的主轴设置为垂直。 默认的是 row 水平的。...
2022-05-17 22:22:58
4624
原创 移动web flex 布局
主轴方向 目标：使用flex-direction改变元素排列方向 思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？ 答：水平方向 使用flex-direction改变元素排列方向 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 弹性盒子换行使用flex-wrap实现弹性盒子多行排列效果思考：默认情况下，多个弹性盒子如何显示？ l 弹性盒子换行显示 : flex-wrap: wrap; l 调整行对齐方式 .
2022-05-17 22:20:07
74
原创 移动端的特点
插入小知识：perspective 和 transform-style 区别移动端手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度.移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性物理分辨率和逻辑分辨率视口视口（viewport）就是浏览器显示页面内容的屏幕区域。 perspective 是透视，可以让电脑模拟 3d效果， 实现近大远小的效果。 transform-style 立体呈现 可以让 子元素 里面按照设置位移，旋转，缩放，
2022-05-17 22:15:26
317
原创 移动web(2)
一、空间转换 3D1. 3D坐标系3D 坐标系比2D 多了一个Z轴。 z轴位置与视线方向相同空间转换使用transform属性实现元素在空间内的位移、旋转、缩放等效果transform: translate3d(x, y, z); （和写模式 所有的值正负都可以 ）transform: translateX(值);transform: translateY(值);transform: translateZ(值）一定要记住3个坐标轴取值的正反： X 轴 往右越大，是正
2022-05-13 13:58:54
42
原创 移动web
使用字体图标技巧实现网页中简洁的图标效果{Iconfont：https://www.iconfont.cn/ 阿里巴巴字体库 (常用) }首先要在css样式前引入link例如：<link rel="stylesheet" href="./iconfont.css">注释：在css样式前引入link<style> i{font-size: 60px !important; color: brown} </style></h...
2022-05-13 11:27:13
65
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人