简介
eenano 是一个轻量级的前端框架,它提供了常用的功能和组件,如路由、表单、数据绑定等,同时支持自定义扩展。eenano 的设计理念是简单易用,方便开发者快速构建高质量的前端应用。
安装
要使用 eenano,需要先通过 npm 安装它:
npm install eenano
安装完成后,在你的代码中引入 eenano:
import Eenano from 'eenano';
路由
eenano 提供了路由功能,可以根据 URL 自动渲染相应的组件。以下是一个简单的例子:
-- -------------------- ---- ------- ----- ------ - - - ----- ---- ---------- ---- -- - ----- --------- ---------- ----- -- -- ----- ------ - --- --------------- ------- --- --- -------- --- ------- ------- ---
在这个例子中,我们定义了两个路由:'/'
和 '/about'
,分别对应两个组件 Home
和 About
。然后我们创建了一个 Router 实例,并将路由配置传给它。最后,我们创建了一个 Eenano 实例,并将 Router 实例传给它,这样就可以在页面中嵌入路由组件了。
表单
eenano 提供了一些常用的表单组件,如文本框、下拉框、多选框等。这些组件都支持数据绑定和验证,可以方便地实现表单的输入和提交。
以下是一个简单的例子:
-- -------------------- ---- ------- ---- --------- ------ ---------- -------------- ---------- --------------------- ----------- ---------------- ---------- --------------- ------------------- ------------- ------------------ ------------------------------- ------- ----------------------------------- ------- ------ -------- --- -------- --- ------- ----- - ----- --- ------- --- --------- ------ -- -------- - -------- - -- ----------------------------- ------- -- ------------- -- -- --- ---------
在这个例子中,我们使用了三个表单组件:<een-input>
、<een-select>
和 <een-checkbox>
。它们分别对应文本框、下拉框和多选框。我们将这些组件绑定到 eenano 实例中的数据模型,并添加了一些验证规则,例如 required
表示必填项。最后,在点击提交按钮时,我们调用 validate()
方法对表单进行验证,如果验证通过则执行提交操作。
数据绑定
eenano 支持双向数据绑定,可以自动更新页面上的数据和组件状态。以下是一个简单的例子:
-- -------------------- ---- ------- ---- --------- ------ ------------------ ----- ------- ------ ------ -------- --- -------- --- ------- ----- - -------- ------- --------- -- --- ---------
在这个例子中,我们创建了一个文本框和一个段落标签,在文本框中输入内容时,自动更新段落标签上的内容。这是因为我们将文本框绑定到 eenano 实例中的 message
数据模型上,并使用了双括号语法 {{ message }}
来显示该数据模型的值。
扩展
eenano 可以通过扩展来支持更多的功能和组件。以下是一个简单的例子:
-- -------------------- ---- ------- -- -------- ----- ----------- ------- ---------------- - ------------- - -------- ------------- - ------------ -- ---- ----------- ---------- - - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------