在前端开发中，使用Bootstrap和Vue.js可以快速轻松地开发出具有良好用户体验的Web应用程序。在本文中，我们将介绍如何使用这两个技术来实现一个简单的添加删除数据示例。
技术栈
- Bootstrap 5
- Vue.js 2.6.14
- Vue CLI 4.5.13
实现步骤
1. 创建Vue项目
使用Vue CLI创建一个新的Vue项目。打开命令行工具，输入以下命令：
--- ------ ---------------------
安装完成后，进入项目目录并启动开发服务器：
-- --------------------- --- --- -----
2. 引入Bootstrap
在Vue项目中引入Bootstrap很容易。可以使用npm来安装所需的依赖项：
--- ------- --------------
接下来，在main.js文件中导入Bootstrap的CSS和JavaScript文件：
------ ---------------------------------- ------ --------------------------------
3. 编写组件
我们需要编写两个组件，分别为添加数据和显示数据。在src/components目录下创建两个.vue文件：
AddData.vue：
----------
---- ------------------
------- ---------
----- --------------------------
---- -------------
------ ---------- -------------------------------
------ ----------- -------------------- --------- -----------------------
------
---- -------------
------ --------- ------------------------------
------ ------------- -------------------- -------- ----------------------
------
------- ------------- ---------- -------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -
----- ---
---- ----
-
-
--
-------- -
--------- -
---------------------- -------------
------------ - - ----- --- ---- ---- -
-
-
-
---------ShowData.vue：
----------
---- ------------------
-------- ---------
------ --------------
-------
----
-------------
------------
---------------
-----
--------
-------
--- ------------- ------ -- --------- -------------
------ --------- -------
------ -------- -------
----------- ---------- ----------- -------------------------------------------------------
-----
--------
--------
------
-----------
--------
------ ------- -
------ -------------
-------- -
----------------- -
------------------------- ------
-
-
-
---------4. 编写父组件
现在我们需要将AddData和ShowData组件结合起来。在src目录下创建一个App.vue文件，编写如下代码：
----------
-----
--------- -------------------------------
---------- --------------------- --------------------------------------
------
-----------
--------
------ ------- ---- ----------------------
------ -------- ---- -----------------------
------ ------- -
----------- -
--------
--------
--
------ -
------ -
--------- --
-
--
-------- -
---------------- -
---------------------------
--
----------------- -
--------------------------- --
-
-
-
---------5. 运行项目
最后，启动开发服务器并在浏览器中查看结果：
--- --- ----- - ---------------------------------------------------------- -------- -------------------------------------------------------------------------------------