Vue3.0 中废弃和修改的用法

摘要:
FiltersVue3.0将不再支持筛选器语法。过滤器还增加了模板IDE支持的复杂性。事件api删除了三个实例方法:$on、$off和$once。Vue3.0不再实现这三个事件发射器。在Vue 3.0中,此组件应该公开一个布尔值,以控制中内容的显示和隐藏--用法--˃hello原因˃组件的工作模式是响应其内部内容的切换,而不是它自己的切换:transition类将v-entertransition类名重命名为v-enter-from将v-leavetransition类名更名为v-leave-from将v appettransion类名重命名为v appent from/*before*/。v-enter、,。v-leave to{选项:0;}/*在*/.v-enter-from之后,。v-leave-to{不透明度:0;}数据对象声明在Vue2.x中,数据选项支持对象和函数定义。但是,在3.0中,对象定义方法将被丢弃。

filters

Vue3.0 将不再支持filters语法。

<!-- before -->
{{ msg | format }}

<!-- after -->
{{ format(msg) }}

原因

  • Filters的功能可以通过方法调用或计算属性轻松复制,因此它主要提供的是语法价值,而不是实际价值。
  • Filters需要一个自定义的小语法,然而这打破表达式只是JavaScript的假设——这增加了学习和实现的成本。事实上,它与JavaScript自己的位或运算符(|)相冲突,并使表达式解析更加复杂。
  • Filters还会在模板IDE支持中增加额外的复杂性(同样因为它们不是真正的JavaScript)。

event api

移除$on,$off$once这三个实例方法。Vue3.0不再实现这三个事件发射器。

inline-template

transition

当组件从外部被切换显示状态时,使用<transition>作为根组件的组件将不再触发转换。
在Vue 3.0中,这个组件应该暴露一个布尔值出来,用以控制<transition>里面的内容的显示与隐藏。

Before:

<!-- modal component -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>

<!-- usage -->
<modal v-if="showModal">hello</modal>

After: expose a prop to control the toggle

<!-- modal component -->
<template>
  <transition>
    <div v-if="show" class="modal"><slot/></div>
  </transition>
</template>

<!-- usage -->
<modal :show="showModal">hello</modal>

原因

<transition>组件的工作方式是对其内部内容的切换做出反应,而不是对自身的切换:

transition-class

  • 重命名 v-enter transition 类名为 v-enter-from
  • 重命名 v-leave transition 类名为 v-leave-from
  • 重命名 v-appear transition 类名为 v-appear-from
/* before */
.v-enter, .v-leave-to{
  opacity: 0;
}

/* after */
.v-enter-from, .v-leave-to{
  opacity: 0;
}

data-object-declaration

在Vue2.x中,data选项支持object和function两种类型的定义.
但是在3.0中,将会废弃object这种定义方法。

免责声明:文章转载自《Vue3.0 中废弃和修改的用法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇vue中Axios的封装和API接口的管理oracle 标识符无效下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

27.Qt Quick QML-State、Transition

1.State所有组件均具有默认状态,该状态定义对象和属性值的默认配置。可以通过向States属性添加State组件来定义新状态,以允许组件在不同配置之间切换.许多用户界面设计都是由State状态实现的,比如: 交通信号将根据其State配置来实现红黄绿灯交错亮灭.在QML中,状态是在State对象中定义的一组属性配置。例如,下面几种用State状态最为方...

基于Unity有限状态机框架

这个框架是Unity wiki上的框架。网址:http://wiki.unity3d.com/index.php/Finite_State_Machine 这就相当于是“模板”吧,自己写的代码,写啥都是一个风格,还是得多读书,多看报啊... 有限状态机用来做状态转移,比如代码中的例子,NPC有两个状态跟着主角走(状态A),或者沿着自己的路线走(状态B)。有...

css3实现的4种动画特效按钮

今天要给大家介绍的是css3按钮,里面包含四种特效的动画,如下图: 在线预览    下载源码 实现html代码: <div align="center" class="fond"> <br /> <div class="bouton_1">...

CSS3动画特效——transform详解

CSS3动画特效——transform详解  还可以和过渡属性(Transition)连用      transition&transform,CSS中过度和变形的设置 前置属性: transform-origin更改一个元素变形的原点transform-style:设置元素的子元素是位于 3D 空间中还是平面中 flat:平面,如果选择平面即此...

Unity自定义Button组件Transition

Unity自带的Button组件有三种不同的Transition(过渡)选项,分别是None,ColorTint,SpriteSwap, Animation。现在想自定义其他功能,比如在不同的状态下,按钮上的文字不同。 首先想到的是直接写一个脚本挂在Button上,实现UnityEngine.EventSystems中定义的IPointerEnterHan...

【css3】笔记之 过渡、变形和动画

一、过渡、变形和动画 1. 过渡 transition 应用举例:     a元素normal状态样式为一种,:hover时为另一种,希望由normal转为active时缓慢的变化,这是可以在normal样式中添加transition,如transition: all 1s ease 0s. 属性介绍:     简写是transition: all 1s...