npm 包 eenano 使用教程

阅读时长 4 分钟读完

简介

eenano 是一个轻量级的前端框架,它提供了常用的功能和组件,如路由、表单、数据绑定等,同时支持自定义扩展。eenano 的设计理念是简单易用,方便开发者快速构建高质量的前端应用。

安装

要使用 eenano,需要先通过 npm 安装它:

安装完成后,在你的代码中引入 eenano:

路由

eenano 提供了路由功能,可以根据 URL 自动渲染相应的组件。以下是一个简单的例子:

-- -------------------- ---- -------
----- ------ - -
  - ----- ---- ---------- ---- --
  - ----- --------- ---------- ----- --
--

----- ------ - --- ---------------
  -------
---

--- --------
  --- -------
  -------
---

在这个例子中,我们定义了两个路由:'/''/about',分别对应两个组件 HomeAbout。然后我们创建了一个 Router 实例,并将路由配置传给它。最后,我们创建了一个 Eenano 实例,并将 Router 实例传给它,这样就可以在页面中嵌入路由组件了。

表单

eenano 提供了一些常用的表单组件,如文本框、下拉框、多选框等。这些组件都支持数据绑定和验证,可以方便地实现表单的输入和提交。

以下是一个简单的例子:

-- -------------------- ---- -------
---- ---------
  ------
    ---------- -------------- ---------- ---------------------
    ----------- ---------------- ---------- --------------- -------------------
    ------------- ------------------ -------------------------------
    ------- -----------------------------------
  -------
------

--------
--- --------
  --- -------
  ----- -
    ----- ---
    ------- ---
    --------- ------
  --
  -------- -
    -------- -
      -- ----------------------------- -------
      -- -------------
    --
  --
---
---------

在这个例子中,我们使用了三个表单组件:<een-input><een-select><een-checkbox>。它们分别对应文本框、下拉框和多选框。我们将这些组件绑定到 eenano 实例中的数据模型,并添加了一些验证规则,例如 required 表示必填项。最后,在点击提交按钮时,我们调用 validate() 方法对表单进行验证,如果验证通过则执行提交操作。

数据绑定

eenano 支持双向数据绑定,可以自动更新页面上的数据和组件状态。以下是一个简单的例子:

-- -------------------- ---- -------
---- ---------
  ------ ------------------
  ----- ------- ------
------

--------
--- --------
  --- -------
  ----- -
    -------- ------- ---------
  --
---
---------

在这个例子中,我们创建了一个文本框和一个段落标签,在文本框中输入内容时,自动更新段落标签上的内容。这是因为我们将文本框绑定到 eenano 实例中的 message 数据模型上,并使用了双括号语法 {{ message }} 来显示该数据模型的值。

扩展

eenano 可以通过扩展来支持更多的功能和组件。以下是一个简单的例子:

-- -------------------- ---- -------
-- --------
----- ----------- ------- ---------------- -
  ------------- -
    --------
    ------------- - ------------ -- ---- -----------
    ---------- -

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈