励志敲烂键盘
励志敲烂键盘

01_前端框架之Bootstrap的应用

day01_前端框架之Bootstrap的应用

本课目标

  • 能够完成 Bootstrap 环境搭建
  • 能够理解 Bootstrap 的栅格布局
  • 能够根据 Bootstrap 相关文档使用Bootstrap组件
  • 能够根据 Bootstrap 重构主页和表单页

第1章 bootstrap简介

1.1 什么是bootstrap

  • Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

    • Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。

  • Bootstrap，基于 HTML、CSS、JAVASCRIPT 的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。（对应的样式有对应的特效） 开发人员只需要编写HTML结构，添加bootstrap固定的class样式，就可以轻松完成指定效果的实现。

  • 作用：

    • Bootstrap 使得 Web 开发更加快捷，高效。

    • BootStrap支持响应式开发，解决了移动互联网前端开发问题。

    • Bootstrap英文官网: Bootstrap · The most popular HTML, CSS, and JS library in the world.

    • Bootstrap4 中文文档参考: 简介 · Bootstrap

1.2 什么是响应式布局

  • 响应式布局：一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独做一个 展示版本。此概念专为解决移动互联网浏览而诞生的。

  • 响应式布局，使得网站仅适用一套样式，就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开 发维护成本，并且能带给用户更好的体验性。

  • 响应式布局会增加程序员负担以及代码量

  • 未使用响应式开发：

    • 百度: 百度一下，你就知道 无论如何缩小窗口在屏幕下都是不变的

    • 百度针对不同的设备有不同的网页匹配: 手机端: 百度一下

第2章 bootstrap环境搭建

2.1 下载bootstrap

  • 地址：https://code.z01.com/v4/bootstrap-4.4.1-dist.zip

  • 目录结构：目录结构 · Bootstrap

第3章 bootstrap页面布局

3.1 基础入门

  • Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

  • Bootstrap原生带三种container宽度规范：

    • .container, 居中，适配不同的断的 max-width 尺寸。

    • .container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。

超小屏幕 <576px 小屏幕 ≥576px 中等屏幕 ≥768px 大屏幕 ≥992px 超大屏幕 ≥1200px
.container 100% 540px 720px 960px 1140px
.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px
.container-fluid 100% 100% 100% 100% 100%

  • 课堂案例：01.Bootstrap远程样式引入.html

  • 


    
    
    
    Bootstrap入门
    
     
     
     
     


    hello Bootstrap入门

  • 课堂案例：02.Boostrap本地样式引入.html

  • 


    
    
    
    Bootstrap通过本地样式引入
    
     
     
     
     


    
     hello Bootstrap
    
    
     hello Bootstrap

  • 课堂案例：03.container页面布局规范.html

  • 


    
    
    
    Contain 容器

    
    
    
    

    
    


    
    
    
        
    hello 酷狗
    
    
    

    
    
        
    哈哈哈哈

3.1 栅格系统

  • 为了方便在布局容器中进行网页的布局操作。BootStrap提供了一套专门用于响应式开发布局的栅格系统。 栅格系统将一行分为12列，通过设定元素占用的列数来布局元素在页面上的展示位置。

  • 栅格特点 “行（row）”包含在 .container或 container-fluid（100% 宽度）中行使用的样式

  • 课堂案例：04.Bootstrap栅格系统1.html

  • 



    
    
    
    Document

    
    
    
    

    




    
    
        
    
            
    1
    
            
    2
    
            
    3
    
            
    4
    
            
    5
    
            
    6
    
            
    7
    
            
    8
    
            
    9
    
            
    10
    
            
    11
    
            
    12
    
        
    

        
    
            
    5
    
            
    5
    
            
    2
    

        
    
        
        
    
            
    4
    
            
    8
    
            
    6
    
        
    
    
    
    -----------
    
    
          
         
    
             
    4
    
             
    
                 
                 
    
                     
    3
    
                     
    9
    
                 
    
             
    
         
    
    
    

    
    
        
    
            
    4
    
            
    
                
    
                        
    1
    
                        
    2
    
                        
    3
    
                        
    4
    
                        
    5
    
                        
    6
    
                        
    7
    
                        
    8
    
                        
    9
    
                        
    10
    
                        
    11
    
                        
    12

  • 课堂案例：05.Bootstrap栅格系统2.html

  • 



    
    
    
    Document

    
    
    
    

    



    
    
        
    
            
    1
    
            
    2
    
            
    3
    
            
    4
    
            
    5
    
            
    6
    
            
    7
    
            
    8
    
            
    9
    
            
    10
    
            
    11
    
            
    12
    
        
    
    
    

    
    
            
    
                
    6
    
                
    4
    
                
    2
    
            
    
        
    

        
        
    
                
    
                    
    1
    
                    
    11

  • 课堂案例：06.Bootstrap栅格系统3.html

  • 



    
    
    
    等宽布局

    
    
    
    

    



    
    
        
    
            
    col
    
            
    col
    
            
    col
    
            
    col
    
        
    
        
    
                
    8
    
                
    4
    
        
    
        

         
    
                
    col
    
                
    col
    
                
    
                
    col
    
                
    col
    
                
    col

第4章 bootstrap公共样式&内容

  • 课堂案例：07.Bootstrap的内容.html

  • 



    
    
    
    内容

    
    
    
    

    



    
    
    h1. Bootstrap heading
    
    
    h2. Bootstrap heading
    
    
    h3. Bootstrap heading
    
    
    h4. Bootstrap heading
    
    
    h5. Bootstrap heading
    
    
    h6. Bootstrap heading
    

    
    Display 1
    
    
    Display 2
    
    
    Display 3
    
    
    Display 4
    

    
      
        
    • 列表之一
      • 
        
    • 列表之二
      • 
        
    • 列表之三
      • 
    
    

    Responsive image

    
    

    
    
            
              
    
                #
                First Name
                Last Name
                Username
              
    
                
            
              
    
                1
                Mark
                Otto
                @mdo
              
    
              
    
                2
                Jacob
                Thornton
                @fat
              
    
              
    
                3
                Larry
                the Bird
                @twitter

  • 课堂案例：08.Bootstrap的公共样式.html

  • 



    
    
    
    公共样式

    
    
    
    




    1111
    2222
    3333
    44444
    55555

    111111
    1111111
    1111111
    11111111
    11111111
    11111111
    1111111
    1111111111
    1111111111

    
    .text-primary
    
    
    .text-secondary
    
    
    .text-success
    
    
    .text-danger
    
    
    .text-warning
    
    
    .text-info
    
    
    .text-light
    
    
    .text-dark
    
    
    .text-body
    
    
    .text-muted
    
    
    .text-white
    
    
    .text-black-50
    
    
    .text-white-50
    

    
    

    
    Primary link
    
    
    Secondary link
    
    
    Success link
    
    
    Danger link
    
    
    Warning link
    
    
    Info link
    
    
    Light link
    
    
    Dark link
    
    
    Muted link
    
    
    White link
    

    
    

    
    .bg-primary
    
    
    .bg-secondary
    
    
    .bg-success
    
    
    .bg-danger
    
    
    .bg-warning
    
    
    .bg-info
    
    
    .bg-light
    
    
    .bg-dark
    
    
    .bg-white
    
    
    .bg-transparent

第5章 bootstrap常用组件

5.1 按钮的样式

  • 课堂案例：09.按钮组件.html

  • 



    
    
    
    Document

    
    
    
    




    
    
    
    
    
    
    
    

    

    
    

    
    
    
    
    
    
    
    

    
    

    

    Primary link
    Link

5.2 轮播图
5.3 导航条
5.4 表单样式（最重要的）

  • 课堂案例：12.表单组件1.html

  • 



    
    
    
    12.表单组件1.html

  • 课堂案例：13.表单组件2.html

  • 



    
    
    
    表单校验

    
    
    
    




    

    
    
        
    
            
    
                
                
                
    
                    满足要求
                
    
            
    
            
    
                
                
                
    
                    密码输入不符合要求
                
    
            
    
            
    
                
                
    
                    
    
                        @
                    
    
                    
                    
    
                        Please choose a username.
                    
    
                
    
            
    
        
    
        
    
            
    
                
                
                
    
                    Please provide a valid city.
                
    
            
    
            
    
                
                
                
    
                    Please provide a valid state.
                
    
            
    
            
    
                
                
                
    
                    Please provide a valid zip.
                
    
            
    
        
    
        
    
            
    
                
                
                
    
                    You must agree before submitting.

第6章 bootstrap综合案例

  • 课堂案例：14.注册页面开发.html

  • 



    
    
    
    Document

    
    
    
    

    

    



    
    
            
    


        
        
    新用户注册
    

        
    
            
            
    
                
                
                    手机号必须是未注册过的.
                
            
    
        
    

        
    
            
            
    
                
                
                    密码必须是6-16位
                
            
    
        
    

        
    
            
            
    
                
                
    
                    两次密码不一致
                
    
            
    
        
    

        
    
            
            
    
                
                
    
                    邮箱不符合格式

你可能感兴趣的:(前端框架,bootstrap,前端)

  • WebSocket的详解 小陆不会敲代码 网络websocket网络协议网络学习笔记node.js
    文章目录前言一、WebSocket是什么？二、WebSocket使用示例前端部分（JavaScript）后端部分（Node.js示例）三、WebSocket心跳机制前端心跳示例后端心跳检测示例（Node.js）四、WebSocket常用事件：五、WebSocket使用场景五、总结前言WebSocket是一种网络通信协议，它提供了一个全双工的通信通道，允许服务器与客户端之间进行实时数据交换。与传统的
  • 代码随想录---算法训练营---总结 感谢上Di_123 前端算法题前端javascript
    这个是结营时期的刷题量，开营的时候不到一百道题。我总共参加了60天这个代码随想录的算法训练营，每天按照计划逐步进行算法训练，卡尔老师讲的很好，要是有不理解的，偶尔会给他提建议，提问题。祝愿代码随想录未来发展越来越好这个训练营，真的刷新了我对算法的认知。其实对于一个前端JavaScript开发工程师来说，对算法要求不是很高，平常的工作中，顶多就写写递归，写写深搜和广搜，其他的方法真的对于我来说很少接
  • 全员DeepSeek时代，前端能做些什么？ 二川bro 前端智能AI前端deepseek
    全员DeepSeek时代，前端能做些什么？前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，可以分享一下给大家。点击跳转到网站。https://www.captainbed.cn/cccDeepSeek开发阶段测试阶段部署阶段智能代码生成设计稿转代码实时代码审查测试用例生成自动化问题定位构建优化建议性能预测模型一、DeepSeek带来的前端范式变革1.1传统前端开发痛点分析DeepSee
  • 329.大学生HTML期末大作业 —【纪念鲁迅文化主题网页】 Web前端网页制作 html+css 一只小小的眠羊 大学生期末大作业文化前端html课程设计javascripthtml5cssjquery
    目录一、更多推荐二、网页简介三、网页文件四、网页效果五、代码展示1.html2.CSS六、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强一、更多推荐欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客5000+
  • js逆向——webpack扣法 sin_0119 javascriptwebpack前端爬虫
    01webpack讲解webpack是个静态模块打包工具，目的是为了让前端工程师写的前端代码变成浏览器可以识别的代码，并且可以达到前端项目的模块化，也就是如何更高效地管理和维护项目中的每一个资源。但无疑是对js逆向造成了妨碍。但如果掌握了扣取webpack的一些技巧也是不难的。接下来，说一下我对扣取webpack代码的一些理解。1.1webpack组成一个最基本的webpack组成有两个部分:自执
  • swagger-01-swagger介绍 褚师子书 swaggerjavaspringbootrestful
    swagger1.学习目标：了解前后端分离了解Swagger的作用和概念在SpringBoot中集成Swagger1.1swagger由来前后端分离，当前流行的开发模式Vue+SpringBoot早先的后端时代：前端只用管理静态页面；后端将html用模板引擎JSP进行开发前后端分离式时代：后端：后端控制层，服务层，数据访问层【后端团队】前端：前端控制层，视图层【前端团队】mock后端数据json,
  • 使用curl测试websocket服务是否能正常连入 tiguer websocketpython网络协议
    部分场景，前端连接不上websocket服务，需要从后台验证websocket服务是否能连入，判断防火墙是否开通，反向代理是否配置正确，可以使用curl测试服务器websocket服务是否正常。分行命令curl--include\--no-buffer\--header"Connection:Upgrade"\--header"Upgrade:websocket"\--header"Host:ex
  • springboot生成二维码在word文档，并下载到本地 尼古拉骚 springboot+IO流javaspringjavascript
    springboot生成二维码在word文档，并下载到本地分为两部分演示，第一部分简单的生成word文档并保存到本地；第二部分生成二维码在word文档，并保存到本地。第一部分首先引入word的依赖资源com.lowagieitext2.1.7com.lowagieitext-rtf2.1.7com.itextpdfitext-asian5.2.0创建Word，并且写入IO流中，前端获取文件流才能保
  • Python就业薪资怎么样？前景如何？ 田野猫咪 Python计算机python人工智能数据挖掘
    Python是一种全栈的开发语言，你如果能学好Python，前端，后端，测试，大数据分析，爬虫等这些工作你都能胜任。那么Python现在在国内的就业薪资高吗？Python就业薪资怎么样？前景如何？对于这些问题，下面小编整理相关内容为大家详情解析，一起来了解吧~如果你也对Python感兴趣，想通过学习Python转行、做副业或者提升工作效率，我也为大家整理了一份【最新全套Python学习资料】一定对
  • 组件封装避坑指南：少写1000行重复代码的秘诀！ 程序员小续 javascript前端reactjs前端框架excelvue
    一、前端组件的分类前端组件可以按照功能、用途、通用性等不同维度进行分类，主要包括以下几类：1.按功能分类展示型组件（UI组件）只负责UI视图渲染，不涉及业务逻辑例如：按钮（Button）、输入框（Input）、表单（Form）、卡片（Card）等业务逻辑组件具有特定业务逻辑，通常和接口交互例如：用户列表（UserList）、订单管理（OrderTable）等功能组件（工具类组件）提供功能性封装，通
  • 前端开发中如何使用ChatGPT辅助开发？ 破碎的天堂鸟 学习教程chatgpt
    以下是前端开发中使用ChatGPT辅助开发的完整指南，涵盖核心应用场景、实践方法及注意事项：一、代码生成与优化基础代码生成HTML/CSS/JS框架搭建：通过自然语言描述需求（如"生成带导航栏的响应式页面"），ChatGPT可快速生成结构清晰的代码骨架。例如，输入“用Flexbox实现垂直水平居中布局”，可得到包含justify-content和align-items属性的代码[1][32]。组件
  • 控制台报错：Uncaught (in promise)：XXXXX问题定位以及前端文件流excel文件下载方法 wh20141212 vue使用前端
    今天对接上传文件的接口时，明明接口是通的，也正常返回了文件流，然而，控制台就是打印不出返回值，而且一直报错Uncaught(inpromise)：XXXXX去查看axios的封装函数，这个internalerror是从返回值拦截器的err中抛出来，这意味着这个axios的函数调用的过程中有异常，失败了。排查问题：1.先从拦截器返回值的判断开始排查，因为控制台无法输出数据查看是否将数据拦截错误，或者
  • 电商商业平台技术架构系列教程之：电商平台概述与发展趋势 AI天才研究院 架构师必知必会系列编程实践大数据人工智能语言模型JavaPython架构设计
    作者：禅与计算机程序设计艺术文章目录1.简介2.电商平台概述2.1电商平台概念2.2电商平台定义2.3电商平台发展史2.3.1起源2.3.2发展阶段2.3.2.1B2C模式2.3.2.2C2B模式2.3.2.3混合模式2.3.2.4超级电商模式2.3.2.5智慧电商模式2.3.2.6小程序电商模式2.3.3目前发展现状3.电商平台关键技术3.1基础技术3.1.1网站前端3.1.2网站后台3.1.3
  • tools:制作根文件系统debian9 maze.ma toolsdebianrootfs文件系统制作
    首先你先新建一个用于mount的目录mkdir/debian9其次你需要保证主机上有debootstrap以及qemu-user-staticapt-get-yinstalldebootstrapqemu-user-static现在你需要dd命令去生成rootfs.img文件ddif=/dev/zeroof=rootfs.imgbs=1Mcount=1024dd命令的话。bs代表一次读入写入大小。
  • Webpack缓存优化策略探讨 创梦引领 webpack缓存前端JavaScript
    在前端开发中，Webpack是一个广泛使用的模块打包工具，它可以将多个前端资源（如JavaScript、CSS、图片等）打包成静态资源，以提高应用的加载速度和性能。然而，由于前端应用的不断迭代更新，缓存成为一个重要的优化方向。本文将探讨如何通过Webpack的缓存优化策略来提升应用的性能。一、文件指纹文件指纹是实现缓存策略的基础。通过给文件名添加唯一的标识符，可以实现在文件内容未变化时，仍然使用缓
  • Nginx解决前端跨域问题 m0_74823827 面试学习路线阿里巴巴nginx前端运维
    1.理解CORS和同源策略1.1同源策略同源策略是一种浏览器安全机制，用于阻止不同源（不同域名、协议或端口）的Web应用相互访问数据。它确保了Web应用的隔离性，防止恶意网站访问用户数据或执行不安全的操作。同源策略下，同一个域（相同的协议、域名和端口）内的资源可以自由访问。但如果协议、域名或端口有任何不同，浏览器会阻止这种访问。1.2跨域资源共享(CORS)CORS（Cross-OriginRes
  • bootstrap row 之间的竖直方向的距离要怎么调整？ yzy85
    问：我有两个rowa和rowb,我发现这两个row之间的竖直方向的距离靠的有点近，我想调整a和b之间的距离，row之前的水平距离可以通过col-md-offset*调整，那竖直方向上的距离要怎么调整，谢谢！答：1、目前我是通过直接加一个空的h1标签，来拉开距离，感觉有点不太rails.大家有更合适的方法吗？谢谢！2、可以自己在css中给top-offset的class写个margin，然后把这个c
  • HTML+CSS面试试题（部分） 四分十七 前端学习htmlhtmlcss大数据
    目录1:主流浏览器的内核分别是什么？2:每个HTML文件开头都有，它的作用是什么3:div+css的布局较table布局有什么优点？4:img的alt属性与title属性有何异同5:strong标签与em标签的异同6:渐进增强和优雅降级之间的不同7:为什么利用多个域名来存储网站资源8:网页标准和标准制定机构的意义9:简述一下src与href的区别10:网页制作会用的图片格式有哪些11:微格式，前端
  • 从 React 看前端 UI 代码范式革命 哔哩哔哩技术 前端react.jsui
    前言本来打算写的主题是“我为什么讨厌ReactHooksAPI“，展开聊聊“小甜甜”是如何变成“牛夫人”的，没想到越写越严肃：）React是两次前端范式革命的引领者，至今仍有繁荣的社区和旺盛的创造力；React多次天才又激进的创新，一些想法被借鉴改良、一些引发广泛质疑，大部分是被认同和接受的；可以说React以一个框架之力，推动了整个前端领域的发展。范式是一种公认的模型或模式。本文从React出发
  • vue2前端使用图片展现视频,无法销毁请求 贾宝玉单臂擒方腊 前端音视频
    实现思路，使用canvas绘制图像，然后使用动画帧刷新页面exportdefault{props:{info:{type:Object,default:()=>({url:'',index:''}),},},data(){return{currentImage:null,isFullScreen:false,canvas:null,ctx:null,canvasStyle:{height:'100
  • 【CTF比赛Web题目快速探测】 D-river securityweb安全安全
    CTF比赛Web题目快速探测一、快速信息收集1.基础信息扫描2.工具自动化辅助二、快速漏洞探测1.高频漏洞靶向测试2.前端相关漏洞三、工具链组合利用1.BurpSuite自动化2.专用工具链3.编码/解码辅助四、常见CTFWeb题快速索引表五、速攻思维导图六、总结在CTF比赛中快速攻克Web题目的核心是“高效信息收集+靶向性漏洞探测”，需结合手动测试与工具链快速定位漏洞类型。以下是一套实战优化流程
  • 前端vue用jsmind写思维导图 Tan-玛卡巴卡 前端vue.jsjavascript
    1、下载依赖npm安装npminstall--savejsmindyarn安装yarnjsmind版本:"jsmind":"^0.4.6",2、完整代码：查看节点删除节点-->放大缩小展开：主题：名称：{{obj.topic?obj.topic:'-'}}部门：{{obj.orgName?obj.orgName:'-'}}描述：{{obj.jobType?obj.jobType:'-'}}状态：正
  • 使用 Spring Boot 实现前后端分离的海康威视 SDK 视频监控 William Dawson springboot
    使用SpringBoot实现前后端分离的海康威视SDK视频监控系统，可以分为以下几个步骤：1.系统架构设计前端：使用Vue.js、React或Angular等前端框架实现用户界面。后端：使用SpringBoot提供RESTfulAPI，负责与海康威视SDK交互。通信：前后端通过HTTP/WebSocket进行通信。视频流：通过海康威视SDK获取视频流，并使用RTSP/RTMP/HLS等协议推送到前
  • npm 常用指令指南 风干牛肉巴旦木 npm
    以下是一些常用的NPM（NodePackageManager）指令，它们在前端开发中非常实用：#NPM常用指令大全##包管理###安装依赖​```bashnpminstall安装package.json中列出的所有依赖。安装开发依赖npminstall--save-dev安装并添加到devDependencies。安装特定版本的包npminstall@安装指定版本的包。全局安装包npminstal
  • 工程化与框架系列（22）--前端性能优化（中） 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端性能优化状态模式
    前端性能优化（运行）引言运行时性能直接影响用户交互体验和应用流畅度。本文将深入探讨前端运行时性能优化的各种策略和技术，包括渲染优化、内存管理、计算优化等关键主题，帮助开发者构建高性能的Web应用。运行时性能概述运行时性能优化主要关注以下方面：渲染性能：减少重排重绘，优化动画效果内存管理：防止内存泄漏，优化内存使用计算优化：提升JavaScript执行效率事件处理：优化事件监听和响应异步操作：合理使
  • Vue.js 开发入门指南 2401_89793006 热门话题vue.jsflutter前端
    Vue.js开发入门指南Vue.js是一款流行的前端框架，它轻量、高效且易于上手，非常适合构建交互式Web应用。本文将介绍Vue.js的基础概念，并带你实现一个简单的Vue应用。1.Vue.js简介Vue.js是一个渐进式JavaScript框架，核心库专注于视图层，并且易于与其他库或现有项目集成。它的主要特点包括：双向数据绑定：数据和视图保持同步。组件化开发：方便代码复用，提高开发效率。虚拟DO
  • npm、Yarn 与 pnpm：选择最适合你的包管理工具 奶凶的小熊崽 前端npmnpm前端node.js
    在前端项目中，npm、pnpm和yarn都是包管理工具，主要用于管理JavaScript依赖。它们的核心功能类似，但在性能、依赖管理方式、磁盘空间占用等方面有所不同。以下是它们的详细对比，以及在项目中的选择建议。一、三者的基本介绍1️⃣npm（NodePackageManager）官方默认包管理器，随Node.js一起安装（无需额外安装）。版本：npmv1-v4（较早版本）：安装速度较慢，存在幽灵
  • 深入解析 Vue3 核心架构与实战范式：从响应式原理到 Composition API 设计哲学 嘉图明 架构前端框架
    引言：框架演进的必然选择在2020年发布的Vue3并非简单的版本迭代，而是对前端工程化痛点的系统性解决方案。本文将深入剖析其架构设计，结合TypeScript类型系统和ChromeDevTools性能分析工具，揭示Vue3如何通过底层重构实现开发体验与运行效率的双重突破。一、响应式系统的量子跃迁：Proxy的颠覆性设计1.1从Object.defineProperty到Proxy的范式转移//Vu
  • 【前端知识】Web Components开发框架quarkC介绍 问道飞鱼 前端开发技术前端javascript开发语言webcomponents
    文章目录概述**QuarkC简介****核心特性****QuarkC的使用方法****1.安装QuarkC****2.创建一个简单的QuarkC组件****3.使用组件****QuarkC的优势****1.更低的学习成本****2.更好的开发体验****3.跨框架兼容性****4.性能优化****5.社区支持与生态****6.开放性和灵活性****QuarkC的适用场景****总结**构建复杂We
  • Github 2024-07-12 Java开源项目日报Top10 老孙正经胡说 githubjava开源Github趋势分析开源项目PythonGolang
    根据GithubTrendings的统计，今日(2024-07-12统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Java项目10Android开源轻量级流媒体前端创建周期：3158天开发语言：Java协议类型：GNUGeneralPublicLicensev3.0Star数量：28641个Fork数量：2896次关注人数：28641人贡献人数：312人Open
  • linux系统服务器下jsp传参数乱码 3213213333332132 javajsplinuxwindowsxml
    在一次解决乱码问题中， 发现jsp在windows下用js原生的方法进行编码没有问题，但是到了linux下就有问题， escape,encodeURI,encodeURIComponent等都解决不了问题 但是我想了下既然原生的方法不行，我用el标签的方式对中文参数进行加密解密总该可以吧。于是用了java的java.net.URLDecoder,结果还是乱码，最后在绝望之际，用了下面的方法解决了
  • Spring 注解区别以及应用 BlueSkator spring
    1. @Autowired @Autowired是根据类型进行自动装配的。如果当Spring上下文中存在不止一个UserDao类型的bean，或者不存在UserDao类型的bean，会抛出 BeanCreationException异常，这时可以通过在该属性上再加一个@Qualifier注解来声明唯一的id解决问题。   2. @Qualifier 当spring中存在至少一个匹
  • printf和sprintf的应用 dcj3sjt126com PHPsprintfprintf
    <?php printf('b: %b <br>c: %c <br>d: %d <bf>f: %f', 80,80, 80, 80); echo '<br />'; printf('%0.2f <br>%+d <br>%0.2f <br>', 8, 8, 1235.456); printf('th
  • config.getInitParameter 171815164 parameter
    web.xml <servlet> <servlet-name>servlet1</servlet-name> <jsp-file>/index.jsp</jsp-file> <init-param> <param-name>str</param-name>
  • Ant标签详解--基础操作 g21121 ant
            Ant的一些核心概念：         build.xml：构建文件是以XML 文件来描述的，默认构建文件名为build.xml。        project：每个构建文
  • [简单]代码片段_数据合并 53873039oycg 代码
            合并规则:删除家长phone为空的记录,若一个家长对应多个孩子,保留一条家长记录,家长id修改为phone,对应关系也要修改。         代码如下:        
  • java 通信技术 云端月影 Java 远程通信技术
    在分布式服务框架中，一个最基础的问题就是远程服务是怎么通讯的，在Java领域中有很多可实现远程通讯的技术，例如：RMI、MINA、ESB、Burlap、Hessian、SOAP、EJB和JMS等，这些名词之间到底是些什么关系呢，它们背后到底是基于什么原理实现的呢，了解这些是实现分布式服务框架的基础知识，而如果在性能上有高的要求的话，那深入了解这些技术背后的机制就是必须的了，在这篇blog中我们将来
  • string与StringBuilder 性能差距到底有多大 aijuans
              之前也看过一些对string与StringBuilder的性能分析，总感觉这个应该对整体性能不会产生多大的影响，所以就一直没有关注这块！         由于学程序初期最先接触的string拼接，所以就一直没改变过自己的习惯！        
  • 今天碰到 java.util.ConcurrentModificationException 异常 antonyup_2006 java多线程工作IBM
    今天改bug，其中有个实现是要对map进行循环，然后有删除操作，代码如下： Iterator<ListItem> iter = ItemMap.keySet.iterator(); while(iter.hasNext()){ ListItem it = iter.next(); //...一些逻辑操作 ItemMap.remove(it); } 结果运行报Con
  • PL/SQL的类型和JDBC操作数据库 百合不是茶 PL/SQL表标量类型游标PL/SQL记录
    PL/SQL的标量类型:    字符,数字,时间,布尔,%type五中类型的 --标量：数据库中预定义类型的变量 --定义一个变长字符串 v_ename varchar2(10); --定义一个小数,范围 -9999.99~9999.99 v_sal number(6,2); --定义一个小数并给一个初始值为5.4 :=是pl/sql的赋值号
  • Mockito：一个强大的用于 Java 开发的模拟测试框架实例 bijian1013 mockito单元测试
    Mockito框架：         Mockito是一个基于MIT协议的开源java测试框架。         Mockito区别于其他模拟框架的地方主要是允许开发者在没有建立“预期”时验证被测系统的行为。对于mock对象的一个评价是测试系统的测
  • 精通Oracle10编程SQL(10)处理例外 bijian1013 oracle数据库plsql
    /* *处理例外 */ --例外简介 --处理例外-传递例外 declare v_ename emp.ename%TYPE; begin SELECT ename INTO v_ename FROM emp where empno=&no; dbms_output.put_line('雇员名：'||v_ename); exceptio
  • 【Java】Java执行远程机器上Linux命令 bit1129 linux命令
    Java使用ethz通过ssh2执行远程机器Linux上命令，   封装定义Linux机器的环境信息   package com.tom; import java.io.File; public class Env { private String hostaddr; //Linux机器的IP地址 private Integer po
  • java通信之Socket通信基础 白糖_ javasocket网络协议
    正处于网络环境下的两个程序，它们之间通过一个交互的连接来实现数据通信。每一个连接的通信端叫做一个Socket。一个完整的Socket通信程序应该包含以下几个步骤： ①创建Socket； ②打开连接到Socket的输入输出流； ④按照一定的协议对Socket进行读写操作； ④关闭Socket。   Socket通信分两部分：服务器端和客户端。服务器端必须优先启动，然后等待soc
  • angular.bind boyitech AngularJSangular.bindAngularJS APIbind
    angular.bind 描述：         上下文，函数以及参数动态绑定，返回值为绑定之后的函数. 其中args是可选的动态参数，self在fn中使用this调用。 使用方法：          angular.bind(se
  • java-13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class KickOutBadGuys { /** * 题目：13个坏人和13个好人站成一圈，数到7就从圈里面踢出一个来，要求把所有坏人都给踢出来，所有好人都留在圈里。请找出初始时坏人站的位置。 * Maybe you can find out
  • Redis.conf配置文件及相关项说明（自查备用） Kai_Ge redis
       Redis.conf配置文件及相关项说明 # Redis configuration file example # Note on units: when memory size is needed, it is possible to specifiy # it in the usual form of 1k 5GB 4M and so forth: #
  • [强人工智能]实现大规模拓扑分析是实现强人工智能的前奏 comsci 人工智能
         真不好意思,各位朋友...博客再次更新...      节点数量太少,网络的分析和处理能力肯定不足,在面对机器人控制的需求方面,显得力不从心....      但是,节点数太多,对拓扑数据处理的要求又很高,设计目标也很高,实现起来难度颇大...
  • 记录一些常用的函数 dai_lm java
    public static String convertInputStreamToString(InputStream is) { StringBuilder result = new StringBuilder(); if (is != null) try { InputStreamReader inputReader = new InputStreamRead
  • Hadoop中小规模集群的并行计算缺陷 datamachine mapreducehadoop并行计算
    注：写这篇文章的初衷是因为Hadoop炒得有点太热，很多用户现有数据规模并不适用于Hadoop，但迫于扩容压力和去IOE（Hadoop的廉价扩展的确非常有吸引力）而尝试。尝试永远是件正确的事儿，但有时候不用太突进，可以调优或调需求，发挥现有系统的最大效用为上策。 -----------------------------------------------------------------
  • 小学4年级英语单词背诵第二课 dcj3sjt126com englishword
    egg  蛋 twenty 二十 any 任何 well 健康的，好   twelve 十二 farm 农场 every 每一个 back 向后，回   fast 快速的 whose 谁的 much 许多 flower 花   watch 手表 very 非常，很 sport 运动 Chinese 中国的  
  • 自己实践了github的webhooks, linux上面的权限需要注意 dcj3sjt126com githubwebhook
    环境, 阿里云服务器   1. 本地创建项目, push到github服务器上面   2. 生成www用户的密钥 sudo -u www ssh-keygen -t rsa -C "[email protected]"     3. 将密钥添加到github帐号的SSH_KEYS里面   3. 用www用户执行克隆, 源使
  • Java冒泡排序 蕃薯耀 冒泡排序Java冒泡排序Java排序
    冒泡排序 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 10:40:14 星期二 http://fanshuyao.iteye.com/
  • Excle读取数据转换为实体List【基于apache-poi】 hanqunfeng apache
    1.依赖apache-poi   2.支持xls和xlsx   3.支持按属性名称绑定数据值   4.支持从指定行、列开始读取   5.支持同时读取多个sheet   6.具体使用方式参见org.cpframework.utils.excelreader.CP_ExcelReaderUtilTest.java 比如： Str
  • 3个处于草稿阶段的Javascript API介绍 jackyrong JavaScript
    原文： http://www.sitepoint.com/3-new-javascript-apis-may-want-follow/?utm_source=html5weekly&utm_medium=email   本文中，介绍3个仍然处于草稿阶段，但应该值得关注的Javascript API. 1) Web Alarm API   &
  • 6个创建Web应用程序的高效PHP框架 lampcy Web框架PHP
    以下是创建Web应用程序的PHP框架，有coder bay网站整理推荐： 1. CakePHP CakePHP是一个PHP快速开发框架，它提供了一个用于开发、维护和部署应用程序的可扩展体系。CakePHP使用了众所周知的设计模式，如MVC和ORM，降低了开发成本，并减少了开发人员写代码的工作量。 2. CodeIgniter CodeIgniter是一个非常小且功能强大的PHP框架，适合需
  • 评"救市后中国股市新乱象泛起"谣言 nannan408
    首先来看百度百家一位易姓作者的新闻： 三个多星期来股市持续暴跌，跌得投资者及上市公司都处于极度的恐慌和焦虑中，都要寻找自保及规避风险的方式。面对股市之危机，政府突然进入市场救市，希望以此来重建市场信心，以此来扭转股市持续暴跌的预期。而政府进入市场后，由于市场运作方式发生了巨大变化，投资者及上市公司为了自保及为了应对这种变化，中国股市新的乱象也自然产生。 首先，中国股市这两天
  • 页面全屏遮罩的实现 方式 Rainbow702 htmlcss遮罩mask
    之前做了一个页面，在点击了某个按钮之后，要求页面出现一个全屏遮罩，一开始使用了position:absolute来实现的。当时因为画面大小是固定的，不可以resize的，所以，没有发现问题。 最近用了同样的做法做了一个遮罩，但是画面是可以进行resize的，所以就发现了一个问题，当画面被reisze到浏览器出现了滚动条的时候，就发现，用absolute 的做法是有问题的。后来改成fixed定位就
  • 关于angularjs的点滴 tntxia AngularJS
      angular是一个新兴的JS框架，和以往的框架不同的事，Angularjs更注重于js的建模，管理，同时也提供大量的组件帮助用户组建商业化程序，是一种值得研究的JS框架。   Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。   这里我们来简单的探讨一下它的应用。   首先使用Angularjs我
  • Nutz--->>反复新建ioc容器的后果 xiaoxiao1992428 DAOmvcIOCnutz
    问题： public class DaoZ {     public static Dao dao() { // 每当需要使用dao的时候就取一次     Ioc ioc = new NutIoc(new JsonLoader("dao.js"));     return ioc.get(
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他