İlk Vue.js Bileşeninizi Oluşturma

Vue.js, bileşen tabanlı bir çerçevedir, yani uygulamalar yeniden kullanılabilir bileşenler kullanılarak oluşturulur. Her bileşen kendi HTML, CSS ve JavaScript'ini kapsüller. Bu makale, ilk Vue.js bileşeninizi sıfırdan oluşturma sürecinde size rehberlik edecektir.

Yeni Bir Vue Bileşeni Oluşturma

Vue.js bileşenleri genellikle .vue dosyalarında saklanır. Her bileşen dosyası üç ana bölümden oluşur: '<template>', '<script>' ve '<style>'. Greeting.vue adlı basit bir bileşen oluşturalım.

1. Proje Klasörünüze Gidin: Terminali kullanarak Vue proje dizininize geçin:

cd my-vue-project

2. Yeni Bir Bileşen Dosyası Oluşturun: src/components dizininde, Greeting.vue adında yeni bir dosya oluşturun.

<template>
  <div>
    <h1>Hello, Vue.js!</h1>
    <p>Welcome to your first Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'Greeting'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Bu Greeting.vue bileşeni şunları içerir:

• <template>: Bileşenin HTML yapısını tanımlar.
• <script>: Bileşenin veri özellikleri ve yöntemleri gibi JavaScript mantığını içerir.
• <style>: Bu bileşene yönelik CSS stillerini içerir. scoped niteliği, stillerin yalnızca bu bileşene uygulanmasını sağlar.

Bileşeninizi Kullanma

Bileşeni oluşturduktan sonra, onu Vue uygulamanızda kullanmanız gerekir. src/App.vue dosyasını açın ve Greeting bileşenini içerecek şekilde değiştirin:

<template>
  <div id="app">
    <Greeting />
  </div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
  name: 'App',
  components: {
    Greeting
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

Bu güncellenmiş App.vue dosyasında:

• Bileşeni İçe Aktar: Greeting bileşenini içe aktarmak için import Greeting from './components/Greeting.vue'; komutunu kullanın.
• Bileşeni Kaydedin: export default bloğundaki components nesnesine Greeting ekleyin.
• Component: etiketini kullanın. Bileşeni uygulamanızda kullanmak için '<template>' bölümüne '<Greeting />' etiketini ekleyin.

Bileşeninizi Test Etme

Değişikliklerinizi kaydedin ve geliştirme sunucunuzun çalıştığından emin olun. Tarayıcınızı açın ve http://localhost:8080 adresine gidin. Sayfada Greeting bileşeninin içeriğinin işlendiğini görmelisiniz.

Çözüm

İlk Vue.js bileşeninizi başarıyla oluşturdunuz ve kullandınız. Bileşenler, Vue.js uygulamalarının yapı taşlarıdır ve kullanıcı arayüzünüzün farklı bölümlerini kapsüllemenize ve yönetmenize olanak tanır. Vue.js'ye daha aşina oldukça, daha etkileşimli ve karmaşık uygulamalar oluşturmak için bileşen özellikleri, olaylar ve yaşam döngüsü kancaları gibi gelişmiş özellikleri keşfedebilirsiniz.

Vue.js bileşenleriyle denemeler yapmaya devam edin ve dinamik ve ilgi çekici web uygulamaları oluşturmak için bilginizi genişletin.