CURSO DE ALPINE JS
Contenido
PROGRAMAS A UTILIZAR
- Visual Studio Code Es un editor de codigo fuente desarrollado por Microsoft. Utilizaremos este programa por que es más ligero y tiene mas opciones a diferencia de otros
REQUISITOS BÁSICOS
CONCEPTOS BÁSICOS
Alpine.js es una librería javascript creada por Caleb Porzio, también creador del
componente Livewire para Laravel.
Está inspirada en otros frameworks como AngularJS, VueJS o TailwindCSS que nos
permite enriquecer nuestro lenguaje HTML con propiedades declarativas y reactivas de
una manera fácil, rápida y ligera, como alternativa a frameworks como React.js y
Vue.js que con su crecimiento empiezan a requerir de gestores de tareas para
facilitarnos su manejo.
CDN
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer>
X-DATA
<!-- OPCION 1 -->
<div x-data="{usuario:'isai', clave:123}">
<h1 x-text="usuario"></h1>
<h1 x-text="clave"></h1>
</div>
<!-- OPCION 2 -->
<div x-data="main()">
<h1 x-text="usuario"></h1>
</div>
<script>
function main() {
return {
usuario: "isai"
}
}
</script>
X-INIT
La x-init directiva le permitirá ejecutar código javascript cuando un componente
esté listo e inicializado.
<div x-data="main()" x-init="des()">
<h1 x-text="cuenta"></h1>
</div>
<script>
function main() {
return {
cuenta: 60,
des: function () {
setInterval(() => {
this.cuenta--
}, 500);
}
}
}
</script>
X-TEXT
<div x-data="{usuario:'isai'}">
<h1 x-text="usuario"></h1>
</div>
X-HTML
<div x-data="{code:'<p>hello world</p>'}">
<h1 x-html="code"></h1>
</div>
X-SHOW
X-BIND
X-MODEL
X-ON - @
X-IF
X-FOR