前端

Astro Islands

Astro Islands代表了前端Web架构的领先范式转变。Astro 将您的 UI 提取到页面上较小的独立组件中。未使用的JavaScript被轻量级HTML取代,保证更快的加载和交互时间(TTI)。 术语“Astro Island”是指HTML的静态页面上的交互式UI组件。一个页面上可以存在多个孤岛,并且一个孤岛始终单独呈现。将它们视为静态、非交互式 HTML 海洋中的岛屿。 im

彻底搞懂盒子模型

一、简述 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:Margin外边距,Border边框,Padding内边距,和Content实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): 盒

通过一个例子讲解Vue组合式API

一、Composition API概述 当我们编写Vue组件时候,组件中可能包含一系列的功能,例如一个代码仓库管理的应用,用户的仓库列表可以看做是一个组件,这个组件还包含筛选、搜索的功能。 所谓的功能我们可以理解为MVC中的Model和Controller。从视图角度,组件是最基本的代码复用单元,但是从逻辑上,功能模块是最基本的代码复用单元。 每个组件中可能包含多个功能(也称为关注点),而多个功能

v2和v3版本区别

vue2和vue3双向数据绑定原理发生了改变 vue2 的双向数据绑定是利用ES5 的一个 API Object. defineProperty()对数据进行劫持 结合 发布订阅模式的方式来实现的。 // 数据劫持:当访问或者设置 vm 中的成员的时候,做一些干预操作 Object.defineProperty(vm, 'msg', { // 可枚举(可遍历)

[git] MacBook 安装git

文章目录 1.Mac Git 安装 2. 开发者工具 安装 CommandLineTools 安装完成,错误解决 3. git 账户配置 账户设置 生成秘钥 git 或者 gitee 仓库添加公钥 查看全局账户命令 多账户设置 config文件 测试连接 clone到本地 1.Mac Git 安装Mac一般自带Git工具,也就

前端如何应对精确数字运算?用BigNumber.js解决JavaScript原生Number类型在处理大数或高精度计算时的局限性

目录前端如何应对精确数字运算?用BigNumber.js解决JavaScript原生Number类型在处理大数或高精度计算时的局限性一、BigNumber.js介绍1、什么是 BigNumber.js?2、作用领域3、核心特性二、安装配置与基础用法1、引入 BigNumber.js2、配置 BigNumber.js3、常用方法①创建 BigNumber 实例②基本运算③

vue2使用rtsp视频流接入海康威视摄像头(纯前端)

一.获取海康威视rtsp视频流海康威视官方的RTSP最新取流格式如下:rtsp://用户名:密码@IP:554/Streaming/Channels/101用户名和密码IP就是登陆摄像头时候的IP(笔者这里IP是192.168.1.210)所以笔者的rtsp流地址就是rtsp://用户名:密码@192.168.1.210:554/Streaming/Channels/101二. 测

CSS中的BFC,是什么?

CSS中的BFC详解 点击打开视频讲解 一、常见定位方案 普通流 默认,从上而下,行内元素水平排列,行满换行,块级元素渲染成一个新行。 浮动 先按普通流位置出现,然后根据浮动方向偏移。 绝对定位 元素具体位置由绝对定位坐标组成。 二、什么是BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的

前端vue:路由的基本使用

1. 路由 概念: Hash 地址与组件之间的对应关系 工作方式: 当用户点击页面上的路由链接 导致了 URL 地址栏中的 Hash 值发生了变化 前端路由就会监听到 Hash 地址的变化 前端路由把当前 Hash 地址对应的组件渲染都浏览器中 2. vue-router` vue-router 是 vue.js 官方给出的路由解决方案 2.1 vue-router 的基本用法 安装 vue-r

vue 函数化组件

Vue.js提供了一个functional的布尔值选项,设置为true可以使组件无状态和无实例,也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染,因为函数化组件只是一个函数,渲染开销要小很多。 使用函数化组件时,Render函数提供了第二个参数context来提供临时上下文。组件需要的data、props、slots、children、parent都是通过这个上