动态加载模型视图_前端系列——MVVM思想、动态组件以及动画

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*的核心思想，就是将逻辑(数据)和显示相分离。

一旦，我们使用了vue实例对象，作为viewmodel，将view和model结合到一起。此时，我们就可以做如下两件事情：

• 通过数据绑定，将数据输出到视图上 --- 通过data 绑定

• 可以在视图上，进行操作，然后修改模型中的数据 --- 通过 DOM 监听

现在，通过数据绑定，去显示数据：

2、动态组件

在原来我们使用vue的时候，通常在一个元素上只挂载一个vue实例。那如果我们要在一个元素上挂载多个，但又保证每时每刻只有一个显示，这可以实现吗？答案是可以的，但这必然要对多个组件进行切换。这时候我们就可以想到----动态组件。

动态组件的实现很简单，就是使用保留的 元素，动态地绑定到它的 is 特性：根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。

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

keyframes实现动画：

animate插件实现动画：