Alpine.js este un cadru robust și minim pentru compunerea comportamentului Javascript în marcajul dvs. Așa este, în marcajul tău!

Vă permite să scrieți cea mai mare parte a JS inline în HTML, ceea ce face mai ușoară scrierea codului declarativ (spre deosebire de codul procedural). Potrivit creatorului său, Caleb Porzio, își propune să umple golul dintre vanilie JS (sau jQuery) și cadre mari v-dom precum Vue / React.

Noi, cei de la Scrimba, credem că respectă promisiunea, așa că suntem bucuroși să vă prezentăm un curs gratuit de o oră!

În el, veți găsi o grămadă de tutoriale distractive și interactive care vă încorporează învățarea și vă oferă memoria musculară de care aveți nevoie pentru a deveni un punct de acces la Alpine.js.

Acum să aruncăm o privire asupra structurii cursului!

De ce să învățăm Alpine.js?

În prima lecție, profesorul Andre Madarang începe explicând de ce ar trebui să înveți biblioteca. Pe scurt, Alpine.js funcționează bine atunci când aveți nevoie de o cantitate mică de JS, de exemplu, câteva drop-down-uri sau file. Aceasta înseamnă că obțineți o grămadă de putere la o dimensiune nebună mică, fără a fi nevoie să instalați NPM.

Andre îți oferă și o introducere despre sine. Este un dezvoltator full-stack și Youtuber care predă concepte de dezvoltare web precum Laravel, Vue și Tailwind CSS. Suntem încântați să-l avem la bord ca profesor de Scrimba!

Instalare și o componentă alpină de bază

Instalarea Alpine.js este ușoară – puteți utiliza npm dacă doriți, dar Andre ne arată și cum să folosim un CDN și să-l adăugăm într-un script tag – este la fel de simplu !:

<head>
	<script
		src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js"
		defer
	></script>
</head>

Acum, este timpul să creăm prima noastră componentă Alpine.js! În primul rând, definim starea folosind x-data atribut. Statul este disponibil în domeniul de aplicare al <div> în care este definit, deci în exemplul de mai jos, atât <button> si <h1> au acces la stat.

Pentru a utiliza această stare, vom folosi apoi x-show directivă pentru a afișa sau a ascunde elementul și pentru a comuta sau dezactiva elementul folosind @.

<div x-data="{ isOpen: true }">
	<button @click=" isOpen = !isOpen">Toggle</button>
	<h1 x-show="isOpen">index.html</h1>
</div>

Acum, folosim noile noastre cunoștințe de stat pentru a implementa un meniu derulant.

IU cu un meniu derulant

Vedem apoi cum să setăm evenimente pentru a închide meniul derulant făcând clic pe meniul derulant sau apăsând tasta de evacuare, folosind @click.away pe <ul> sau @keydown.escape pe <button>.

Modale și x-ref

În această distribuție, Andre ne trece printr-un alt exemplu despre cum să folosim starea pentru a deschide și a închide un modal. Apoi, introduce referințe, care ne permit să adăugăm metode la anumite elemente din handlerul pentru clicuri.

În acest caz, focalizăm butonul de închidere odată ce modalitatea este deschisă adăugând o referință la butonul de închidere cu un x-ref directivă și apoi adăugarea unei metode la handlerul pentru clicuri.

<button
	class="bg-blue-700 text-white px-4 py-3 mt-4 text-sm rounded"
	@click="isOpen = false"
	x-ref="modalCloseButton"
></button>
<button
	class="bg-blue-700 text-white px-4 py-3 mt-4 text-sm rounded"
	@click="isOpen = true
                    $nextTick(() => $refs.modalCloseButton.focus())
                    "
></button>

Acum este timpul ca niște revizuiri să ajute noile noastre cunoștințe să intre în această distribuție scurtă, adăugăm funcționalitatea pentru a comuta vizibilitatea unei bare laterale. Acesta este un mod minunat de a ne încorpora învățarea și ne arată o altă aplicație a ceea ce am învățat.

UI cu bara laterală

Filele

În continuare, construim un set de file. Acest lucru este mai implicat decât exemplele noastre anterioare, deoarece trebuie să menținem starea pentru toate filele, nu doar pentru un boolean.

Ca de obicei, starea este definită folosind x-data directivă privind un element HTML care încapsulează toate elementele necesare. Apoi, setăm valoarea implicită la tab1 și setați un ascultător de evenimente (care face ca fila să fie activă) pentru fiecare dintre file.

<li class="-mb-px mr-1">
	<a
		class="inline-block rounded-t py-2 px-4 font-semibold hover:text-blue-800 bg-white text-blue-700 border-l border-t border-r"
		href="https://www.freecodecamp.org/news/learn-alpine-js-in-this-free-tutorial-course/#"
		@click.prevent="tab = 'tab1'"
		>Tab 1</a
	>
</li>

Pentru a schimba secțiunea de conținut la conținutul filei pe care a fost făcut clic, adăugăm x-show directive la <div>s care conține conținutul:

<div x-show="tab === 'tab1'"></div>

În cele din urmă, Andre ne arată cum să aplicăm stilurile de filă active cu redarea condiționată a clasei.

:class="{ 'bg-white text-blue-700 border-l border-t border-r' : tab === 'tab1'
}" ;

Selectarea imaginii

În această distribuție, Andre ne arată cum abilitățile pe care le-am învățat în distribuția anterioară pot fi aplicate unei experiențe diferite de interfață – un selector de imagine. Selectorii de imagini funcționează la fel ca filele, dar cu imagini în loc de text.

Selector de imagine

Selector de imagine

Detectare derulare

Acum, Andre ne arată cum să construim un detector de defilare care să schimbe culoarea de fundal pe măsură ce utilizatorul derulează. Pentru a face acest lucru, definim o anumită stare care ține evidența dacă utilizatorul a derulat.

<div x-data="{ atTop: true }"></div>

Acum, adăugăm un ascultător de evenimente de derulare pe fereastră și o redare de condiționare a clasei pe <nav>.

<nav
	class="p-4 w-full fixed"
	:class="{ 'bg-white shadow-md' : !atTop }"
	@scroll.window="atTop = (window.pageYOffset > 40) ? false : true"
>
	Top Nav goes here
</nav>

Comutare și bucle de acordeon

În această secțiune, construim un comutator de acordeon folosind bucle. În exemplul nostru, există mai multe întrebări frecvente cu răspunsuri și dorim să comutăm vizibilitatea răspunsurilor.

O modalitate excelentă de a face acest lucru fără a repeta codul este utilizarea buclelor. Pentru a face acest lucru, stocăm toate întrebările și răspunsurile noastre într-o matrice, trecem peste ele și apoi setăm ascultătorul de evenimente pe fiecare iterație a buclei.

Notă: Pentru ca acest lucru să funcționeze, elementele noastre trebuie să fie înfășurate într-un template etichetă.

<template x-for="faq in faqs" :key="faq.question">
	<div>
		<button
			class="w-full font-bold border-b border-gray-400 py-3 flex justify-between items-center mt-4"
			@click="faq.isOpen = !faq.isOpen"
		>
			<div x-text="faq.question"></div>
		</button>
		<div
			class="text-gray-700 text-sm mt-2"
			x-text="faq.answer"
			x-show="faq.isOpen"
		></div>
	</div>
</template>

preluați și x-init

Acum, vedem cum putem face cereri către un API extern. Acest lucru pare intimidant, dar este ușor împărțit în patru pași.

  • Adăugați un stat pentru a ține ghilimelele:
x - data = "{ quote:'' }";
  • Oferiți aplicației o ofertă de afișat la inițializare:
x - init = "quote="Awesome quote"";
  • Setați textul în <div> care afișează citatul ca stare:

Utilizare fetch pentru a obține cotația dintr-un API extern:

x-init=" fetch('https://api.kanye.rest') .then(response => response.json()) .then(data => quote = data.quote) "

Iată blocul complet de cod:

<div
	class="container mx-auto px-4"
	x-data="{ quote:'' }"
	x-init="
                fetch('https://api.kanye.rest')
                    .then(response => response.json())
                    .then(data => quote = data.quote)
            "
>
	<div
		class="flex items-center text-center justify-center h-screen text-2xl italic"
		x-text="`"${quote}"`"
	></div>
</div>

IU arată astfel:

Generator de cod așa cum este văzut de utilizatorul final

Aplicația Todo și modelul x

În această distribuție, învățăm cum să construim o mini aplicație de făcut. Pentru asta avem nevoie de trei bucăți de stat; una pentru păstrarea sarcinilor într-o matrice (todos), unul pentru a urmări dacă utilizatorul tastează o nouă sarcină (todoTitle) și unul pentru a urmări noul ID de sarcini (todoId).

Deoarece folosim multe bucăți de stare, ne extragem funcția într-un <script> eticheta pentru a face lucrurile mai curate. Funcția returnează un obiect care conține starea și funcțiile noastre:

<script>
	function todos() {
		return {
			todos: [
				{
					id: 1,
					title: "Finish Alpine Screencast",
					isComplete: false
				}
			],
			todoTitle: "",
			todoId: 2
		};
	}
</script>

Acum facem o buclă peste sarcinile noastre pentru a afișa titlul pe care l-am stocat în matrice și adăugăm condiționat o linie de trecere dacă sarcina este finalizată.

<template x-for="todo in todos" :key="todo.id">
	<li class="flex items-center justify-between">
		<div
			class="flex items-center"
			:class="{ 'line-through' : todo.isComplete }"
		>
			<input type="checkbox" />
			<div class="ml-3" x-text="todo.title"></div>
		</div>
		<button class="text-xl ml-2">&times;</button>
	</li>
</template>

Acum lucrăm la adăugarea unei sarcini. Mai întâi, adăugăm un x-model directivă pentru a noastră <input> care sincronizează todoTitle cu orice este introdus în <input>:

<input
	type="text"
	class="shadow w-full px-2 py-2"
	x-model="todoTitle"
	@keydown.enter="addTodo()"
/>

Funcția pe care vrem să o executăm atunci când un utilizator tastează o nouă sarcină este apoi adăugată la a noastră <script> etichetă.

Folosim și un x-model din caseta de selectare pentru a permite utilizatorului să marcheze o sarcină ca terminată.

<input type="checkbox" x-model="todo.isComplete" />

Tranziții: dropdown

În continuare, Andre ne arată câteva tranziții funky care oferă listei noastre un finisaj clar și profesional, folosind clasele de utilitare Tailwind CSS. Aceste tranziții vă oferă un control precis asupra modului în care meniul dvs. de comutare trece de la ascuns la vizibil, cu opțiuni, inclusiv opacitate, durată, origine și altele.

<ul
	x-show="isOpen"
	@click.away="isOpen = false"
	class="absolute font-normal bg-white shadow overflow-hidden rounded w-48 border mt-2 py-1 right-0 z-20"
	x-transition:enter="transition transform origin-top-right ease-out duration-200"
	x-transition:enter-start="opacity-0 scale-75"
	x-transition:enter-end="opacity-100 scale-100"
	x-transition:leave="transition transform origin-top-right ease-out duration-200"
	x-transition:leave-start="opacity-100 scale-100"
	x-transition:leave-end="opacity-0 scale-75"
></ul>

Tranziții: Modal

Acum este timpul să punem la încercare noile noastre cunoștințe despre tranziții adăugându-le la modalitatea noastră. În spiritul Scrimba, Andre ne oferă șansa de a testa noile noastre abilități înainte de a ne arăta cum o face, deci nu există spoilere aici!

Tranziții: Bara laterală

În cele din urmă, adăugăm o tranziție plăcută și lină pentru bara laterală pe care am implementat-o ​​mai devreme. Din nou, fără spoilere, așa că poți merge mai departe și să-l tragi singur când urmărești cursul.

Concluzie

Am analizat acum câteva cazuri de utilizare pentru Alpine.js și am construit câteva exemple în care ar putea fi o alegere mai bună decât React sau Vue. Sperăm că ați învățat ceva nou despre Alpine.js și veți folosi noile abilități în curând.

Dacă nu ați făcut-o deja, nu uitați să verificați curs la Scrimba.

Între timp, fericită codare alpină! 🙂