- 博客(129)
- 收藏
- 关注
RSS订阅原创 Vue Scss的使用(二)
使用混合器，scss中的条件语句，通过v-for实现一组button的不同背景色的配置，在scss中混合器与if-else条件语句一起使用，可以实现一些更复杂的页面样式。在日常的开发中，我们可能有些一能够复用的style，我们不希望重复写这些样式，此时我们可以使用Scss的混合器。，使用scss的混合器配置button样式。
2024-04-18 16:18:03
294
原创 Vue3 Scss的使用(一)
最近因为工作原因阅读了ElementPlus和Vexip UI开源框架的源代码，发现这两个框架的style样式都是用的scss，今天进行了scss系统性的研究学习。
2024-04-12 19:17:18
254
原创 Vue3 v-bind绑定css中的var变量实现动态样式
在日常的开发中，我们常常遇到这样的需求：点击一个button改变页面中某个元素的样式，在这样的场景中，我们可以使用v-bind绑定css中的var变量，来动态的切换元素的样式。在setup语法糖环境下，点击一个button动态切换另一个元素的背景色。
2024-04-11 15:27:39
307
原创 Vue3 ts环境下的PropType
在Typscript中，我们可以使用PropType进行类型的推断与验证。在日常的开发中我们常常会遇到下面这样的场景：我们通过request请求从服务端获取了一条数据，数据是个Array的格式，Array中的每个元素又是一个对象，像下面这样的数据title: "标题一",description: "描述一",},title: "标题二",description: "描述二",},title: "标题三",description: "描述三",},
2024-04-10 17:09:58
230
原创 Vue3 自定义指令Custom Directives
在vue中重用代码的方式有：组件、组合式函数。组件是主要的构建模块，而组合式函数更偏重于有状态的逻辑。指令系统给我们提供了例如：v-model、v-bind，vue系统允许我们自定义指令，自定义指令也是一种重用代码的方式。自定义指令常用于封装一些普通元素的Dom底层访问逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。// 在绑定元素的 attribute 前// 或事件监听器应用前调用// 下面会介绍各个参数的细节},
2024-04-03 11:23:23
641
2
原创 Vue 3 关于组件的注册
三段代码分别为，组件文件、main函数文件、使用全局组件的vue文件。组件的注册有两种方式：全局组件注册、局部组件注册。import以后可以在template中直接使用。
2024-03-28 14:00:45
203
1
原创 Vue3 组合式函数Composables
组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。我们可以把一些可以复用的逻辑封装成组合式函数放到js文件中，在vue文件中通过import来使用这些逻辑，使vue文件更瘦，逻辑更清晰。一个小栗子，// x、y为ref响应式的number类型return num;
2024-03-27 11:16:05
457
原创 Vue3 异步组件defineAsyncComponent
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了defineAsyncComponent方法来实现此功能。以上四段代码分别对应了四个文件，需要异步加载的子组件、子组件加载错误时的页面，子组件加载中的loading页面，以及使用异步组件的父组件。以上三个文件，以此为需要加载的全局异步组件、main函数、使用全局异步组件的vue文件。单文件中加载全局异步组件。，单文件中异步加载组件。
2024-03-26 16:34:34
347
原创 Vue3 插槽Slot
默认插槽、具名插槽只能访问使用者的作用域，插槽的内容无法访问子组件的数据。某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。在这个例子中子组件中使用了ref，可以看到子组件中的值发生变化时，在父组件中显示的值也有更新。在子组件中声明x、y两个点，通过按钮增加它们的值，并在使用者的作用域中展示x、y最新的值。有时我们在同一个组件中希望使用多个插槽，此时可以使用具名插槽。如果需要访问子组件中的作用域，则使用作用域插槽。，同一个子组件中同时使用具名插槽和默认插槽，代码如下。
2024-03-25 15:23:38
298
原创 vue3 computed计算属性
我们在使用模版语法时有时会使用三位运算符去处理一些简单的逻辑，当一个变量的值依赖了其它变量，并进行了一些逻辑上的处理时，我们可以使用computed计算属性去处理。一个小栗子,计算属性的值与其它属性有计算关系时，使用计算属性可以把独立的计算逻辑代码块包装到函数里一个小栗子，计算属性的值在它依赖的属性值改变时随之改变，当它依赖的属性值不变时，计算属性的值会被存在缓存中，下一次读取这个值时，会直接在缓存中读取。
2024-03-22 16:37:04
386
原创 Vue3 依赖注入provide与inject
关于provide与inject下面是vue官网上的一些介绍通常情况下，当我们需要从父组件向子组件传递数据时，会使用props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：注意，虽然这里的组件可能根本不关心这些 props，但为了使能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。
2024-03-15 16:35:36
424
原创 Vue3 watch侦听器
watch在默认情况下是懒加载的，仅在数据源发生变化时才会触发。但在某些场景下，我们希望在创建watch时立即执行一次回调。传入一个响应式对象，会隐式地创建一个深层侦听器——该回调函数在所有嵌套的变更时都会被触发。当点击button时，会在回调事件中改变person的属性，从而触发侦听器watch。侦听响应式ref常量，当常量的ref的value值发生改变时会出发watch。系统默认是深层监听，当响应式对象的属性发生改变时，会触发watch。在使用时，主要是在代码中加入：{deep: true}
2024-03-14 15:48:33
395
原创 git commit 的规范
今天在一个项目中提交git时报了下面的错误：subject may not be empty [subject-empty] type may not be empty [type-empty]，上网查阅了一些资料，发现这种一种规范约束，用下面的命令我又重新提交了一次。注：上面命令行中的冒号必须为输入法为英文时输入的，冒号后面必须加一个空格。
2024-02-26 16:56:02
369
1
原创 git 本地分支提交远程分支
在日常开发中，我们常常遇到这样的场景，本地有个分支名字：developtemp，远程有个分支origin/develop，两个分支没有关联关系，而且分支名字不同，此时想提交代码。
2024-01-23 09:26:20
600
原创 git 分支的创建与删除
Your branch is up to date with 'origin/newcode'，本地分支newcode连接着远程分支origin/newcode。用checkout的方式创建，只是创建的同时还切换到了这个本地分支。创建两个本地分支：newcode、codetwo，并把本地分支切换到codetwo下。
2023-12-06 18:23:15
840
原创 Vue3 ＜script setup＞的用法
注意：在元素中无法直接使用titles，在外边我们声明同名的变量titles，并使用ref，通过props.titles设置ref的值，从父组件传过来值后，页面中元素的值会实时更新。子组件TableForm中的代码如下，使用defineProps声明props，并设置type和default默认值。父组件中代码如下,使用:titles(子组件props设置的变量),取出父组件中声明的变量titles数组。5 子组件中元素的点击事件点击后，调用父组件中的一个方法。子组件中的代码如下，是小程序的例子。
2023-06-13 19:41:41
902
原创 浏览器的进程
主要负责界面显示、用户交互（如导航栏的前进和后退等）；子进程管理（负责各个页面的管理，创建和销毁等其他进程）；同时提供存储和处理浏览器底层不可见的操作（如网络请求和文件管理等）等功能。所有，打开一个页面至少要有 4 个进程（网络进程、浏览器进程、GPU 进程、渲染进程），如果还有插件，还得加上一个插件进程，回到最开始的截图，可以明白为什么有那么多进程了吧。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。主要用于3D CSS的渲染。
2023-04-16 17:22:33
699
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人