Hacer Zeynep Ekinci
Karşılama ekranımız. Güzel bir manzara ve kayıt ol butonu karşımıza cıkıyor. Navbarımız tabii ki mevcut.
Biraz alta indiğimizde bu haftanın konusu bölümümüz var.
Bir altta ise bu ay’ın ilçesi menüsü var. Navbar üzerinden tıklayarak ilgili bölümlere doğrudan yönlendirme yapabiliyoruz. Kayıt ekranı dışında index harici herhangi başka bir HTML dosyamız yok.
Footer kısmımız, sosyal media linklerimiz mevcut.
Kayıt olma menumuz ise bu sekilde. Harici HTML dosyası ile responsive olarak yazıldı.
ÖZLEM ÖZDEMİR
VUE.JS EĞİTİM NOTLARI
- VUE’nin Özellikleri Nelerdir?
Kolay ve hızlı öğrenme
Çok yönlü ve sürdürülebilir olması
Mevcut kütüphaneye entegre edilebilme
Açık kaynaklı ve ücretsiz olması
Reactive yapısı
İhtiyaç duyulan özellikler pluginler ile eklenebilmesi
Virtual DOM sayesinde yüksek performans
Kendi Componentlerinizi oluşturabilme
Chrome developer eklentisi
Test edilebilir olması
Reusable component yapısına sahiptir. Yani kendi içerisinde html,css ve javascriptleri barındıran ufak uygulamalara sahiptir. Örneğin sitenizde bulunan header, product alanı veya footer kısmınızını sadece bir kerelik component olarak tanımlayabilir ve istediğiniz yerde tekrardan kod yazmadan kullanabilirsiniz.
Vue, React, Angular Hangisini Seçmeliyim ?
Anlaşılabilir basit Syntax
Vue.js ‘in diğer framwork’lere göre oldukça kolay bir Syntax’ının olması Bu sayede kolay kolay proje geliştirmeni sağlayacak bir framework.
Component Yapısı ve Render Süreçleri
Diğer 2 framwork’de de Component yapısı mevcut. Bu yüzden bu çok farklı bir durum olarak karşımıza çıkmıyor. React’a göre Component’lerin Render edilme süreçleri Vue.js içinde çok daha pratik ve hızlı!
- Javascript, Html ve Css
Angular ve Vue.js Framework’ler uygulama geliştirirken, development süreçlerine HTML ve CSS kodlarını dahil ederek oldukça hızlı ve rahat bir şekilde tasarım yapabiliyoruz.
Virtual Dom
- Vue.js Virtual Dom Nedir ?
Vue.js kendi yapısında virtual dom (document object model) barındırmaktadır. Virtual Dom’un çalışma mantığını özetleyecek olursak, sizin modelinizde bir değişiklik olduğundan gerçek DOM yapısında değişiklik olmaz. Bunun yerine, değişiklikler sanal bir DOM yapısında gerçekleşir.Daha sonra gerçek DOM ile sanal DOM arasındaki farka bakılarak sadece değişen kısımlar algılanır ve gerçek DOM üzerinde bu değişen kısımlar güncellenir. Değişmeyen kısımlar boş yere güncellenmez. Buda bizim performansımızı artırır. Aşağıdaki şemada bunu görsel olarakta inceleyebilirsiniz.
Github Linkler:
VueJS Template yapısını kavrayalım
VueJS Template Syntax ve Vue instance birlikte nasıl çalışır?
Vue instance içerisindeki data property bilgilerine ulaşmak
v-once ile re-render işlemini engellemek
HTML kodlarını Vue.js üzerinden ekrana basmak
Event Objesinden Event verisini almak
Event İçerisinde Argüman Göndermek
Selma köksal
Vincent Van Gogh Özel Web Sayfası
Sitemizin giriş karşılama ekranı. Vincent van Gogh yazısına tıklandıgında diğer .html bağlantıları kullanılarak sayfa iceriği yönlendiriliyor.
Yönlendirilen “hayatı” icerik sayfası. Responsive tasarım ilkelerine uygun. Fixed navbar’lı sanatsal temalı.
Sayfanın devamı…
Sayfanın en alt kısmı. Footer olarak bazı önemli eserler tablosu, responsive ilkelerine uygun tasarımlı.
Eseleri html sayfası, navbar üzerinden yönlendirme ile gidilebiliyor. Resmin üzerine gelindiğinde açıklaması çıkıyor. Sergi şeklinde özel row tasarımlı ve tabiki de responsive ilkelerine uygun.
