Hogyan lehet egy egyszerű címváltoztató alkalmazást megvalósítani a Vue.js használatával

A Vue.js egy progresszív JavaScript keretrendszer. Sok funkcióval rendelkezik, beleértve az összetevőket, a renderelést és az útválasztást. A Vue vs React érv versenyképes. Mindkettőjüknek vannak előnyei és hátrányai a szakterületükön.

Létrehoztam egy egyszerű JavaScript alkalmazást a Vue-ban egy CDN (tartalomszolgáltató hálózat) használatával. Az alkalmazásnak van címe, amely egy gombra kattintva nagybetűvé konvertálódik. Tudom, hogy ez egy egyszerű alkalmazás. De sok egyszerű dolgot megtudhatunk rajta keresztül, például:

  • CDN a Vue számára
  • Vue objektumok
  • egy attribútum összekapcsolása a Vue objektummal
  • adat tulajdonság meghatározása
  • módszer meghatározása a Vue használatával
  • a Vue módszer meghívása a hallgatókon keresztül

Oké, mocskoljuk be a kezünket!

Nagy rajongója vagyok annak, hogy a módszert darabokra merítsem, ezért itt ugyanazt a megközelítést fogjuk követni.

  1. Hozzon létre egy HTML fájlt, és kapcsolja össze a Vue-t CDN-en keresztül.
  2. Hozzon létre egy Vue objektumot.
  3. Csatolja a HTML-sablont a Vue objektumhoz.
  4. Hozzon létre egy adat tulajdonságot.
  5. Hozzon létre egy módszert a Vue objektumban.
  6. Ha egy gombra kattint, módosítsa az adatokat.

1. Hozzon létre egy HTML fájlt, és kapcsolja össze a Vue-t a CDN-en keresztül

Kezdetben hozzon létre egy index.html nevű fájlt . Ez a legfontosabb játékosunk. Az index.html fájl a HTML sablonrészt és a Vue objektumot egyaránt tartalmazza.

Itt használom a Visual Studio Code-ot.

Most adja hozzá a CDN-t az index.html fájlhoz. Használhatunk akár fejlesztési, akár gyártási verziót. De jó lesz a fejlesztői verziót figyelmeztetésre és hibákra használni. A CDN fejlesztői verziójának bejegyzése jelenleg:

2. Hozzon létre egy Vue objektumot

Most létre kell hoznunk az index.html fájlban található Vue objektumot. A szkript címke alatt jön létre.

Létrehozható:

new Vue();

A teljes szintaxis alább van:

new Vue({el: ,
data: {
},
methods: {
}
});

new Vuea Vue példánya. Hozzáférhetünk az olyan tulajdonságokhoz, mint az el, az adatok, a módszerek stb., Hogy együtt lehessünk a Vue-val. A tulajdonságokat az alábbiakban ismertetjük.

3. Csatlakoztassa a HTML-sablont a Vue objektumhoz

Mint tudjuk, Vue rendelkezik „el” nevű tulajdonsággal. Ez a tulajdonság összekapcsolja a HTML-sablont a Vue objektummal. Ehhez az összes HTML-sablonnak egyetlen div alatt kell lennie, azonosítóval. Ehhez a bemutatóhoz használhatunk egy azonosítót app. A következőket adtuk hozzá az index.html fájlhoz:

Welcome to title changer

Most adja hozzá az alkalmazás azonosítóját a Vue objektumhoz.

new Vue({
el: '#app',
});

Tehát a link sikeres lesz.

4. Hozzon létre egy adat tulajdonságot

Most nem akarjuk, hogy a „Welcome to title changer” fejléc statikus szöveg legyen. Képesnek kell lenniünk a Vue data tulajdonság értékének megjelenítésére. Ehhez a Vue rendelkezik „data” nevű beépített tulajdonsággal. Itt regisztrálnunk kell, és a nevet a HTML-ben kell használnunk, az alábbiak szerint:

new Vue({
el: '#app',
data: {
tile: 'Welcome to title changer'
},
});

Most a <h3> tag-ben lehet frissíteni a dupla göndör zárójelekkel, például az interpolációval a Ruby-ban. Az érték a következő lesz:

{{title}}

5. Hozzon létre egy módszert a Vue objektumban

A Vue rendelkezik beépített tulajdonsággal, az úgynevezett „módszerekkel”. Ez a tulajdonság támogatja a Vue objektumokon belül deklarálandó módszereket.

Használhatjuk az ES6 szintaxist is. Hadd magyarázzam el itt mindkettőt.

methods: {
 changeTitle: function() {
 this.title = this.title.toUpperCase();
 return this.title;
 }
}

Az ES6 formátum:

methods: {
 changeTitle() {
 this.title = this.title.toUpperCase();
 return this.title;
 }
}

toUpperCase()egyszerűen egy JavaScript módszer, amely egy karakterláncot nagybetűvé konvertál. Fontos szempont, amelyet itt meg kell jegyezni, hogy az adat tulajdonsághoz a thiskulcsszó segítségével férhetünk hozzá . Tehát az adat tulajdonságban deklarált érték thisa metódusok segítségével érhető el .

6. Változtassa meg az adatokat, amikor egy gombra kattint

Most egyszerűen csak hívjuk meg a módszert, ha egy gombra kattintunk. Egyszerű a dolog.

Ehhez létre kell hoznunk egy gombcímkét.

click to change to upcase

A gomb és a módszer összekapcsolásához egy eseménykezelőt kell használnunk, amikor rákattintunk a gombra. A Vue egy beépített hallgatót hív v-on.

Itt van a szintaxis:

v-on:click="call Action or Method"

Kombinálhatjuk:

click to change to upcase

Vagy használhatunk egy rövid kézi szintaxist, mint az alábbiak:

click to change to upcase

Ez az. Minden kész

Mielőtt a gombra kattintana, a HTML fejléc az alábbiakban található:

Kattintás után nagybetűvé alakul.

Ez minden. Hozzászólás, ha bármilyen kérdése vagy kérdése van. Az alábbiakban csatoltam a Repo adatait.

github link. A következő órákban frissíteni fogok néhány speciális funkciót a Vue-ban.