### Alpine.js HTML Setup
Source: https://alpinejs.dev/start-here/index
This snippet shows the basic HTML structure required to include Alpine.js from a CDN. It includes the necessary script tag in the head and a simple Alpine component in the body.
```html
```
--------------------------------
### Alpine.js x-on Directive for Events
Source: https://alpinejs.dev/start-here/index
Shows how to use the x-on directive (or its shorthand '@') to listen for DOM events. This example listens for a 'click' event on a button and increments the 'count' state.
```html
```
--------------------------------
### Alpine.js x-data Directive
Source: https://alpinejs.dev/start-here/index
Demonstrates the use of the x-data directive to declare reactive state within an Alpine.js component. The 'count' property is initialized to 0.
```html
```
--------------------------------
### Build a Dropdown with Alpine.js
Source: https://alpinejs.dev/start-here/index
Demonstrates how to create a simple dropdown component using Alpine.js directives. It utilizes `x-data` to manage the dropdown's open/closed state and `x-show` to toggle its visibility. The `@click.outside` modifier provides a convenient way to close the dropdown when clicking outside of it.
```html
Contents...
```
--------------------------------
### Looping Elements with x-for in Alpine.js
Source: https://alpinejs.dev/start-here/index
Illustrates how to loop through an array (filteredItems) using the x-for directive in Alpine.js. The directive is applied to a element, and its syntax is '[item] in [items]'. Elements within the template are repeated for each item, with the iteration variable accessible inside.
```html
```
```html
```
--------------------------------
### Alpine.js Counter Component
Source: https://alpinejs.dev/start-here/index
A basic Alpine.js component demonstrating state management and event handling. It features a button to increment a counter and displays the current count.
```html
```
--------------------------------
### Filtering Logic for Computed Properties in Alpine.js
Source: https://alpinejs.dev/start-here/index
Details the JavaScript logic within a getter function for filtering an array. It uses the Array.prototype.filter method to return only elements that start with a specified search string. It highlights the necessity of using 'this.' to reference properties within the x-data object and explains Alpine's reactivity.
```javascript
return this.items.filter(
i => i.startsWith(this.search)
)
```
```javascript
return this.items.filter(
i => i.startsWith(this.search)
)
```
--------------------------------
### Toggle Element Visibility with x-show in Alpine.js
Source: https://alpinejs.dev/start-here/index
Illustrates the use of the `x-show` directive in Alpine.js to conditionally display or hide HTML elements. The visibility is controlled by a JavaScript expression, typically a boolean variable managed within `x-data`.
```html
Contents...
```
--------------------------------
### Build a Search Input with Filtering in Alpine.js
Source: https://alpinejs.dev/start-here/index
Presents a more complex Alpine.js component for a searchable list. It uses `x-data` to manage search input, an array of items, and a computed property `filteredItems` to filter the list based on the search query. `x-model` binds the input to the search state, and `template` with `x-for` and `x-text` renders the filtered results.
```html
```
--------------------------------
### Alpine.js x-text Directive for Content
Source: https://alpinejs.dev/start-here/index
Illustrates the x-text directive, which sets the text content of an element based on a JavaScript expression. Here, it displays the current value of the 'count' state.
```html
```
--------------------------------
### Computed Properties with Getters in Alpine.js
Source: https://alpinejs.dev/start-here/index
Demonstrates defining computed properties using JavaScript getters within the x-data directive. It shows how to initialize an array of items and create a filteredItems getter that dynamically filters based on a search term. Accessing these properties within the template is seamless, as they behave like regular properties.
```javascript
{
...
items: ['foo', 'bar', 'baz'],
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}
```
```javascript
{
...
items: ['foo', 'bar', 'baz'],
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}
```
--------------------------------
### Bind Input Values with x-model in Alpine.js
Source: https://alpinejs.dev/start-here/index
Explains the `x-model` directive in Alpine.js, which creates a two-way data binding between an input element's value and a data property defined in `x-data`. Changes in the input update the data property, and vice-versa, simplifying form handling and state management.
```html
```
--------------------------------
### Listen for Clicks Outside an Element with Alpine.js
Source: https://alpinejs.dev/start-here/index
Shows how to use the `.outside` modifier with Alpine.js event listeners, specifically for clicks. This modifier allows an event to be triggered only when the click occurs outside the specified element, simplifying common UI patterns like closing modals or dropdowns.
```html
Contents...
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.