自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

张先生的前端日志

欢迎进入我的世界,从此走向人生巅峰,崇尚以简单为主

  • 博客(28)
  • 资源 (1)
  • 问答 (1)
  • 收藏
  • 关注

原创 最简单的Vuejs基础,小伙伴们快来看!!!

  Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。他的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。只关注视图层,它不仅易于上手,还便于与第三方库或项目整合。...

2020-12-27 17:40:52 3306 11

转载 我终于搞懂了async/await、promise和setTimeout的执行顺序

javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的,一切javascript多线程都是纸老虎!

2023-03-16 17:39:01 132

原创 Vue源码解析—new Vue()响应性数据劫持

在 new Vue() 之后。 Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数,用来实现「响应式」以及「依赖收集」,后面会详细讲到,这里只要有一个印象即可。

2023-03-14 16:47:56 23

原创 Vue2、Vue3中v-model的本质以及作用在组件上的用法(简单易懂)

在表单输入元素或组件上创建双向绑定

2023-02-21 17:39:39 77

原创 简单易懂的JavaScript原型以及原型链

原型以及原型链的简单理解。

2023-02-16 14:20:52 145

原创 json web token前端鉴权流程(超容易理解)

一文熟悉json web token前端鉴权

2023-02-01 15:53:40 320

原创 sass/scss预处理器的简单理解

世界上最成熟、最稳定、最强大的专业级CSS扩展语言!

2022-12-01 17:35:16 713

转载 简单易懂的Git回滚操作(reset、revert)

本文总结了两种解决方法:回退(reset)、反做(还原)(revert)。

2022-10-28 18:34:47 4183

原创 当你踏进Pinia的时候你就会感觉——发现了新大陆

Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。从上面官网的解释不难看出,Pinia和Vuex的作用是一样的,它也充当的是一个存储数据的作用,存储在pinia的数据允许我们在各个组件中使用。...

2022-08-15 10:41:32 230 1

原创 CSS 居然有比Flex更强大的布局?——Grid网格布局

Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局,Grid 布局则是将容器划分成“行"和“列”,产生单元格,然后指定"项目所在”的单元格,可以看作是二维布局,Grid布局远比 Flex布局强大。...

2022-07-11 11:08:15 708

原创 TypeScript手把手教程,简单易懂

TypeScript (简称 ts)是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发超集:也就是说 typescript有javascript没有的功能用来增强javascript

2022-06-27 10:54:09 596

原创 Vue移动端基于vw适配方案(简单)移动端相关术语解析(易懂)

Vue移动端基于vw适配方案(简单,复制粘贴即可)移动端相关术语解析(易懂,易于了解)

2022-04-14 17:32:52 1672 1

原创 简单易懂的微前端开发之qiankun快速体验

简单易懂的微前端开发之qiankun快速体验微前端问题SingleSPAqiankun快速体验准备开发基座修改子应用一修改子应用二修改运行结果可能会遇到的问题微前端微前端就是 将不同的功能按照不同的维度拆分成多个子应用。通过主应用来去加载这些子应用。(就是将一个项目中每个大模块分为几个小的应用,并且每个应用都能独立运行,然后整合到一起)微前端的核心在于拆,拆完后在合!当前比较完整的微前端体系 Single-SPA 和 quankun两者总结:子应用可以独立构建,运行时动态加载,主子应用完全解耦,技

2022-02-17 17:49:36 639 1

原创 Vue3-Composition API 快速上手(简单易懂)

一款用于构建 Web 界面,易学易用,性能出色且功能丰富的框架。

2021-12-10 17:20:35 1353 3

原创 git基础操作理解(一个连大爷都能看得懂的文章)

git基础操作理解git简介git安装(windows)git初次运行前的配置git基础获取 Git 仓库git本地仓库文件状态提交本地仓库远程仓库的使用git打标签其他相关常用命令git分支分支简介分支创建分支切换分支合并其他相关常用命令仔细阅读文字,肯定能使你受益匪浅git简介Git 是一个开源的分布式版本控制系统(也是代码托管平台的一种),用于敏捷高效地处理任何或小或大的项目。git安装(windows)https://git-scm.com/downloads安装完后使用电脑的命令

2021-11-26 16:29:28 374

原创 Vue移动端基于rem适配方案(简单易懂,无脑复制粘贴)

Vue移动端适配方案(vue-cli3)—— 相关npm包简述lib-flexible :由淘宝团队整出的一种弹性布局方案,是一个制作H5适配的开源库postcss-loader:使用 PostCSS的方式处理csspostcss-px2rem:用于将 px 转换为 rem 的插件postcss-px2rem-exclude:postcss-px2rem不能忽略指定文件,此包用于增加排除注意:仔细看各段小标题!!!!!!npm安装npm install --save lib-flexi

2021-10-29 17:28:29 376 1

原创 浅显易懂、vue-cli跨域解决

vue-cli跨域解决前言步入正题跨域是什么?前言解决跨域我想在坐的各位都会听说过几个解决跨域的方法有什么 cors后端配置(加几个请求头)、jsonp(利用script的src属性)、还有vue-cli前端配置。本文讲述的就是vue-cli前端配置的方式解决跨域其实一说跨域就要想到很多问题跨域是什么?为什么会产生跨域?如何解决跨域…下面会 一 一 解答步入正题跨域是什么?跨域其实就是违背了浏览器的一种策略,这种策略就是同源策略(Same origin policy),头大 同

2021-10-14 19:06:35 334

原创 Vuecli2和Vuecli3初始化项目的过程,简单易懂

Vuecli2和Vuecli3初始化项目的过程,简单易懂介绍构建项目Vuecli2初始化项目过程介绍VueCLI 是一个基于 Vue.js 进行快速开发的完整系统,采用零配置等方式快速构建。扩展:CLI (Command-Line Interface),翻译为命令行界面,是一个全局安装的 npm 包,提供了终端里的 vue 命令。俗称脚手架构建项目全局安装npm install –g vue-cliVuecli2初始化项目过程回车进入下一步操作一二runtime-comp

2021-06-03 16:20:07 170

原创 最容易理解的vuex,走过路过千万不要错过!!!

vuex状态管理初识在阅读本文章时,需要对 vue 有一定的熟悉了解,在不时很熟悉的情况下请到这里来哦初识vuex 又称vue状态管理。它是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。(听着属实有一点点蒙,说白了就是帮vue管理一些数据,使这些数据能在vue各组件之间共享)也有一个最大的特点 它管理的数据也都是响应式的// 定义一个store的实例对象,在这个对象中存放共享的数据let st

2021-05-18 16:39:00 132 2

原创 Vue Router的简单理解(包会)

Vue Router的简单理解前言初识前言Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,它能够让构建单页面应用变得易如反掌。(来自官方的一段话)初识这里面所涉及到的后面都会有解释,文章阅读完后一定要再次回到这里哦安装//1、使用cdn或者直接下载该连接的文件//https://unpkg.com/vue-router/dist/vue-router.js//注意:vue路由是基于vue的,在引入vue-router之前先引入vue.js

2021-03-11 11:09:36 421 1

原创 浅显易懂防抖与节流、重绘与回流

防抖与节流防抖和节流其实就是为了对浏览器进行性能的优化,处理不当会造成卡顿现象。下面的代码可以动手实现以下,仔细体会就懂了防抖(debounce)当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始计时。附:代码模拟html<div class="box"> <h2>防抖--debounce</h2> <div> <input type="text" id=

2020-11-30 19:20:54 314 2

原创 javascript中常用坐标属性

javascript中常用坐标属性MouseEvent(鼠标事件)属性都是MouseEvent对象下的属性,必须用该对象调用(只读)MouseEvent:当鼠标事件触发后都会产生此对象,该对象记录着鼠标触发事件时的所有属性例图:其常用的坐标属性有:clientX(clientY)  返回当事件被触发时鼠标指针相对于浏览器页面可视区域的水平坐标(left)、垂直坐标(top)注意: 此属性不论页面是否有滚动条,光标所在浏览器可视区域的位置都是固定的(简单理解为你在浏览器中看到的内容,就是

2020-10-13 15:05:06 644

原创 原生JS实现无缝轮播效果(自动/手动/焦点)

原生JS实现无缝轮播效果以下是效果图:以下是代码部分html结构:<body> <!-- 最大盒子 --> <div class="carousel"> <!-- 图片、左右按钮、小圆点区域 --> <div class="cal_list"> <!-- 图片(这里使用的是背景色) --> <ul class="move_ul"> <li>1</li>

2020-09-19 16:00:11 330

原创 css3弹性盒子模型(Flex)

Flex弹性盒子是 CSS3 的一种新的布局模式.,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

2020-09-13 17:45:33 275

原创 HTML5新标签与特性(笔记)

HTML5新标签与特性前言新增语义化标签新增标签属性新增的input的type属性值多媒体标签embedaudiovideo字体图标前言  HTML5 : HTML 标准的最新版本,是对 HTML 的第五次重大修改。HTML5的出现,对于WEB来说意义重大,其目的是想要把目前WEB中存在的各种问题一并解决掉。新增语义化标签  语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。(就是每个标签在这整个html中都分别代表某种意义)其新增标签有:标签意义header定

2020-09-13 17:43:11 816

原创 HTML5-CSS3新增特性-(笔记)(2)

HTML5-CSS3新增特性(续)

2020-09-13 17:42:44 133

原创 HTML5-CSS3新增特性-(笔记)(1)

H5C3新增特性css3新增属性选择器及伪类选择器1、属性选择器2、伪类选择器css3新增属性选择器及伪类选择器1、属性选择器2、伪类选择器

2020-09-13 17:41:47 344

原创 URL、URI和URN的理解

URL、URI和URN的理解URL,URN是URI的子集URL  统一资源定位符(Uniform Resource Locator)是互联网上标准资源的地址。  互联网上的每个文件都有一个唯一的url,它包含的信息指出文件的位置以及浏览器应该怎么处理它。例:http://www.itcast.cn/index.html?name=zhangsan&age=18#linkurl的一般语法格式:protocol://host[:port]/path/[?query]#fragment

2020-08-23 19:05:56 455 1

一个汇集于前端所有知识点的面试宝典

其内容包括(html、css、js、es6、jQuery、vue、ts、react、webpack、项目优化、项目总结、移动端、webapi、小程序、nginx部署项目等)

2023-03-14

Vue2 基础教学文档-旨意为简单易懂

渐进式JavaScript 框架。 易学易用,性能出色,适用场景丰富的 Web 前端框架。 适用于刚学习vue的小白,持续更新~

2023-03-08

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除