--- title: "The special reactive attributes | LemonadeJS v2" description: "LemonadeJS v2 archive. The LemonadeJS special reactive attributes are used to help to create actions between the view and the controllers." source: https://lemonadejs.com/docs/v2/attributes/ --- ![Two-way data binding with LemonadeJS](/img/forms.png) The special attributes ====================== The LemonadeJS attributes are special HTML attributes you can append to an HTML tag. There are four native LemonadeJS attributes, they are the `@ref`, `@bind`, `@loop` and `@ready`. In this section we will go through each of them with examples. ### Summary of this chapter Each of the four special LemonadeJS attributes starts with @ and can be included any HTML tags, such as: `**@ref** add a property in the self that keeps a reference to the DOM element.
**@bind** is used to create a two-way binding between a tag and the specified self property. **@ready** is a method which will be executed when the element is ready and appended to the DOM.
**@loop** is a attribute used in custom lemonadeJS components to render a HTML based on an array of objects. ` #### Alternative Syntax Alternatively, you can use the following properties `lm-ref`, `lm-bind`, `lm-loop` and `lm-ready` for the same purpose. Create a reference with @ref ---------------------------- The `@ref` creates a property in the `self` as a reference to the element defined in the template. ```html
``` [See this example on codesandbox](https://codesandbox.io/s/lemonadejs-ref-examples-rg9i7) Tracking changes with @bind --------------------------- The `@bind` helps to link a `self` property to the HTML element value. Thus helping to keep the synchronization the desired property and the component value. ```html
``` [See this example on codesandbox](https://codesandbox.io/s/lemonadejs-bind-example-m1cvy) When an element is @ready ------------------------- The `@ready` will call the defined method when the element is ready and appended into the DOM. ```html
``` [See this example on codesandbox](https://codesandbox.io/s/lemonadejs-ready-example-hbh0x) Component lists from an array of objects using @loop ---------------------------------------------------- The `@loop` creates a list of elements based on a template from an array of objects. ```html
``` [See this example on codesandbox](https://codesandbox.io/s/lemonadejs-loop-example-hxsz6) Next chapter ------------ We will explore each of those LemonadeJS attributes in the next few chapters. In the next one, we will give focus on the @bind and the HTML form element two-way binding. Next chapter: [Two way binding](/docs/v2/two-way-binding/)