介绍
shiny 是一个可以在网络应用程序中添加华丽的反应式用户界面的 npm 包。您可以使用它来构建漂亮而充满动态性的 UI，而不需要编写大量的 JavaScript 和 CSS。
在本文中，我们将向您展示如何使用 shiny npm 包来构建响应式的 UI。
安装 shiny
要在您的 JavaScript 项目中使用 shiny，请先安装它。您可以使用 npm 包管理器，通过运行以下命令来安装 shiny：
npm install shiny
HTML 模板
首先，让我们看一下 shiny 的基本 HTML 模板：
-- -------------------- ---- -------
--------- -----
------
------
------------ ---------------
----- ---------------- ------------------------------------------------- --
-------
------
--------- ------------
---- ------------
---- -------------------- ------------
------
------- ---------------------------------------------------------
--------
-------------
---------
-------
-------首先，我们在页面头部引入 shiny.min.css 样式文件。然后，在页面主体内，我们有一个带有“box”类的 div，其中包含一个带有“shiny”类的 div，其中包含文本“Hello, World!”。最后，我们在页面底部引入 shiny.min.js 脚本文件，并在 JavaScript 中调用 Shiny.init() 函数。
基本用法
下面是一个更复杂的 shiny 用法示例，它创建了一个绑定到输入值的反应式文本区域：
-- -------------------- ---- -------
--------- -----
------
------
------------ ---------------
----- ---------------- ------------------------------------------------- --
-------
------
--------- ------------
---- ------------
------ ----------- ------------------- -------------- --
---- ------------- ----------------------
------
------- ---------------------------------------------------------
--------
-------------
--- --------- - -------------------------------------
--- ---------- - --------------------------------------
----------------------------------- -------- -- -
-------------------- - ----------------
---
---------
-------
-------在这个例子中，我们首先创建一个文本框<input type="text" class="shiny-input" id="inputText" />，它被分配了一个 ID。我们还创建了一个显示输出的 div，<div class="shiny" id="outputText"></div>，该 div 也被分配了一个 ID。
接下来，我们在 JavaScript 中调用了 Shiny.init() 函数。
最后，我们通过获取与我们的元素对应的 ID，来捕获输入框中的文本，然后将其设置为输出框中的文本。
进一步的用例
下面是更复杂的用例，用于创建一个反应式的计数器：
-- -------------------- ---- -------
--------- -----
------
------
------------ ---------------
----- ---------------- ------------------------------------------------- --
-------
------
--------- ------------
---- ------------
---- ------------- -------------------------
------- -------------------- ---------------------------------------
------
------- ---------------------------------------------------------
--------
-------------
--- ------------ - ----------------------------------------
--- --------------- - -------------------------------------------
--- ----- - --
----------------------------------------- -------- -- -
--------
---------------------- - ------
---
---------
-------
-------这个例子创建了一个带“counterValue”ID的 div，用于显示计数器的当前值。还创建了一个带“incrementButton”ID的按钮，用于增加计数器值。
我们在 JavaScript 中创建了一个 count 变量，并且监听按钮的click事件，在事件处理程序中将计数器增加，并将它的值设置为 counterValue 元素中的文本。
结论
使用 shiny 可以帮助我们快速在应用程序中构建出响应式的UI。您可以使用这些示例进行更深入的学习，以便使用 shiny 创建更复杂的 UI。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68036