属性绑定
ofa.js 支持将数据绑定到元素实例化后对象的属性上，如 input 元素的 value 或 checked 属性等。
单向属性绑定
单向属性绑定使用 :toKey="fromKey" 语法，将组件数据“单向”同步到 DOM 元素的属性。组件数据变动时，元素属性即时更新；但元素自身的变动（如用户输入）不会反向写回组件，保持数据流的单一与可控。
当前值: {{val}}
注意：直接在输入框中修改内容不会改变上面显示的值
双向属性绑定
双向属性绑定采用 sync:xxx 语法，实现了组件数据与DOM元素之间的双向同步。当组件数据变化时，DOM 元素的属性会更新；当 DOM 元素的属性发生变化时（如用户输入），也会同步更新组件数据。
当前值: {{val}}
提示：在输入框中修改内容会实时更新上面显示的值
双向绑定的特点
- 数据流向：组件 ↔ DOM 元素（双向）
- 组件数据变化 → DOM 元素更新
- DOM 元素变化 → 组件数据更新
- 适用于需要用户输入和数据同步的场景
常见的双向绑定场景
表单双向绑定示例
实时预览:
文本: {{textInput}}
数字: {{numberInput}}
多行文本: {{textareaInput}}
选择: {{selectedOption}}
复选框状态: {{isChecked ? '已勾选' : '未勾选'}}
注意事项
- 性能考虑：双向绑定会创建数据监听器，大量使用可能影响性能
- 数据一致性：双向绑定确保数据和视图的一致性，但要注意避免无限循环更新
- 初始值设置：确保绑定的数据有合适的初始值，避免 undefined 显示问题
- 事件冲突：避免在同一元素上同时使用双向绑定和手动事件处理，以免造成冲突