vue3中其他的变化

news2024/11/16 21:54:57

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()
}

但是在v3中没有Vue这个配置,因此进行了全局api的转换

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

2.x 全局 API(Vue)3.x 实例 API (`app`)
Vue.config.xxxxapp.config.xxxx
Vue.config.productionTip移除
Vue.componentapp.component
Vue.directiveapp.directive
Vue.mixinapp.mixin
Vue.useapp.use
Vue.prototypeapp.config.globalProperties

 但是他并没有全部转移过去。像关闭vue的生命提示就移除了

因为v3的脚手架更加智能了,它能指定识别出来,你是开发模式,还是上线模式 

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修饰符(就是组件中保证它是原生的banfa@click)

父组件中绑定事件

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

子组件中声明自定义事件

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

移除过滤器(filter)

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序+wx.connectSocket客服问答

项目需求&#xff0c;记录一下&#xff1a; 1.要求websocket实时返回会话结果 我项目这边是后端一次返回一个字&#xff0c;–finish–结束&#xff0c;所以实现方法是每获取到数据时就setData一次&#xff0c;直到获取到的数据为finish&#xff0c;停止setData 后端返回结果…

Banana Pi BPI-Centi-S3 使用MicroPython编程显示JPG图片

BPI-Centi-S3是我们新推出的一款板载1.9英寸彩屏的小尺寸ESP32-S3开发板&#xff01; BPI-Centi-S3 banana-pi wiki BPI-Centi-S3 bpi-steam wiki 1 关键特性 ESP32-S3&#xff0c;Xtensa 32 bit LX72M PSRAM , 8M FLASH2.4G WIFI &#xff0c;Bluetooth 5 &#xff0c;Blue…

Windows下安装使用Kafka(使用Kafka内置的ZooKeeper)

Windows下安装使用Kafka(使用Kafka内置的ZooKeeper) Kafka2.8版本才开始自带了Zookeeper&#xff0c;所以注意下版本 kafka官网&#xff1a;https://kafka.apache.org kafka配置快速入门&#xff1a;https://kafka.apache.org/quickstart kafka下载页面&#xff1a;https:/…

找出1-1000中的所有完美数

再次练习查找完美数&#xff0c;找出 1-1000 中的所有完美数。 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅仅是基础那么简单…… 地址&#xff1a;https://l…

【LeetCode】剑指 Offer 62. 圆圈中最后剩下的数字(约瑟夫环问题) p300 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/yuan-quan-zhong-zui-hou-sheng-xia-de-shu-zi-lcof/ 1. 题目介绍&#xff08;62. 圆圈中最后剩下的数字&#xff09; 0,1,,n-1 这n个数字排成一个圆圈&#xff0c;从数字0开始&#xff0c;每次从这个圆圈里删除第m个数字&a…

人工标注或成过去式?SSA语义分割框架、SSA-engine自动类别标注引擎,大幅提升细粒度语义标注效率

推荐语 4月5日&#xff0c;Meta发布 Segment Anything 模型和 SA-1B 数据集&#xff0c;引发CV届“地震”&#xff0c;其凭借一己之力&#xff0c;成功改写了物体检测、数据标注、图像分割等任务的游戏规则。 复旦大学ZVG实验室团队基于此最新开源了SSA语义分割框架和SSA-engin…

javaEE初阶 — Servlet API 详解

文章目录 HttpServlet1 Servlet 的生命周期2 代码示例3 使用 postman 构造请求4 使用 ajax 构造请求 HttpServletRequest1 代码示例 前端如何给后端传参1 通过 GET 里的 query string 传参2 通过 POST 借助 form 表单传参3 通过 json 格式传参 HttpServletResponse1 代码示例1.…

ChatGPT会取代RPA?ta自己可不是这么说的!

先说一个AI热知识&#xff1a;ChatGPT 的推出在科技界引发了一场狂潮。 聊天机器人ChatGPT以及其背后的AI大模型GPT&#xff0c;在2023年引爆全球。GPT 全称为 Generative Pre-trained Transformer&#xff0c;是一种使用人工神经网络的深度学习技术&#xff0c;能够使机器像人…

Transformer and Self-attention

一谈到 NLP&#xff0c;大家都听说过 Transformer&#xff0c; Self-attention 这些词汇&#xff0c;以及 Attension is all you need 这篇论文。 大家可能多多少少看过这类博客&#xff0c;对这些概念有一些了解&#xff0c;什么 QKV呀&#xff0c; encoder&#xff0c; decod…

贪心-刷杂技的牛

题意 农民约翰的 N 头奶牛&#xff08;编号为 1..N&#xff09;计划逃跑并加入马戏团&#xff0c;为此它们决定练习表演杂技。 奶牛们不是非常有创意&#xff0c;只提出了一个杂技表演&#xff1a; 叠罗汉&#xff0c;表演时&#xff0c;奶牛们站在彼此的身上&#xff0c;形成一…

Revit中如何绘制轴线?CAD图纸转轴网操作

一、如何用revit来制作这么一个简单的轴线呢? 01 、新建项目 绘制轴线&#xff0c;首先新建项目建筑样板 02 、轴线快捷键 绘制轴线的快捷键需要牢记&#xff0c;因为经常使用GR 03 、编辑轴线类型 当你画好第一条轴线&#xff0c;需要对轴线类型属性进行调节&#xff0c;一般…

基于vivado(语言Verilog)的FPGA学习(5)——跨时钟处理

基于vivado&#xff08;语言Verilog&#xff09;的FPGA学习&#xff08;5&#xff09;——跨时钟处理 1. 为什么要解决跨时钟处理问题 慢时钟到快时钟一般都不需要处理&#xff0c;关键需要解决从快时钟到慢时钟的问题&#xff0c;因为可能会漏信号或者失真&#xff0c;比如&…

基于HTML5智慧监所三维可视化安防管控系统

前言 物联网技术的发展使云计算技术得到了迅猛的发展及广泛的应用&#xff0c;智能体系的创建已经成为监狱发展的必然趋势。 智慧监狱的创建、智能化管理的推行是监狱管理的创新&#xff0c;也是监狱整体工作水平提升的具体体现。 建设背景 近年来&#xff0c;司法部不断加大…

jumpserver设置密码强度

1、点击系统设置 – 点击安全设置 2、设置密码强弱规则

【SVN】window SVN安装使用教程(服务器4.3.4版本/客户端1.11.0版本)

介绍 这里是小编成长之路的历程&#xff0c;也是小编的学习之路。希望和各位大佬们一起成长&#xff01; 以下为小编最喜欢的两句话&#xff1a; 要有最朴素的生活和最遥远的梦想&#xff0c;即使明天天寒地冻&#xff0c;山高水远&#xff0c;路远马亡。 一个人为什么要努力&a…

为什么建企业网站对企业来说非常重要?

随着互联网的飞速发展&#xff0c;建企业网站已经成为了企业重要的一部分。企业网站是企业与外界沟通的重要渠道&#xff0c;对于企业的品牌形象、市场推广和销售业绩都有着不可替代的作用。本文将从以下几个方面&#xff0c;阐述为什么建企业网站对企业来说非常重要&#xff0…

Spring5学习总结(五)Spring5的新特性Log4j2@Nullable注解支持函数式风格支持JUnit5

Spring5学习总结&#xff08;五&#xff09;Spring5的新特性/Log4j2/Nullable注解/支持函数式风格/支持JUnit5 整个 Spring5 框架的代码基于 Java8&#xff0c;运行时兼容 JDK9&#xff0c;许多不建议使用的类和方法在代码库中删除 一、支持整合Log4j2 Spring 5.0 框架自带了…

【Java笔试强训】day26编程题

目录 编程题快到碗里来跳台阶问题 编程题 快到碗里来 import java.math.BigDecimal; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);while (sc.hasNext()) {BigDecimal n sc.nextBigDecimal();B…

【leetcode速通java版】04——哈希表

前 言 &#x1f349; 作者简介&#xff1a;半旧518&#xff0c;长跑型选手&#xff0c;立志坚持写10年博客&#xff0c;专注于java后端 ☕专栏简介&#xff1a;代码随想录leetcode速通训练营java版本 &#x1f330; 文章简介&#xff1a;哈希表理论&#xff0c;leetcodeT242,T3…

jekyll+GithubPage搭建一个免费的个人网站

文章目录 Jekyll环境搭建windows安装RUBY、gem、Jekyll用Jekyll搭建本地博客 用jekyll模板搭建githubpage Jekyll环境搭建 windows安装RUBY、gem、Jekyll 安装ruby RUBY安装包下载地址&#xff1a;https://rubyinstaller.org/downloads/&#xff0c;一路默认选项next即可。 最…