Alpine JS : An Intro
Topics
- Overview
- How to Code
- Creating a basic button
Overview
Your new, lightweight, JavaScript framework. -Alpine Js
It is a light weight js framework inspired by Vue JS!
How To Code
For it you have this script tag --
<script src="https://unpkg.com/alpinejs" defer></script>
but in the site it will be showing like this
<script src="//unpkg.com/alpinejs" defer></script>
just add https: before //unpkg.com
so for writing code just add the script tag inside the head tag
<head> <title>Title</title> <script src="https://unpkg.com/alpinejs" defer></script> </head> Now in the body tag add a attribute like this
<body x-data="data()"></body>
Now add another script tag! And write the following inside it!
<body x-data="data()"> <script> function data(){ return{ } } </script> </body> Now understand what was data() it would fetch all the data from here.
So becoz it is an object so add variables like this varName : "value"
Creating a basic button
So lets create some variables!
<script> function data(){ return{ shown : false, click(){ }, } } </script> Here there is a var called shown with false as its value, and a function named click() so lets code them all.
<button>Toggle</button> <div>Content</div> Add these.
Give a attribute x-show="shown" to the div. (x-show means if the value is being shown or not [it is an if statement], it goes away[the button] because the var shown is false if it is true the button will be visible).
Now give a attribute x-on:click="click()" to the button (it will run when the button is clicked).
Coding the function.
click(){ this.shown = !this.shown }, Now it will toggle the shown var as true and then false!
Enjoy!
All the code :-
<head> <title>Title</title> <script src="https://unpkg.com/alpinejs" defer></script> </head> <body x-data="data()"> <button x-on:click="click()">Toggle</button> <div x-show="shown">Content</div> <script> function data(){ return{ shown : false, click(){ this.shown = !this.shown }, } } </script> </body> Consider Following??
Top comments (0)