Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim içeriği olup, izleyicilere Vue.js kullanarak ders ekleme işleminin nasıl yapılacağını adım adım göstermektedir.
- Video, ders ekleme işleminin tüm aşamalarını kapsamaktadır. Önce form oluşturma, input ekleme ve v-model kullanımı gösterilmektedir. Ardından form submit olayının default özelliğini kapatma, ders ekleme fonksiyonunun yazılması ve ders dizisine yeni obje ekleme işlemleri anlatılmaktadır. Son olarak, inputun CSS ile biçimlendirilmesi ve uygulamanın çalıştırılmasıyla ders ekleme işleminin başarıyla çalıştığı gösterilmektedir.
- 00:01Ders Ekleme İşlemi İçin Hazırlık
- Video, ders ekleme işlemini gerçekleştirmek için bir input oluşturup form submit olduğunda bir fonksiyon çalıştırmayı anlatıyor.
- Fonksiyon, dersler dizisine ders objesini ekleyecek.
- Dersler.v dosyasında template alanı içerisindeki div'in içerisinde form etiketi oluşturuluyor.
- 00:38Form ve Input Oluşturma
- Form içerisinde text tipi bir input oluşturuluyor ve placeholder değeri ekleniyor.
- Input'a v model ekleniyor, bu model ders datasıyla bağlantılı olacak.
- Ders datası data fonksiyonu içerisinde boş bir dizi olarak oluşturuluyor.
- 01:44Form Submit Olayı
- Form submit olayı için @submit() fonksiyonu kullanılıyor.
- Form submit olayı tetiklendiğinde ders ekle fonksiyonu çalışacak.
- Kospet yapısı aktif olduğundan sayfa sunucuya gidecek ve tekrar yüklenecek, bu yüzden form submit olayının default özelliği kapatılmalı.
- 03:18Ders Ekle Metodu
- Ders ekle metodu oluşturuluyor ve form submit olayında tetiklenecek.
- Ders ekle metodu, dersler dizisine yeni bir obje ekleyerek ders datasını güncelleyecek.
- Form submit olayında ders datası input içerisinde yazılan veriyi alacak ve inputtaki değer kaybolacak.
- 05:02CSS Stil Ayarları
- Dersler.css dosyasında input için width özelliği %100'den 40 piksel eksik olarak ayarlanıyor.
- Input'a border, padding, font size, background color ve color özellikleri ekleniyor.
- Inputun tam olarak oturması için width değeri %100 eksi 40 piksel olarak değiştiriliyor.
- 07:22Test ve Sonuç
- Oluşturulan form ve input test ediliyor.
- "Ders ekle" kısmına "kimya" yazıldığında, ders ekle fonksiyonu çalışarak dersler dizisine ikinci indeksli olarak atanıyor.
- Ders sayısının 3 olduğu görülebiliyor.