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

18 vue3之自动引入ref插件深入使用v-model

自动引入插件后无需再引入ref等

使用自动引入插入无需在import { ref, reactive } from "vue"做这样的操作

npm i unplugin-auto-import - D

 vite配置

import AutoImport from 'unplugin-auto-import/vite' //使用vite版本
export default defineConfig({plugins: [vue(),VueJsx(),AutoImport({imports:['vue'],dts:"src/auto-import.d.ts"})]
}

配置完成之后使用ref reactive watch 等 无须import 导入 可以直接使用 

v-model

v-model使用场景

TIps 在Vue3 v-model 是破坏性更新的

v-model在组件里面也是很重要的

v-model 其实是一个语法糖 通过props 和 emit组合而成的

默认值的改变

prop:value -> modelValue
事件:input -> update:modelValue
vue3中v-bind 的 .sync 修饰符和组件的 model 选项已移除
新增 支持多个v-model
新增 支持自定义 修饰符 Modifiers

单个v-model在自定义组件中使用场景

父组件


<template><div class=""></div><button @click="isShow = !isShow">开关</button><div>isShow:{{ isShow }}</div><hr /><!-- 内置修饰符 v-model.trim、自定义修饰符v-model:text.isSq  --><comv-model="isShow"></com>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import com from "./components/twenty.vue";
let isShow = ref<boolean>(true);
let textVal = ref<string>("你好");
</script><style lang="less" scoped></style>

子组件

<template><div v-if="propsData.modelValue"><div class="box"><div>接受到的isShow:{{ propsData.modelValue }}</div><button @click="clsoe">关闭</button></div></div>
</template><script setup lang="ts">
import {ref,reactive,defineProps,defineEmits,
} from "vue";
/*v-model 其实是一个语法糖 通过props 和 emit组合而成的1.默认值的改变
prop:value -> 默认参数是modelValue,当然也可以自定义v-model:isShow1="isShow;
事件:input -> update:modelValue;
v-bind 的 .sync 修饰符和组件的 model 选项已移除
新增 支持多个v-model
新增 支持自定义 修饰符 Modifiers
*/
// 注意点: 1.vue2中是value vue3中是modelValuetype Props = {modelValue: boolean; // v-model默认值 modelValue  };
};let propsData = defineProps<Props>();
let emit = defineEmits(["update:modelValue","update:text",
]); // update:modelValue与props中的modelValue保持一致
let clsoe = () => {emit("update:modelValue", false);
};
</script><style lang="less" scoped>
.box {width: 200px;height: 200px;border: 1px solid #ccc;
}
</style>

多个model在自定义组件中使用场景

自定义修饰符Modifiers

内置修饰符 v-model.trim、自定义修饰符v-model:text.isSq

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。在下面的示例中,我们创建了一个组件,其中包含默认为空对象的 modelModifiers prop

父组件

<template><div class=""></div><button @click="isShow = !isShow">开关</button><div>isShow:{{ isShow }}</div><div>textVal:{{ textVal }}</div><hr /><!-- 内置修饰符 v-model.trim、自定义修饰符v-model:text.isSq  --><com v-model:text.isSq="textVal" v-model="isShow"></com>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import com from "./components/twenty.vue";
let isShow = ref<boolean>(true);
let textVal = ref<string>("你好");
</script><style lang="less" scoped></style>

子组件

<template><div v-if="propsData.modelValue"><div class="box"><div>接受到的isShow:{{ propsData.modelValue }}</div><button @click="clsoe">关闭</button>内容:<input@change="change":value="propsData.text"type="text"/></div></div>
</template><script setup lang="ts">
import {ref,reactive,defineProps,defineEmits,
} from "vue";
/*v-model 其实是一个语法糖 通过props 和 emit组合而成的1.默认值的改变
prop:value -> 默认参数是modelValue,当然也可以自定义v-model:isShow1="isShow;
事件:input -> update:modelValue;
v-bind 的 .sync 修饰符和组件的 model 选项已移除
新增 支持多个v-model
新增 支持自定义 修饰符 Modifiers
*/
// 注意点: 1.vue2中是value vue3中是modelValuetype Props = {modelValue: boolean; // v-model默认值 modelValue// isShow1: boolean;text: string; // 自定义v-modeltextModifiers?: {// modelValueModifiers默认是这样写 我们这里是使用的自定义v-modelisSq: boolean;// default: () => {// }};
};let propsData = defineProps<Props>();
let emit = defineEmits(["update:modelValue","update:text",
]); // update:modelValue与props中的modelValue保持一致
let clsoe = () => {emit("update:modelValue", false);
};
let change = (e: Event) => {// 第三方组件都是这样做v-model的// let target = e.target; //let target: EventTarget | null  已声明“target”,但无法读取其值。let target = e.target as HTMLInputElement;emit("update:text",propsData?.textModifiers?.isBt? target.value + "帅气": target.value); // 自定义了修饰符就+变态二字
};
</script><style lang="less" scoped>
.box {width: 200px;height: 200px;border: 1px solid #ccc;
}
</style>

19 vue3之定义自定义指令Directive&按钮鉴权-CSDN博客文章浏览阅读153次。directive-自定义指令(属于破坏性更新)Vue中有v-if,v-for,v-bind,v-show,v-model 等等一系列方便快捷的指令 今天一起来了解一下vue里提供的自定义指令Vue3指令的钩子函数created 元素初始化的时候beforeMount 指令绑定到元素后调用 只调用一次mounted 元素插入父级dom调用beforeUpdate 元素被更新之前调用update 这个周期方法被移除 改用updatedbeforeUnmount 在元素被移除前调用https://blog.csdn.net/qq_37550440/article/details/142525714?sharetype=blogdetail&sharerId=142525714&sharerefer=PC&sharesource=qq_37550440&spm=1011.2480.3001.8118

相关文章:

18 vue3之自动引入ref插件深入使用v-model

自动引入插件后无需再引入ref等 使用自动引入插入无需在import { ref, reactive } from "vue"做这样的操作 npm i unplugin-auto-import - D vite配置 import AutoImport from unplugin-auto-import/vite //使用vite版本 export default defineConfig({plugins: [v…...

【Spring】lombok、dbUtil插件应用

一、lombok插件 1. 功能&#xff1a;对实体类自动&#xff0c;动态生成get、set方法&#xff0c;无参、有参构造..... 2. 步骤&#xff1a; &#xff08;1&#xff09;idea安装插件(只做一次) &#xff08;2&#xff09;添加坐标 &#xff08;3&#xff09;编写注解 NoArgsCo…...

【学习笔记】WSL

WSL 1、 介绍 1.1、概述 1.2、版本 1.3、配置安装 2、 基本 2.1、基本命令 1、 介绍 1.1、概述 WSL 是 Windows Subsystem for Linux 的缩写&#xff0c;中文称为 Windows 下的 Linux 子系统。它是微软在 Windows 上提供的一种功能&#xff0c;允许用户在 …...

python assert 断言用法

语法&#xff1a; try:assert 条件表达式, "可选的错误消息" except AssertionError as error:print(f"断言失败&#xff1a;{error}")其中&#xff0c; try...except是异常处理语法结构&#xff0c;try可以测试代码块中的错误&#xff0c;并在出现异常时…...

MySQL事务、索引、数据恢复和备份

MySQL事务、索引、数据恢复和备份 1.MySQL的事务处理 事务就是将一组SQL语句放在同一批次内去执行 如果一个SQL语句出错&#xff0c;则该批次内的所有SQL都将被取消执行 MySQL的事务实现方法 : SET AUTOCOMMIT 使用SET语句来改变自动提交模式 SET AUTOCOMMIT 0; # 关…...

什么是chatgpt?国内有哪些类gpt模型?

什么是ChatGPT&#xff1f; “ChatGPT”这个名字越来越多地出现在我们的生活中。简单来说&#xff0c;ChatGPT是OpenAI开发的一种人工智能对话模型。它基于GPT&#xff08;Generative Pre-trained Transformer&#xff0c;生成式预训练变换模型&#xff09;架构&#xff0c;能…...

ISP基本框架及算法介绍 ISP(Image Signal Processor)

ISP基本框架及算法介绍 ISP(Image Signal Processor)&#xff0c;即图像处理&#xff0c;主要作用是对前端图像传感器输出的信号做后期处理&#xff0c;主要功能有线性纠正、噪声去除、坏点去除、内插、白平衡、自动曝光控制等&#xff0c;依赖于ISP才能在不同的光学条件…...

Stable Diffusion 的 ControlNet 主要用途

SD&#xff08;Stable Diffusion&#xff09;中的ControlNet是一种条件生成对抗神经网络&#xff08;Conditional Generative Adversarial Network, CGAN&#xff09;的扩展技术&#xff0c;它允许用户通过额外的输入条件来控制预训练的大模型&#xff08;如Stable Diffusion&a…...

矩阵分析 学习笔记4 内积与Gram矩阵

内积 定义 由于对称&#xff0c;第二变元线性那第一变元也线性了。例如这个&#xff1a;...

iOS 消息机制详解

应用 解决NSTimer、CADisplayLink循环引用。 二者都是基于runloop的定时器&#xff0c;由于处理事件内容不一样&#xff0c;runloop 每运行一次运行耗时就不一样&#xff0c;无法准确的定时触发timer的事件。 NSProxy 与 NSObject 如果继承自NSProxy 直接开始消息转发&…...

深入理解Spring Data JPA与接口编程

目录 1. 什么是Spring Data JPA&#xff1f; 2. 如何使用Spring Data JPA&#xff1f; 3. 示例代码 4. 使用Query注解 5. 拓展知识&#xff1a;接口编程的好处 6. 结论 在软件开发领域&#xff0c;接口&#xff08;Interface&#xff09;是一种定义了方法签名但没有实现的…...

Wireshark学习使用记录

wireshark 是一个非常好用的抓包工具&#xff0c;使用 wireshark 工具抓包分析&#xff0c;是学习网络编程必不可少的一项技能。 原理 Wireshark使用的环境大致分为两种:一种是电脑直连互联网的单机环境&#xff0c;另外一种就是应用比较多的互联网环境&#xff0c;也就是连接…...

OpenCV特征检测(9)检测图像中直线的函数HoughLines()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在二值图像中使用标准 Hough 变换查找直线。 该函数实现了用于直线检测的标准 Hough 变换或标准多尺度 Hough 变换算法。详见 http://homepages…...

力扣 中等 445.两数相加 II

文章目录 题目介绍题解 题目介绍 题解 首先反转两个链表&#xff0c;再调用 2. 两数相加 链接的代码&#xff0c;得到链表&#xff0c;最后将其翻转即可。 class Solution {public ListNode addTwoNumbers(ListNode l1, ListNode l2) {l1 reverseList(l1);l2 reverseList(l…...

华为云徐峰:AI赋能应用现代化,加速软件生产力跃升

2024年9月19日&#xff0c;在华为全联接大会2024的“AI赋能应用现代化&#xff0c;加速软件生产力跃升”论坛上&#xff0c;华为云PaaS服务产品部部长徐峰发表了主题演讲&#xff0c;介绍了未来应用智能化演进趋势&#xff0c;分享了智能化应用的行业实践&#xff0c;并发布了华…...

C发送邮件技巧:如何批量发送个性化邮件?

C发送邮件的高效步骤指南&#xff1f;C语言怎么实现SMTP发邮件&#xff1f; 为了提高邮件营销的效果&#xff0c;掌握C发送邮件的技巧&#xff0c;特别是如何批量发送个性化邮件&#xff0c;显得尤为重要。AokSend将详细介绍C发送邮件的技巧&#xff0c;帮助您在邮件营销中取得…...

基于python+spark的外卖餐饮数据分析系统设计与实现(含论文)-Spark毕业设计选题推荐

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…...

权限维持——Linux

前提 已经提权到管理员权限 一、创建账户 1、创建一个自定义密码的账户 已知&#xff0c;Linux中所有的用户的信息 存储在/etc/passwd这个文件中 。可以利用管理员权限修改这个文件&#xff0c; 添加一个账户 。 利用linux中的密码的编码算法 生成对应密码 &#xff08;不知…...

申请SSL证书闭坑方法

上来先问一个问题&#xff0c;为什么自己不能成立CA机构发SSL证书产品&#xff1f;为什么有的CA机构不能发被信任SSL证书产品&#xff1f; 真正原因是&#xff0c;SSL证书里面的根证书需要提前放入操作系统及浏览器&#xff0c;然而这些浏览器和操作系统的版本很多&#xff0c…...

linux 下域名解析错误

本文参考这里 作者&#xff1a;程序那点事儿 日期&#xff1a;2024/01/31 16:25 ping raw.githubusercontent.com&#xff0c;ping这个域名时&#xff0c;发现返回的是本地ip 原因是&#xff0c;配置了本地网关地址 192.168.xx.1 用命令查看默认网卡的网关&#xff1a;nmcli …...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...