JS
文章平均质量分 92
码农白衣
初次见面,请多关照
展开
-
初识Vue-混入mixins(详解分发 Vue 组件中可复用功能)
混入是一种将可复用功能注入到 Vue 组件中的方式,它允许你将组件中的一些选项混合到多个组件中。混入是一种Vue.js提供的一种灵活的代码复用方式,允许将一组组件选项合并到一个对象中,然后将其应用到多个组件中。可以使用在Vue实例创建之前全局注册一个混入,使得混入对象中的选项对所有组件都可用。在组件中使用mixins选项引入一个或多个混入对象,使得这些混入对象中的选项对该组件及其子组件可用。混入对象可以包含数据、方法、生命周期钩子、计算属性、观察者和指令等组件选项。原创 2024-05-06 20:19:36 · 1103 阅读 · 1 评论 -
初识Vue-生命周期函数(详解如何让组件在不同阶段执行相应操作)
生命周期函数是在Vue组件生命周期中的特定时间点执行的函数。Vue实例有一个完整的生命周期,从创建、挂载、更新到销毁。在这个过程中,Vue提供了一系列的钩子函数,让你能够在特定阶段执行自定义逻辑。生命周期函数是在Vue组件实例化、挂载、更新、销毁等不同阶段触发的钩子函数,用于执行特定的操作。: 在实例初始化之后,数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。在这个阶段,组件实例的选项对象已经被处理,但实例的数据和方法尚未初始化。created。原创 2024-05-06 20:11:55 · 1120 阅读 · 1 评论 -
初识Vue-插槽(详解插槽slot的运用)
Vue.js中的插槽是一种机制,允许你在父组件中将任意内容传递给子组件,使得组件更加灵活和可复用。插槽允许你定义一个模板,并在子组件中定义插槽的位置,然后在父组件中填充内容。插槽是 Vue.js 中一种强大的组件化技术,允许父组件向子组件传递内容。它允许子组件在特定位置接收父组件传递的内容,并在其内部渲染。默认插槽是没有名字的插槽,用于接收父组件传递的内容。父组件可以在子组件的默认插槽中传递任意内容,子组件可以在相应位置渲染这些内容。命名插槽允许父组件传递具有特定名称的内容到子组件中的相应插槽中。原创 2024-05-05 22:37:07 · 1194 阅读 · 2 评论 -
初识Vue-组件通信(详解props和emit)
在组件化开发中,一个应用程序通常由多个组件组成。这些组件可能位于不同的层级,有不同的作用和责任。组件通信就是让这些组件之间能够相互交流、传递数据、共享状态或触发行为的机制。Props 允许父组件向子组件传递数据。子组件通过 props 接收父组件传递的数据,并可以在组件内部使用这些数据。父组件使用 v-bind 指令将数据传递给子组件,并在子组件标签上使用相应的 prop 名称。Custom Events 允许子组件向父组件发送消息。原创 2024-05-04 22:57:35 · 1017 阅读 · 2 评论 -
初识Vue-组件化开发(应用实例)
开发一个简单的任务管理应用,其中包含任务列表和添加任务的功能。我们可以使用 Vue.js 来构建这个应用,并将其组件化。在这个示例中,我们创建了一个简单的任务管理应用。任务列表组件用于显示任务列表,添加任务组件用于添加新任务。在应用入口组件中,我们将这两个组件组合在一起,并通过 props 和事件进行通信。通过这种方式,我们实现了组件化开发,使得应用的各个功能模块独立、可重用和易于维护。显示商品列表将商品添加到购物车显示购物车中的商品列表计算购物车中商品的总价。原创 2024-05-02 12:00:13 · 832 阅读 · 0 评论 -
初识Vue-组件化开发(详解各个组件)
Vue.js中的组件是可复用的Vue实例,具有自己的模板、逻辑和样式。组件允许开发者将页面分割成独立、可复用的模块,使得代码更易维护、可读性更高。每个 Vue 应用都是通过用 createApp 函数创建的,传递给 createApp 的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。const RootComponent = { /* 选项 */ }// 创建一个Vue 应用。原创 2024-05-02 08:06:07 · 1310 阅读 · 1 评论 -
Flex弹性盒子布局案例(认识弹性布局)
在 Flexbox 中创建一个灵活的网格布局是非常常见的。这个示例创建了一个简单的响应式布局,项目在 Flex 容器中根据空间自动换行,并在容器中均匀分布。创建了一个包含侧边栏的布局,主内容区域会自动填充剩余空间,而侧边栏则保持固定宽度。这个示例创建了一个容器,其中的内容水平和垂直居中对齐,适用于创建模态框等UI组件。这个示例创建了一个包含三个卡片的卡片布局,卡片在 Flex 容器中等距分布。此示例创建了一个水平导航菜单,其中链接在 Flex 容器中等距分布。原创 2024-04-16 19:50:08 · 674 阅读 · 0 评论 -
Flex布局(秒懂弹性盒子的使用)
Flex 弹性盒子是一种 CSS 布局模型,用于设计灵活的、可自适应的布局结构。通过 Flex 布局,你可以轻松地创建水平或垂直方向的布局,使内容在容器中动态地适应空间。基本概念Flex 弹性盒子模型是一种 CSS 布局模型,用于创建灵活的、自适应的布局结构。该模型由容器(Flex Container)和项目(Flex Item)组成,容器是 Flex 项目的父元素。主要属性display: 定义一个块级容器为 Flex 容器,可以是flex或。原创 2024-04-16 19:33:42 · 1549 阅读 · 0 评论 -
AJAX请求(axios篇)
AJAX是“Asynchronous JavaScript and XML”的缩写,它是一种用于创建交互式网页应用程序的技术。AJAX允许在不重新加载整个网页的情况下,异步地向服务器发送请求并获取数据。这使得网页可以更加动态和交互性,而不会中断用户的操作。Axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js环境,它可以在前端和后端进行HTTP请求。它的设计简单、易于使用,提供了丰富的功能和选项来处理HTTP请求和响应。原创 2024-04-15 15:32:25 · 1293 阅读 · 1 评论 -
Fetch API(秒懂如何发送请求)
Fetch API 是现代浏览器提供的用于发起网络请求的接口,它提供了一种更简洁、更强大的方式来进行网络通信。Fetch API 可以替代传统的 XMLHttpRequest(XHR)对象,提供了更好的使用体验和更强大的功能。Fetch API 是一种现代的 JavaScript API,用于在 Web 应用程序中进行网络请求和数据交换。Fetch API 使用 Promise 对象来处理异步操作,使得处理网络请求更加简洁和灵活。原创 2024-04-15 19:45:53 · 979 阅读 · 0 评论 -
CSS中grid网格布局(秒懂如何实现网格布局)-菜鸟教程
网格是一组相交的水平线和垂直线,它定义了网格的列和行。CSS 提供了一个基于网格的布局系统,带有行和列,可以让我们更轻松地设计网页,而无需使用浮动和定位。网格布局由一个父元素及一个或多个子元素组成。运行结果:当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后,它就变成了一个网格容器,这个元素的所有直系子元素将成为网格元素。3.网格轨道我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的列原创 2024-04-12 19:35:58 · 1475 阅读 · 0 评论 -
ES6方法set()和map()(秒懂set和map的应用)
Set是一种无序且唯一的集合,它可以存储任何类型的值(原始值或对象引用),但是不允许重复的值。Map是一种键值对的集合,其中的键可以是任意数据类型,包括原始值、对象引用或者函数。与Object不同的是,Map中的键值对是按插入顺序存储的。Set:Set是一种集合,其中的元素是唯一且无序的。它存储一组唯一的值,不允许重复。主要用于去重、存储唯一值的集合。常用于数组去重、统计唯一值、过滤重复输入等场景。Map:Map是一种键值对集合,其中的每个元素都由一个键和一个值组成。原创 2024-04-12 19:19:43 · 740 阅读 · 0 评论 -
JavaScript HTML DOM EventListener(事件监听器)(秒懂事件监听)
JavaScript HTML DOM EventListener(事件监听器)是一种用于在HTML文档中捕获和处理事件的机制。通过使用事件监听器,可以在特定的HTML元素上注册监听器函数,以便在事件发生时执行相应的操作。事件监听是在网页开发中常用的技术,用于捕获特定的用户操作或系统事件,并在事件发生时执行相应的代码。事件类型: 事件可以是用户操作,如点击、悬停、键盘输入等,也可以是系统事件,如窗口加载、滚动、大小调整等。事件目标。原创 2024-04-11 19:26:38 · 1723 阅读 · 0 评论 -
JS中Date(日期)对象(秒懂Date用法-菜鸟教程)
在JavaScript中,Date对象用于处理日期和时间。它允许你创建日期对象,以便执行日期和时间的操作,如获取当前日期和时间、设置特定日期、获取日期的各个部分(年、月、日、小时、分钟、秒等),以及进行日期比较和计算等。Date对象是JavaScript中用于处理日期和时间的内置对象之一。它提供了许多方法来获取、设置、格式化和操作日期和时间。可以使用new关键字和Date构造函数来创建Date对象。如果不传递任何参数,则会创建一个表示当前时间的Date对象。原创 2024-04-11 18:34:44 · 1300 阅读 · 0 评论 -
JS中的JSON(秒懂如何操作JSON)
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的语法子集,但是独立于编程语言。JSON格式可以用来在网络中传输数据,也可以存储数据。JSON采用键值对的方式表示数据,其中键是字符串,值可以是字符串、数字、布尔值、数组、对象或者null。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于在不同系统之间进行数据传输和存储。格式JSON采用键值对的方式存储数据。原创 2024-04-10 18:24:39 · 1603 阅读 · 1 评论 -
JS中的Math对象(秒懂如何使用Math对象)
目录一、Math介绍1.概念2.对象属性3.对象方法 二、Math使用三、Math实例1.计算圆的面积和周长:2.生成一个介于1到10之间的随机整数:3.将一个浮点数四舍五入为两位小数:4.求两个数的最大值和最小值:四、Math应用场景五、总结Math对象是JavaScript中的一个内置对象,用于执行数学相关的操作和计算。它不是构造函数,因此不能实例化,而是直接通过Math来调用其方法和属性。常数:数学方法:最值计算:将数字的小数部分去掉,只保留整数部分。 三、原创 2024-04-10 18:45:01 · 1243 阅读 · 1 评论 -
JS中的异步async-await(秒懂异步编程模式)
异步编程是一种编程模式,用于处理程序中需要长时间等待的操作,比如网络请求、文件读写、定时器等。在传统的同步编程模式下,程序会按照顺序一步步执行,如果遇到需要耗时的操作,程序会阻塞等待操作完成,直到操作完成后才能继续执行后续代码。异步编程模式是一种用于处理异步操作的编程范例,其核心目标是提高程序的效率和性能,同时保持代码简洁易读。回调函数最基本的异步编程模式,通过将函数作为参数传递给异步操作,在操作完成时调用该函数。容易导致回调地狱(Callback Hell),难以维护和理解,因为嵌套层级很深。原创 2024-04-09 18:28:58 · 1012 阅读 · 0 评论 -
JS中Array数组方法的实战案例
当处理数组时,JavaScript提供了许多有用的数组方法。forEach():对数组中的每个元素执行给定的函数。应用:循环遍历数组并对每个元素执行操作。map():对数组中的每个元素执行给定的函数,并返回一个新数组。应用:在原始数组的基础上创建一个新数组,每个元素经过函数处理后得到新的值。filter():根据给定的条件筛选出数组中的元素,并返回一个新数组。应用:从数组中筛选出满足特定条件的元素,生成一个新的子集。reduce():将数组中的元素通过指定的函数进行累积计算,返回一个结果。原创 2024-04-08 18:35:49 · 1141 阅读 · 0 评论 -
JS中Lodash工具库(秒懂如何使用Lodash并手写精简版Lodash)
Lodash 是一个现代化的 JavaScript 实用工具库,提供了大量的实用函数,旨在简化 JavaScript 编程的复杂性。它由 John-David Dalton 创建,并且广受 JavaScript 社区的欢迎和认可。原创 2024-04-07 16:53:32 · 1182 阅读 · 0 评论 -
JS中的Day.js(秒懂如何快速处理日期以及手写Day.js)
Day.js 是一个轻量级的 JavaScript 日期库,用于解析、操作和格式化日期和时间。它的设计灵感来自于 Moment.js,但相比于 Moment.js,Day.js 更小巧、性能更好,并且提供了更现代化的 API。原创 2024-04-07 16:36:47 · 1345 阅读 · 0 评论 -
JS中Array数组方法(秒懂数组方法如何使用)
JavaScript中的Array(数组)是一种用于存储多个值的数据结构,它是一种有序的集合,可以包含各种类型的数据,例如数字、字符串、对象等。原创 2024-04-06 08:51:56 · 1534 阅读 · 1 评论 -
HTML5本地存储(localStorage和sessionStorage)
HTML5引入了本地存储机制,使得网页能够在客户端存储数据。Web Storage (localStorage 和 sessionStorage): 提供了在浏览器关闭后仍然保持数据的能力,数据存储在客户端,并没有过期时间。: 仅在当前会话期间(即当前浏览器窗口或标签页处于打开状态)有效,关闭窗口或标签页时会被清除。这两种存储方式都是基于键值对的形式存储数据,并且只能存储字符串类型的数据。但是,你可以使用和将对象转换为字符串并存储,以及从字符串中解析出对象。原创 2024-04-06 08:27:25 · 1260 阅读 · 1 评论 -
JS中的正则表达式(秒懂如何写正则表达式)
正则表达式是用于匹配字符串模式的工具,它是由字符和特殊字符组成的序列。正则表达式通常用于在文本中搜索、匹配或替换特定模式的文本。原创 2024-04-05 11:49:32 · 783 阅读 · 1 评论 -
JS中事件处理机制(秒懂事件委托、事件捕获和事件冒泡)
综上所述,事件委托利用了事件冒泡的特性来简化事件处理程序的管理和提高性能,而事件捕获相对不常用。在事件捕获阶段,会从根节点开始,逐级向下直到目标元素,所以我们在事件捕获阶段输出了点击的目标元素的文本内容。在事件冒泡阶段,事件会从目标元素开始,逐级向上直到根节点,所以我们在事件冒泡阶段输出了点击的目标元素的文本内容。:在特定情况下,事件委托可以用作事件代理,即将一个对象上的事件委托到另一个对象上,使得第一个对象可以监听和响应第二个对象上的事件。这可以通过事件委托在模态框的父元素上捕获点击事件来实现。原创 2024-04-05 11:31:21 · 810 阅读 · 1 评论