《vue3第六章》其他,包含:全局API的转移、其他改变

news/2024/10/30 11:19:32/文章来源:https://www.cnblogs.com/bigcat26/p/18515485

@

目录
  • 六、其他
    • 1.全局API的转移
    • 2.其他改变

六、其他

1.全局API的转移

  • Vue 2.x 有许多全局 API 和配置。

例如:注册全局组件、注册全局指令等。

//注册全局组件
Vue.component('MyButton', {data: () => ({count: 0}),template: '<button @click="count++">Clicked {{ count }} times.</button>'
})//注册全局指令
Vue.directive('focus', {inserted: el => el.focus()
}
  • Vue3.0中对这些API做出了调整:

将全局的API,即:Vue.xxx调整到应用实例(app)上

2.其他改变

  • data选项应始终被声明为一个函数。

  • 过度类名的更改:

Vue2.x写法

.v-enter,
.v-leave-to {opacity: 0;
}
.v-leave,
.v-enter-to {opacity: 1;
}

Vue3.x写法

.v-enter-from,
.v-leave-to {opacity: 0;
}.v-leave-from,
.v-enter-to {opacity: 1;
}
  • 移除keyCode作为 v-on 的修饰符,同时也不再支持config.keyCodes

  • 移除v-on.native修饰符

父组件中绑定事件

<my-componentv-on:close="handleComponentEvent"v-on:click="handleNativeClickEvent"
/>

子组件中声明自定义事件

<script>export default {emits: ['close']}
</script>

注意点1:
使用emits声明的就是自定义事件,未声明的就当做原生事件

  • 移除过滤器(filter)

    过滤器虽然这看起来很方便,但它需要一个自定义语法,打破大括号内表达式是 “只是 JavaScript” 的假设,这不仅有学习成本,而且有实现成本!建议用方法调用或计算属性去替换过滤器。

  • ......

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/824062.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《vue3第四章》Composition API 的优势,包含Options API 存在的问题、Composition API 的优势

《vue3第四章》Composition API 的优势,包含Options API 存在的问题、Composition API 的优势@目录四、Composition API 的优势1.Options API 存在的问题2.Composition API 的优势 四、Composition API 的优势 1.Options API 存在的问题 使用传统OptionsAPI中,新增或者修改一…

USB协议详解第27讲(USB包-中断传输包详解)

1.中断传输包结构 中断传输和批量传输类似,中断传输只由一个中断事务组成,中断事务包含令牌包、数据包、握手包,如图下所示。中断事务类型的特点是能够通过错误检测和重试来保证主机和设备之间数据的无错误传递。 需要理解和注意以下点。(1)当主机准备接收数据时,它发出I…

.NET 实现的零部件离散型 MES+WMS 系统

前言 随着制造业的不断发展,企业对于生产效率和管理水平的要求越来越高。 EasyMES 是一款基于 .NET 6 开发的零部件离散型 MES(Manufacturing Execution System)+ WMS(Warehouse Management System)系统,可以帮助企业提升生产效率和管理水平。 本文将详细介绍 EasyMES 的…

Hugging Face 与 TruffleHog 合作,实现风险预警

我们非常高兴地宣布与 Truffle Security 建立合作伙伴关系并在我们的平台集成 TruffleHog 强大的风险信息扫描功能。这些特性是 我们持续致力于提升安全性 的重要举措之一。TruffleHog 是一款开源工具,用于检测和验证代码中的机密信息泄露。它拥有广泛的检测器,覆盖多种流行 …

vue3知识点:Teleport组件

vue3知识点:Teleport组件@目录五、新的组件2.Teleport案例完整代码本人其他相关文章链接 五、新的组件 2.Teleport问题:什么是Teleport?答案:Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。 <teleport to="移动位置"><div v-if="…

Jenkins使用maven打包项目

Jenkins使用maven打包项目 作为一名软件测试工程师,在日常工作中,我们经常需要使用Jenkins进行持续集成和持续部署(CI/CD)。而Maven作为Java项目的构建工具,更是不可或缺。今天,我将向大家介绍如何在Jenkins中使用Maven打包项目。 一、准备工作 登录Jenkins后,点击Manag…

3216. 交换后字典序最小的字符串

给你一个仅由数字组成的字符串 s,在最多交换一次 相邻 且具有相同 奇偶性 的数字后,返回可以得到的 字典序最小的字符串 。 如果两个数字都是奇数或都是偶数,则它们具有相同的奇偶性。例如,5 和 9、2 和 4 奇偶性相同,而 6 和 9 奇偶性不同。 示例 1: 输入: s = "4…

实现注解校验Dto字段是否为空

一、背景 我们用json对象作为接收参数的包装器,最后要转化为dto进行业务操作,操作之前要做非空校验,我们可以实现2个注解来实现这个通用的操作。@NotNullField @CheckNull 二、思路 1.实现@NotNullField注解,注解标记在dto字段名上面 @Target(ElementType.FIELD) // 目标为字…

学习高校课程-系统设计与分析-进入设计领域(lec6)

IndexFundamental Design Tasks and Activities 基本设计任务和活动 Understanding the challenges in Iteration 0 了解迭代 0 中的挑战 Structural Modeling and Behavior Modeling 结构建模和行为建模 More on Common Used DiagramsPackage Diagram 封装图 Interaction Diag…

乐维网管平台(三)如何高效管理无线网络

一、无线网络管理概述 1.什么是无线网络管理 无线网络管理是指利用专门的软件平台(如网管平台)对无线网络设备(如无线接入点、无线控制器等)及其相关资源进行集中监控、配置、优化和维护的一系列操作。其主要目的是确保无线网络的高效稳定运行,提升用户体验,保障网络安全…

销售的艺术:价值与策略

一、销售的核心在于展现价值 销售不仅仅是表面的推销技巧,如“多多关照,多多捧场”或“只有今天的500单有这个价格”。其核心在于“展现价值”,即将商品的功能、优点、魅力和价值传递给有需求的人,激发他们的购买欲望。一个简单的公式——价值>价格,是销售过程中的关键所…

Fastjson枚举序列化和反序列化的推荐实现

一、背景 项目中定义了很多dto,包含枚举类型,而且这些枚举全都自定义标志码。比如7001 对应 某种操作。返回前台时,需要转化为对应的7001,前台传入后台时也希望7001转化为枚举。 二、研究思路 一开始,研究了fastjson的默认实现。发现只有不自定义类似7001这种默认值的时候,…