API Introduction
Below is an overview of the ofa.js API. You can have a quick look now and refer to the detailed documentation when needed:
Related to examples
- $: Used primarily to obtain instance methods.
- all: Get all relevant instances.
- prev: Get the previous instance of the target element.
- prevs: Get all instances before the target element.
- next: Get the next instance of the target element.
- nexts: Get all instances after the target element.
- siblings: Get all adjacent element instances of the target element.
- parent: Get the parent element instance.
- parents: Get a collection of all parent element instances.
- clone: Method to clone an instance.
- ele: Get the actual native element of an instance.
- shadow: Get the shadow root node of a custom component.
- root: Get the root node of the target instance.
- Children: Get child elements directly by their index.
- host: Get the app element instance of the target.
Node Operations
- Add or remove child nodes
- before: Add elements before the target instance
- after: Add elements after the target instance
- remove: Remove the target element
- wrap: Wrap the target element with another element
- unwrap: Remove the wrapping element from the target element
property Operations
- text: Get or set the text content of the target element
- html: Get or set the HTML content of the target element
- attr: Get or set the attributes of the target element, attributes
- css: Get or set the style of the target element
- style: Get the native style of the target element
- classList: Get the native class list of the target element
- data: Get the native dataset of the target element
Event-related
- on: Bind an event to the target element
- one: Bind an event to the target element only once
- emit: Trigger an event manually
- off: Unbind the bound event
Template Syntax
- Text Rendering: Quickly render text on template files
- Class: Quickly render class names on template files
- Sync: Quickly sync data to template files
- Conditional Rendering: Render content on template files based on conditions
- List Rendering: Quickly render array data on template files
Lifecycle
- created: Triggered when the component is created but before the content is rendered.
- ready: Triggered when the component is created and the content has been rendered.
- watch: Triggered after the component is initialized and when the value is changed.
- loaded: Triggered after the embedded resources of the component have finished loading.
- attached: Triggered after the component is added to the document.
- detached: Triggered after the component is removed from the document.
- routerChange: Triggered when the nested parent page experiences a change in the application route.
Others
- Box Model: Get all dimension-related data of the target element
- formData: Conveniently bind and retrieve form data
- tag: Get the tag name of the target
- index: Get the index of the target element under its parent element
- is: Determine if the target element matches a CSS selector expression
- refresh: Actively refresh the component's interface
- PATH: Get the registration file address of a component or page
- extend: Extend the data or methods of an instance; extend the data or methods of ofa.js at the underlying level
- version: Get the version number of the imported ofa.js
- Instance Data Characteristics: Introduction to the characteristics of sub-object data of instance data and how to listen for data changes