Framework JavaScript

Uygulamalarla Vue Js #2 (To-Do List Yapımı)

Nisa Bengisu

Vue Js ile ilgili ilk yazımızda bu frameworkün bize sağladığı faydalarından, diğer Javascript frameworklerinden farklarından söz edip bir örnekle Vue Js’e giriş yapmıştık.

Şimdi ise daha fazla örnekle Vue Js konusunu pekiştirelim. Vue Js’le neler yapabileceğimize bir bakalım 🙂

Vue Js’le Model Oluşturalım

Model oluşturarak merhaba diyoruz Vue js’e 🙂 Ekran çıktınız aşağıdaki gibi olur.

Şimdi de Vue Js’le methodları kullanalım. Reverse methodunu kullanarak harfleri nasıl ters çevirebiliriz ona bakalım.

Vue Js’le Method Kullanalım

Ters çevir butonuna bastığınızda aşağıda gördüğünüz çıktıyı elde edeceksiniz.

Harflerin ve kelimelerin hepsi ters bir halde görünecek. Gördüğünüz gibi reverse methodunu gayet basit ve elverişli bir şekilde kullanabildik.

Şimdi de sizin de çok işinize yarayacak olan kullanışlı bir uygulama yapalım.

Vue Js’le Yapılacaklar Listesi Uygulaması

İlk başta id kısmına atadığımız cümleleri, yani uygulama ilk açıldığında karşımıza çıkacak olan yapılacak görevlerin listesini görüyoruz.

Web tarayıcınızda çıktınız bu şekilde olacaktır. Ekle ve çıkar butonlarını denediğinizde yazdığımız fonksiyonların çalıştığını gözemleyeceksiniz. Bu uygulama biraz daha CSS kodlarıyla düzenlendikten sonra günlük hayatınızda da kullanabileceğiniz bir uygulama olabilir.

Ekleme ve çıkarma işlemini kolayca yapabilirsiniz. Vue Js’in bize sağladığı kolaylıkları yapılacaklar listesi uygulamasında daha iyi anlamış oluyoruz aslında.

Vue js’le geliştirilmiş uygulamalara göz atmak isterseniz çok güzel örnekler var tavsiye ederim.



Yazar hakkında

Nisa Bengisu

Nisa Bengisu

Süleyman Demirel Üniversitesi'nde Bilgisayar Mühendisliği okuyorum. Web tasarımı Front - End kısmıyla ilgileniyorum. Bildiklerimle beraber yeni öğrendiğim konuları mutfakta paylaşıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz.
Yorum alanı ile mutfağa katkıda bulunun.

Yorumlar

2 Yorumlar

  • Merhabalar
    kodları çalıştırdığımda dediğiniz gibi ekleme çıkarma yapabiliyorum fakat sayfayı yenilediğimde ilk yazdığınız örneklerle karşılaşıyorum,bu soruna da çözüm bulduğunuzda js bilmesemde css bilgimle uzun vade kullanılacak bi web sayfasına sahip olabilirim
    Kolay gelsin 😀

Bir yorum yaz

This site uses Akismet to reduce spam. Learn how your comment data is processed.