Adım Adım Vue3
Önceki makalemde Vue.js`in tarihçesinden bahsetmiştim ve bu makalede, tamamen başlangıç seviyesinde olanlar için Vue`nun en güncel versiyonu olan Vue3`ten bahsedeceğim.
Eğer HTML, CSS ve JavaScript konularında temel bilgiye sahipseniz, Vue.js öğrenmeye hazırsınız demektir.
İçindekiler
Vue3 Nedir?
Tarayıcı kullandığınızda, herhangi bir web sitesine girdiğinizi düşünün. Hatta şu anda bu yazıyı okuyorsanız, bu içerikte bulunuyorsunuz demektir. İşte bu noktada gördüğünüz düzen ve tasarım, HTML, CSS ve JavaScript dayalıdır. Vue3, karmaşık veya basit arayüzleri tasarlamanıza yardımcı olan bir programlama modeli VueJS’in en güncel versiyonudur.
Not : Göstereceğim kod düzeni, Vue.js Composition API üzerine olacaktır.
Yukarıdaki kod bloğu, size Vue.js’in sağladığı kolaylığı küçük bir örnek ile göstermek amacıyla kullanılmıştır. Bu örnekte HTML içinde bir button ve bu button’a Vue.js’in özel direktiflerinden biri olan ‘@click’ tanımlanmıştır. Bu direktif içine, aşağıdaki kod bloğunda yapılan bir ‘setup’ tanımı dahil edilmiştir.
Vue3 ve sonraki sürümlerde, ‘setup’ fonksiyonu, Vue bileşenlerinin temel mantığını ve bağlamını tanımlamak için kullanılan önemli bir özelliktir ‘setup’ fonksiyonu, Vue bileşenlerini işlevsel hale getirmek için kullanılır ve Vue2’deki ‘methods’ ve ‘computed’ özelliklerini yerine getirir.
‘setup’ fonksiyonu, bir Vue bileşeni içinde tanımlanan ve bileşenin veri, yöntemler ve hesaplanmış özellikleri dahil olmak üzere tüm işlevselliğini içeren bir nesne döndürmelidir. Bu nesne, bileşenin şablonundan veriye erişimi sağlar ve bileşenlerin davranışını tanımlar.
Örnek bir Vue bileşeninin ‘setup’ fonksiyonu şu şekilde görünebilir; burada iki farklı kullanım yöntemini size göstereceğim. Bir tanesi script içinde kullanımı, diğeri ise dışarıda kullanımı:
1. Gösterdiğim script, ‘setup’ fonksiyonunun dışarıda nasıl kullanıldığını göstermektedir.
Burada da aslında yaptığımız örnek, ‘setup’ fonksiyonu ile verileri (‘count’), yöntemleri (‘increment’) ve hesaplanmış özellikleri (‘doubleCount’) tanımlar ve bunları döndürür.
2. İkinci kullanımı, artık bu yaklaşım daha fazla işlevselliği, kod temizliğini ve daha az yazmayı teşvik ediyor diyebilirim.
Bu örnekte ‘setup’ fonksiyonunu kullanmadan aynı işlevselliği elde edebilirsiniz. ‘script setup’ bloğu, bu değişkenleri otomatik olarak bileşenin içine kullanılabilir hale getirir ve yukarıda da belirttiğim gibi kodunuzu daha basit ve okunabilir hale getirir.
Özetle, Vue.js çalışma mantığını size göstermek istedim ve şimdi sizlere örneklerle adım adım Vue.js konusuna başlıyoruz. Kurulumlar gibi adımları Vue.js dökümanından kolayca ulaşabilirsiniz, bu yüzden bu adımı şimdilik atlıyoruz. Direkt olarak, size kullanılan şablon sözdizimini (Templete Syntax) anlatacağım.
Text Interpolation
Veri bağlamanın en temel yolu ‘Mustache’ (bıyık) sözdizimini kullanmaktadır. Bu, çift süslü parantezleri kullanarak yapılır. Gelen verileri veya data içinde oluşturulan herhangi bir şeyi {{ gelenData }} şeklinde tanımlayarak gösterebilirsiniz.
Gördüğünüz örnekte, showMessage şablon içinde Mustache sözdizimi kullanılarak tanımlanmış oluruz.
V-HTML
Bıyık yöntemini kullandığımızda, verileri Vue.js düz metin olarak yorumlar. Eğer gerçek bir HTML çıktısı elde etmek istiyorsak, Vue.js bize ‘v-html’ direktifini sunarak çıktımızı HTML olarak kolayca alabiliriz.
Gördüğünüz gibi, HTML içinde <h1> etiketini rahatlıkla kullanabiliyoruz.
Attribute Bindings olarak da bilinen ve bıyıkların HTML içinde kullanılmadığı için bizlere kolaylık sağlayan bir yapı ‘v-bind’ yöntemidir. ‘v-bind’ bir veya fazla niteliği veya bir bileşen özelliğini bir ifadeye dinamik olarak bağlamamıza olanak tanır.
Örnek olarak, HTML öğeleri olan <a> ve <img> etiketlerini kullanarak bir görseli görüntülemek ve <a> etiketinin ‘href’ özelliğini kullanarak içerisindeki bağlantıya yönlendirmek istediğimizi düşünelim.
Gördüğünüz gibi, ‘v-bind’ kullanılarak bu işlemi çok kolay bir şekilde gerçekleştirebiliriz. Ayrıca, genellikle ‘v-bind’ın kısayolu olan ‘:’ şeklinde de tanımlayabiliriz. Yani şu şekilde ‘:href’ ve ‘:src’ ile ‘v-bind’ kısayoluyla tanımlamış olduk.
Boolean Attributes
Boolen Attributes aslında bize true veya false döndürür. HTML’de bir çok özelliğin (attribute) disabled özelliği vardır ve bu disabled özelliği true veya false değerleriyle çalışır. Bir örnek olarak, en çok kullanılan işlevlerden biri olan ‘button’ öğesi ve bu öğenin ‘disabled’ özelliğini ‘v-bind’ ile inceleyelim.
Yukarıdaki örnekte ‘buttonAttributes’ adında bir nesne oluşturduk ve bu nesne içinde ‘disabled’ özelliğini ‘isButtonDisabled’ değişkenine bağladık. Bu şekilde ‘v-bind’ ile nesne tanımlayarak, birden fazla özellik üzerinde işlem yapabilirsiniz.
‘v-bind’, bize biçok özellik sunar ve bu özelliklerden biri de HTML içinde JavaScript işlevlerini kullanmamıza olanak tanır. Örneğin, matematiksel işlemler gibi JavaScript’in sağladığı metodları kullanabiliriz.
Bu makalede, Vue.js’in temel konseptlerinden biri olan veri bağlamayı (data binding) ve Vue.js ile nasıl çalıştığını anlattım. ‘Mustache’ veya bıyık sözdizimi ile veri bağlamanın nasıl yapıldığını, ‘v-bind’ yöntemi ile HTML özelliklerini dinamik olarak nasıl bağlayabileceğinizi ve boolen özelliklerin nasıl kullanılabileceğini öğrendik.
Ayrıca, JavaScript işlevlerini Vue.js içinde nasıl kullanabileceğinizi de inceledik. Vue.js HTML içinde JavaScript işlevlerini kullamamıza izin verir ve bu sayede daha karmaşık işlemleri kolayca gerçekleştirebiliriz.
Bir sonraki konuda, Vue.js’in daha derin ve karmaşık konularına derinlemesine dalış yapcağız. Beklemede kalın!
