A Vue.js progresszív JavaScript-keretrendszerként vívta ki hírnevét. A Vue.js segítségével egyoldalas alkalmazásokat (SPA-kat) készíthet, vagy speciális felhasználói felületeket fejleszthet.

Itt elsajátíthatja a Vue.js alapjait, beleértve a Vue-összetevő létrehozását és az opciók objektumokkal való együttműködését a dinamikus adatok megjelenítéséhez.

A Vue.js az egyik legnépszerűbb JavaScript-keretrendszerek. A Vue használatának megkezdéséhez, és a HTML-oldalához való hozzáadásához másolja ki az alábbi szkriptcímkét, és illessze be a fejrészbe:

<forgatókönyvsrc="">forgatókönyv>

A CDN hivatkozás használata kiváló lehetőség a statikus HTML javítására vagy az alkalmazás funkcionalitásának hozzáadására.

Azonban telepítenie kell a Vue.js-t npm-en keresztül, hogy több speciális funkciót is használhasson, mint például az SFC (Single-File Component) szintaxis, amelyek hasznosak a teljes értékű Vue-alkalmazások készítésekor.

Vue alkalmazás létrehozása

A Vue könyvtár CDN hivatkozáson keresztüli elérése egy Vue objektumot biztosít, beleértve a .createApp() módszer.

Ahogy a neve is sugallja, ezzel a módszerrel létrehozhat egy Vue alkalmazást.

Például:

html>
<htmllang="en">
<fej>
<cím>Vue alkalmazáscím>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<forgatókönyv>
 const app = Vue.createApp();
forgatókönyv>
test>
html>

Itt a létrehozott alkalmazás a kb változó. Az alkalmazáspéldány létrehozása után elő kell készítenie a következővel .hegy() módszer. Ez a módszer megmondja, hogy hová kell csatlakoztatni az alkalmazást a Dokumentumobjektum modell (DOM).

Például így:

html>
<htmllang="en">
<fej>
<cím>Vue alkalmazáscím>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<divid="alkalmazás">div>
<forgatókönyv>
 const app = Vue.createApp();
 app.mount("#app");
forgatókönyv>
test>
html>

A Vue használatához .hegy() metódust, meg kell adnia egy DOM elemet vagy választót argumentumként. Ebben a példában a Vue alkalmazást a DOM elem használatával csatlakoztattuk a #app ID.

Fontos megjegyezni, hogy a Vue alkalmazás csak azokat az elemeket vezérli, amelyeket a id. Ezenkívül az alkalmazásnak nincs irányítása az elemeken kívüli dolgok felett, beleértve a kattintási eseményeket vagy bármilyen más interaktivitást.

A Vue alkalmazás létrehozásának utolsó lépése a .hegy() módszert az összes alkalmazáskonfiguráció elvégzése után.

Az Options Object a Vue-ban

A Vue.js-ben a Lehetőségek objektum konfigurációs objektumként Vue-példány vagy komponens létrehozásához.

A Vue-alkalmazások alapvető része, mivel meghatározza az egyes példányok vagy összetevők viselkedését és adatait. A Lehetőségek Az objektum több tulajdonságból áll, amelyek a példány vagy komponens különféle aspektusait képviselik.

Néhány gyakran használt tulajdonság a Lehetőségek objektumok a következők:

• adat: Ez a tulajdonság határozza meg a Vue alkalmazások adatobjektumát. Ez egy olyan függvény, amely egy objektumot ad vissza, amely tartalmazza az adattulajdonságokat és azok kezdeti értékeit.
• mód: A mód Az Options objektum tulajdonsága létfontosságú funkciókat tölt be a dinamikus renderelés engedélyezéséhez.
• sablon: Ez a tulajdonság határozza meg a Vue-példány vagy komponens HTML-sablonját. Ez egy HTML-jelölést tartalmazó karakterlánc, amelyet a Vue sablonfordítója képes elemezni.

Vegye figyelembe, hogy sablontulajdonság használatakor a Vue fordító csak a sablonban meghatározott tartalmat jeleníti meg.

Íme egy példa a Vue alkalmazásra a adat, mód, és sablon tulajdonságok:

html>
<htmllang="en">
<fej>
<cím>Vue alkalmazáscím>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<divid="alkalmazás">
<h1 @kattintson="fordított üzenet" >{{ szöveg }}h1>
div>
<forgatókönyv>
const app = Vue.createApp({
// sablon: '
Üdvözöljük a Vue alkalmazásban
',
 adat() {
Visszatérés {
 szöveg: "Ez a te Vue alkalmazásod"
 };
 },
 módszerek: {
 fordított üzenet () {
ez.text = ez.text.split('').reverse().join('')
 }
 }
 });
kb.hegy("#app");
forgatókönyv>
test>
html>

Ez a program egy alapvető Vue alkalmazást ábrázol, amely szöveginterpoláció segítségével megjeleníti a „This is your Vue App” szöveget, és lehetővé teszi a felhasználók számára, hogy rákattintsanak az üzenet megfordításához.

A adat() függvény egyetlen tulajdonságú objektumot ad vissza szöveg. A @kattintás direktíva csatolására szolgál a fordított üzenet() módszer a elem, amely megfordítja a szöveg ingatlan.

A program futtatásakor a létrehozott Vue alkalmazás így fog kinézni:

A szövegre kattintva megfordul.

Vegye figyelembe, hogy a program megjegyzést fűzött a sablon tulajdonsághoz, hogy lehetővé tegye a Vue alkalmazás tartalmának megjelenítését. Ha megjegyzés nélkül hagyjuk, ez a Vue alkalmazás csak egy sablontulajdonságot jelenít meg:

Vannak más tulajdonságok is, mint pl kellékek és számított, amelyet hatékony és rugalmas Vue-alkalmazások létrehozására is használhat az Options Object konfigurálásakor.

Szöveg interpoláció a Vue-ban

A Vue szöveginterpolációja egy olyan szolgáltatás, amely lehetővé teszi az adatok dinamikus HTML-elemekhez való kötését. Más szavakkal, lehetővé teszi a Vue-példány adattulajdonságainak közvetlen kiírását a HTML-ben.

A szöveginterpoláció eléréséhez a Vue-ban az adattulajdonság nevét dupla kapcsos zárójelekbe kell foglalnia. A Vue a dupla kapcsos kapcsos zárójelek tartalmát JavaScript-kifejezésként értelmezi, és tovább cseréli azokat a kapott értékükkel.

Például:

html>
<htmllang="en">
<fej>
<cím>Vue alkalmazáscím>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<divid="alkalmazás">
<h1>{{ üzenet }}h1>
<p>Üdvözöljük {{ name }}p>
div>
<forgatókönyv>
 const app = Vue.createApp({
 adat() {
 Visszatérés {
 üzenet: "Ez az Ön Vue-alkalmazása."
 név: "Nemes",
 };
 },
 });
 app.mount("#app");
forgatókönyv>
test>
html>

Ebben a példában a szöveginterpoláció köti a üzenet és név a Vu példányban visszaadott adatobjektum tulajdonságai a és elemeket. Amint a Vue alkalmazás felcsatlakozik, megjeleníti az értékeit üzenet és név tulajdonságait a HTML-ben a megfelelő pozíciójukon.

Megjelenítheti a metódushívás eredményét, vagy végrehajthat alapvető JavaScript-műveleteket a dupla zárójelben:

html>
<htmllang="en">
<fej>
<cím>Vue alkalmazáscím>
<forgatókönyvsrc=" https://unpkg.com/vue@3/dist/vue.global.js">forgatókönyv>
fej>
<test>
<divid="alkalmazás">
<h1>{{ üzenet }}h1>
<h3>Üdvözöljük {{ name.toUpperCase() }}h3>
<p>A nevedben {{ nameLength() }} betű található.p>
div>
<p>nem ittp>
<forgatókönyv>
 const app = Vue.createApp({
 adat() {
 Visszatérés {
 üzenet: "Ez az Ön Vue Appja",
 név: "Noble Okafor",
 };
 },
 módszerek: {
 nameLength() {
 ezt.név.hosszúság - 1;
 },
 },
 });
 app.mount("#app");
forgatókönyv>
test>
html>

Ebben a példában a Vue alkalmazásnak van egy adat két tulajdonságot tartalmazó objektum: üzenet és név.

A Vue alkalmazáson belül a három HTML-elem a Vue-példány használatával jelenít meg adatokat. A h1 elem az értékét jeleníti meg üzenet ingatlan, míg a h3 elem az értékét jeleníti meg név ingatlannal a nagybetűs() alkalmazott módszer.

A p elem megjeleníti a visszaadott eredményt nameLength() pontjában meghatározott módszer mód a Vue alkalmazás tárgya. A nameLength() metódus a hosszát adja vissza név tulajdonság eggyel levonva.

Ahhoz, hogy a metódusobjektumban lévő adatobjektumból értéket érjen el, a következőt kell használnia ez kulcsszó. ez A kulcsszó az aktuális Vue-példányra utal, és lehetővé teszi annak tulajdonságait és metódusait a Vue-példányon belülről. Használva ez, lekérheti az értékét név tulajdonságot, és végezze el rajta a szükséges manipulációkat a mód.

Ez a Vue-alkalmazás bemutatja, hogyan lehet adatokat HTML-elemekhez kötni szöveginterpoláció segítségével, és hogyan lehet metódusokat definiálni és meghívni egy Vue-példányban.

Készítse el előlapját a Vue segítségével

Ebből a cikkből megtanulta, hogyan kezdjen el dolgozni a Vue-val, és hogyan interpoláljon szöveget a Vue sablonszintaxisával. A Vue számos egyéb funkciójához hozzáférhet, például direktívákhoz és életciklus-horogokhoz, így kiváló választás dinamikus előtér-alkalmazások készítéséhez.