Vue'da Liste Oluşturmaya Giriş

Web geliştirmedeki en yaygın görevlerden biri veri listelerini oluşturmaktır. Vue bunu, v-için direktif. v-for direktifinin ne olduğunu, bir listeden öğelerin nasıl kaldırılacağını ve anahtarlarla listelerin nasıl oluşturulacağını keşfedeceksiniz.

Vue'daki v-for Yönergesi Nedir?

bu v-için yönergesi, listeleri minimum JavaScript koduyla oluşturmanıza izin veren Vue yönergelerinden biridir. bu v-için direktif for'a benzer şekilde çalışır JavaScript'te döngü ve bir listedeki öğeleri işlemek için diziler ve nesneler üzerinde yineleme yapabilir.

kullanmak için v-için direktifinde yinelemek istediğiniz bir dizi sağlayın. veri mülkiyeti Vue'daki seçenekler nesnesi.

Örneğin:

<şablon>
<Ul>
<liv-için="isimler içinde isim">{{ isim }}li>
Ul>
şablon>
<senaryo>
varsayılanı dışa aktar {
 veri() {
 geri dönmek {
 isimler: ['John', 'Doe', 'James'],
 };
 },
};
senaryo>

Yukarıdaki kod bloğu, aşağıdakileri kullanan bir Vue uygulamasının bir örneğini göstermektedir: v-için üzerinde yineleme yönergesi isimler içinde sağlanan dizi veri mülk.

v-için iki bölümden oluşan bir ifadeye ayarlanmış bir değere sahiptir: yineleme değişkeni (isim) ve isimler sıralamak v-için noktalar. Yineleme değişkeni her birini tutar isim içinde isimler dizi ve görüntüler isim.

Vue yeni bir oluşturur Belge Nesne Modeli (DOM) her biri için eleman isim içinde isimler dizi ve web sayfasında işler.

Eğer isimler dizi değişiklikleri (örneğin, yeni bir ad eklenir veya eskisi kaldırılır), Vue sanal DOM'u otomatik olarak günceller ve güncellenen verileri yansıtmak için listeyi yeniden oluşturur.

Vue ayrıca bir listedeki bir öğenin dizinini almanın bir yolunu sunar.

<liv-için="(ad, dizin) adlarda">{{ ad }} -- {{ dizin }}li>

Yukarıdaki kod, her birinin dizinini görüntülemek için sözdizimini gösterir. isim içinde isimler sıralamak.

Şunları da kullanabilirsiniz: v-için bir sayı aralığında döngü yönergesi:

<liv-için="10'da sayı">Vue güzelli>

Yukarıdaki kod, metin içeren bir liste oluşturacaktır. Vue güzel on kere. bu v-için yönerge ayrıca verileri tekrar tekrar görüntülemek veya bir işlem gerçekleştirmek için bir dizi sayı arasında döngü yapabilir. bu durumda, sayı yineleme değişkeni, listedeki geçerli öğeye erişmek için kullanılır.

Vue'da Bir Listeden Öğeler Nasıl Kaldırılır

Kullanıcıların web uygulamanızdaki listelerden öğe kaldırmasına izin verebilirsiniz. Bu özellik, yapılacaklar listesi gibi uygulamalar oluştururken kullanışlıdır.

kullanabilirsiniz ekleme JavaScript yöntemi (bu, dizilerden öğe kaldırma) Vue'daki bir listeden bir öğeyi kaldırmak için.

dizi.splice (startIndex, numToRemove, newElements)

Ekleme yöntemi, bir diziye öğe ekleyebilir veya diziden öğe kaldırabilir. Ekleme yöntemi, parametreleri aşağıdaki sırayla alır:

1. bu Dizini başlat parametresi, diziyi değiştirmeye başlayacağı dizini ayarlar.
2. sayıKaldır diziden kaldırmak istediğiniz öğe sayısını gösterir.
3. Son olarak, yeni Öğeler diziye öğe eklemek için kullanabileceğiniz parametre. Hiçbir öğe belirtilmezse, ekleme() diziden yalnızca öğeleri kaldıracaktır.

Vue'daki bir listeden bir öğeyi kaldırmak için ekleme yöntemini kullanmak için, o öğenin dizinini bilmeniz gerekir. Bunu başarmanın bir yolu, dizin öğenin kaldırılmasını işleyen bir yöntemin argümanı olarak.

Örneğin, dizideki her adın yanına, bir kullanıcı öğeyi tıkladığında öğeyi kaldırmak için bir yöntemi tetikleyen bir düğme ekleyebilirsiniz:

<şablon>
<Ul>
<liv-için="(ad, dizin) adlarda">
 {{ ad }} -- {{ dizin }}
<düğme @tıklamak="öğeyi kaldır (dizin)">Kaldırmakdüğme>
li>
Ul>
şablon>

bu dizin parametresi bize her birinin dizinine erişmemizi sağlar isim bu programın argüman olarak ilettiği dizide öğeyi kaldırmak yöntem. bu öğeyi kaldırmak yöntem daha sonra kullanabilir ekleme kaldırmak için bir yöntem isim dan isimler sıralamak:

<senaryo>
varsayılanı dışa aktar {
 veri() {
 geri dönmek {
 isimler: ['John', 'Doe', 'James'],
 };
 },
 yöntemler: {
 öğeyi kaldır (dizin) {
 this.names.splice (dizin, 1);
 }
}
};
senaryo>

Yukarıdaki komut dosyası kullanır ekleme Oluşturulan adlar listesinden bir adı kaldırma yöntemi. Bu, güncellenen diziyi yansıtmak için kullanıcı arayüzündeki listeyi otomatik olarak güncelleyecektir.

Listeleri Vue'da Anahtarlarla Nasıl İşlersiniz?

bu anahtar öznitelik, Vue'nun listedeki her bir öğenin kimliğini izlemek için kullandığı benzersiz bir özniteliktir. Listedeki bir öğe değiştiğinde, anahtar öznitelik Vue, tüm listeyi yeniden oluşturmadan DOM'u hızlı bir şekilde güncelleyebilir.

Vue'da anahtarlarla bir liste oluşturma örneğine bir göz atalım:

<şablon>
<div>
<Ul>
<liv-için="isimler içinde isim":anahtar="isim.kimlik">
 {{ ad.ad }}
<düğme @tıklamak="öğeyi kaldır (ad.kimlik)">Kaldırmakdüğme>
li>
Ul>
div>
şablon>
<senaryo>
varsayılanı dışa aktar {
 veri() {
 geri dönmek {
 isimler: [
 { kimlik: 1, ad: "Can"},
 { kimlik: 2, ad: "Doe"},
 { kimlik: 3, ad: "James"},
 ],
 };
 },
 yöntemler: {
 öğeyi kaldır (anahtar) {
 this.names.splice (anahtar - 1, 1);
 },
 },
};
senaryo>

Bu örnekte, benzersiz özelliklere sahip öğelerin bir listesine sahipsiniz. İD özellikler. Kod bloğu şunu kullanır: anahtar öznitelik ile v-için listedeki her öğenin kimliğini izlemek için yönerge. Bu, liste değiştiğinde Vue'nun DOM'u verimli bir şekilde güncellemesine izin verir.

Listeden bir öğeyi kaldırırsanız, Vue tüm listeyi yeniden oluşturmak zorunda kalmadan DOM'u günceller. Bunun nedeni, Vue'nun listedeki her öğenin kimliğini tutması ve yalnızca değişen öğeleri güncelleyebilmesidir.

bu anahtar öznitelik, listedeki her öğe için benzersiz bir tanımlayıcı olmalıdır. Bu olabilir İD özelliği veya öğeyi izlemek için kullanılabilecek başka herhangi bir benzersiz tanımlayıcı.

Kullanmak anahtar öznitelik ile v-için direktif, oluşturma sorunlarını önlemeye yardımcı olur. Örneğin, adları kaldırırken Vue, anahtar listedeki öğelerin sırasını korumak için öznitelik.

Vue Yönergeleri Gereklidir

Burada, listelerden öğe kaldırma ve listeleri anahtarlarla işleme dahil olmak üzere Vue'da liste oluşturmanın temellerini ele aldınız. Bu kavramları anlayarak karmaşık veri listelerini işleyen duyarlı arayüzler oluşturabilirsiniz.

Vue, koşullu işleme, olay bağlama ve veri bağlama dahil olmak üzere farklı amaçlar için çok sayıda yönergeye sahiptir. Bu yönergeleri anlamak, verimli etkileşimli web uygulamaları yapmanıza yardımcı olabilir.