VUE Component Oluşturma ve Temelleri

Components in Vue.js 2.0

Vue üzerinde oluşturulan component (bileşen)’lar temelde “Global Component” ve “Local Component” olmak üzere 2'ye ayrılırlar. Aralarındaki fark ise nerede tanımlandıklarıdır.

Gelin biz ilk Global Component’ımızı oluşturalım. (Daha önce hiç bir kurulum yapmadıysanız “VUE-CLI ile VUE’ya Giriş” başlıklı makeledeki adımları izleyerek kurulumu yapabilirsiniz.)

src dizininde istediğiniz bir isimde .vue uzantılı bir dosya oluşturun. Biz örnek olarak “Merhaba.vue” isimli bir component oluşturalım.

.vue uzantılı dosyalar temelde 3 bölümden oluşur. Bunlar;

• Template
• Script
• Style

Her template bir kök div içerir. Bu div’e component’imizin ismini id olarak verebiliriz. Test amaçlı içerisine bir de metin yazalım.

./src/Merhaba.vue

<template>
  <div id="merhaba">
    <h1>Merhaba Component</h1>
  </div>
</template>
<script></script>
<style></style>

Şimdi main.js içerisine bu componenti ekleyelim. Böylece bu component Global olacak ve heryerden erişilebilir durumda olacak. Bunun için önce component’i çağırmamız gerekecek. Sonra da bu component’e özel bir tag oluşturup istediğimiz yerde kullanmamızı sağlayacağız.

./src/main.js

import Vue from 'vue'
import App from './App'
import Merhaba from './Merhaba'
Vue.component('app-merhaba', Merhaba)
new Vue({
  ...
  ...

Artık component’imiz kullanıma hazır. Yapmamız gereken tek şey <app-merhaba> etkiketini kullanmak. Örnek olması için gelin bunu App.vue dosyasında ekleyelim.

./src/App.vue

<template>
  <div id="app">
    <app-merhaba></app-merhaba>
  </div>
</template>
<script> ... </script>
<style> ... </style>

Local Component’ler

(Bir component’in içerisine başka bir component tanımlamak)

STYLE

Component’lerin stil bölümlerinde dilerseniz istediğiniz preprosessor’ü tanımlayarak anında kullanabilirsiniz. Bunun için sass-loader veya less-loader yüklemeniz gerekecektir. Kullanımı ise aşağıdaki gibidir;

./src/Merhaba.vue

<template> ... </template>
<script> ... </script>
<style lang="sass">
p
  color: red
</style>

Burada yazdığınız stil kodlarının tüm projede çalıştığını göreceksiniz. Ama yazdığımız stil kodlarının sadece bu component içerisinde çalışmasını istiyorsak “scoped” attribute (özellik)’ini eklememiz yeterli olacaktır.

...
<style lang="sass" scoped >
...