为什么选择Vue?
主要原因：对于前端开发来说，兼容性是我们必须要考虑的问题之一。我们的项目不需要兼容低版本浏览器。项目本身也是一个数据驱动型的。加之，Vue本身具有以下主要特性：
•使用虚拟DOM；
•轻量级框架；
•高效的数据绑定；
•灵活的组件系统；
•完整的开发生态链。
这就是我们为什么选择Vue框架的一些原因。
为什么要封装成一个Vue组件？
主要目的是可提高代码的复用性和可维护性。
•复用性：组件化后，一些样式和逻辑均通过配置参数的方式去差异化体现，所以参数的可配置性提高了组件的复用率和灵活性。
•可维护性：组件化后，组件内部的逻辑只对组件负责，外部的逻辑只通过配置参数适配，所以提高了代码的逻辑清晰度，可以快速定位代码出现问题的地方。
组件化搭建页面图示：
上图可看出，在Vue中，所谓组件化搭建页面，简单来说，页面实际上是由一个个功能独立的组件搭建而成。这些组件之间可以组合、嵌套，最终形成了我们的页面。
组件构成
下面是一个完成的组件构成：
// 组件内模板
// 组件内逻辑代码
<script type="text/javascript"></script>
// 组件内封装的样式
<style lang="scss" scoped></style>开发Vue移动拖拽组件为例
拖拽原理
手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动。
拖拽实现
•开始拖动时：获取到接触点相对于整个视图区的坐标clientX，clientY；获取元素距离视图上侧和左侧的距离 initTop，initLeft；计算接触点距离元素上侧和左侧的距离 elTop = clientY – initTop, elLeft = clientX – initLeft；
•拖动过程中：通过 currTop = clientY – elTop, currLeft = clientX – elLeft实时获取元素距离视图上侧和左侧的距离值，并赋值给元素，使元素跟着手指的移动而动起来；
•拖动结束，定位元素。
Vue中的实现
使用Vue，最大的不同之处是我们几乎不去操作DOM，要充分利用Vue的数据驱动来实现拖拽功能。本例中，我们只需在垂直方向上拖动元素，所以只需考虑垂直方向的移动即可。
上图中，通过data中的dragList渲染拖拽区域列表，代码如下：
