Blog

Vue.js component, Vue.js framework içinde kullanılan ve özelleştirilebilir öğeleri temsil eden bir yapıdır. Vue.js, kullanıcı arayüzü oluşturmak için kullanılan bir JavaScript framework'üdür ve bu framework içinde UI öğelerini tekrar kullanılabilir, bağımsız parçalara bölen ve yönetilebilir bir yapı olan "component" kavramını kullanır.

Vue.js componentleri, genellikle şu özelliklere sahiptir:

1. Şablon (Template): Componentlerin içinde görüntü ve yapıyı tanımlamak için HTML tabanlı bir şablon bulunur.
2. Veri (Data): Her bir component kendi içindeki verileri yönetebilir. Bu, componentin özgün davranışını ve görüntüsünü kontrol etmek için kullanılır.
3. Metotlar (Methods): Componentler, olaylara tepki göstermek veya belirli işlevleri gerçekleştirmek için metotları içerebilir.
4. Hayat Döngüsü Hook'ları (Lifecycle Hooks): Vue.js componentleri, bir componentin oluşturulması, güncellenmesi ve yok edilmesi gibi özel hayat döngüsü olaylarına tepki verebilir.
5. Stil (Styles): Componentlere özgü stil tanımlamak için CSS veya diğer stil formatları kullanılabilir.

Vue.js componentleri, genellikle uygulama içinde tekrar kullanılabilir, bakımı kolay ve bağımsız parçalara bölünmüş bir şekilde tasarlanır. Bu, büyük uygulamalarda karmaşıklığı azaltmak ve kodu daha modüler hale getirmek için kullanışlıdır.

İşte basit bir Vue.js component örneği:

    

        

            html
        
        

            
                <template>
                <div>
                <h1>{{ message }}</h1>
                <button @click="changeMessage">Mesajı Değiştir</button>
                </div>
                </template>

                <script>
                
                    export  default {
                   data() {
                    return {
                   message: 'Hello, Vue.js!'
                   };
                   },
                   methods: {
                   changeMessage() {
                   this.message = 'New Message!'; 
                   } 
                   } 
                   }; 
                
                </script>

                <style scoped>
                
                    /* Componente özgü stil tanımlamaları */
                    h1 {
                    color: blue;
                    }
                    </style>
               
            
        
    

Bu örnekte, bir Vue.js componenti, bir mesaj gösteren ve bir düğme aracılığıyla mesajı değiştirebilen basit bir yapıya sahiptir. Bu component daha sonra başka Vue.js dosyalarında kullanılabilir.