Kategori arşivi: Java Script

Vue.js Nedir? Yazı Dizimiz Başlıyor.

Vue.js hakkında hayatınızı kolaylaştıracak yazılar paylaşmaktan vazgeçip, Vue.js hakkında öğrendiğim her şeyi blogumda yazmaya karar verdim. Bu Vue.js pekiştirip daha iyi öğrenmemi sağlayacağı gibi, bir çok kişiyede faydalı olacağını düşünüyorum.

Vue.js tarihine kısaca değinecek olursak, 2014 yılında bağımsız bir yazılımcı olan Evan You tarafından geliştirilmeye başlamıştır. Evan You takip etmenizi mutlaka öneririm. Takip etmek için Twitter ve Medium sitelerini kullanmanız gerekmektedir. Kendi bloğunda herhangi bir şey paylaşmamaktadır. Ayrıca bir çok projesini GitHub üzerinden ulaşabilirsiniz. Tabi ki Vue.js resmi sitesi ise https://vuejs.org/‘dur. Biraz araştırma ile Vue.js gönül vermiş bir çok blog, twitter ve medium hesabı bulabilirsiniz.

Vue.js nedir?

Vue.js progressive bir javascript çatısıdır. Progressive olmasının en büyük nedenleri ise çok hızlı, güvenli ve dikkat çekici özellikleri olmasıdır. Native bir uygulama deneyimi yaşattığı gibi, performansta vaat etmektedir.

Vue.js yapısı küçük kütüphane (lightweight) olsa da küçük projelerinizden en büyük projelerinizde kadar güvenlikle kullanabilirsiniz.

Peki neden Vue.js kullanmalıyım?

React veya Angular kütüphanelerine aşikar olan Vue.js kolaylıkla adapte olabilirler. Vue.js geliştirilirken, yaratıcıları React ve Angular en güzel özelliklerini harmanlamasıdır.

Vue.js projelerinize kolaylıkla adapte edebileceğiniz gibi, kolay ve hızlı öğrenebilirsiniz. Küçük, açık kaynak ve ücretsiz bir kütüphanedir. React ve Angular gibi reactivity yapısı vardır. İhtiyaç duyduğunuz tüm özellikleri plug-in ile eklenebilir. Virtual Dom sayesinde daha yüksek performans sağlamaktadır. Kendi compenentlerinizi geliştirerek çok daha modüler uygulamalar geliştirebilirsiniz. Ayrıca Chrome için geliştirilmiş developer eklentisi bulunmaktadır.

Facebooktwittergoogle_plusredditpinterestlinkedin

$(document).ready() Nedir?

Ready fonksiyonu DOM yüklendikten sonra çalışacak events belirtmenizi sağlar.


 

 

 

 

 

 

 

 

 

 

 

Ready fonksiyonu en kısa açıklamasıyla DOM yüklendikten sonra çalışacak eventlarınızı belirtmenize yarar.

Bu bize nasıl bir yarar sağlar?

Bunu bir örnekle bunu açıklayalım. Bir HTML sayfası oluşturun ve içine şu kodları yazın.

Kırmızı yapmamasının sebebi DOM yüklenmeden önce sizin scriptinizin çalışmış olduğundan dolayı. Web tarayıcılarının html belgenizi yukarıdan aşağıya doğru okuduğunu biliyoruz. Bu sebeple okuma sırası şu şekilde olacaktır;

html > head > meta > title > script > script > body > h1

Kalın yerlere dikkat ederseniz önce bizim scriptimiz çalışmış oldu. Sonrasında h1 elementi yüklendi. Yani jQuery aslında olmayan bir h1 etiketini kırmızı yapmaya çalıştığı için sonuç başarısız oldu.

Peki bu script kodunu sayfanın altına alırsak ?

Evet bu şekilde çalıştırabildik. Örnek sayfamıza buradan ulaşabilirsiniz.

Şimdi gelelim ready() fonksiyonun işlevine. Yukarıda ki hiyerarşimizi terkar yazalım.

html > head > meta > title > script > script > body > h1

Document ready tam bu aşamada bizim imdadımıza koşuyor ve işlevi tam olarak şu şekilde gerçekleştiriyor.

html > head > meta > title > script(jquery load) > script > body > h1 > script

Gördüğünüz gibi jquery yükledikten sonra ki script bölümümüzü yüklemeden direk olarak DOM elementlerine yöneldi ve en son scriptimizi çalıştırdı. Şimdi ilk örneğimizi document ready kullanarak tekrar yazalım.

Evet script kodumuz hem üstte hemde h1 elementimiz kırmızı oldu. Canlı örnek için buradaki örnek sayfama gidebilirsiniz. Evet ready() fonksiyonumuzu öğrendiğimize inanıyorum. Ancak şöyle bir soru sorabileceğiniz aklıma geliyor.

Bu ready fonksiyonunun daha kısa kullanımı yok mu?

Ready fonksiyonunun iki adet kullanımı var. Uzun kullanımını yukarda gördük ancak tekrar edelim.

Kısa kullanımı ise şu şekilde;

Evet işte bu kadar. Umarım yararlı bir döküman olmuştur.Facebooktwittergoogle_plusredditpinterestlinkedin

Html.BeginForm’u Post Sonrasında Js ve JQuery İşlemleri

Üzerinde çalıştığım projemde dosya yükleme eklemem gerekiyordu. Bütün view’lerimde Ajax.BeginForm ile post ediyordum ve post sonrası js işlemleri için parametre olak OnSuccess kullanıyordum. Upload işlemini Html.BeginForm ile yapmak zorunda kalınca OnSuccess’den mahrum kaldım.

Html.BeginForm ile post sonrasında js kütüphanelerimi aşağıdaki gibi bir yöntemle çalıştırdım 🙂

JS Kütüphanesi:

Controller.cs:

Facebooktwittergoogle_plusredditpinterestlinkedin