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:

 

Başlangıç

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

Attribute Bind Işlemi

Directive Kullanımı

v-once ile re-render işlemini engellemek

HTML kodlarını Vue.js üzerinden ekrana basmak

VueJS ile Event Dinlemek

Event Objesinden Event verisini almak

Event İçerisinde Argüman Göndermek

Event Modifier

Klavye Event’ler

 

 

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.