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??

Dev.To
GitHub

Blog

Alpine JS : An Intro

SumantaWeb

Alpine JS : An Intro

Topics

Overview

How To Code

Creating a basic button

Enjoy!

Join Our Newsletter. No Spam, Only the good stuff.

Related