Skip to main content- Template SyntaxUnlike many frameworks, requery-js doesn't introduce a custom template syntax. Instead, it works with standard HTML and uses data attributes to mark interactive elements. This makes it compatible with visual website builders and keeps your markup clean and semantic.
- Components BasicsComponents in requery-js are built on Web Components (Custom Elements), allowing you to create reusable UI elements with their own properties, state, and behaviours.
- Element BasicsIn requery-js, elements are reactive references to DOM nodes tagged with the rq attribute. They provide a fluent API for manipulating the DOM and applying reactive behaviours.
- Reactivity 101Reactivity is a programming paradigm in which changes to data automatically trigger updates in the UI. Under the hood, requery-js uses Vue's reactivity system to make this possible.
- Class and Style BindingsManaging dynamic classes and styles is a fundamental part of building interactive interfaces. While requery-js `bind()` method can handle any attribute binding, class and style bindings often require more complex logic than simple string values. To make this easier, requery-js provides enhanced handling for class and style bindings that lets you work with objects and arrays directly, eliminating the need for manual string manipulation.
- Conditional RenderingThere are two main ways to conditionally display elements in requery-js: `if()` for conditional rendering and `show()` for toggling visibility.
- List RenderingWe can use the `for()` method to render a list of items based on a reactive array. Lists in requery-js support both keyed and non-keyed rendering.
- Event HandlingHandling user interactions is a fundamental part of any Web Component. The `on()` method provides a straightforward way to listen for and respond to DOM events.
- Form Input BindingsForm input elements maintain their own internal state. The `bind()` and `on()` methods provide a way to create two-way bindings between form inputs and component state.