- 博客(159)
- 收藏
- 关注
原创 Vue-router的安装配置
router-link :to="{ path:'/btn'} ">根据path跳转</router-link><router-link :to="{ name:'user'} ">根据name跳转</router-link>使用<router-link>跳转,<router-link> 默认会被渲染成一个 `<a>` 标签。<router-link to="/btn">通过to指定链接</router-link>在src下创建router目录,在router目录里面创建index.js。
2024-07-28 12:56:56
207
原创 CSS中的伪类有哪些?
伪元素(Pseudo-element)则是用于创建并操作元素的特定部分,它可以在DOM中创建一个不存在的元素,并为其添加样式。常见的伪元素包括:before(在元素内容之前插入内容)、after(在元素内容之后插入内容)、first-letter(选取第一个字母)等。伪类(Pseudo-class)和伪元素(Pseudo-element)是CSS中的两个概念,用于选择DOM元素的特定状态或位置。1. 目标不同:伪类选择已存在的元素的特定状态或行为,而伪元素创建一个不存在的元素的特定部分。
2024-07-28 12:54:19
341
原创 ajax每个属性的作用
`onreadystatechange`: 一个事件处理函数,当`xhr`对象的`readyState`属性发生变化时被调用,用于处理服务器响应。- `readyState`: 表示请求的状态,0-未初始化,1-启动,2-发送,3-接收,4-完成。- `open()`: 设置请求的方法(如GET、POST)和URL,以及是否采用异步方式发起请求。- `xhr`: XMLHttpRequest 对象,用于发起HTTP请求并接收服务器的响应。- `responseText`: 服务器返回的响应数据。
2024-07-28 12:52:00
144
原创 什么是 async 、 await
当我们使用 await 等待一个 Promise 对象时,JavaScript 引擎会暂停当前函数的执行,直到 Promise 对象执行完毕并返回结果才会继续执行下面的代码。async 函数是一个返回 Promise 对象的函数,它在函数体内部使用 await 来等待 Promise 对象执行结果。这个函数使用 async 关键字声明,返回一个 Promise 对象,在函数体内部使用 await 等待异步操作完成,然后将得到的数据返回。
2024-07-28 12:49:20
231
原创 js的回车事件
在上面的代码中,我们使用 `addEventListener` 方法来监听全局的键盘事件,在事件处理函数中判断是否按下了 Enter 键(键名为 `'Enter'`)。当用户按下回车键时,控制台会输出 `'Enter 键被按下了'`。可以使用 `event.code` 属性来判断按下的键是否是回车键。在大多数现代浏览器中,按下回车键的 `event.code` 值通常为 `'Enter'`。在这个示例中,我们用 `event.code` 来检查按下的键是否是回车键,并在控制台中输出相应的信息。
2024-07-28 12:46:45
265
原创 js切割字符串指定个数?
在上面的例子中,cutLength 变量表示要从字符串开头剪切掉的字符数。你可以根据需要修改 cutLength 的值来剪切不同长度的字符。如果你想剪切字符串的开头几个字符,可以使用 JavaScript 的 substring() 方法或者 slice() 方法。
2024-07-27 20:25:11
640
原创 js切割接口域名前缀。
在上面的代码中,trimDomainPrefix() 函数接收一个字符串形式的域名,并通过循环遍历定义好的前缀列表,逐一检查是否以这些前缀开头,若是则使用 slice() 方法将前缀部分剪切掉,最后返回处理后的域名字符串。在请求图片时,可能会有有域名的,或没域名的地址,这就需要判断,把字符串域名把域名前缀剪切掉。
2024-07-27 20:23:46
346
原创 vue如何解决跨域?
在Vue.js项目中,当你的前端应用尝试从与自身不同源的服务器(协议、域名、端口中的任一不同)加载资源时,可能会遇到跨域(CORS, Cross-Origin Resource Sharing)问题。
2024-07-21 12:21:28
631
原创 什么是dom驱动?
然而,DOM驱动在某些需要直接和精确控制DOM的场景中仍然是有用的。在DOM驱动的开发模式下,当数据发生变化时,开发人员需要手动选择要更新的DOM元素,并修改其属性或内容以反映新的数据状态。随着前端技术的不断发展,现代前端框架(如Vue、React等)更多地采用了数据驱动的开发模式,以简化开发流程、提高开发效率和降低维护成本。DOM(Document Object Model)驱动是传统前端开发中的一种方式,它涉及直接操作DOM元素来实现页面的动态变化。
2024-07-21 12:19:20
234
原创 Vue中的事件修饰符?
在Vue.js中,事件修饰符提供了一种简洁的方式来处理DOM事件中的常见问题,如阻止事件冒泡、阻止默认行为等。Vue的事件修饰符以。: 在组件根元素上监听原生事件。由于组件是Vue的抽象,因此通常不建议直接在组件上监听原生事件,但有时候这是有必要的。和其他特性的更新,这可能会改变组件的DOM结构或事件监听方式。在Vue 3中,事件修饰符的使用方式与Vue 2类似,但需要注意的是,Vue 3的。: 使用事件捕获模式监听事件。: 阻止事件的默认行为。监听组件发出的自定义事件,而不是直接监听原生事件。
2024-07-21 12:16:00
307
原创 rest参数是什么?
Rest参数是JavaScript中的一种特殊参数类型,它允许开发者定义一个函数,以便接收不定数量的参数。Rest参数的使用是通过在参数列表末尾添加。Rest参数的语法很简单,即在函数参数列表的最后添加三个点(...)操作符,后面跟着参数名。符号来实现的,这些额外的参数会被收集到一个数组中,使得编写处理多个参数的代码更加简洁和易于维护。请注意,rest参数必须是函数参数列表中的最后一个参数,即rest参数之后不能再有其他参数。在调用该函数时,我们可以传递任意多个参数,并在函数内部以数组形式访问这些参数。
2024-07-21 12:12:44
565
原创 vue2和vue3的区别,以及生命周期?
可以看到,Vue.js 3 移除了 beforeUpdate 和 updated 这两个生命周期钩子函数,并引入了 beforeUnmount 和 unmounted 这两个新的生命周期钩子函数。Vue.js 3 是在 Vue.js 2 的基础上进行了重写和改进的版本,它带来了许多新的特性和改进,并且在性能、体积和开发体验等方面都有所提升。2. created: 与 Vue.js 2 相同,实例创建完成之后,属性和方法已经加入到实例中,但是 DOM 还未生成,无法访问 DOM。在这一步,实例仍然完全可用。
2024-07-21 12:06:37
214
原创 vuex和pinia的区别是什么?
总的来说,Pinia 和 Vuex 都是用于状态管理的库,但它们在语法和用法、类型支持、性能优化以及插件生态系统等方面存在一些不同。如果你正在使用 Vue 3,并且需要更好的 TypeScript 支持和性能优化,那么 Pinia 可能是一个很好的选择。1. 语法和用法:Pinia 是为 Vue 3 设计的状态管理库,而 Vuex 是为 Vue 2 设计的。Pinia 使用了新的 Composition API,并且更加模块化,而 Vuex 则使用了较旧的 Options API。
2024-07-21 12:04:57
202
原创 怎样获取openid?
在服务器端,根据接收到的 code,使用服务器端语言(如Node.js、PHP等)发起请求调用微信的接口。需要注意的是,以上代码仅为示例,实际使用时需要替换成你自己的 AppID、AppSecret 和服务器端的具体实现。在上述代码的注释部分,将获取到的 code 发送到服务器端,可以使用 `wx.request()` 方法发送 HTTP 请求,将 code 作为参数传递给服务器。4. 在服务器端获取到用户的 OpenID之后,可以根据业务需求进行相应的处理,例如存储到数据库中或进行其他操作。
2024-07-14 12:48:43
238
原创 什么是原型,它有什么用?
原型是JavaScript实现继承的基础,它构成了JavaScript中对象之间的链式关系。1. **属性和方法的继承**:当我们访问对象的属性或方法时,如果该对象本身没有这个属性或方法,JavaScript会沿着原型链向上查找,直到找到对应的属性或方法。3. **构造函数与实例**:在JavaScript中,构造函数的`prototype`属性指向了一个对象,这个对象就是实例的原型。4. **动态性**:可以通过修改原型对象,动态地为已存在的对象添加新的属性和方法,这对于类似继承和扩展的需求非常有用。
2024-07-14 12:46:08
138
原创 什么是虚拟dom、diff算法?
当组件的状态发生变化时,框架会首先在内存中构建一个虚拟 DOM 树,然后通过比对虚拟 DOM 和上一次渲染的虚拟 DOM 树,找出两者之间的差异(Diff),最后只对必须更新的部分进行实际的 DOM 操作。- 常见的 Diff 算法包括了 React 中的 O(n^3) 算法(React 15及以下版本使用)、React 中的 Fiber 架构带来的增量更新算法、Vue 中基于双端比较的算法等。虚拟 DOM 的 Diff 算法的主要目标是在进行更新操作时尽量减少实际的 DOM 操作次数。
2024-07-14 12:44:51
273
原创 Git项目配置,怎样上传?
3. 创建新的仓库:在GitHub上创建一个新的仓库来存储你的项目。完成以上步骤后,你的项目就会被上传到GitHub上的远程仓库中。8. 关联远程仓库:在GitHub上创建的仓库页面中,复制远程仓库的URL。4. 在本地创建项目目录:在你的计算机上选择一个合适的文件夹作为你的项目目录,并在该目录下创建你的项目文件。2. 创建GitHub账号:如果你还没有GitHub账号,访问GitHub官方网站,并创建一个新的账号。9. 推送到GitHub:最后一步是将本地的提交推送到GitHub上的远程仓库。
2024-07-13 19:02:43
333
原创 导航守卫都有哪些?有什么用?
不同类型的导航守卫可以在全局、组件级别或特定路由上实现不同的逻辑,使得我们可以更好地控制和管理应用的路由导航行为。- 全局解析守卫 (beforeResolve):在导航被确认之前执行,通常用于确保路由的异步操作完全解析。- 全局前置守卫 (beforeEach):用于在每次路由跳转前进行全局的权限验证、登录状态检查等操作。- beforeRouteLeave:在离开当前组件时执行,可以用于确认离开前的操作。- 路由解析:确保路由的解析完全,处理可能的异步操作。
2024-07-13 19:00:27
555
原创 小程序如何引入自定义组件?
需要注意的是,自定义组件和页面有一些区别,例如自定义组件的`wxml`文件中只能使用相对路径来引用其他文件,而页面的`wxml`文件可以使用绝对路径。5. 在页面中引入自定义组件:在需要使用自定义组件的页面的`json`文件中引入自定义组件。3. 编写组件的模板文件:在`component.wxml`文件中编写组件的结构和布局,使用小程序的组件标签和WXSS样式来定义组件的外观。4. 编写组件的样式文件:在`component.wxss`文件中编写组件的样式,可以为组件添加各种样式效果。
2024-07-13 18:58:27
128
原创 bindtap和catchtap的区别?
换句话说,当一个元素上的bindtap事件被触发时,如果该元素的父节点也有相同类型的bindtap事件,父节点的事件处理函数也会被执行;用途:在一般情况下,推荐使用bindtap来进行事件绑定,因为它可以与父元素的事件一起工作,并且在处理冒泡事件时更加灵活。一般情况下,推荐使用bindtap来进行事件绑定,因为它可以与父元素的事件一起工作,并且在处理冒泡事件时更加灵活。bindtap可以通过返回false阻止默认行为的触发,而catchtap无法阻止具有默认行为的元素的触发。
2024-07-13 18:55:09
598
原创 响应式网页布局
如果您使用 CSS 和 HTML 调整大小、隐藏、缩小、放大或移动内容,以使其在任何屏幕上看起来都很好,则称为响应式 Web 设计。可以使用许多不同的设备来查看网页:台式机、平板电脑和手机。无论使用哪种设备,您的网页都应该看起来美观且易用。响应式 web 设计会让您的网页在所有设备上看起来都不错。响应式 web 设计并不是程序或 JavaScript。响应式 web 设计仅使用 HTML 和 CSS。为所有用户获得最佳体验的设计。什么是响应式网页设计?
2024-07-07 18:05:16
306
原创 小程序怎样刷新页面
注意:使用 this.onLoad() 或 this.onReady() / this.onShow() 并不是真正的“刷新”页面,而是重新执行了页面的某些生命周期函数。this.onReady() 或 this.onShow() 适用于需要在页面加载完成或显示时执行某些操作的情况。this.onReady() 或 this.onShow():在操作函数中直接调用,但需要注意它们的使用前提。3. 使用 this.onLoad() 或 this.onReady() / this.onShow()
2024-07-07 18:00:00
366
原创 微信小程序与H5区别
综上所述,微信小程序与H5在运行环境、开发成本、获取系统级权限、运行流畅度、支付方式、用户追踪和使用方式等方面存在明显的区别。H5:开发H5页面需要考虑的因素较多,包括开发工具、前端框架、模块管理工具、任务管理工具、UI库选择、接口调用工具以及浏览器兼容性等。微信小程序:相对于H5,微信小程序能获得更多的系统权限,如网络通信状态、数据缓存能力等,这些系统级权限都可以和小程序无缝衔接。H5:由于运行在浏览器环境中,H5页面在获取系统级权限方面较为受限,大多应用场景被定位在业务逻辑简单、功能单一的情况。
2024-07-07 17:56:29
233
原创 微信小程序图片上传以及预览
本文将介绍如何在小程序中实现一个高级功能——图片上传与预览。此功能不仅涉及前端界面的展示,还涉及后端的数据处理与存储。由于小程序(如微信小程序、支付宝小程序等)并不是基于传统的HTML、CSS和JavaScript直接实现的,而是各自拥有自己的一套框架和组件库。使用JavaScript来处理用户点击事件,调用小程序的API来实现图片的选择、上传和预览。用户可以在小程序中选择一张或多张图片进行上传,上传成功后,可以在小程序中预览这些图片。使用WXML和WXSS来设计上传和预览图片的界面。
2024-07-07 17:52:52
231
原创 uni-app怎样使用组件
请注意,以上步骤和知识点基于uni-app的通用特性和当前时间的框架版本。随着框架的更新,具体的使用方法和细节可能会有所变化。因此,在实际使用时,建议参考uni-app的官方文档或相关教程以获取最准确的信息。
2024-07-06 18:36:51
452
原创 微信小程序开发流程
开发小程序界面:在小程序项目中,可以使用HTML、CSS、JavaScript等前端技术来开发小程序界面。注册小程序账号:首先需要在微信公众平台注册一个小程序账号,登录微信公众平台后,在开发者工具中选择“小程序”,填写相关信息,提交审核。创建小程序项目:在微信开发者工具中,选择“新建小程序项目”,填写小程序名称、AppID等信息,选择一个本地目录作为项目的保存路径。提交审核:完成开发后,可以在微信开发者工具中选择“上传”按钮,将小程序提交到微信审核。审核通过后,小程序将正式上线。
2024-07-06 18:27:41
371
原创 微信小程序怎样使用地图
请注意,以上步骤和代码是基于微信小程序和腾讯地图API的当前功能和接口。随着技术的更新,某些API或功能可能发生变化,请参考官方文档进行最新的开发和实现。同时,开发时请确保遵守相关法律法规和平台政策。微信小程序使用地图主要涉及地图组件的引入、配置以及相关的API调用。
2024-06-30 13:22:49
342
原创 微信小程序怎样跳转页面?
以上就是在微信小程序中实现页面跳转的方法。你可以根据自己的需求选择合适的API进行页面跳转。这些API提供了不同的页面跳转方式,适用于不同的场景。如果你希望在页面的某个按钮上添加跳转功能,你可以在对应的。在微信小程序中,页面跳转通常使用。文件中添加按钮,并在。文件中绑定点击事件。
2024-06-30 13:20:20
471
原创 使用Vue写一个日期选择器
在Vue组件中,我们使用了data属性来定义必要的数据,如选中的日期、当前月份,以及一个表示日期选择器是否可见的标志。computed属性用于计算当前月份的天数,并将其渲染到日期选择器中。在上述代码中,我们使用了一个input元素来显示和输入选中的日期,并使用一个div元素作为日期选择器的容器。日期选择器的实现参考了当前月份的日历,并提供了上一个月和下一个月的按钮来切换月份。通过上述代码,您可以将日期选择器组件集成到您的Vue应用程序中,并使用v-model指令来进行双向数据绑定,以获取选中的日期。
2024-06-29 21:11:13
275
原创 css中px和em的区别
em 是相对单位,根据继承它的父元素的字体大小来计算实际的大小。默认情况下,1em 等于父元素的字体大小。例如,如果父元素的字体大小为 16px,那么 1em 将等于 16px。如果一个元素的字体大小为 2em,那么它将等于父元素字体大小的两倍;在上面的例子中,.parent 元素的字体大小为 16px,所以 .child 元素的高度将等于 16px。.child 元素的宽度设置为 200px,所以它将始终显示为 200 个像素宽。例如,一个宽度为 200px 的元素将始终显示为 200 个像素宽。
2024-06-29 21:09:04
149
原创 微信小程序怎样控制元素显示隐藏
1、控制元素的 hidden 属性: 在 WXML 文件中,可以给需要控制显示和隐藏的元素添加 hidden 属性,并将其设置为一个变量,通过改变该变量的值来控制元素的显示和隐藏。2、使用 CSS 样式: 在 WXML 文件中,可以为需要控制显示和隐藏的元素添加一个自定义的类名,并使用 CSS 样式来控制元素的显示和隐藏。在微信小程序中,可以通过控制元素的 hidden 属性或者使用 CSS 样式来实现元素的显示和隐藏。在对应的 WXSS 文件中,可以定义相应的 CSS 样式来控制元素的显示和隐藏。
2024-06-29 20:37:30
522
原创 利用身份证验证性别和获取生日
通过身份证号码验证性别和获取生日的方法如下:身份证号码的17位代表性别,奇数代表男性,偶数代表女性。身份证号码的18位数字的7-10位代表出生年份,格式为YYYY11-12位:出生月份,格式为MM13-14位:出生日,格式为DD根据这个规则,我们可以编写一个程序来验证性别和获取生日。1.HTML部分首先在页面上设置三个input输入框,分别放置身份证号码、性别和出生日期然后给身份证输入框绑定oninput事件。
2024-06-23 08:45:00
270
原创 Vue 中使用 Canvas 绘制二维码
在 Vue 中使用 Canvas 绘制二维码可分为以下几个步骤:安装 qrcode 库:npm install qrcode --save在 Vue 组件中导入 qrcode 库创建 Canvas 元素。
2024-06-23 08:30:00
331
原创 使用react-vant上传图片遇到的问题
使用react-vant Uploader上传图片后出现的问题。判断file的长度,当file的长度不为0时在执行。先试用upload上传图片。
2024-06-22 20:19:14
120
原创 react组件的导入与导出
在此示例中,所有组件目前都定义在 根组件 App.js 文件中。这里将 Profile 组件和 Gallery 组件,从 App.js 文件中移动到了 Gallery.js 文件中。组件的神奇之处在于它们的可重用性:你可以创建一个由其他组件构成的组件。在 你的第一个组件 中,你创建了一个 Profile 组件,并且渲染在 Gallery 组件里。在需要使用该组件的文件中 导入(可以根据相应的导出方式使用 默认导入 或 具名导入)。定义了 Profile 组件,该组件仅在该文件内使用,没有被导出。
2024-06-22 20:16:42
290
原创 JS最新的关键字和保留字
保留字是那些虽然目前不是关键字,但在未来的JavaScript版本中可能会被用作关键字的标识符。上述关键字列表中已经包含了部分被ECMAScript标准保留但未作为关键字使用的词,如enum、implements、interface、package、throws等。请注意,随着JavaScript标准的不断更新,新的关键字和特性可能会被引入,旧的用法可能会被废弃。with(尽管在ECMAScript 3和5中被保留,但因其性能和可读性问题,已不推荐使用)super(ES2015引入,用于调用父类的方法)
2024-06-22 20:13:29
422
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人