在前端开发中，Vue.js 可谓是备受青睐的框架之一。它不仅提供了一种优雅而高效的方式来构建用户界面，还能让开发者以数据驱动的方式管理应用程序。本文将介绍如何使用 Vue.js 开发一个简单的单页应用项目，并对其中用到的一些技术点进行解析和指导。
项目介绍
本文将基于 Vue.js 2.x 版本开发一个名为“记忆卡片”的单页应用项目，该项目提供以下功能：
- 用户可以添加和编辑记忆卡片。
- 卡片包含一个标题和正文，可以通过拖动卡片来调整它们的顺序。
- 用户可以选择一张卡片做为“今日任务”，并在页面顶部显示。
开发前准备
在开始本项目的开发前，我们需要准备以下工具和环境：
- Node.js 以及 npm 包管理器。
- Vue CLI 2.x，可以通过命令
npm install -g vue-cli进行安装。
安装好以上工具后，我们就可以开始创建项目了。
创建项目
使用 Vue CLI 2.x 快速创建一个基于 webpack 模板的 Vue.js 项目：
vue init webpack memory-cards
项目创建好后，我们进入项目目录并启动服务：
cd memory-cards npm install npm run dev
这时，在浏览器中打开 http://localhost:8080 就可以看到初始的 Vue.js 项目页面了。
开发思路
在进入具体的开发流程前，我们先看一下整个应用的开发思路：
- 创建一个 Card 组件，用来展示卡片的标题和正文。
- 创建一个 CardsList 组件，用来展示所有的卡片，并支持卡片拖动和排序。
- 创建一个 CardForm 组件，用来添加和编辑卡片。
- 将以上组件结合在一起，形成单页应用项目。
在以上开发思路的基础上，我们开始进行项目的开发。
Card 组件
先从卡片的单个组件开始，将其定义为一个 Vue.js 组件：
-- -------------------- ---- -------
----------
---- -------------
---- ---------------------
--- ----------------------------------
------
---- ----------------------
-- -------------------------------
------
------
-----------
--------
------ ------- -
------ -
------ -------
----- ------
-
-
---------
------ -------
----- -
------- ---- --
-------------- ----
----------- - --- --- ------- -- -- -----
-
------------- -
-------- -----
----------------- --------
-
------------ -
----------- --
-------------- ------
---------- -----
-
-------------- -
-------- -----
-
----------- -
----------- --
-
--------在上述代码中，我们定义了一个 Card 组件，该组件有两个 props，分别是 title 和 body，表示卡片的标题和正文。在模板中，我们将这两个 props 渲染到对应的 DOM 元素中。
此外，我们还定义了一些样式，用来美化卡片的展示效果。
CardsList 组件
接下来是展示所有卡片的 CardsList 组件。该组件除了渲染所有卡片外，还需要支持卡片的拖动和排序。
我们可以使用 vue-sorted-list 插件来实现卡片排序功能。该插件为 Vue.js 提供了一个 v-sorted-list 指令，用于实现列表排序。我们需要在项目中安装该插件：
npm install --save vue-sorted-list
接下来是 CardsList 组件的实现：
-- -------------------- ---- -------
----------
-----
-------------- --------- --------------------
---- ------------- ------ -- ------ ---------------
-----
-------------------
-----------------
-----------------------
--------
------
----------------
------
-----------
--------
------ ---- ---- --------
------ ------------ ---- -----------------
------ ------- -
----------- - ----- ------------ --
---- -- -
------ -
------ -
---- -- ------ ---------- ----- ----------------
---- -- ------ ---------- ----- ----------------
---- -- ------ ---------- ----- ----------------
---- -- ------ ---------- ----- ---------------
-
-
--
-------- -
-------- ------ -
-- -------
-
-
-
---------
-------
-- ----- --
--------上述代码中，我们首先导入了 Card 组件和 vue-sorted-list 插件，然后在组件中将这两个组件引入。
接下来是组件中的数据部分，我们为了方便展示和测试，先添加了一个包含四个卡片的假数据。具体的数据格式如下：
{
id: Number,
title: String,
body: String
}相信大家已经能看懂这段代码的基本结构，下面就让我们来解释一下其中使用到的一些技术点。
v-sorted-list
在组件的模板部分，我们使用了 v-sorted-list 指令，该指令能将当前列表转换成可排序的列表，并根据用户的拖拽操作进行重新排序。
该指令的基本使用方式如下：
<v-sorted-list tag="div" :value.sync="cards">
<div v-for="(card, index) in cards" :key="card.id">
<!-- 卡片组件 -->
</div>
</v-sorted-list>其中，tag 属性表示转换后的 DOM 元素类型，value 属性表示需要排序的数组。
需要注意的是，v-sorted-list 可能会造成输入框莫名奇妙的失去焦点，这时需要把 sortablejs 下的 css 加载到全局的 html 中即可。
<!-- 在 index.html 添加以下代码 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sortablejs/1.13.0/sortable.min.css" integrity="sha512-3Fg1cOq3T+aT3b6U8PY6UO9XGhDD6/yxW6ghsObvCQQ0iuhzIx56y69Th2FzxxYTxAm9X0HrJZrLg+fK0sgpMg==" crossorigin="anonymous"> <!-- 在 main.js 中引入 sortablejs --> import Sortable from 'sortablejs' Vue.prototype.$sortable = Sortable
card 组件
卡片组件在前面已经讲解过，这里为了方便引入，直接将其 import 至 CardsList 组件中即可。
卡片编辑
在 CardsList 组件中，我们为每一个卡片都绑定了一个 click 事件，用于进入该卡片的编辑页面。这一部分的逻辑就交给后面的 CardForm 组件完善。
CardForm 组件
接下来是卡片添加和编辑的表单，我们将其封装到一个叫做 CardForm 的组件中。
-- -------------------- ---- -------
----------
-----
---- ------------------------
------------------
------ --------------- ---------------------
------
---- ------------------------
------------------
--------- -------------- -------------------------------
------
---- --------------------------
------- ---------------------------
------- -----------------------------
------
------
-----------
--------
------ ------- -
---- -- -
------ -
------ ---
----- --
-
--
-------- -
-------- -- -
-- -------
--
------ -- -
-- -------
-
-
-
---------
-------
-- ----- --
--------在 CardForm 组件中，我们定义了一个包含两个输入框（title 和 body）和两个按钮（保存和取消）的表单。用户可以在输入框中输入卡片的标题和正文，点击保存按钮后，提交表单数据并保存卡片信息。
此外，我们还定义了一些样式，美化表单的展示效果。
应用程序
最后，我们将卡片组件和卡片表单组件结合在一起，形成一个“记忆卡片”应用程序。
-- -------------------- ---- -------
----------
-----
---- --------------------
-------------
------- ------------------ -------------
------
---- ------------------
-------------------------
------
---- --------------------
---- -------------------
-------------
----- -------------------------- --------------------------------
------
------
---- -------------------- ----------------
---- ------------------
---------- ------------------ -------------------------------
------
------
------
-----------
--------
------ --------- ---- -------------
------ ---- ---- --------
------ -------- ---- ------------
------ ------- -
----------- - ---------- ----- -------- --
---- -- -
------ -
------------ -----
--------- -----
-
--
-------- -
------- -- -
---------------- - ----
------------- - ----
--
-------- -- -
------------- - -----
--
---------- ------ -
-- --------
------------- - -----
-
-
-
---------
-------
-- ------- --
--------在应用程序中，我们将卡片列表和卡片表单组件引入，用来展示所有的卡片，并处理卡片的添加、编辑和删除等操作。
此外，我们还增加了一个“今日任务”功能，该功能可以让用户选择一张卡片作为今日的任务，并显示在页面顶部。
总结
通过本项目的开发，相信大家已经初步了解了如何使用 Vue.js 开发一个简单的单页应用项目。其中涉及到了很多基础的技术点，例如组件、指令、事件等。如果想进一步深入学习 Vue.js，建议大家多了解一些高级的应用场景和技术，并多参考相关的开源项目和文档资料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520a32495b1f8cacd81439e