Alpine.js basic tutorial
Alipne.js is a newly born, lightweight, simple and powerful javascript framework that makes most of the stuff of javascript inline. It is like jQuery but it’s lighter and simpler version. No need for long codes to do a simple task like hiding or showing something or creating advance functions like debouncing and throttling and handle dom events gracefully.
There are basically 15 attributes, 6 properties and 2 methods as of now and it’s still evolving.
If you want to know about all these attributes, properties and methods, do have a look at alpine.js documentation here:
It’s very simple to do small tasks and takes minimal to no code .
Including alpine.js in your project using a cdn
No need of installing anything in your project directory, just include alpine.js cdn in your head tag and start working like this:
<head> <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script></head>
OR
<body>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
Attributes
- x-data
The main attribute that you need to know to start working is “x-data” attribute. it is specified on the html element in which you need to keep track of some variables. This attribute creates an object in the local space of that html element in which it is specified and the properties specified in it is available in all the children of that html element.
<div x-data={ open : false , content : 'India' }>
<p></p>
</div>An object is created having the following properties:
{ open : false , content : ‘India’ }
Now, we can use these properties anywhere in the html element i.e inside the div in which x-data is specified.
- x-show
It is also one of the most important of attribute that makes our work so easier. As it’s name suggests, it is used to hide or show a particular html element. It is used like this :
<div x-show="open">The div will be shown only when open is set to be true.
- x-text
It is used to show the content of html using object property value like this:
<p x-text="content"></p> is same as <p>India</p>- x-model
This attribute is used to bind the value of any input value to a object property and use it.
<div x-data="{ inputValue : '' }"> <input x-model="inputValue" /> <p x-text="inputValue"></p></div>
- x-ref
This attribute acts as an alternative to getElementById or any selector attribute that one used to access dom elements.
You can use it like this:
<div x-data>
<button @click="$refs.text.remove()">Remove Text</button>
<span x-ref="text">Hi, I am dikshant</span>
</div>$refs is a magical property that is used to access the refs made by you and you can do anything on it that you previously used to do after using selector to select the html element.
- x-on
This is the most important and most handy attribute available in alpine.js and it is used for applying event listeners on an html element. It works like this :
<div x-data="{isOpen : false}">
<button x-on:click="isOpen=!isOpen">Show/Hide</button>
<h1 x-show="isOpen">Alpine Tutorial</h1>
</div>You can even use shorthand for x-on:click i.e @click
You can find more such examples in their official documentation that i have linked above.
You will find some more examples along with working code here. Feel free to suggest changes or updating the repo here:
I hop you will make your next project using this wonderful lightweight library. If you like the blog, don’t forget to hit that clap icon and if you want to read more such blogs, do follow me up.
