Vue

Vue.js

Okunuşu: vyu

Güncellendi 3 Ekim 20262 dk okuma

Kısaca

Vue, kolay öğrenilmesi ve reaktif verisiyle bilinen, bileşenlerden kullanıcı arayüzü kurmaya yarayan açık kaynaklı bir JavaScript framework'üdür.

Vue nedir?

Vue, Google'da AngularJS ile çalıştıktan sonra daha hafif bir şey isteyen Evan You tarafından geliştirildi ve ilk olarak 2014'te yayımlandı. Kendini aşamalı (progressive) bir framework olarak tanımlar: onu mevcut bir sayfanın tek bir bölümüne ekleyebilir ya da yönlendiricisi, durum yönetimi ve derleme araçlarıyla birlikte eksiksiz bir tek sayfalık uygulama (SPA) kurmak için kullanabilirsiniz.

Vue'nun temel fikri reaktifliktir. Veriyi tanımlarsınız, Vue şablonun hangi kısımlarının onu kullandığını izler ve veri değiştiğinde sayfanın tam olarak o kısımlarını günceller. Şablonlar birkaç eklemeyle sıradan HTML'e benzer: koşullar için v-if, listeler için v-for, olaylar için @click gibi; bu da onları HTML bilen herkes için kolay okunur kılar.

Vue kodunun çoğu tek dosyalık bileşenlerde yaşar: işaretleme için bir <template>, mantık için bir <script> ve CSS için bir <style> içeren .vue dosyaları. 2020'de yayımlanan Vue 3, ilgili mantığı React hook'larına benzer biçimde fonksiyonlarda toplayan Composition API'yi ekledi. Nuxt da, React için Next.js neyse Vue için o olan, sunucu tarafı render ve yönlendirme sunan popüler framework'tür.

Sık yapılan bir yanlış, Vue'nun yalnızca küçük projeler için olduğu düşüncesidir. Özellikle Asya'da ve yaklaşılabilir söz dizimine değer veren şirketlerde büyük canlı uygulamalarda kullanılır. React'e göre yönlendirici ve Pinia durum kütüphanesi gibi daha fazla resmî parça içerir ve varsayılan olarak JSX yerine şablonlar kullanır.

Önemli noktalar

Vue, kullanıcı arayüzü kurmak için aşamalı bir JavaScript framework'üdür.
Reaktif veri, sayfanın tam olarak onu kullanan kısımlarını günceller.
HTML tabanlı şablonlar v-if, v-for ve @click gibi direktifler kullanır.
Tek dosyalık .vue bileşenleri şablonu, betiği ve stili bir arada tutar.
Nuxt, sunucu tarafı render ve yönlendirme için Vue üzerine kurulu framework'tür.

Örnek

Tek dosyalık bileşen olarak bir sayaç (Counter.vue)vue

<script setup>
import { ref } from "vue";

const count = ref(0); // reactive: the template updates when it changes
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<style scoped>
button { padding: 0.5rem 1rem; }
</style>

Sık sorulan sorular

Vue ile React arasındaki fark nedir?

İkisi de arayüzleri bileşenlerden kurar. Vue HTML tabanlı şablonlar kullanır, veri değişikliklerini otomatik izler ve resmî yönlendirme ile durum kütüphaneleriyle gelir. React JSX kullanır, durum değişince bileşenleri yeniden render eder ve daha fazla seçimi ekosisteme bırakır.

Nuxt nedir?

Nuxt, Vue üzerine kurulu, dosya tabanlı yönlendirme, sunucu tarafı render, statik üretim ve sunucu kodu ekleyen bir framework'tür; Next.js'in React için yaptığına benzer.

Vue bir kütüphane mi, framework mü?

Vue kendini aşamalı bir framework olarak tanımlar: çekirdeği bir görünüm (view) kütüphanesidir; resmî paketler de ihtiyaç duyduğunuzda yönlendirme, durum yönetimi ve araçlar ekler.

Sık karşılaştırılanlar

React vs VueReact, JSX kullanan, yönlendirme ve state'i ekosisteme bırakan bir kütüphanedir; Vue ise HTML benzeri şablonlu, ikisine resmî araç sunan bir framework'tür.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin