当前位置： 首页 > news >正文

vue mixin混入与hook

news 来源：原创 2025/5/26 3:02:12

mixin混入是 ‌选项式 API‌，在vue3-Composition API <script setup> 中无法直接使用，需通过 setup() 函数转换

vue2、vue3选项式API:

// mixins/mixin.js
export const mixin = {methods: {courseType(courseLevel) {const levelMap = {1: '初级',2: '中级',3: '高级'};return levelMap[courseLevel] || '';}}
}
组件引入mixin
<template><view><!-- 直接调用混入的 courseType 方法 --><text>课程等级: {{ courseType(level) }}</text></view>
</template>

import { mixin } from '@/mixins/mixin.js';
export default {mixins: [mixin],mounted() {console.log(this.courseType(2)); // 输出 "中级"}
}
在vue3-Composition API 组件（<script setup>）‌无法直接使用,需通过 setup() 函数转换：

在这里插入图片描述

vue3-Composition API 推荐使用 ‌自定义 Hook‌ 替代混入

// hooks/useCourseLevel.js
export function useCourseLevel() {const courseType = (courseLevel) => {const levelMap = {1: '初级',2: '中级',3: '高级'};return levelMap[courseLevel] || '';};return {courseType};
}
组件中使用
<script setup>
import { useCourseLevel } from '@/hooks/useCourseLevel.js';const { courseType } = useCourseLevel();
</script>// html
<!-- 级别 -->
<view class="descript">{{ courseType(courseLevel) }}</view>

相关文章：

vue mixin混入与hook

mixin混入是 ‌选项式 API‌&#xff0c;在vue3-Composition API <script setup> 中无法直接使用&#xff0c;需通过 setup() 函数转换 vue2、vue3选项式API: // mixins/mixin.js export const mixin {methods: {courseType(courseLevel) {const levelMap {1: 初级,…...

编程日记 2025/5/26 3:02:12

《Masked Autoencoders Are Scalable Vision Learners》---CV版的BERT

目录 一、与之前阅读文章的关系&#xff1f; 二、标题&#xff1a;带掩码的自auto编码器是一个可拓展的视觉学习器 三、摘要 四、核心图 五、结果图 六、不同mask比例对比图 七、“Introduction” (He 等, 2021, p. 1) 引言 八、“Related Work” (He 等, 2021, p. 3)相…...

编程日记 2025/5/23 8:28:05

（云计算HCIP）HCIP全笔记（十三）本篇介绍虚拟化技术，内容包含：虚拟化资源、虚拟化过程、I/O虚拟化、虚拟化架构KVM和Xen介绍、主流虚拟化技术介绍

1. 虚拟化资源 1.1 虚拟化对象 CPU虚拟化&#xff1a; 目标是使虚拟机上的指令能被正常执行&#xff0c;且效率接近物理机 内存虚拟化&#xff1a; 目标是能做好虚拟机内存空间之 间的隔离&#xff0c;使每个虚拟机都认为自己拥有了整个内存地址&#xff0c;且效率页能接近物理…...

编程日记 2025/5/26 2:25:31

C++核心编程：类与对象全面解析

C核心编程&#xff1a;类与对象全面解析 大家好&#xff01;今天我要和大家深入探讨C面向对象编程中最核心的概念&#xff1a;类与对象。&#x1f468;‍&#x1f4bb; 这是我们迈向高级C开发的第一步&#xff0c;掌握好这部分内容&#xff0c;对未来学习更高级的设计模式和框…...

编程日记 2025/5/24 19:14:11

Linux基础命令和文件系统结构：从入门到实践

目录 1. 引言 2. Linux文件系统结构概述 2.1 根目录 ​编辑 2.2 常见目录介绍&#xff1a; 1. /home&#xff1a;用户的家目录 2. /etc&#xff1a;存放配置文件的目录 3. /var&#xff1a;可变数据 4. /bin 和 /sbin&#xff1a;常见命令和系统管理工具 5. /tmp&…...

编程日记 2025/5/25 18:36:05

「Mac畅玩AIGC与多模态05」部署篇03 - 在 Mac 上部署本地向量化模型（Embedding Models）

一、概述 本篇介绍如何在 macOS 环境下，为 Dify 平台部署本地向量化模型（Embedding Models），支持知识库文档向量化、语义检索与智能体上下文增强。向量化模型是实现知识库问答与 RAG（检索增强生成）应用的基础组件。 二、部署流程 1. 环境准备 确认 Docker Desktop 正常…...

编程日记 2025/4/29 7:20:28

Java-Optional类

介绍 Optional是 Java 8 引入的一个类&#xff0c;用于解决空指针异常问题。它本质上是一个容器类&#xff0c;可以包含或不包含一个非空值。 示例 创建Optional对象 Optional.of(T value)&#xff1a;创建一个包含非空值的Optional对象。如传入null值&#xff0c;会抛出Nu…...

编程日记 2025/5/23 4:21:49

Android 热点开发调试总结

Android 热点开发调试总结 文章目录 Android 热点开发调试总结一、前言二、热点开发1、开关和默认配置wifi和热点配置信息保存的位置&#xff1a; 2、主要流程3、相关日志4、相关广播5、demo示例 三、其他1、Android 热点开发调试小结2、其他热点相关知识小结&#xff08;1&…...

编程日记 2025/5/26 2:33:19

【“星瑞” O6 评测】 — llm CPU部署对比高通骁龙CPU

前言 随着大模型应用场景的不断拓展&#xff0c;arm cpu 凭借其独特优势在大模型推理领域的重要性日益凸显。它在性能、功耗、架构适配等多方面发挥关键作用&#xff0c;推动大模型在不同场景落地 1. CPU对比 星睿 O6 CPU 采用 Armv9 架构&#xff0c;集成了 Armv9 CPU 核心…...

编程日记 2025/4/29 7:19:24

快乐数（双指针解法）

题目链接202. 快乐数 - 力扣&#xff08;LeetCode&#xff09; 题目拆解 1 取一个正整数每一位的平方和为&#xff0c;如果为1那么直接可以判定为快乐数&#xff0c;如果不为1&#xff0c;就重复这个过程&#xff0c;直到出现1 2 实际上&#xff0c;这道题只有两种情况&#xf…...

编程日记 2025/4/29 7:19:24

【Vue3-Bug】中路由加载页面直接显示空白

Vue3中路由加载页面直接显示空白 没有子路由 路由定义不能重复&#xff0c;请自己查看数据在main.js(或者)mina.ts入口文件中&#xff0c;需要将router的注入到vue中的执行放在&#xff0c;vue挂在元素之前 // 顺序不能变 app.use(router) app.mount(#app)在App.vue中 // 在…...

编程日记 2025/5/25 7:54:46

线性代数——行列式⭐

目录 一、行列式的定义⭐ 1-1、三阶行列式练习 1-2、下面介绍下三角行列式、上三角行列式、对角行列式 ​编辑 二、行列式的性质 2-1、性质1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;6 ​编辑 2-2、性质7 2- 3、拉普拉斯定理、克莱姆法则 三…...

编程日记 2025/5/23 15:32:12

flume----初步安装与配置

目录标题 **flume的简单介绍**⭐flume的**核心组件**⭐**核心特点** **安装部署**1&#xff09;**解压安装包**2&#xff09;**修改名字** **&#xff08;配置文件时&#xff0c;更方便&#xff09;****3&#xff09;⭐⭐配置文件**4&#xff09;**兼容Hadoop**5&#xff09;**…...

编程日记 2025/5/21 20:47:23

vscode源代码管理Tab-文件右侧标志(M、A 等)的含义

Git 常用标志(M、A 等)的含义 在 VSCode 的源代码管理&#xff08;Source Control&#xff09;标签页中&#xff0c;文件右侧显示的 Monaco 装饰徽章&#xff08;Badge&#xff09;&#xff08;如 M、A 等&#xff09;&#xff0c;本质上是对 Git 文件状态标志 的可视化呈现。…...

编程日记 2025/5/25 10:07:42

【力扣刷题实战】丢失的数字

大家好&#xff0c;我是小卡皮巴拉 文章目录 目录 力扣题目&#xff1a;丢失的数字 题目描述 解题思路 问题理解 算法选择 具体思路 解题要点 完整代码&#xff08;C&#xff09; 兄弟们共勉 &#xff01;&#xff01;&#xff01; 每篇前言 博客主页&#xff1a;小…...

编程日记 2025/5/25 10:07:39

具身智能机器人的应用场景及最新进展

具身智能机器人正通过“感知-学习-决策-行动”的闭环能力&#xff0c;重塑全球各行业的生产与服务模式。以下是其在当今世界的典型应用场景及最新进展&#xff1a; 一、工业制造&#xff1a;柔性生产与智能运维 高精度装配与检测 特斯拉Optimus通过双目视觉与惯性测量单元&…...

编程日记 2025/5/26 2:16:55

网络安全怎么入门？快速了解

网络安全是一个快速发展的领域&#xff0c;入门需要系统化的学习和实践。以下是适合零基础或转行者的分阶段学习路径&#xff0c;涵盖必备知识、学习资源、实战方法和职业方向&#xff1a; 一、基础阶段&#xff08;1-3个月&#xff09; 1. 掌握核心基础知识 计算机网络&#…...

编程日记 2025/5/26 2:19:48

STM32N6570-DK ISP调试

STM32N6570-DK之ISP调试应用 准备工作-下载安装软件包：一、使用STM32CubeProgrammer给板子烧入STM32N6_ISP_IQTune_App_revC01-v1.1.0-trusted.bin。二、打开STM32 ISP IQTune.exe ，出现可连接端口：三、根据教程进行相应调试：准备工作-下载安装软件包： https://www.st.co…...

编程日记 2025/5/26 2:31:49

Nacos源码—1.Nacos服务注册发现分析一

大纲 1.客户端如何发起服务注册 发送服务心跳 2.服务端如何处理客户端的服务注册请求 3.注册服务—如何实现高并发支撑上百万服务注册 4.内存注册表—如何处理注册表的高并发读写冲突 1.客户端如何发起服务注册 发送服务心跳 (1)Nacos客户端项目启动时为什么会自动注册服…...

编程日记 2025/5/24 6:51:37

NHANES指标推荐：CTI

文章题目&#xff1a;Association between the C-reactive protein-triglyceride-glucose index and endometriosis: a cross-sectional study using data from the national health and nutrition examination survey, 1996-2006 DOI&#xff1a;10.1186/s12905-024-03541-x 中…...

编程日记 2025/4/29 7:14:57

开源模型应用落地-全能音频新纪元-Kimi-Audio-7B-Instruct-重塑多模态交互边界

一、前言 在AI技术持续突破的2025年，音频交互正从单一任务处理迈向全场景融合的新阶段。4月27日，月之暗面（Moonshot AI）开源的​​Kimi-Audio-7B-Instruct​​，以“全能音频通才”之姿，为这一进程树立了里程碑式标杆。这款基于70亿参数架构的模型，首次在单一框架内整合语…...

编程日记 2025/5/24 8:59:17

mtrace和memleak源码分析

文章目录 1. 内存泄漏2. 定位工具2.1 memleak 工具定位内存泄漏2.1.1 源码解读 2.2 mtrace 工具定位内存泄漏2.2.1 源码解读 嵌入式内存泄漏定位工具mtrace和memleak源码分析 1. 内存泄漏 内存泄漏&#xff08;Memory Leak&#xff09;指程序中已动态分配的堆内存因未正确释放或…...

编程日记 2025/5/26 2:30:16

Python爬虫技术全解析：从入门到实战的终极指南大纲（深度解读与扩展）

Python爬虫技术全解析&#xff1a;从入门到实战的终极指南大纲&#xff08;深度解读与扩展&#xff09; 文章目录 Python爬虫技术全解析&#xff1a;从入门到实战的终极指南大纲&#xff08;深度解读与扩展&#xff09;前言&#xff1a;数据时代的爬虫使命第一章&#xff1a;Py…...

编程日记 2025/5/24 11:32:51

【网络入侵检测】基于源码分析Suricata的统计模块

【作者主页】只道当时是寻常 【专栏介绍】Suricata入侵检测。专注网络、主机安全，欢迎关注与评论。 1. 概要 👋 在 Suricata 的配置文件中，stats 节点用于配置统计信息相关的参数，它的主要作用是控制 Suricata 如何收集和输出统计数据，帮助用户了解 Suricata 的运行状态和…...

编程日记 2025/5/25 2:00:20

JDBC之Blob类型使用的实现

目录 一、 MySql Blob类型简介 1. Mysql中的Blob类型 2. Blob类型使用的注意事项 二. 插入Blob类型数据 1. 创建表 2. 通过PreparedStatement存储Blob类型数据 三. 解除文件大小限制 四、 读取Blob类型数据 前言 本文来讲解JDBC中的Blob类型 个人主页&#xff1a;艺杯羹…...

编程日记 2025/5/26 2:41:00

truffle

文章目录 truffle目录结构各文件作用在本地测试合约 truffle 项目来自https://github.com/Dapp-Learning-DAO/Dapp-Learning/blob/main/basic/04-web3js-truffle/README-CN.md Truffle 是基于 Solidity 语言的一套开发框架&#xff0c;它简化了去中心化应用&#xff08;Dapp&…...

编程日记 2025/4/29 7:13:50

网盘不限速

引言 哈喽小伙伴们&#xff01;说到网盘下载&#xff0c;是不是感觉心头一紧&#xff1f;特别是像某度那样不开会员就限速到怀疑人生&#xff01;就连之前号称不限速的阿里云盘&#xff0c;现在也是限的死死的。 随着阿里网盘开始限速&#xff0c;很多小伙伴开始转战其他平台。…...

编程日记 2025/5/24 0:43:54

TVM中的Pass两种实现方法？如何选择？

以下是TVM中基于DFPatternCallback和VisitDFPattern两种编写Pass的方法的详细对比与示例总结&#xff1a; 1. 核心概念对比 特性DFPatternCallbackVisitDFPattern (DFPatternFunctor)抽象层级声明式模式匹配命令式访问者模式适用场景简单/中等复杂度的模式匹配需要精细控制匹配…...

编程日记 2025/5/24 21:43:21

JAVA EE_网络原理_UDP与TCP

人海中未遇见时&#xff0c;我将独自前行... ----------陳長生. 1.UDP协议 1.1.UDP协议端格式 UDP&#xff08;用户数据报协议&#xff09;是由 源端口&#xff0c;目标端口&#xff0c;长度&#xff0c;校验和&#xff0c;数据 5种结构组成。16位是UDP报文中字段的长度&#…...

编程日记 2025/5/23 14:42:59

智能Python开发工具PyCharm v2025.1——AI层级功能重磅升级

JetBrains PyCharm是一种Python IDE&#xff0c;其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。此外&#xff0c;该IDE提供了一些高级功能&#xff0c;以用于Django框架下的专业Web开发。 立即获取PyCharm v2025.1正式版 具体更新内容&#xff1a; PyCh…...

编程日记 2025/4/29 7:12:44

15、项目搭建：绘制城堡蓝图——React 19 工程配置

一、魔法结界初始化 1. 召唤项目骨架 npx create-next-applatest hogwarts-castle --ts --tailwind 核心咒语&#xff1a; • --ts&#xff1a;激活预言水晶球&#xff08;TypeScript类型安全&#xff09; • --tailwind&#xff1a;注入飞天扫帚级原子样式&#xff08;…...

编程日记 2025/5/26 2:53:54

docker搭建swarm集群

环境准备 主机名 IP 角色 manger1 192.168.111.47 管理节点 worker1 192.168.111.48 工作节点 worker2 192.168.111.49 工作节点 注&#xff1a;三台主机都已经拉去完swarm和…...

编程日记 2025/5/23 9:14:06

普通IT的股票交易成长史--20250428晚

声明&#xff1a;本文章的内容只是自己学习的总结&#xff0c;不构成投资建议。文中观点基本来自yt站Andylee&#xff0c;美股Alpha姐&#xff0c;综合自己的观点得出。感谢他的无私分享。 仓位就是生命&#xff0c;绝对不能满仓&#xff01;&#xff01;&#xff01;&#xf…...

编程日记 2025/5/25 11:10:48

【React Native】精通 react native

活到老，学到老。 一、基础核心 JavaScript/TypeScript 基础 掌握 ES6+ 语法（箭头函数、解构、Promise、async/await）。熟悉 TypeScript（类型系统、接口、泛型）以提高代码质量。React 核心概念 组件化开发（函数组件、类组件）。状态管理（useState, useEffect, useContex…...

编程日记 2025/5/26 2:13:48

微信小程序-van-uploader的preview-size

preview-size支持数组格式 修改前修改后1、升级微信小程序里面的van版本:2、 重新构建npm3、重启微信开发工具 修改前 引用van组件的上传文件&#xff0c;设置预览图尺寸&#xff0c;刚开始设置的是preview-size“140”&#xff0c;出来的效果就是一个正方形。 修改后 1、升级…...

编程日记 2025/5/26 2:34:52

成员方法的详细说明(结合Oracle官方文档)

在Java的对象创建过程中&#xff0c;成员方法的地址并不存储在对象的堆内存中。Java虚拟机的设计说明&#xff08;包括Oracle的Java虚拟机规范、OpenJDK文档、以及HotSpot的设计文档&#xff09;都明确区分了对象的实例数据&#xff08;存储在堆内存中&#xff09;和类的元数据…...

编程日记 2025/5/26 2:56:50

[蓝桥杯刷题]---模拟法[2]日期问题

题目如下: 题目的意思是&#xff1a; 给出一个日期&#xff08;格式是yy mm dd&#xff0c;注意年份只有两位数&#xff09;&#xff0c;要找出所有可能的真实日期&#xff08;合法的yyyy-mm-dd格式&#xff09;。 需要考虑&#xff1a; 年份范围在1960到2059。 输入的yy、mm、…...

编程日记 2025/4/29 7:10:35

阿里开源图生动画模型AnimateAnyone2

项目背景 近年来&#xff0c;基于扩散模型&#xff08;diffusion models&#xff09;的人物图像动画化方法取得了显著进展&#xff0c;例如 Animate Anyone 在生成一致性和泛化性方面表现优异。然而&#xff0c;这些方法在处理人物与环境之间的空间关系和人-物体交互&#xff0…...

编程日记 2025/5/26 2:58:01

02_使用 AES 算法实现文件加密上传至阿里云、解密下载

02_使用 AES 算法实现文件加密上传至阿里云、解密下载 一、文件上传下载接口 controller 层 RestController RequestMapping("/api/common/file") Api(tags "公共文件上传") AllArgsConstructor Slf4j public class FileV2Controller {private final Os…...

编程日记 2025/4/29 7:10:33

Linux运维——Vim基础

Vim基础 一、移动光标1.1、基础移动1.2、屏幕滚动 二、编辑操作2.1、插入模式2.2、删除与修改2.3、复制粘贴 三、搜索与替换3.1、搜索3.2、替换 4、分屏与窗口管理4.1、分屏操作4.2、窗口调整 五、宏与批量操作六、效率技巧 一、移动光标 1.1、基础移动 快捷键作用h j k l左/…...

编程日记 2025/4/29 7:10:33

从外卖大战看O2O新趋势：上门私厨平台系统架构设计解析

京东高调进军外卖市场&#xff0c;美团全力防守&#xff0c;两大巨头的竞争让整个行业风起云涌。但在这场外卖大战之外&#xff0c;一个更具潜力的细分市场正在悄然兴起——上门私厨服务。 与标准化外卖不同&#xff0c;上门私厨提供的是个性化定制服务。厨师带着新鲜食材上门现…...

编程日记 2025/4/29 7:10:32

【网络编程】ARP协议与主机之间的通信

1. 什么是ARP协议&#xff1f; ARP&#xff08;地址解析协议&#xff0c;Address Resolution Protocol&#xff09; 是一种用于在网络中将IP地址转换为MAC地址的协议。它属于TCP/IP协议栈中的网络层协议&#xff0c;通常在局域网&#xff08;LAN&#xff09;环境下使用&#x…...

编程日记 2025/4/29 7:09:30

JVM模型、GC、OOM定位

JVM模型 程序计数器 程序计数器是一块较小的内存空间&#xff0c;可以看作是当前线程所执行的字节码的行号指示器。字节码解释器工作时通过改变这个计数器的值来选取下一条需要执行的字节码指令&#xff0c;分支、循环、跳转、异常处理、线程恢复等功能都需要依赖这个计数器来…...

编程日记 2025/4/29 7:09:30

什么是数据链路层的CRC检测以及为什么要放到帧尾？

数据链路层在封装过程中添加CRC&#xff08;循环冗余校验&#xff09;帧尾&#xff0c;主要目的是为了检测数据传输过程中可能出现的比特错误&#xff0c;确保数据的完整性和可靠性。具体原因如下&#xff1a; 1. 错误检测 物理层传输的不可靠性&#xff1a;数据在物理介质&am…...

编程日记 2025/5/26 2:22:38

Electron 入门指南

Electron 入门指南 Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架。通过 Electron&#xff0c;你可以利用 Web 技术开发出功能强大的桌面应用程序&#xff0c;并且能够运行在 Windows、Mac 和 Linux 系统上。 本文将带你从零开始构建一个简单的 Ele…...

编程日记 2025/4/29 7:09:29

目标检测YOLO实战应用案例100讲- 无人机平台下露天目标检测与计数

目录 知识储备 基于YOLOv8改进的无人机露天目标检测与计数 一、环境配置与依赖安装 二、核心代码实现（带详细注释） 1. 改进YOLOv8模型定义（添加注意力机制） 2. 无人机视角数据增强（drone_augment.py ） 3. 多目标跟踪与计数（tracking_counter.py ） 4. 完整推理流…...

编程日记 2025/5/23 18:17:23

ArkTS基础实验 （二）

任务一&#xff1a;使用模板字符串相关知识&#xff0c;实现多个变量的拼接。同学们可以把自己的姓名、年纪和爱好这三个变量进行拼接。把代码和日志中console.log的打印结果截图保留。 预期效果&#xff1a; 任务二&#xff1a;使用状态变量和点击事件相关知识实现计数器案例…...

编程日记 2025/4/29 7:08:25

【计算机视觉】Bayer Pattern与Demosaic算法详解：从传感器原始数据到彩色图像

Bayer Pattern与Demosaic算法详解&#xff1a;从传感器原始数据到彩色图像 一、引言 在现代数码相机和手机摄像头中&#xff0c;我们能够拍摄到丰富多彩的彩色图像。然而&#xff0c;你可能不知道的是&#xff0c;图像传感器本身并不能直接感知颜色——它们只能感知光的强度。…...

编程日记 2025/5/25 9:12:55

媒体查询使用

一、引言 为了确保网页在不同设备上都能提供良好的用户体验&#xff0c;响应式设计变得至关重要。而媒体查询&#xff08;Media Queries&#xff09;就是前端开发中实现响应式设计的核心技术之一。 二、媒体查询的概念 媒体查询是 CSS3 引入的一项强大功能&#xff0c;它允许开…...

编程日记 2025/5/25 10:17:20

deepseek对IBM MQ SSL 证书算法的建议与解答

在IBM MQ配置SSL TLS的命令中&#xff0c;如果参数SSLCIPH使用TLS_RSA_WITH_AES_128_CBC_SHA256&#xff0c;如下所示&#xff1a; DEFINE CHANNEL(QM1.TO.QM2) CHLTYPE(SDR) TRPTYPE(TCP) CONNAME(QM1.MACH.COM) XMITQ(QM2) SSLCIPH(TLS_RSA_WITH_AES_128_CBC_SHA256) DESCR(S…...

编程日记 2025/4/29 7:07:22