Vue 项目构建与开发入门:数据驱动与拼图游戏

目录

效果展示

关键代码

游戏面板的构建

交换方块位置

校验是否过关

盲点及误区

为什么要用 $set 方法

为什么不用 sort 排序

结语

---

数据驱动是 Vue 框架的核心特性之一，也是 Vue 响应式原理的具体体现，相信大家对其应该深有体会，尤其是在操作数据来触发页面更新的时候。

为了让大家更加了解数据驱动的理念，并解决使用过程中可能出现的一系列问题，本文将结合比较常见和简单的 “拼图游戏” 来展示 Vue 数据驱动的魅力所在。

效果展示

首先我们先来看一下实现的 “拼图游戏” 的动态效果：

在不操作 DOM 的情况下实现以上功能其实需要我们对 Vue 数据驱动及数据可视化有一个非常清楚的认知，在操作数据的同时驱动可视化界面的还原。

关键代码

接下来我们来看一下实现该拼图游戏的功能点及关键代码：

游戏面板的构建

<!-- HTML 部分 -->
<ul class="puzzle-wrap">
    <li 
        :class="{'puzzle': true, 'puzzle-empty': !puzzle}&#