前端学习笔记
关注
分享
扫一扫
文章平均质量分 85
前端学习笔记
小炜1128
这个作者很懒，什么都没留下…
展开
-
详解 Object.defineProperty() & Object.defineProperties()
Object.defineProperty()描述指定属性的值 value描述指定属性是否可枚举 enumerable描述指定属性是否可修改 writable描述指定属性是否可删除 configurable访问器描述符 get访问器描述符 set注意点Object.defineProperties()原创 2023-08-23 23:33:09 · 726 阅读 · 0 评论 -
Vue 是什么
- Vue 构建用户界面是基于数据通过一定的语法和规则渲染出用户能够看到的页面。- Vue 是一个框架，Vue 包含一套完整的项目解决方案，为我们提供了前端项目开发中常用的工具和基础通用化组件，我们可以根据开发需求选择需要的工具和组件，定制应用骨架，提高我们的开发效率。原创 2023-08-23 22:27:04 · 605 阅读 · 1 评论 -
Vue MVVM 模型
- MVVM 是 Vue 实现数据驱动视图和双向数据绑定的核心原理。- 在 MVVM 模型中，主要由如下三部分组成： - M：Model，模型，也就是要渲染到视图 View 上的数据 - V：View，视图，数据渲染的位置 - VM：ViewModel，视图模型，可以视为 Model 和 View 之间建立关系的桥梁，VM 是 MVVM 的核心，VM 将要渲染到视图上的数据 Model 和数据渲染的位置 View 联系在了一起- MVVM 模型实现了视图 View 和数据 Model原创 2023-08-23 22:09:00 · 1299 阅读 · 0 评论 -
[JS]JavaScript基础学习笔记(黑马pink+尚硅谷李立超)
JavaScript 的书写位置 JavaScript 注释 JavaScript 输入输出语句 变量 数据类型 运算符 流程控制 对象 函数 严格模式 面向对象 Map Set原创 2023-01-11 22:37:54 · 3544 阅读 · 1 评论 -
[HTML]HTML5新增标签
1. HTML5 新增的语义化标签2. HTML5 新增的多媒体标签2.1 video 标签2.2 audio 标签3. HTML5 新增的 input 标签4. HTML5 新增的表单属性原创 2022-11-04 17:18:38 · 2734 阅读 · 0 评论 -
[CSS]常见布局技巧
1. margin负值的运用2. 文字围绕浮动元素3. 行内块的巧妙运用4. CSS三角强化原创 2022-11-03 15:31:07 · 565 阅读 · 0 评论 -
[CSS]定位
1. 定位1.1 使用定位的场景1.2 定位与浮动1.3 定位的组成1.3.1 定位模式1.3.2 边偏移2. 静态定位 static3. 相对定位 relative4. 绝对定位 absolute5. 子绝父相6. 固定定位 fixed7. 粘性定位 sticky8. 定位的叠放顺序 z-index9. 绝对定位居中10. 定位的特殊特性原创 2022-10-30 17:22:48 · 488 阅读 · 0 评论 -
[CSS]浮动
1. 传统网页布局的三种方式2. 标准流（普通流/文档流）3. 浮动3.1 语法3.2 浮动实现3.3 浮动元素的特性3.3.1 脱标3.3.2 浮动的元素会在一行内显示并且顶端对齐排列3.3.3 浮动元素会具有行内块元素特性3.4 浮动元素经常和标准流父级搭配使用3.5 浮动布局练习3.5.1 练习13.5.2 练习23.5.3 练习34. 常见网页布局5. 浮动布局注意点5.1 浮动和标准流的父盒子搭配5.2 一个元素浮动了，理论上其余的兄弟元素也要浮动5.3 浮动的原创 2022-10-24 21:20:32 · 823 阅读 · 0 评论 -
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
视频及对应资料链接HTML CSSHTMLCSS1 CSS 简介及代码书写规范2 CSS 基础选择器3 CSS 字体属性4 CSS 文本属性5 CSS 的三种写法6 浏览器调试工具 & Emmet 语法 & 快速格式化代码7 CSS 的复合选择器8 CSS 的元素显示模式9 截图工具 -- snipaste10 CSS 的背景原创 2022-09-15 00:04:08 · 667 阅读 · 0 评论 -
[CSS]CSS 的背景
1 背景颜色2 背景图片3 背景平铺4 背景图片位置4.1 方位名词4.2 精确单位4.3 混合单位5 背景图像固定（背景附着）6 背景复合写法7 背景色半透明8 背景总结原创 2022-09-15 00:03:18 · 1117 阅读 · 0 评论 -
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)
1. AJAX 简介2. XML 简介3. AJAX 的特点3.1 AJAX 的优点3.2 AJAX 的缺点4. HTTP 协议4.1 请求报文4.2 响应报文4.3 浏览器中查看请求信息5. Node.js6. Express7. 发送GET请求7.1 GET请求设置参数8. 发送POST请求8.1 POST设置请求体8.2 设置请求头9. 服务端响应JSON格式的数据9.1 服务端返回的JSON自动转化10. nodemon11. 解决 IE 缓存问题12. 请求原创 2022-06-05 00:40:15 · 505 阅读 · 0 评论 -
JavaScript基础(第一部分 -- 简介、注释、输入输出、变量、数据类型、运算符、流程控制)
1. JavaScript 简介1.1 JavaScript 是什么1.2 JavaScript 的作用1.3 HTML/CSS/JS 的关系1.4 浏览器执行 JS1.5 JS 的组成2. JavaScript 的书写位置2.1 行内式 JS2.2 内嵌JS2.3 外部 JS文件3. JavaScript 注释3.1 单行注释3.2 多行注释3. JavaScript 输入输出语句3.1 alert3.2 console.log3.3 prompt4. 变量4.1 什么原创 2022-06-04 13:37:48 · 388 阅读 · 0 评论 -
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
ES61. let 关键字1.1 声明变量1.2 块级作用域1.3 不存在变量提升1.4 不影响作用域链1.5 案例实践 -- 点击 DIV 换色2. const 关键字2.1 声明常量2.2 不允许重复声明2.3 值不允许修改2.4 块儿级作用域2.5 对于数组和对象的元素修改, 不算做对常量的修改3. 变量的解构赋值3.1 数组的结构3.2 对象的解构4. 模板字符串4.1 模板字符串声明4.2 字符串中可以出现换行符4.3 可以使用 ${xxx} 形式输出变量5原创 2022-06-01 22:37:18 · 487 阅读 · 2 评论 -
Promise(简介、基本使用、API、手写实现 Promise、async与await)
1. Promise 简介2. Promise 基本使用2.1 Promise 基本使用体验回调函数实现：基于 Promise 实现：2.2 基于 promise 的形式读取文件回调函数形式实现：基于 Promise 实现：2.3 基于 Promise 的 ajax 请求2.4 基于 Promise 封装 fs 模块读取文件2.5 util.promisify 方法封装转化成 Promise2.6 Promise封装AJAX操作2.7 promise 的状态2.8 promise原创 2022-05-30 23:57:17 · 611 阅读 · 1 评论 -
[HTML]HTML学习笔记
0. 编辑器 vs code1. HTML语法规范1.1. 基本语法概述1.2. 标签关系2. HTML基本结构标签2.1. 第一个HTML3. vs code3.1. 快速生成骨架代码3.2. 快捷键3.3. 设置3.4. vs code 插件4. DOCTYPE 和 lang 以及字符集的作用4.1文档类型声明标签4.2 lang语言种类4.3字符集4.4总结5. 标签的语义6. 标题标签7. 段落和换行标签7.1. 段落标签7.2. 换行标签8. 文本格式化标原创 2022-05-20 15:34:14 · 684 阅读 · 1 评论 -
Vue--姓名案例--插值表达式|方法|计算属性
文章目录1. 插值表达式实现2. 使用方法实现3. 计算属性实现3.1 计算属性简写1. 插值表达式实现需要对显示的全名进行处理时，插值表达式中虽然可以写 js 表达式，但是任意过长，造成代码不易阅读【官网截图】<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e原创 2022-05-08 16:45:23 · 1204 阅读 · 0 评论 -
小程序----生命周期
文章目录1. 什么是生命周期2. 生命周期的分类3. 什么是生命周期函数4. 生命周期函数的分类5. 应用的生命周期函数6. 页面的生命周期函数1. 什么是生命周期生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。例如：张三出生，表示这个人生命周期的开始张三离世，表示这个人生命周期的结束中间张三的一生，就是张三的生命周期我们可以把每个小程序运行的过程，也概括为生命周期：小程序的启动，表示生命周期的开始小程序的关闭，原创 2022-05-07 01:29:07 · 530 阅读 · 0 评论 -
小程序----页面事件
文章目录1. 下拉刷新事件1.1. 什么是下拉刷新1.2. 启用下拉刷新1.3. 配置下拉刷新窗口的样式1.4. 监听页面的下拉刷新事件1.5. 停止下拉刷新的效果2. 上拉触底事件2.1. 什么是上拉触底2.2. 监听页面的上拉触底事件2.3. 配置上拉触底距离3. 上拉触底案例3.1. 案例效果展示3.2. 案例的实现步骤3.3.步骤1 - 定义获取随机颜色的方法步骤2 - 在页面加载时获取初始数据步骤3 - 渲染 UI 结构并美化页面效果步骤4 - 上拉触底时获取随机颜色步骤5 - 添加 loadin原创 2022-05-07 01:07:54 · 2029 阅读 · 0 评论 -
小程序----页面导航
文章目录1. 什么是页面导航2. 小程序中实现页面导航的两种方式3. 声明式导航3.1. 导航到 tabBar 页面3.2. 导航到非 tabBar 页面3.3. 后退导航4. 编程式导航4.1. 导航到 tabBar 页面4.2. 导航到非 tabBar 页面4.3. 后退导航5. 导航传参5.1. 声明式导航传参5.2. 编程式导航传参5.3. 在 onLoad 中接收导航参数1. 什么是页面导航页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：<a>原创 2022-05-06 23:58:12 · 1647 阅读 · 0 评论 -
小程序----网络数据请求
文章目录1. 小程序中网络数据请求的限制2. 配置 request 合法域名3. 发起 GET 请求4. 发起 POST 请求5. 在页面刚加载时请求数据6. 跳过 request 合法域名校验7. 关于跨域和 Ajax 的说明1. 小程序中网络数据请求的限制出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：只能请求 HTTPS 类型的接口必须将接口的域名添加到信任列表中2. 配置 request 合法域名需求描述：假设在自己的微信小程序中，希望请求 https://原创 2022-05-05 01:01:11 · 763 阅读 · 0 评论 -
小程序----页面配置
文章目录0. 小程序----全局配置1. 页面配置文件的作用2. 页面配置和全局配置的关系3. 页面配置中常用的配置项0. 小程序----全局配置小程序----全局配置1. 页面配置文件的作用小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。2. 页面配置和全局配置的关系小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件原创 2022-05-05 00:35:05 · 946 阅读 · 0 评论 -
小程序----全局配置
文章目录1. 全局配置文件及常用的配置项2. window2.1. 小程序窗口的组成部分2.2. 了解 window 节点常用的配置项2.3. 设置导航栏的标题2.4. 设置导航栏的背景色2.5. 设置导航栏的标题颜色2.6. 全局开启下拉刷新功能2.7. 设置下拉刷新时窗口的背景色2.8. 设置下拉刷新时 loading 的样式2.9. 设置上拉触底的距离3. tabBar3.1. tabBar3.2. tabBar 的 6 个组成部分3.3. tabBar 节点的配置项3.4. 每个 tab 项的配置选原创 2022-05-01 15:32:53 · 911 阅读 · 0 评论 -
小程序----页面样式（WXSS）
1 WXSS2 WXSS 和 CSS 的关系3 rpx3.1 rpx 尺寸单位3.2 rpx 的实现原理3.3 rpx 与 px 之间的单位换算更换模拟器的机型4 样式导入4.1 样式导入4.2 @import 的语法格式页面结构和数据外联样式表导入外部样式表5 全局样式list页面index.wxml全局样式表设置全局样式表之后页面的样式6 局部样式权重相同，按照就近原则权重不同，样式为权重大的样式原创 2022-04-26 00:41:07 · 2197 阅读 · 0 评论 -
小程序----列表渲染
文章目录1 wx:for2 手动指定索引和当前项的变量名3 wx:key 的使用1 wx:for通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构。默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。<!--pages/list/list.wxml--><view wx:for="{{arr}}"> 索引：{{index}} -- 当前项：{{item}}</view>// pages/list/list.js原创 2022-04-24 19:18:21 · 2113 阅读 · 0 评论 -
小程序----条件渲染
文章目录1 wx:if2 结合 使用 wx:if3 hidden4 wx:if 与 hidden 的对比1 wx:if在小程序中，使用 wx:if=“{{condition}}” 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加 else 判断。<!--pages/list/list.wxml--><input type="text" bindinput="ipt"/><view>性别：</view><vi原创 2022-04-24 19:04:45 · 756 阅读 · 0 评论 -
小程序----事件绑定
文章目录1 事件1.1 小程序中常用的事件1.2 事件对象的属性列表1.2.1 target 和 currentTarget 的区别1.3 bindtap 的语法格式1 事件事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。1.1 小程序中常用的事件1.2 事件对象的属性列表当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下表所示：1.2.1 target 和 currentTarget 的区别target 是触发该事原创 2022-04-23 23:18:45 · 4448 阅读 · 1 评论 -
小程序----数据绑定
文章目录1 数据绑定的基本原则2 在 data 中定义页面的数据3 Mustache 语法的格式（插值表达式）3.1 Mustache 语法的应用场景3.2 动态绑定内容3.3 动态绑定属性3.4 三元运算3.5 算数运算1 数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据2 在 data 中定义页面的数据在页面对应的 .js 文件中，把数据定义到 data 对象中即可：// pages/list/list.jsPage({ /** * 页面的初始数据原创 2022-04-23 22:58:46 · 2311 阅读 · 0 评论 -
小程序----API
文章目录1 小程序 API 概述2 小程序 API 的 3 大分类1 小程序 API 概述小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。2 小程序 API 的 3 大分类小程序官方把 API 分为了如下 3 大类：事件监听 API特点：以 on 开头，用来监听某些事件的触发举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件同步原创 2022-04-22 17:20:12 · 864 阅读 · 0 评论 -
小程序----组件
文章目录1 小程序中组件的分类2 常用的视图容器类组件1 小程序中组件的分类小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程的组件分为了 9 大类，分别是：视图容器基础内容表单组件导航组件媒体组件map 地图组件canvas 画布组件开放能力无障碍访问2 常用的视图容器类组件view普通视图区域类似于 HTML 中的 div，是一个块级元素常用来实现页面的布局效果scroll-view可滚动的视图区域常用来实现原创 2022-04-22 16:26:17 · 525 阅读 · 0 评论 -
小程序项目文件介绍
文章目录1 项目结构1.1 项目的基本组成结构1.2 小程序页面的组成部分2 JSON 配置文件2.1 JSON 配置文件的作用2.2 app.json 文件1 项目结构1.1 项目的基本组成结构pages 用来存放所有小程序的页面utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）app.js 小程序项目的入口文件app.json 小程序项目的全局配置文件app.wxss 小程序项目的全局样式文件project.config.json 项目的配置文件sitemap.原创 2022-04-21 17:23:52 · 912 阅读 · 0 评论 -
小程序简介和开发工具
文章目录1 小程序简介1.1 小程序与普通网页开发的区别1.2 体验小程序2 注册小程序开发帐号3 安装开发者工具4 创建项目5 预览效果1 小程序简介1.1 小程序与普通网页开发的区别1.2 体验小程序可使用手机微信(6.7.2 及以上版本)扫码下方小程序码，体验小程序：2 注册小程序开发帐号使用浏览器打开 https://mp.weixin.qq.com/ 网址，点击右上角的“立即注册”即可进入到小程序开发账号的注册流程，主要流程截图如下：选择注册账号的类型填写账号信息提示原创 2022-04-21 12:19:53 · 3299 阅读 · 0 评论 -
Node.js -- Node.js概述与安装和运行
Node概述与安装1.什么是Node.js2.Node.js可以做什么3.Node.js的安装安装步骤4.在Node.js环境中运行JavaScript代码终端中的一些快捷键原创 2022-04-07 23:48:38 · 1779 阅读 · 0 评论