Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, izleyicilere Vue.js framework'ünde mutation kullanarak yeni link ekleme işlemini adım adım göstermektedir.
- Video, store.cs dosyasında "add-link" adlı bir mutation oluşturma ile başlıyor. Ardından app.vue dosyasında form oluşturma, buton ekleme ve v-model kullanarak input ile veri bağlama işlemleri gösteriliyor. Son olarak, form submit edildiğinde mutation'ın nasıl çalıştırılacağı ve linkler state'ine yeni link eklenmesi anlatılıyor. Video, oluşturulan butonun stilini değiştirme ve link ekleme işleminin başarıyla çalıştığını gösteren bir test ile sonlanıyor.
- 00:01Mutation Oluşturma
- Video, yeni link ekleme işlemini gerçekleştirmek için bir mutation oluşturmayı anlatıyor.
- Store.cs dosyasında "add-link" adında bir mutation oluşturuluyor, bu mutasyon büyük harfle yazılmasıyla bir mutation olduğunu belirtiyor.
- Mutasyon, state ve link parametrelerini alarak linkler dizisine yeni bir veri ekliyor.
- 01:13Form ve Buton Ekleme
- App.vue dosyasında bir form ekleniyor ve formun submit olduğunda "link-ekle" adlı bir metot çalıştırılıyor.
- Form içerisine bir buton tanımlanıyor ve bu butona v-model özelliği verilerek "yeni-link" adlı bir model oluşturuluyor.
- Butonun class'ı "input" olarak ayarlanıyor, type'ı "text" olarak belirleniyor ve placeholder'ı "link ekle" olarak veriliyor.
- 04:04Mutation Kullanımı
- Metot kısmında map mutation yardımıyla "add-link" mutasyonuna erişiliyor.
- "link-ekle" fonksiyonu, form submit olduğunda çalışacak ve yeni link datasıyla link ekleme işlemini gerçekleştirecek.
- Mutasyon, state'i kullanan bir mutasyon olduğu için parametre olarak link alıyor ve fonksiyon çalıştığında tanımlanan add-link ile oluşturulan datayı gönderiyor.
- 06:01Sonuç ve Stil Ekleme
- Formda "yeni link" yazıp enter'a basıldığında, linkler state'ine yeni link ekleniyor.
- Butona stil veriliyor: border none, padding 20 piksel, width %100'den 40 piksel eksik, box-shadow 5 piksel light, margin-bottom 50 piksel ve outline none.
- Sayfa yenilendiğinde test baştan alınıyor ve link sayısı doğru şekilde hesaplanıyor.