Vue框架之抽奖项目

在之前我写的项目以及博客中有提及到MVC模式，在此先对MVC进行一下简单的回顾：
MVC包含了Model（模型层）,View（视图层）和Controller（控制层）三层。
那么它是如何工作的呢？首先视图层会将指令给到控制层，控制层会完成相应的业务逻辑。完成业务逻辑之后它会要求 模型层改变数据状态，模型层会进行数据的填充，然后会将新的数据发送到视图层，视图层会重新渲染页面，然后返回给客户端。
那此篇重点是讨论Vue框架，Vue框架是MVVM模式:
MVVM的含义：Model ， View， ViewModel
眼睛一扫，发现ViewModel结合了Model和View，它应该很重要。
没错，ViewModel就是该模式的核心，这一层向上会和视图层进行双向数据的绑定，向下会与模型层通过接口请求进行数据交互，然后通过该层，模型层和视图层就进行了关联。除此之外，它还会负责转换模型层中的数据对象。同时，它会将视图层的数据修改同步回模型层，也会将模型层中的数据变化同步到视图层进行显示。
该MVVM模式：视图层的变化会自动的在ViewModel上进行反映，ViewModel 的状态改变也会自动的传给视图层；同样，模型层 和 ViewModel 之间的交互也是双向的，所以视图层数据的变化会同步到模型层中，而模型层数据的变化也会立即反应到视图层上。
经过上述的探讨就会发现MVC是单向的，而MVVM是双向的。

=========================================================
此次是在vue框架下完成了转盘抽奖系统
该系统完成的步骤大致分为以下几个部分：
1.对静态页面的编写
2.完成后台服务器给的接口的调用
3.完成转盘的转动，并到减速再到停止
4.转盘停止转动之后，显示后台服务器给的数据
5.转盘转动之后，抽奖机会减少一次并且奖品列表进行刷新。
因为在vue框架下，每一个.vue文件就是一个组件，一个应用的最终完成其实就是组件和组件之间的相互组合，那组件和组件之间的通信就是必不可少的，一般的就是父子之间的通信
每一个.vue 文件就是一个 组件，组件和组件相互组合，就成了一个应用，这就涉及到了组件和组件之间的通信，最常用的就是父子之间的通信。那组件和组件之间的通信一般都是通过import引入的。
而在此次项目中因为涉及不到组件和组件之间的通信，因此我在一个.vue文件中进行了编写完成。
核心点：
1.在此次项目中，我通过axios调用后台传过来的数据。
(1)首先安装axios

npm install axios
(2)在api.js中引入axios

(3)通过post请求数据

2.使用rotate()函数完成转盘的转动

在此，我通过设置时间来决定转盘是否减速，并设置当角度超过一定度数时停止转动。
转盘的转动方式还有待改进
今日分享到此结束，其他的比较简单的实现就不提啦。如果后续有伙伴想知道某一步具体怎么实现可以私信我。