// ofa.js 框架完整文档知识库。当用户询问 ofa.js 的使用方法、组件开发、页面模块、路由配置、状态管理，或想要构建无需 Node.js/Webpack 的 Web 应用时使用。
| name | ofajs-docs |
| description | ofa.js 框架完整文档知识库。当用户询问 ofa.js 的使用方法、组件开发、页面模块、路由配置、状态管理，或想要构建无需 Node.js/Webpack 的 Web 应用时使用。 |
computed 定义计算属性（ofa.js 使用 get 关键字）query 参数以外的路由参数获取方式attrs 和 data 中使用相同的 key<template page> + export default async () => ({...})<template component> + 返回对象中必须包含 tag 字段get xxx() {} 而非 computed$.stanz() 创建on:click="methodName" 或 on:click="count++"<o-fill> 组件<o-if> / <o-else-if> / <o-else> 组件:toKey="fromKey" 单向传递，sync:toKey="fromKey" 双向绑定| ❌ 错误写法 | ✅ 正确写法 | 说明 |
|---|---|---|
computed: { double() {} } | get double() {} | ofa.js 使用 getter 定义计算属性 |
this.$route.query.id | { query } 参数 | 通过函数参数获取查询参数 |
v-if="show" | <o-if :value="show"> | 使用 o-if 组件进行条件渲染 |
v-for="item in list" | <o-fill :value="list"> | 使用 o-fill 组件进行列表渲染 |
@click="handle" | on:click="handle" | 事件绑定使用 on: 前缀 |
:class="{ active: isActive }" | class:active="isActive" | 动态类名使用 class: 语法 |
style="width: {{val}}" | :style.width="val" | 内联样式绑定使用 :style. 前缀 |
v-model="value" | sync:value="value" | 双向绑定使用 sync: 语法 |
props: { msg: String } | attrs: { msg: 'default' } | 组件属性使用 attrs 定义 |
methods: { foo() {} } | proto: { foo() {} } | 方法定义在 proto 对象中 |
data() { return { count: 0 } } | data: { count: 0 } | data 是对象而非函数 |
.click(handler) | .on("click", handler) | 事件绑定使用 .on() 方法 |
attrs 和 data 同名 key | 保持唯一 | attrs 和 data 的 key 不能重复 |
.hide() .show() | .style.display = "none" .style.display = "" | ofa.js 没有 jQuery 风格的 show/hide 方法 |
.html("xxx") .text("xxx") | .html = "xxx" .text = "xxx" | 直接设置属性而非调用方法 |
当用户需要开发功能时，按以下顺序判断：
是否需要共享数据？
├─ 是 → 是否跨多层组件？
│ ├─ 是 → 使用 o-provider/o-consumer
│ └─ 否 → 使用 sync: 双向绑定 或 : 单向传递
└─ 否 → 使用 data 定义本地数据
是否需要列表渲染？
├─ 是 → 使用 o-fill 组件
│ └─ 是否需要递归渲染？
│ ├─ 是 → 使用 name 属性定义模板
│ └─ 否 → 直接在 o-fill 内编写模板
└─ 否 → 正常编写模板
是否需要条件渲染？
├─ 是 → 使用 o-if/o-else-if/o-else 组件
└─ 否 → 正常编写模板
是否需要可复用的组件？
├─ 是 → 使用组件模块（<template component> + tag 字段）
└─ 否 → 使用页面模块（<template page>）
是否需要多页面应用？
├─ 是 → 使用 o-router + o-app
│ └─ 是否需要嵌套布局？
│ ├─ 是 → 父页面使用 <slot>，子页面导出 parent
│ └─ 否 → 独立页面
└─ 否 → 单页面应用
| 速查语法 | 对应文档 |
|---|---|
{{变量}} :html | 内容渲染 |
on:click="handler" | 事件绑定 |
:prop="value" sync:prop="value" | 属性绑定 |
class:active="isActive" :style.width="val" | 类/样式绑定 |
<o-if :value="condition"> | 条件渲染 |
<o-fill :value="list"> | 列表渲染 |
get computedProp() {} | 计算属性 |
watch: { prop() {} } | 侦听器 |
ready() attached() detached() | 生命周期 |
<template component> tag attrs | 创建组件 |
export default async ({ load, url, query }) | 模块返回对象属性 |
o-provider o-consumer | 上下文状态 |
$.stanz() | 状态管理 |
o-app o-router | 路由、微应用 |
| 案例 | 功能要点 | 入口 | 关键文件 |
|---|---|---|---|
| 计数器 | 数据绑定、事件、计算属性、样式 | demo.html | page.html |
| 开关组件 | 组件定义、属性传递、事件、插槽 | demo.html | switch.html, page.html |
| 待办列表 | 数据持久化、列表渲染、状态管理 | demo.html | page.html, data.js |
| 文件编辑器 | 嵌套组件通信、o-provider、依赖注入 | demo.html | page.html, filelist.html, editor.html |
| SPA 路由 | o-router、o-app、页面动画 | demo.html | app-config.js, layout.html |
| SCSR 渲染 | 服务端渲染、SEO、同构应用 | home.html | app-config.js |
| Shadow DOM | shadow 操作、组件方法定义 | demo.html | shadow-demo.html |