- 博客(28)
- 收藏
- 关注
原创 TypeScript中interface和type关键字的作用和区别分别是什么
在 TypeScript 中都可以用来定义对象的类型,但它们有一些区别和不同的使用场景。具有声明合并的特性,意味着可以多次声明同一个接口,并且会自动将属性进行合并。对于兼容性更加宽松。当你有多个相似的接口时,它们会自动合并为一个接口。选择使用哪个取决于你的个人偏好和特定的需求。来说,如果你有多个相似的类型别名,它们是不会自动合并的。由于这些不同,通常在以下情况下,使用。:通过继承其他接口或者类型别名,需要注意的是,在大多数情况下,不支持继承其他类型。而在以下情况下,使用。
2023-12-24 23:16:03
474
原创 vue2项目中 let _this=this 这么写的好处是什么
由于JavaScript中"this"的指向取决于函数的调用方式,而在Vue中,组件中的方法有时可能会导致"this"上下文不正确,尤其是在涉及回调函数或异步操作时。1. 解决回调函数中的"this"问题:在Vue组件中,如果使用箭头函数(ES6的箭头函数具有词法作用域),则可以避免"this"上下文丢失。但是,如果使用普通函数,那么函数内部的"this"将会丢失它原本应该指向的Vue组件实例,此时,将"this"赋值给"_this"可以在回调函数中正确地访问Vue组件实例。
2023-07-27 14:11:09
951
原创 symbol的使用场景
通过使用Symbol作为属性名,可以确保属性名的唯一性,避免属性名冲突。这在定义特定用途的内部属性或库的私有属性时特别有用。请注意,由于Symbol的独特性,使用Symbol作为属性名时,需要保存对Symbol的引用,否则无法再次访问相应的属性。这也是它作为隐藏属性或私有属性的一种机制。Symbol类型的属性不会出现在常规的对象遍历中,这使得Symbol属性可以用于实现私有属性或隐藏属性的功能。当使用第三方库或扩展时,为了避免与其可能存在的属性名冲突,我们可以使用Symbol定义自己的属性。
2023-07-27 14:07:45
627
原创 symbol是什么数据类型
Symbol是一种唯一且不可变的数据类型,每个Symbol值都是唯一的,不会与其他任何值相等,包括其他Symbol值。这使得Symbol非常适合用作对象属性的标识符,以确保不会发生属性名冲突。在计算机编程中,Symbol是一种基本数据类型,是在ECMAScript 6 (ES6) 中引入的新特性。总结:Symbol是一种基本数据类型,用于创建唯一且不可变的标识符,通常用作对象属性的名称,以确保属性名不会与其他属性名冲突。由于Symbol的独特性,这样定义的属性名不会与其他属性名冲突,即使它们的名字相同。
2023-07-27 14:03:51
582
原创 .native修饰符的作用和使用场景举例
通过使用.native修饰符,可以将原生事件绑定到组件的根元素上,而不是绑定到组件内部的子组件元素上。假设我们有一个自定义的按钮组件(Button),在组件内部它可能有多个元素(例如:一个span用于文本显示,一个i用于图标),我们希望在使用Button组件的时候,能够方便地监听click事件。这时可以使用.native修饰符。使用.native修饰符的好处是,在不修改Button组件内部的代码的情况下,我们可以在使用Button组件的地方方便地监听到原生的click事件,提高了组件的灵活性和可重用性。
2023-07-27 13:56:33
798
原创 .sync修饰符的作用和使用场景举例
当在输入框中输入内容时,输入框的值会自动反映在ParentComponent中的inputValue上,并且ParentComponent中的inputValue改变时,ChildComponent中的value也会自动更新。在Vue.js中,.sync修饰符用于简化父组件与子组件之间双向绑定的语法。在ChildComponent中,我们使用:value来绑定输入框的值,并在输入框的input事件中使用$emit方法触发一个名为"update:value"的自定义事件,并将输入框的值作为参数传递出去。
2023-07-27 13:50:50
471
原创 .sync修饰符和v-model语法糖之间的区别
在子组件上使用`:prop.sync="parentData"`的形式,其中`prop`是子组件的属性,`parentData`是父组件中要绑定的数据,`.sync`修饰符会自动在子组件中触发名为`update:propName`的自定义事件,以实现子组件的值更新传递给父组件。- `v-model`:`v-model`会在子组件内部自动触发`input`事件或自定义事件(通过`model`选项指定的事件名称,默认是`input`),从而将子组件内部的数据改变传递给父组件。
2023-07-27 13:43:49
67
原创 vue的每个生周期分别做了哪些事情
created完成数据观测,属性与方法的运算,watch、event事件回调的配置可调用methods中的方法,访问和修改 data 数据触发响应式渲染dom,可通过computed和watch完成数据计算此时vm.$el并没有被创建
2023-07-16 20:33:48
55
原创 什么是B端和C端
需要注意的是,C 端和 B 端并不是绝对的划分,有些产品和服务可能既可以面向个人消费者,也可以面向企业客户。此外,也存在一些产品或服务可以同时面向 C 端和 B 端市场,这些市场定位的不同主要取决于产品的特性、市场需求和营销策略等因素。与之相对,B 端是指面向商业客户(Businesses)的市场,也称为企业级市场。B 端产品和服务是面向企业和组织的,以满足他们的商业需求和运营需求为目标。与 C 端市场相比,B 端市场的客户群体更加专业化和有针对性,涉及的交易规模和复杂性也较大。
2023-07-16 19:53:07
2809
1
原创 BS和CS分别是什么
CS 架构将业务逻辑分布在客户端和服务器端,灵活地处理适合的业务逻辑部分,适用于桌面应用程序、移动应用程序等场景。- 选择 BS 架构还是 CS 架构,取决于具体的应用需求、业务逻辑复杂性、数据安全性要求和用户体验等因素。- BS 架构将业务逻辑主要放置在服务器端,客户端主要负责展示和用户交互,适用于 Web 应用程序等场景。- BS 架构可以简化客户端的业务逻辑,使客户端变得轻量化,主要负责展示和用户交互的功能。- 在 CS 架构中,客户端负责展示界面、用户交互和部分业务逻辑处理。
2023-07-16 19:44:49
4698
1
原创 webpack的热更新原理
Webpack监听源代码的变化,将更新的模块信息发送给浏览器,浏览器使用HMR Runtime将新的模块代码插入到应用程序中,从而实现热更新的效果。7. 浏览器接收到更新的模块信息后,会使用Webpack的HMR Runtime(热模块替换运行时)来处理这些更新。HMR Runtime会根据模块的更新信息,将新的模块代码插入到应用程序中,而无需重新加载整个页面。热更新是指在开发过程中,当你修改了源代码后,Webpack会自动将修改后的代码注入到运行中的应用程序中,而无需刷新整个页面或重新加载整个应用程序。
2023-07-13 19:49:13
522
1
原创 new Vue()这句代码,VUE做了什么事情?
这些选项可以包括`data`、`methods`、`computed`、`watch`等,用于定义应用程序的状态、方法和计算属性等。7. 执行生命周期钩子:Vue在Vue实例的生命周期的不同阶段执行各种生命周期钩子,例如`created`、`mounted`等。6. 注册事件处理器:Vue根据Vue实例的`methods`和`computed`选项注册事件监听器。通过使用`new Vue()`创建一个Vue实例,您正在初始化Vue.js的核心功能,并为构建具有响应性和交互性的应用程序奠定基础。
2023-07-13 17:40:05
1274
1
原创 for in 和for of 的区别
是 JavaScript 中用于遍历数据结构的两种不同的循环语法,开发中需要根据具体的遍历需求和数据结构选择合适的循环语法。
2023-07-09 22:44:52
82
1
原创 如何让el-main内容溢出时可以滚动,并隐藏滚动条
今天用vue3写项目时用element-plus时遇到了一个问题,el-main里面的内容溢出了但是窗口不能滚动,而且设计的样式滚动时滚动条时隐藏的,到处查阅后折腾了好久终于把样式写好了。选择器,可以定义滚动条的样式,并将滚动条的背景颜色和滑块颜色设置为透明,从而隐藏滚动条。请注意,这种方法只是通过样式隐藏了滚动条,但仍然可以通过鼠标滚轮或拖动来滚动内容。属性来显示滚动条,并通过CSS样式来隐藏滚动条。属性来显示滚动条,并使用自定义样式隐藏滚动条。内容溢出时可以滚动并隐藏滚动条,你可以使用CSS中的。
2023-07-03 21:32:45
2673
1
原创 router.addRoute和router.addRoutes的区别是什么
方法添加的路由将在下一次导航时生效。你需要重新触发导航,或者在当前导航完成后进行导航,以使添加的路由生效。是 Vue Router 中用于动态添加路由的两个方法,它们的区别在于添加路由的方式和参数类型。根据你的具体需求,选择合适的方法来添加动态路由。如果你只需要添加一个路由,可以使用。方法用于添加多个路由对象到路由器中。方法添加的路由将立即生效,并可以在当前路由的导航过程中使用。,并确保在适当的时机触发导航以使路由生效。类型的参数,表示要添加的路由对象。如果你需要添加多个路由,可以使用。
2023-07-01 23:01:53
1639
原创 后台管理系统中如何根据获取到的权限动态渲染路由
请注意,以上示例只是一个基本的实现方式,实际的动态路由渲染可能涉及更多的复杂逻辑和安全性考虑。构建路由配置:根据获取到的权限信息,构建动态的路由配置。可以根据权限信息生成对应的路由对象,包括路由路径、组件、元信息等。在后台管理系统中,根据获取到的权限动态渲染路由是一种常见的做法,可以根据用户的权限来控制菜单和路由的显示与访问权限。获取权限信息:在用户登录或认证成功后,从后端获取用户的权限信息。这些权限信息通常以权限列表、角色或权限组的形式返回。最终,根据权限动态渲染的路由将在后续的导航和页面渲染中生效。
2023-07-01 22:43:24
468
原创 export和export default的区别
语句可以按需导入具名功能,而默认功能的导入可以自定义变量名。在一个模块中,可以同时使用。导出时,导入时不需要使用花括号,而且可以自由命名导入的变量名。语句来导入默认导出的功能,并自定义了导入的名称为。关键字导出了一个无名称的默认函数。语句来导入具名导出的功能。需要注意的是,当使用。用于导出具名功能,而。导出不同类型的功能。
2023-06-30 09:04:46
133
原创 vue3中reactive和ref的区别是什么
总的来说,`reactive`用于创建响应式的对象,而`ref`用于创建响应式的引用。- `ref`:当使用`ref`创建的引用作为属性值时,该属性不会自动成为响应式的。如果需要将嵌套引用转换为响应式,需要使用`toRef`或`toRefs`。- `reactive`:当使用`reactive`创建的响应式对象作为属性值时,该属性仍然是响应式的。- `reactive`:适用于创建复杂的数据结构,如对象、数组等,以及需要动态添加和删除属性的情况。- `ref`:通过`.value`属性来访问和修改数据。
2023-06-30 01:45:36
2698
原创 eventBus在Vue中的作用和语法
eventBus(事件总线)是一种用于处理应用程序内部组件之间通信的设计模式。其作用是将不同组件之间的通信解耦,从而使得应用程序更灵活、可扩展、易维护。
2023-06-04 10:42:58
149
1
原创 Vue中this.$refs触发子组件的事件的用法
要触发子组件的事件,可以使用$refs来获取子组件实例,然后调用其方法。在父组件中使用this.$refs获取子组件实例,并调用子组件的方法。在父组件中,给子组件添加ref属性,以便在父组件中获取子组件实例。
2023-06-03 17:01:31
1769
原创 vue中路由传参的用法
在Vue中,可以使用$route对象来获取当前路由的信息和参数。如果想要在路由导航跳转时传递参数,可以使用。在组件内部,可以通过。在组件内部,可以通过。
2023-06-03 16:00:48
120
原创 vue中$listener的作用和使用场景
当需要在某个事件处理函数中取消其他事件监听器时,可以使用$listener获取当前组件上绑定的所有事件监听器,并通过$listener获取当前组件上绑定的所有事件监听器,并通过off方法进行取消。在Vue中,$listener是一个内置的属性,它用于获取当前组件上绑定的所有事件监听器。当需要在组件间传递事件时,可以将$listener作为父组件传递给子组件,在子组件中使用emit方法触发父组件上绑定的事件监听器。实现的,它会将指定的事件名称作为参数传递给父组件,从而调用相应的方法。
2023-06-02 15:37:27
1038
原创 $route和$router的区别和使用场景
因此,route主要用于获取当前路由的信息,而router主要用于控制路由的跳转。例如,可以使用route来获取当前页面的路径名称,或者通过router.push方法来跳转到其他页面。在Vue.js中,route和router都是与路由相关的对象。
2023-05-31 10:38:29
499
原创 前端开发中遮罩层的作用和使用场景
登录/注册框:当网站需要用户登录或者注册时,可以使用遮罩层覆盖在页面上方,防止用户直接点击其他链接跳转到其他页面。模态框:当弹出模态框时,遮罩层可以覆盖在整个页面上,使得用户只能与模态框交互,从而实现了浮层的视觉效果。页面加载过程中:当页面需要加载一些耗时资源(如图片、视频等)时,可以使用遮罩层提示用户页面正在加载中。然后,在 JavaScript 中,我们监听了按钮的点击事件,并在回调函数中将遮罩层的。在上面的代码中,我们首先定义了一个按钮和一个遮罩层。
2023-05-30 16:14:02
2261
1
原创 如何让面包屑(Breadcrumb)只单独显示最后的路由
您可以在路由中设置breadcrumb属性,将其设置为true以启用面包屑导航,并使用v-slot:item自定义每个面包屑项的呈现方式。然后,只需在模板中访问最后一个面包屑项即可。在此示例中,lastRoute计算属性返回最后一个面包屑项的文本。在v-slot:item中,我们检查当前面包屑项是否是最后一个。如果不是,则使用普通文本呈现。如果是,则使用加粗文本呈现。
2023-05-29 20:50:56
214
1
原创 简单说下vue中$nextTick的作用
在Vue.js中,当你修改了数据并且想要在DOM中获取最新的变化时,通常需要等待DOM更新后再进行操作。方法会在下次DOM更新循环结束之后执行延迟回调,用于获得更新后的DOM状态。它返回一个Promise对象,可以通过。这样就能确保在DOM更新后执行回调,并且能够正确获取到最新的DOM状态。方法来执行回调函数。
2023-05-27 23:07:34
51
1
原创 如何回退 Git 仓库中的版本
使用 "git reset" 命令回退到指定的版本。例如,如果要回退到 commit hash 为 abcdef 的版本
2023-05-21 16:57:31
744
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人