• 0850 711 04 06
  • info@nanomedya.com.tr

Vue Js Nedir?

Vue Js Nedir?

Merhabalar Vue.js yolumuzda bu ilk yazım olacak. Güzel bir yol güzel yazılar yazma ümidiyle bu yazımda Vue js temelinden biraz bahsedeceğim. Ama hiç şu tarihte ortaya çıkmıştır. Lisansları şudur vb. gibi ortaya  vue js Evan You tarafından geliştirilmiştir gibi konulara değinmeyeceğim. Önemli olan zaten sizin nasıl ve neler geliştireceğiniz.

Gelelim Vue js tanımlamasına; en kısa tanımlaması vue js bir javascript kütüphanesidir. Son zamanların en popüler front end teknolojileri arasında yer almaktadır. Vue js diğer frameworklere göre öğrenmesi daha kolay ve daha anlaşılır bir yapıya sahiptir. Kolay diyince aklınıza bir haftalık emekle harikalar yaratabileceğim fikri gelmesin.

Vue js popülerliğinden biraz bahsedecek olursak eğer Github’da 150 bin üzerinde star almış 22 binden fazla fork edilmiş bir projedir. İlgili projeye https://github.com/vuejs/vue ‘ dan ulaşabilirsiniz.

Vue js yapısından dolayı virtual dom üzerinde değişiklik yapar. Değişiklikten sonra virtual dom ile tarayıcı dom’unu karşılaştırarak sadece değişen kısımları kullanıcıya gösterir. Daha performanslı ve hızlı bir sonuç ortaya çıkarmamızı sağlar.

 Vue Js Nasıl Kullanılır?

Vue js, daha önceden kullanılan bir teknoloji jquery gibi cdn ile projemize çekip kullanabileceğimiz bir yapıya sahiptir.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

ile projemize kütüphanemizi import edebiliriz.

Tabi birde vue-cli kurulumumuz var ancak bunu ilerleyen yazılarımızda detaylı bir şekilde anlatacağım.

O zaman dünyaya merhaba deme zamanımız geldi.

Açılan dosya yapısında html dosyasına

<div id="app">
{{ message }}

ekleyip,

Javascript dosyasına veya script tagları arasına ise,

var app = new Vue({
el: '#app',
data: {
message: 'Merhaba Dünya!'
}
})
; ekleyelim.

Tebrikler vue.js hazır hale geldi. Peki biz burada bu kodları yazarak neler yaptık kısaca ondan bahsedip  ilk yazımı sonlandırayım.

Html kısmında div’e verdiğimiz id (app) ile script kısmındaki el (element) ‘e verdiğimiz #app aynı olması gerekiyor. Çünkü vue js buradan birbirini ilişkilendiriyor. Data tag’i içine ise kullanacağımız, array, object, methods, vs değişkenlerimizi (bunları ilerleyen zamanlarda tek tek anlatacağım) koyuyoruz. Böylece html kısmından message eriştiğimiz gibi kolayca erişim sağlayabiliyoruz. Bir sonra ki yazacağım yazıda kodlama ile ilgili detaylara gireceğiz. Size Vue js ‘de eventlerden, Vue js’de router kullanımından vs bahsedeceğim.

Gelecek yazılarda görüşmek dileğiyle. Bu arada soru ve önerileriniz için tolgagunaydin@nanomedya.com.tr den dilediğiniz zaman bana ulaşabilirsiniz.

Hoşcakalın.

Tıkla ve Hemen Ara Fırsatları Kaçırma!!