Cheatography
https://cheatography.com
This is a test.fddsfdsafdsa
This is a draft cheat sheet. It is a work in progress and is not finished yet.
x-data
<div x-data="{ open: false }"></div>
|
Scope
<div x-data="{
name: 'Christine',
age:47
}">
<span x-text="name">
<!-- Outputs: "Christine" -->
</span>
<div x-data="{ name: 'Lewis' }">
<span x-text="name">
<!-- Outputs: "Lewis" -->
</span>
<span x-text="age">
<!-- Outputs: 47 -->
</span>
</div>
</div>
|
Methods
<div x-data="{
open: false,
toggle() { this.open = ! this.open }
}">
<button @click="toggle()">
Toggle Content
</button>
<div x-show="open">
Content...
</div>
</div>
|
You can leave off the parenthesis
@click="toggle"
Getters
<div x-data="{
open: false,
get isOpen() { return this.open },
toggle() {
this.open = ! this.open
},
}">
<button @click="toggle()">
Toggle Content
</button>
<div x-show="isOpen">
Content...
</div>
</div>
|
Data-less Components
<div x-data="{}">
<div x-data>
|
Single Element Components
<button x-data="{
open: true
}" @click="open = false" x-show="open">
Hide Me
</button>
|
Re-usable Data
<div x-data="dropdown">
<button @click="toggle">
Toggle Content
</button>
<div x-show="open">
Content...
</div>
</div>
<script>
document.addEventListener(
'alpine:init', () => {
Alpine.data('dropdown', () => ({
open: false,
toggle() {
this.open = ! this.open
},
}))
})
</script>
|
Re-usable Data
<div x-data="dropdown">
<button @click="toggle">
Toggle Content
</button>
<div x-show="open">
Content...
</div>
</div>
<script>
document.addEventListener(
'alpine:init', () => {
Alpine.data('dropdown', () => ({
open: false,
toggle() {
this.open = ! this.open
},
}))
})
</script>
|
|
|
|
|
|
