- 博客(117)
- 收藏
- 关注
RSS订阅原创 vue3 学习笔记14 -- 自定义指令
当我们在项目中需要对 DOM 进行直接操作或者监听事件时，自定义指令（Custom Directives）是一个强大的工具。它允许我们在 Vue 组件中声明式地绑定指令，从而实现各种交互行为和视觉效果。本文将介绍如何创建和使用自定义指令在 Vue 中，指令是带有 v- 前缀的特殊属性，用于对 DOM 进行直接操作或者添加特定行为。自定义指令允许我们封装对 DOM 的操作逻辑，并在多个组件中重复使用，从而提高代码的可维护性和复用性。在项目中创建一个文件夹来存放自定义指令，比如 directives。
2024-07-18 07:15:00
271
原创 vue3 学习笔记13 -- 生命周期和防抖节流
onMounted(): 在组件挂载后调用，此时组件已经被添加到页面中，可以执行 DOM 操作或异步请求等操作。onBeforeMount(): 在组件挂载之前调用，此时虚拟 DOM 已经准备好，但尚未渲染到页面上。onBeforeUpdate(): 在组件更新之前调用，可以用于准备更新前的数据状态。onUpdated(): 在组件更新完成后调用，可以执行一些 DOM 操作。onUnmounted(): 在组件卸载后调用，执行一些清理工作。节流函数用于减少函数的调用频率，确保在一定时间内只执行一次。
2024-07-17 06:00:00
203
原创 vue3 学习笔记12 -- 插槽的使用
插槽（Slots）是一种让父组件能够向子组件传递标记的方法。通过定义插槽，子组件可以预留出可由父组件控制的区域，这样父组件就可以向这些区域填充自己的内容。具名插槽允许父组件在子组件中定义多个插槽位置，使得父组件可以将不同的内容分发到不同的插槽中。这种方式特别适合需要布局或者结构化控制的场景。默认插槽是最基本的插槽形式，允许父组件在子组件中插入任意内容，而子组件则可以通过 来渲染这些内容。子组件向父组件传递数据的一种形式，子组件在具名标签或者匿名标签上绑定数据，父组件在标签上获取数据。
2024-07-16 21:00:00
625
原创 vue3 学习笔记11 -- 模板语法和指令
下述代码中，message的内容将在页面上显示一次，5秒钟后改变，但页面上的内容不会更新，仍然显示为"Hello, once!这是因为v-once已经在第一次渲染时将内容"Hello, once!"和数据绑定一起存储起来，后续即使数据变化，也不会更新DOM。{{ this will not be compiled }} 会被当作静态文本显示在页面上，而不是由 Vue 进行处理。以 v- 开头的特殊属性，如 v-if, v-for, v-bind, v-on。
2024-07-16 19:30:00
202
原创 vue3 学习笔记09 -- 自适应实现(postcss-pxtorem)
postcss-pxtorem 是一个 PostCSS 插件，用于将 CSS 中的像素单位（px）转换为 rem 单位，从而实现响应式布局。主要用途是在移动端开发中，通过设置根元素的字体大小，使得页面元素的尺寸随着根元素字体大小的变化而变化，从而实现不同屏幕尺寸下的自适应布局。
2024-07-15 21:45:00
212
原创 vue3 学习笔记08 -- computed 和 watch
computed 是 Vue 3 中用于创建计算属性的重要 API，它能够根据其它响应式数据动态计算出一个新的值，并确保在依赖数据变化时自动更新。这样可以确保在性能上的优化，避免不必要的计算。watch终止监听，只需要将watch赋值给一个变量，当达到条件调用watch赋值的那个变量就可以终止监听了。squaredCount 是一个计算属性，它依赖于 count 的值，并且会在 count 变化时自动更新。在 Vue 组件中，可以将计算属性直接用于模板中，而不需要额外的 .value 访问方式。
2024-07-12 23:15:00
817
原创 vue3 学习笔记07 -- 定义响应式数据
定义响应式数据主要通过 Vue 3 提供的 reactive、ref 和 computed 这几个 API 来实现ref：用于定义基本类型的响应式数据,如数字、字符串、布尔值等。它返回一个包含响应式数据的对象，通过 .value 访问或修改数据// 读取响应式数据// 更改响应式数据在模板中，直接使用 count 而不需要使用 .value 来访问数据。reactive:用于定义一个对象，并使该对象内部所有属性变成响应式的。
2024-07-12 20:00:00
360
原创 vue3 学习笔记06 -- pinia的简单使用
使用 Pinia 的步骤可以分为安装和配置 Pinia、创建和封装 store 以及在组件中使用 store。
2024-07-12 19:30:00
794
原创 vue3 学习笔记04 -- axios的使用及封装
创建一个 Axios 实例并封装成一个可复用的模块，这样可以在整个应用中轻松地进行 API 请求管理。
2024-07-11 20:00:00
484
原创 vue3 学习笔记03 -- scss的使用
在src/styles下新建通用scss文件。项目中结合 SCSS 可以很方便地管理样式。在main.ts中引入。
2024-07-11 19:30:00
1054
原创 vue3 学习笔记02 -- 配置路由router+导航守卫
如果已登录存在token，则直接跳转到指定页面，否则进入登录页。在main.js中引入挂载路由。
2024-07-10 22:45:00
297
原创 vue3 学习笔记01 -- 搭建项目及基础配置
确保你已经安装了Node.js（建议使用最新的LTS版本）如果想使用ip访问则需配置vite.config.ts文件。
2024-07-10 15:57:36
798
原创 vue 渲染表格两个表头，横向显示时间，纵向显示参数
parameters 是一个参数数组，包含了表格纵向的参数列表，而 times 是一个时间数组，包含了表格横向的时间列表。这个方法的主要作用是根据这两个数组生成一个符合格式要求的表格数据数组。它使用 Math.random() 函数生成一个 0 到 1 之间的随机小数，然后将其乘以 100 并取整，得到一个 0 到 100 之间的随机整数作为参数值，并返回该值。它用于显示一个包含时间和参数的表格，其中时间横向显示，参数纵向显示。vue 渲染表格两个表头，横向显示时间，纵向显示参数。
2024-04-11 20:00:00
683
原创 设置el-cascader级联组件父子不关联，解决只能点击单选框才能选中，点击label无反应
设置el-cascader级联组件父子不关联，解决只能点击单选框才能选中，点击label无反应。
2024-02-07 20:15:00
539
原创 js 数字转换为带有千分位标注的格式的几种方法的记录
在非单词边界处（即数字之间）匹配每个连续的三个数字组合，但排除最末尾的数字组合后面的位置”。例如，在数字 1234567 中，正则表达式会匹配 234 和 567，但不会匹配 1。toLocaleString() 是 JavaScript 内置的函数，用于将数字格式化为本地化的字符串表示形式。然后，它使用循环来遍历整数部分的每个数字，每隔三个数字插入一个逗号。\d)) 来匹配每个三位数字组合前面的位置，并在这些位置插入逗号。使用递归来不断地截取字符串的后三位数字组合，并在它们之前插入逗号。
2024-01-30 22:15:00
389
原创 js padEnd方法介绍笔记
padEnd() 方法常用于需要将字符串的长度填充到指定长度时。例如，在生成固定长度的字符串时，或者在对齐表格中的文本时，都可以使用 padEnd() 方法。padEnd() 方法不会改变原始字符串，而是返回一个新的填充后的字符串。如果目标长度小于或等于原始字符串的长度，则返回原始字符串本身。padEnd() 是 JavaScript 字符串的方法之一，它用于在当前字符串的末尾添加指定数量的字符，直到字符串达到指定的长度。
2024-01-30 22:15:00
599
原创 vue 使用mock模拟数据
vue 使用mock模拟数据在根目录下，新建一个mock文件，且创建如下文件utils.jsindex.js${${${在 Vue 中使用 mock 进行接口模拟数据时，接口路径中的 .* 是一个正则表达式的匹配规则，表示该路径可以匹配任意字符（包括字母、数字、特殊字符等）。通常情况下，.* 用于模拟具有动态参数的接口路径。例如，假设你的接口路径为 /api/user/:id，其中的 :id 表示一个动态参数，可以是任意字符。
2024-01-15 20:00:00
699
原创 vue 使用js实现面包屑中实现右击菜单，并通过右击菜单的命令实现关闭其他、关闭左侧和关闭右侧的功能
实现一个面包屑导航组件。面包屑导航用于显示当前页面的路径，并提供快速跳转到上级页面的功能,且可以通过右击菜单的命令实现关闭其他、关闭左侧和关闭右侧的功能。
2024-01-09 20:00:00
638
原创 css+html 笔记1
a链接的四种状态link:连接平常的状态visited:连接被访问过之后hover:鼠标放到连接上的时候active:连接被按下的时候顺序：a:link、a:visited、a:hover、a:active注意：a:hover定义一定要放在a:link、a:visited的后面。
2024-01-05 05:30:00
1004
原创 git的使用 笔记1
我们已经在本地创建了一个Git仓库后，又想在github创建一个Git仓库，并且希望这两个仓库进行远程同步，这样github的仓库可以作为备份，又可以其他人通过该仓库来协作。.git 跟踪管理版本的目录。
2024-01-04 23:00:00
815
原创 微信小程序 wx.request二次封装
封装了 wx.request 函数，使得发送网络请求更加简便和易用。同时，在请求过程中做了一些错误处理和加载提示的操作，提升了用户体验。
2024-01-02 21:30:00
690
原创 Vue websocket的封装及使用
创建 WebSocket 连接：通过传入的 url 参数创建一个 WebSocket 实例。监听连接打开事件：当连接成功建立时，执行传入的 onOpen 回调函数。监听消息接收事件：当接收到消息时，将消息解析为 JSON格式，然后执行传入的 onMessage 回调函数，并将解析后的消息作为参数传递给回调函数。如果未传入 onMessage 回调函数，则禁止重新连接。监听错误事件：当发生错误时尝试重新连接。
2024-01-02 20:15:00
1768
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人