VUE Component Oluşturma ve Temelleri

Components in Vue.js 2.0

Nevcan Uludaş
Jul 10, 2017 · 2 min read

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.

<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.

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.

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

Local Component’ler


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;

<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 >
...

Front-End Developer

Bir Front-End Developer’ın kendi çalışmaları sırasında tuttuğu notlar aslında. Öğretmek öğrenmenin en iyi yoludur prensibi bir yerde :)

Nevcan Uludaş

Written by

www.nevcan.com | Front-end Architect @sabancidx • Owner & Instructor @neptunsualti • Underwater Explorer @guehq

Front-End Developer

Bir Front-End Developer’ın kendi çalışmaları sırasında tuttuğu notlar aslında. Öğretmek öğrenmenin en iyi yoludur prensibi bir yerde :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade