前端
文章平均质量分 91
讲台催眠师明哥
忽如一夜春风来,F=ρ液gV排
展开
-
深入理解 Vue Router:构建可靠的前端路由系统
前端路由是指在单页应用(SPA,Single Page Application)中,通过客户端的路由机制实现页面切换和导航的方式。它将不同的 URL 映射到相应的组件或页面,并通过页面切换而无需重新加载整个页面。前端路由的特点包括:基于 URL:前端路由使用 URL 来标识不同的页面或视图状态。每个页面或视图状态都有一个对应的 URL,用户可以通过修改 URL 来导航到不同的页面或视图。单页应用:前端路由通常用于单页应用。原创 2023-08-24 18:03:44 · 595 阅读 · 0 评论 -
Vue3组合式API详解 - 大型应用的高端写法
文件中进行功能的使用,从而实现功能的复用逻辑。为了更好的组合代码,可以创建统一规范的。,从而抽象可复用的代码逻辑。函数的调用,就可以得到内部。出来的对象原创 2023-08-21 18:06:32 · 536 阅读 · 0 评论 -
Vue3语法系统进阶 - 全面掌握Vue3特性
除了核心功能默认内置的指令 (例如v-model和v-show),Vue 也允许注册自定义指令,来实现一些封装功能。自定义指令的实现实现一个简单的v-color指令,用于给元素添加背景色下面我们来完成一个实际可以应用的指令,按钮权限指令,一般情况下这种指令不会局部使用,而是全局使用,所以可以通过vue来实现一个全局的按钮权限指令自定义全局属性添加一个可以在应用的任何组件实例中访问的全局property,这样在引入一些第三方模块的时候,就不用每一次进行import操作,而是直接通过this。原创 2023-08-20 19:36:08 · 354 阅读 · 0 评论 -
Vue3组件应用及单文件组件 - 抽象独立的代码
Vue组件是Vue.js框架中的核心概念,用于将用户界面划分为独立、可重用的模块。组件由模板定义结构和外观,脚本包含逻辑,样式设置样式表。通过组件化开发,使代码更模块化、可维护性更高,提供了更好的代码重用性和开发效率。原创 2023-08-16 11:53:33 · 106 阅读 · 0 评论 -
Vue.js快速入门指南:零基础也能轻松上手,开启前端开发之旅!
在现代Web开发领域中,Vue.js已经成为一种备受追捧的JavaScript框架。它的简洁易学的语法、出色的性能和灵活的架构使其成为开发人员喜爱的工具之一。本指南旨在帮助您快速入门Vue.js,并从零开始构建令人惊艳的Web应用。我们将深入探讨Vue.js的核心概念.原创 2023-08-14 20:09:53 · 205 阅读 · 0 评论 -
CSS革命:用Sass/SCSS引领前端创新
在现代的前端开发中,CSS已成为呈现网页和应用程序样式的核心。然而,原生的CSS语法在大型项目中可能变得混乱、冗长且难以维护。为了解决这些问题,SCSS(Sass CSS)和Sass(Syntactically Awesome Style Sheets)应运而生。本文将带你简单了解sass和scss。原创 2023-08-09 20:56:11 · 823 阅读 · 0 评论 -
拆解与重构:慕云游首页组件化设计
在现代Web开发中,组件化设计是一种常见的开发模式,它有助于提高代码的可维护性、可重用性和可测试性。通过将一个大型应用程序拆分为多个独立的组件,我们可以更加灵活地开发和维护网站。本文将以慕云游首页为例,探讨如何通过组件化设计实现它的页面布局与交互功能。原创 2023-08-09 19:34:07 · 504 阅读 · 0 评论 -
从零开始:跟着 Art-template 学习前端模板引擎
Art-template 是一款基于 JavaScript 的快速、简单且功能丰富的模板引擎。在 HTML 文件中使用标签定义模板,或者将模板存储在外部文件中,并通过标签引入。原创 2023-08-09 11:02:46 · 1241 阅读 · 0 评论 -
在WebStorm中通过live-server插件搭建Ajax运行环境
官网: https://nodejs.cn/download/使用淘宝的镜像:也可以使用cnpm配置之后可以验证是否成功(返回刚刚设置的地址即成功):之后就可以使用cnpm了:(安装live-server)webstorm不会自动开启服务器,需要手动开启打开终端,输入命令原创 2023-08-07 21:09:00 · 959 阅读 · 1 评论 -
探索 AJAX 技术:实现动态数据交互的前端利器
简介:AJAX(Asynchronous JavaScript and XML)技术在 Web 前端开发中扮演着重要的角色,它通过异步通信和动态内容更新,为用户带来更好的交互体验。本篇笔记将详细探索 AJAX 技术,并通过生动的代码演示来展示其在实现动态数据交互方面的优势。原创 2023-08-07 20:19:10 · 1167 阅读 · 0 评论 -
Babel编译与Webpack
Webpack 是一个现代化的静态模块打包器(module bundler),它能够将多个前端资源(如 JavaScript、CSS、图片等)打包成一个或多个静态资源文件,以优化应用程序的性能。Webpack 的一些重要特点和功能:模块化开发:Webpack 支持使用模块化来组织代码。你可以使用类似于 ES6 import/export 语法的方式导入和导出模块,使代码更具可维护性和可复用性。打包编译:Webpack 将应用程序的所有依赖项视为模块,并通过解析这些依赖项的关系图来构建一个依赖图。原创 2023-08-02 21:07:00 · 628 阅读 · 0 评论 -
ES6之Promise、Class类与模块化(Modules)
在早期版本的 JavaScript 中,并没有内置的模块系统,但现代的 JavaScript 引擎(如Node.js和浏览器中的ES6模块)已经支持对模块的原生语法和功能。导入和导出的语法:模块的导入和导出可以有不同的语法形式,具体取决于使用的 JavaScript 平台和环境。默认导出(Default Export):一个模块可以有一个默认导出,即默认导出一个值(变量、函数、类等)。可以在子类的构造函数中调用父类的构造函数,并传递需要的参数。关键字,我们可以引入其他模块导出的内容,并在当前模块中使用。原创 2023-08-02 10:37:29 · 830 阅读 · 0 评论 -
JavaScript高级——ES6基础入门
ES6(ECMAScript 6),也被称为ES2015,是JavaScript的第六个版本.它于2015年发布,并在现代JavaScript开发中扮演了重要的角色.看千遍,不如自己动手写一遍遇到问题不要怕,微笑着面对它记笔记。原创 2023-07-29 22:45:44 · 2941 阅读 · 0 评论 -
正则表达式
正则表达式(regular expression)描述了,经常被用于检查字符串是否符合预定的格式要求正则表达式"按位”描述规则,是指它是一位一位的描述字符串的构成形式。原创 2023-07-28 00:23:18 · 687 阅读 · 0 评论 -
面向对象——步入JavaScript高级阶段的敲门砖
在计算机编程中,对象是一种非常重要的概念。它可以帮助我们更好地组织和管理数据,使代码更加模块化和可复用。对象可以存储多个键值对,每个键值对表示一个属性,属性可以是基本类型的值或者其他对象。通过对象,我们可以定义和调用方法,对属性进行操作或者实现特定的功能。面向对象编程的思想强调通过对象和类来组织和管理代码,使其更加易于理解和维护。实际上,将问题和解决方案分解为对象是一种非常自然和直观的方式,也是实现代码复用和模块化的关键。原创 2023-07-27 17:36:41 · 166 阅读 · 0 评论 -
JavaScript核心操作DOM与BOM
JavaScript = ECMAScript(JS基础) + DOM +BOM本文旨在介绍DOM (Document Object Model) 和 BOM (Browser Object Model) 的基本概念和相关操作,以及如何利用它们来实现动态交互效果和特效开发。在DOM部分中,我们将详细介绍节点操作,包括如何访问元素节点、节点之间的关系、如何改变元素节点的内容,以及节点的创建、移除和克隆等操作。我们还将介绍如何使用事件监听来处理各种事件,并探讨事件传播和事件对象的相关知识。原创 2023-07-24 16:18:13 · 233 阅读 · 0 评论 -
JavaScript基础语法及小案例
函数是一种在编程中用于封装代码的机制。它是一段可重复使用的代码块,通过给它一个名称,可以在程序中多次调用该代码块,从而实现代码的模块化和复用。函数由以下几个主要组成部分:函数名:函数具有一个名称,用于标识和调用函数。函数名应具有描述性,能够清晰地表达函数的功能。参数:函数可以接受零个或多个参数(也称为形式参数)。参数是函数在调用时传递给函数内部的值。参数可以在函数内部使用,用于执行特定的操作和计算。参数允许将数据传递到函数中,从而使函数更加通用和灵活。原创 2023-07-21 00:02:09 · 224 阅读 · 0 评论 -
HTML5+CSS3静态网页开发 —— 慕云游项目
难度:⭐⭐(中等)——适合学习完html5和css3的小伙伴用于巩固练习编辑器:WebStorm慕云游项目是一个基于HTML5和CSS3的静态网页开发项目。在项目中,使用了一些HTML5和CSS3的新功能和特性来创建一个具有现代化外观和交互性的网页。使用语义化的HTML结构:在项目中,我们遵循了HTML5的语义化标签,如等来更好地描述页面的结构和内容。原创 2023-07-19 23:39:38 · 836 阅读 · 2 评论 -
CSS过渡与动画
过渡是一种平滑、渐变的属性变化效果,通过在两个状态之间应用过渡来实现。它通过指定元素的初始状态和目标状态之间的属性变化,并设置过渡属性、持续时间、时间函数和延迟等参数来控制过渡效果。通常与伪类(如:hover、:focus)搭配使用,用于创建简单的交互效果。动画是一种更灵活、复杂的样式变化机制。通过设置关键帧(keyframes),动画定义了元素在动画过程中的多个状态和样式。可以通过改变多个属性、配置循环次数、播放方向等来控制动画效果。动画可以手动或自动触发,提供更丰富、连续的样式变化效果。原创 2023-07-17 11:12:13 · 366 阅读 · 0 评论 -
CSS浮动定位与背景样式
在CSS中,浮动(float)是一种元素定位的属性。通过设置元素的浮动属性,可以使元素脱离正常文档流,并向左或向右浮动到其容器内的指定位置。浮动元素会尽可能地靠近容器的左侧或右侧,并且其他内容会环绕在其周围。可以创建多列布局、图文混排等效果。浮动元素常用的属性如下:– 将元素向左浮动。– 将元素向右浮动。当元素浮动时,它会尽量靠近容器的边缘,并且周围的内容会被重新布局以适应浮动元素的位置。但需要注意的是,浮动元素不会占据正常文档流的空间,这可能导致浮动元素之后的元素与浮动元素重叠。原创 2023-07-16 23:04:17 · 237 阅读 · 0 评论 -
CSS基础语法与盒模型
CSS的中文全称是“层叠样式表”(Cascading Style Sheets)。最新版本是CSS3。CSS的主要功能是用于为HTML和XML等文档添加样式和布局。通过CSS,可以控制网页的外观和格式,如设置文本颜色、背景、字体样式、布局等。CSS还支持过渡效果、动画、响应式设计和媒体查询等高级特性,使得网页制作更加灵活和可交互。原创 2023-07-16 19:47:37 · 1264 阅读 · 0 评论 -
HTML5基础语法与标签
HTML5是什么?HTML5是超文本标记语言(HTML)的第五个主要版本,用于描述网页结构和呈现内容,它是到目前为止最新且最强大的HTML版本。本文主要介绍了HTML5的基础语法与标签。原创 2023-07-07 19:09:51 · 1021 阅读 · 0 评论