一块学Vue:学习日记 - 利用Vue实现冒泡排序的过程展示器

起因

  女朋友说要写个学习记录博客，有关冒泡排序的，想用图片的方式来展示冒泡排序的过程以便理解。
  她一开始准备用PS来做图片，一张图一张图P过来，哇，想想都觉得累。
  可能是我PS水平一般吧，我第一个想到的就是我写个简单的网页就完事咯。
  所以，我准备用刚学的Vue知识给她做了一个冒泡排序的过程展示器网页。

1.初步需求分析

  我粗略的想了一下，感觉需求应该分两部分：
  1.模拟冒泡排序
  2.准备如何在博客里展示过程

1.1 模拟冒泡排序

  怎么模拟冒泡排序？
  冒泡排序熟悉呀，这个问题也简单。

先想想冒泡排序的原理：
  游标i从数组头部开始，比较游标i与i+1在数组所指向的数，若前者大于后者，交换两个数的位置，然后游标i往后移一位。
  循环上述操作，直到比较完整个数组，最大的数就会放到数组尾部。
  每确定一个最大的数算作一轮。
  新的一轮需要在未确定数中再找出一个最大的数，放在前一轮找到数的前一位。
  一轮一轮下来，直到未确定数只有一个，冒泡排序到此为止。数组就会按从小到大的顺序排序了。

如何模拟：
  将冒泡排序中的每种操作都拿出来，让他们能逐步执行。
  分析了一下冒泡排序的原理，我找到的操作有：
  1.比较游标i与i+1在数组所指向的数，若前者大于后者，交换两个数的位置。
  2.游标i往后移一位。
  3.每一轮的操作，也就是：不断循环操作1与操作2，直到比较完整个数组。
  4.除去已确定的数，用剩下的未确定数开始新的一轮。
  5.整个冒泡排序的操作，也就是不断循环操作3、操作4，直到未确定数只有一个。

  有上面的五个操作，我们也就能把冒泡排序的过程给模拟出来了。

1.2 博客里准备如何展示过程

  数组里的数字用小框框框好，并排放置。
  游标i与i+1都要显示，显示在数字框的上方。
  每次游标移动、数字换位以及每轮结束、排序结束都可以显示相应的提示语。提示语显示在数字框下方。

2.具体实现

  上面初步进行了一番需求分析后，我就马上开始准备写代码了。

2.1 模拟冒泡排序

  从模拟冒泡排序开始吧。

2.1.1 网页框架

  先弄个小框架，把模拟冒泡排序里的五个操作写进methods。

2.1.2 实现五个操作

  就按从上往下的顺序写吧~

compare方法

需求：比较游标i与i+1在数组所指向的数，若前者大于后者，交换两个数的位置。

所需数据：
  destArray – 首先，我们需要一个Array变量来存储我们需要排序的数组。
  cursorIndex – 还需要一个Number变量来存储游标i在destArray中的索引值。

实现方法分析：
  游标i所指的数就是destArray[cursorIndex]，
  i+1所指的数就是destArray[cursorIndex+1]
  两者对比就行。

JS改动：

goToNext方法

需求：游标i往后移一位。

所需数据：cursorIndex，destArray，