- 博客(100)
- 收藏
- 关注
原创 vue单页面应用?
在 Vue.js 中,单页面应用 (SPA) 是一种 Web 应用程序,它在加载初始页面后,通过动态地更新页面的内容而不是通过重新加载整个页面来实现用户导航和交互。组件通信:通过 props 和 events 实现组件之间的通信,父组件可以向子组件传递数据,子组件可以通过 events 向父组件发送消息。总的来说,Vue.js 提供了丰富的工具和功能来帮助开发者构建高效的单页面应用,同时也提供了良好的文档和社区支持,使得开发过程更加顺畅。这样可以使代码更加清晰,易于维护和复用。
2024-10-15 23:53:39 166
原创 如何声明一个类?类如何继承?
在上面的示例中,我们首先声明了一个 Animal 类,包含了一个构造函数和一个 speak 方法。在子类的构造函数中,通过 super() 调用父类的构造函数,并可以在子类中重写父类的方法。需要注意的是,在子类的构造函数中必须先调用 super(),这样才能正确地初始化父类的属性。另外,如果子类定义了与父类同名的方法,在子类实例调用该方法时会优先调用子类的方法而不是父类的方法(即发生方法覆盖)。通过继承,子类可以复用父类的属性和方法,并且可以添加自己特有的属性和方法。这样可以提高代码的可维护性和可扩展性。
2024-10-15 23:52:01 204
原创 ref和reactive的区别?
在响应式编程中,数据的变化会自动地传播给依赖于该数据的其他部分,从而实现数据的自动更新和同步。Reactive 编程通常使用观察者模式或者流式编程来实现,比如在 Vue.js 中就使用了响应式数据和计算属性来实现数据的自动更新。在编程中,我们可以通过引用来访问、修改特定的数据。Ref 通常用于管理和操作数据的引用,比如在 React 中使用 Ref 来访问和操作 DOM 元素。因此,Ref 主要是对数据的引用进行操作,而 Reactive 则是一种编程范式,强调数据之间的依赖关系和自动更新。
2024-10-13 14:45:00 228
原创 webpack和vite的区别?
综上所述,Webpack适用于复杂的项目和需要更多配置和插件支持的场景,而Vite则适用于快速原型开发、小型项目或者对构建速度要求较高的场景。内置了一个基于原生 ES 模块的开发服务器,它使用浏览器原生的模块解析,无需打包,可以直接运行源代码,从而提供了更快的开发环境。采用了即时编译的方式,通过利用现代浏览器的原生 ES 模块支持,可以实现秒级启动和热更新的开发体验,因此在开发过程中更快。的配置更为简单,它的默认配置已经足够满足大多数项目的需求,无需过多的配置。相对较新,生态系统和插件支持相对较少。
2024-10-13 12:30:00 308
原创 vue如何创建项目?
至此,你已经成功从零开始创建了一个Vue项目,并可以开始开发自己的Vue应用了。如果需要更多定制化的配置,可以在创建项目时选择手动配置,并根据需求进行配置。在浏览器中访问 http://localhost:8080/(默认端口可能会有所不同),即可看到Vue项目的默认页面。在创建过程中,Vue CLI 会询问你关于项目配置的一些选项,例如选择手动配置或使用预设配置等。下载安装Node.js: 在Node.js官网下载适合你操作系统的Node.js安装包,并按照提示进行安装。:创建新的Vue项目。
2024-10-13 08:11:24 294
原创 link和@import的区别是什么?
引入 CSS:主要用于引入外部样式表文件,如 <link rel="stylesheet" href="styles.css">。加载顺序:@import 引入的样式表会在整个页面加载完成后才开始加载,可能会造成页面加载速度较慢,因为它会阻塞其他资源的加载。一般来说,推荐使用 <link> 标签来引入外部样式表文件,因为它具有更广泛的用途并且能够并行加载资源,有助于提高页面加载性能。<link> 具有更广泛的用途,可以引入各种类型的外部资源,而 @import 主要用于引入外部样式表。
2024-10-13 08:08:12 288
原创 什么是同源策略?
同源策略是浏览器提供的一个安全功能,它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。3.为了防止恶意网站在自已网站有访问其他网站的权利,以免通过cookie免登,拿到数据。出现跨域的根本原因 浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。跨域指的是两个 URL 的协议、域名、端口只要其中一个不一致,就会形成跨域。首先我们要知道什么是同源,当两个页面的端口,协议,域名都相等的时候这才叫。2.为了防止恶意网站iframe其他网站的时候,获取数据。
2024-10-07 06:00:00 179
原创 js中的事件冒泡是什么?
然后,该事件会从当前元素向其父元素逐级传播,直到达到<html>元素或整个文档树。在这个示例中,点击子元素时,将只弹出“Child element clicked”提示框,而不会弹出“Parent element clicked”提示框,因为event.stopPropagation()阻止了事件冒泡。事件冒泡的主要优点是可以在一个父元素上监听多个子元素的事件,从而避免在每个子元素上都绑定事件处理函数,减少内存占用并简化代码。事件冒泡是一种事件传播机制,允许事件从触发元素向上级元素逐级传播。
2024-10-06 23:49:33 145
原创 input框的number属性,如何去除它的上下箭头呢?
一般我就是用这段代码直接添加到css文件里就可以了,去除它的箭头这个可以更好的增加用户体验!
2024-10-06 23:48:35 98
原创 什么是跨域?如何解决跨域?
概念:跨域:指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器览器对iavascript施加的安全限制。例如:a页面想获取b页面资源,如果a、b页面的议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都是限制了跨域访问,也就是不允许跨域请求资源。注意: 跨域限制访问,其实是浏览器的限制。理解这一点很重要!!
2024-09-21 21:14:25 185
原创 关于Canvas绘图和SVG绘图绘图的区别
Canvas是HTML5中的一个元素,它提供了一个可以通过JavaScript进行绘图的区域。Canvas绘图是基于像素的,通过JavaScript代码直接操作像素来实现绘图效果。Canvas绘图适合处理大量的动态图形,如游戏、数据可视化等。:SVG是一种基于XML的矢量图形格式,它使用XML描述图形,可以通过CSS和JavaScript进行样式和交互控制。SVG绘图是基于矢量的,可以无损地缩放和变换。SVG绘图适合处理静态的、复杂的图形,如图标、地图等。
2024-09-01 19:30:08 651
原创 css中px和em的区别
em 是相对单位,根据继承它的父元素的字体大小来计算实际的大小。默认情况下,1em 等于父元素的字体大小。例如,如果父元素的字体大小为 16px,那么 1em 将等于 16px。如果一个元素的字体大小为 2em,那么它将等于父元素字体大小的两倍。在上面的例子中,parent 元素的字体大小为 16px,所以 .child 元素的高度将等于 16px。.child 元素的宽度设置为 200px,所以它将始终显示为 200 个像素宽。例如,一个宽度为 200px 的元素将始终显示为 200 个像素宽。
2024-08-18 00:04:17 217
原创 什么是事件流?
概念:事件流就是当我们触发一个事件时,经过一系列操作的过程称为事件流,简单通俗来讲就是点击事件后,按顺序执行的就是事件流。那事件是什么呢?事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
2024-08-04 10:00:00 226
原创 JavaScript中this指向问题
全局作用域中的"this": 在全局作用域中,"this"指向全局对象,即window对象。使用call、apply或bind方法调用时,"this"指向传入的第一个参数。作为普通函数调用时,"this"指向全局对象(window对象)。作为对象方法调用时,"this"指向调用该方法的对象。普通函数调用,this指向全局对象。
2024-08-04 06:00:00 416
原创 什么是跨域?如何解决跨域?
概念:跨域:指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器览器对iavascript施加的安全限制。例如:a页面想获取b页面资源,如果a、b页面的议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都是限制了跨域访问,也就是不允许跨域请求资源。注意: 跨域限制访问,其实是浏览器的限制。理解这一点很重要!!
2024-07-20 16:49:15 184
原创 JSON与AJAX:网页交互的利器
在这个示例中,当用户点击“获取数据”按钮时,JavaScript会发送一个GET请求到服务器上的data.json文件。服务器返回JSON格式的响应后,JavaScript使用JSON.parse()方法将JSON字符串解析为JavaScript对象,并遍历对象数组来构建HTML字符串。通过掌握JSON和AJAX的原理和应用方法,我们可以开发出更加优秀和用户体验更好的Web应用。JSON是一种轻量级的数据交换格式,它基于ECMAScript的一个子集,采用完全独立于语言的文本格式来存储和表示数据。
2024-07-20 16:47:57 348
原创 冒泡排序的原理以及JavaScript实现
冒泡排序是一种简单的排序算法,它重复地走访过要排序的元素列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访元素的工作是重复地进行直到没有再需要交换,也就是说该元素列已经排序完成。原理冒泡排序的工作原理是重复地遍历待排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。遍历数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样,故名“冒泡排序”
2024-07-14 18:35:07 189
原创 cookie和localStorage的区别特点
总体而言,Cookie适用于存储小量数据,并且需要在客户端和服务器之间传输。而localStorage适用于本地持久化存储较大量的数据,仅在客户端使用。根据特定的需求和场景,可以选择合适的机制来存储和处理数据。Cookie和localStorage是用于在Web浏览器中存储数据的两种常见机制。
2024-07-12 08:12:21 248
原创 css中px和em的区别
em 是相对单位,根据继承它的父元素的字体大小来计算实际的大小。默认情况下,1em 等于父元素的字体大小。例如,如果父元素的字体大小为 16px,那么 1em 将等于 16px。如果一个元素的字体大小为 2em,那么它将等于父元素字体大小的两倍。在上面的例子中,parent 元素的字体大小为 16px,所以 .child 元素的高度将等于 16px。.child 元素的宽度设置为 200px,所以它将始终显示为 200 个像素宽。例如,一个宽度为 200px 的元素将始终显示为 200 个像素宽。
2024-06-30 11:06:56 337
原创 什么是事件流?
概念:事件流就是当我们触发一个事件时,经过一系列操作的过程称为事件流,简单通俗来讲就是点击事件后,按顺序执行的就是事件流。那事件是什么呢?事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
2024-06-23 08:00:00 375
原创 报错 Cannot read properties of undefined(reading‘addEventListener‘)如何解决
无法读取未定义的属性(读取' addEventListener ')问题:这是我给一个input输入框绑定的监听事件出现的报错。
2024-06-22 23:28:57 1669
原创 js如何实现开屏弹窗
声明一个全局变量,给弹窗的确定绑定点击事件,点击确定,给声明的变量赋值为1,并使用临时存储存起来,然后将弹窗隐藏,设置自执行定时器,判断取的临时存储的值等于1时将弹窗隐藏,否则就让弹窗显示;开屏弹窗是什么,其实就是第一次登录后进入页面给你的一种公告提示,此后再回到当前这个页面时弹窗是不会再出现的。也就是说这个弹窗只会出现一次。最主要的就是存取值而已!
2024-06-20 21:18:42 384
原创 js实现实现九宫格乱序抽奖
注意:最重要的是奖项背景颜色的设置!应该在定时器内每执行一次循环一次奖项的长度然后设置奖项的默认背景颜色;再通过随机数设置奖项抽中的颜色;我在这里执行顺序一直没弄明白!我们以前写的九宫格抽奖,都是顺时针按照顺序进行旋转抽奖,今天给大家分享一下乱序,就是不按照一定顺序的。
2024-06-12 21:37:57 499
原创 js实现基础购物车的制作
1.点击添加商品按钮会出现三个输入框(名称,价格,数量那三格,以及确认和取消按钮)。6.点击删除按钮时这行都会被删除,并且总价和总数会减小。2.点击确认后所输入的值会自动形成一行添加到表格中。4.点击加号按钮时总价和总数会变化,减号按钮会显示。3.点击编辑按钮时,会重新编辑这一行的数据信息。5.点击减号按钮时总价和总数会变化。
2024-06-01 22:50:36 493
原创 datalist是什么,有什么作用?
标签的支持程度也有所不同,因此建议在使用时进行兼容性测试。标签用于定义一个预定义选项列表,它可以与文本输入框()一起使用,提供一组可选的值供用户选择或输入。)一起使用,不能与其他类型的输入框(如。标签只能与文本输入框(标签中的选项可以通过。
2024-05-26 11:31:56 373
原创 JS中的arguments是什么?
arguments是当我们不确定有多少个参数传递时,就可以使用argument来获取。在js中,arguments实际上就是当前函数的一个内置对象,存储了我们传递的所有实参。arguents的展示形式就是一个伪数组,所以我们可以对它进行遍历。这个就是我们所打印出来的arguments,它是以下标的形式呈现的就和数组一样;下标所对应的123正是我们传的参数。也就是说我们可以使用arguments得知我们传递的参数,如果我们传的参数过多的情况下。下面这个是我们用arguments实现的最大值。
2024-05-26 11:31:22 284
原创 临时存储和永久存储的区别
大家都知道,我们一般在页面传参的时候一般会用到两种方式!一种是路径拼接页面传参,还有一种呢!就是我们比较常用的存储,通过接口返回过来的数据,我们将它存起来,到其他页面在取出来是很方便的。当然还有一种存储是cookie!
2024-05-25 20:42:00 439
原创 Echarts图表使用
ECharts是一个用JS实现开源可视化库,它提供了丰富的图表类型和交互能力。使用户可以通过简单的配置生成各种各样的图表。
2024-05-25 20:35:54 447
原创 iframe标签是做什么用的
如果有多个网页引入iframe,只需要修改ifarme的内容,就可以实现调用的每一个页面内容的更改,很方便快捷;网页如果为了统一风格,头部和版本是一样的,就可以写成一个页面,有iframe标签嵌套,可以增加代码的可重用;遇到加载缓慢地第三方内容,也可以由iframe解决。iframe也称嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中。其实大白话在我看来就是,在一个网页框架中嵌入一个iframe,原本的框架网页不需要更改内容,我们只需要变更iframe里面的内容就好了。
2024-05-19 16:14:13 212
原创 JS中的arguments是什么?
arguments是当我们不确定有多少个参数传递时,就可以使用argument来获取。在js中,arguments实际上就是当前函数的一个内置对象,存储了我们传递的所有实参。arguents的展示形式就是一个伪数组,所以我们可以对它进行遍历。这个就是我们所打印出来的arguments,它是以下标的形式呈现的就和数组一样;下标所对应的123正是我们传的参数。也就是说我们可以使用arguments得知我们传递的参数,如果我们传的参数过多的情况下。下面这个是我们用arguments实现的最大值。
2024-05-11 18:12:05 429 2
原创 Java中的三元运算符是什么?如何去用?
在使用三元表达式的过程中,不可以使用break,continue等语句。因为break是一个语句,不是表达式,整个三元运算符必须是表达式本身,所以不能再这个运算符中使用语句,只能在表达式中使用。三元表达式虽然可以用if判断来模拟,但是三元也有属于它自己的优点!通常在二选一的时候,三元表达式的结构更简单。同if判断if(条件){条件成立执行的} else {条件不成立执行的}表达式:在参与js程序时,都必须先计算出表达式结果,才能参与后续程序。“条件成立执行的” : “条件不成立执行的”
2024-04-28 12:54:56 200
原创 JS中几种循环方式
在JS中我们经常会使用循环,我经常用的循环语句可以用来遍历数组或者是对象,比如for,for...in,for...of和forEach。这些都是我比较常用的for循环,在这里给大家分享一下,当然还有while循环和do while循环我就不介绍了!
2024-04-28 12:53:58 150
原创 什么是http状态码?
当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含 HTTP 状态码的信息头(server header)用以响应浏览器的请求。http状态码,用来表示网页服务器超文本传输协议响应状态的三位数字码。简单的来讲,http状态码的作用是服务器告诉客户端当前请求响应的状态,通过状态码就能判断和分析服务器的运行状态。500(Internal Server Error):表示服务器遇到了一个未曾预料的状况。200(ok):表示请求已成功。
2024-04-27 23:38:03 341
原创 input框的placeholder字体颜色如何修改?
我们修改input框中placeholder的字体颜色,设置一个class名写color颜色,会发现是我们输入字的颜色,那该如何修改你?
2024-04-20 23:28:48 168
原创 什么是作用域,它的作用是什么?
总的来说,作用域在程序中扮演着关键的角色,它有助于组织和管理变量,确保代码的正确性和可靠性,同时提高了代码的可维护性和可读性。因此,了解和合理运用作用域是编写高质量代码的重要一环。作用域(Scope)是在程序中定义变量的可访问性和生命周期范围。简单来说,作用域规定了在代码中某个特定位置可以访问哪些变量。作用域在编程中起着非常重要的作用,它主要影响变量的可见性、生命周期和命名冲突等方面。中,包括 JavaScript、Java、Python 等,都有作用域的概念。
2024-04-20 23:26:34 436
原创 原生JS实现单选全选
大部分使用的都是onclick事件,但其实严格一点来说,单全选的按钮使用使用onchange事件更好。实现单全选,我们一般在移动端上,购物车勾选商品进行购买一般用到单全选。
2024-04-14 11:50:51 358
原创 实现商品下拉框筛选
首先,我们先先写一个select框,设置框内的option的value值,并且给select框绑定onchange事件,每次触发一次事件之后都会进行判断。判断当前点击的option的value值是否等于我们设置的value值,相等就通过sort方法对数据进行排序渲染数据。我们在购买商品的时候会出现下拉框供我们选择商品的类型或者想要便宜一点的商品,我们对商品进行排序等;我在写项目的时候遇到了这个功能,我给大家讲一下我的实现思路。这只是我写的简单的实例,用打印来代替渲染数据了。
2024-04-14 07:59:58 369
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人