Alpine JS Tutorial with simple examples

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')
});
© 2016 - 2022, All Rights are Reserved.