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

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.