it is a lightweight JavaScript framework.
Alpine js Installation
using script tag.
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
Create component in alpine js
using x-data attributes
<div x-data>
</div>
Events in js
<button type="button" x-on:click="alert('Hello');">Click here</button>
or
<button type="button" @click="alert('Hello');">Click here</button>
Directives
x-data
Define an element as alpine component.
On x-data we can store values and methods also.
<div
x-data="{
name:'CAPSCOM',
printName(){
console.log(this.name)
}
">
<button type="button" @click="printName()">Print Name</button>
</div>
Data less component
<div x-data="">
</div>
or
<div x-data>
</div>
Re-usable data
<div x-data="person">
<span x-text="name"></span>
<button type="button" @click="printName">Print name</button>
</div>
<script>
document.addEventListener('alpine:init',()=>{
Alpine.data('person', ()=> ({
name:"CAPSCOM",
printName(){
console.log(this.name)
}
}))
})
</script>
x-init
This directive has use to initialize the alpine js component.
<div x-data="{name:''}" x-init="name='aman'">
<span x-text="name"></span>
</div>
x-show
This directive is useful to create show and hide element
<div x-data="{open:false, name:'CAPSCOM'}">
<h1 x-show="open">
<span x-text="name"></span>
</h1>
<button
type="button"
@click="open=!open"
x-text="open?'Hide':'Show'"></button>
</div>
x-bind
This directive is used to bind the html attributes
syntax:
x-bind:class="mode?'darkMode':'lightMode'"
or
:class="mode?'darkMode':'lightMode'"
<div x-data="{ mode:false }">
<div x-bind:class="mode?'darkMode':'lightMode'">
CAPSCOM TECHNOLOGY ALMORA
</div>
<button
type="button"
@click="mode=!mode"
x-text="mode?'Light Mode':'Dark Mode'"></button>
</div>
x-on or @
syntax:
x-on:click or @click
x-text
This directive is used to display text on element.
x-html
This directive is used to display text with html on element.
x-model
This directive is used to bind the input field value to the alpine data.
x-for
This directive allow you to create new DOM element by iterating the loop.
<div
x-data="{products:[
{id:1, name:'Mouse'},
{id:2, name:'Router'},
{id:3, name:'Laptop'},
{id:4, name:'UPS'},
{id:5, name:'Printer'}
]}">
<template x-for=" (product, index) in products" :key="index">
<li x-text="product.name"></li>
</template>
</div>
x-effect
This directive execute a statement when one of its dependencies change.
<div x-data="{name:'capscom', year:2016}" x-effect="document.write(name);">
<input type="text" x-model="name"/>
</div>
x-ignore
<div x-data="{name:'capscom', year:2016}" x-effect="console.log(name);">
<input type="text" x-model="name"/>
<div x-ignore>
<span x-text="name"></span>
</div>
</div>
x-if
This directive is used for toggling elements
<div x-data="{open:false}">
<div x-if="open">
Hello, welcome to capscom
</div>
</div>
Magics in Alpine JS
$el
<button type="button" x-data @click="$el.innerHTML='welcome'">Click here</button>
$refs
<div x-data>
<div x-ref="text">This is basic div</div>
<button type="button" @click="$refs.text.remove()">Click here</button>
</div>
Globals
Alpine.data()
using .data() we can reuse the x-data within application.
Alpine.store()
.store() allow global management statement for an application.
document.addEventListener("alpine.init",()=>{
Alpine.store('darkMode',{
mode:false,
switch(){
this.mode = ! this.mode
}
})
})
using of $store.
$store.darkMode.mode
Persist Plugins
<script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
$persist
<div x-data="{count: $persist(0) }">
<span x-text="count"></span>
<button type="button" @click="count++">Increment</button>
</div>
Using $persist with Alpine.data
Alpine.data('dropdown', function () {
return {
open: this.$persist(false)
}
})
Using the Alpine.$persist global
Alpine.store('darkMode', {
on: Alpine.$persist(true).as('darkMode_on')
});