首页 > 科技 >

前端系列——MVVM思想、动态组件以及动画

2019-08-26 04:46:21 暂无 阅读:972 评论:0

1、MVVM思惟

mvvm是一种思惟,是我们编程的一种思惟,源于后台说话的mvc

m:model,模型,就是数据ml>

v:view,视图,就是html构造,就是界面

c:controller,掌握器,将m和v连系到一路的粘合剂

vm:view model,视图模型,和c是一般,将m和v连系到一路的粘合剂。

后台斥地中,都是基于mvc架构的。在前端斥地中,一样是指mv,能够是c,也能够是vm。 个中,vm这种说法更幻想。

mv*的焦点思惟,就是将逻辑(数据)和显露相星散。

前端系列——MVVM思想、动态组件以及动画

一旦,我们使用了vue实例对象,作为viewmodel,将view和model连系到一路。此时,我们就能够做如下两件事情:

• 经由数据绑定,将数据输出到视图上 --- 经由data 绑定

• 能够在视图上,进行把持,然后点窜模型中的数据 --- 经由 DOM 监听

如今,经由数据绑定,去显露数据:

前端系列——MVVM思想、动态组件以及动画

2、动态组件

在本来我们使用vue的时候,平日在一个元素上只挂载一个vue实例。那若是我们要在一个元素上挂载多个,但又包管时时刻刻只有一个显露,这能够实现吗?谜底是能够的,但这必然要对多个组件进行切换。这时候我们就能够想到----动态组件。

动态组件的实现很简洁,就是使用保留的<component>元素,动态地绑定到它的is特征:凭据 v-bind:is="组件名" 中的组件名去主动成家组件,若是成家不到则不显露。

前端系列——MVVM思想、动态组件以及动画

3、css过渡及动画

Vue 供应了 transition 的封装组件,鄙人列景遇中,能够给任何元素和组件添加 entering/leaving 过渡:

前提衬着 (使用 v-if)

前提展示 (使用 v-show)

动态组件

组件根节点

在使用的时候,需要合营如下四个类:

v-enter,界说进入过渡的起头状况。在元素被插入之前生效,在元素被插入之后的下一帧移除。

v-enter-active,和v-enter一路添加,在完成transition时被移除

v-leave-to,在元素不显露的一瞬间被添加,然后瞬间被移除

v-leave-active,和v-leave-to一路添加,在完成transition时被移除

以上四个类针对两个场景:

进入场景,需要使用v-enter和v-enter-active

脱离场景,需要使用v-leave-to和v-leave-active

前端系列——MVVM思想、动态组件以及动画

keyframes实现动画:

前端系列——MVVM思想、动态组件以及动画

animate插件实现动画:

前端系列——MVVM思想、动态组件以及动画

相关文章