https://www.serhatvarli.com/ Serhat VARLİ - Front End Developer olarak son sistem teknoloji yapısı ile yeni bir bakış açısı ve daha iyi bir kodlama deneyimi yaşatır https://www.serhatvarli.com/Content/img/2019920938placeholder.jpg https://www.serhatvarli.com/ https://www.serhatvarli.com/blog-detay/state-and-lifecycle-nedir-67 ReactJS'de "State" ve "Lifecycle" iki önemli konsepttir ve modern web uygulamalarının geliştirilmesinde kilit roller oynarlar. ReactJS 2026-04-04T02:22:08+02:00 message ReactJS'de "State" ve "Lifecycle" iki önemli konsepttir ve modern web uygulamalarının geliştirilmesinde kilit roller oynarlar. State (Durum): Tanımı: State, bir React bileşeninin herhangi bir zamandaki veri durumunu temsil eder. Bu veri, kullanıcı etkileşimleri veya zaman içindeki değişiklikler sonucu değişebilir. Örnek Kullanım: Bir form bileşeni düşünün; kullanıcının girdiği metin, bileşenin state'inde saklanabilir. Bu sayede, kullanıcı girdisine göre bileşenin görünümünü ve davranışını dinamik olarak güncelleyebilirsiniz. Nasıl Çalışır: State, genellikle bileşenin constructor'ında başlatılır ve this.setState fonksiyonu ile güncellenir. State'in değişmesi, bileşenin yeniden render edilmesine sebep olur. Lifecycle (Yaşam Döngüsü): Tanımı: Lifecycle metotlar, bir React bileşeninin doğumundan ölümüne kadar geçen süreçteki çeşitli aşamalarda tetiklenen özel metotlardır. Bu metotlar, bileşenin nasıl davranacağını ve ne zaman güncelleneceğini kontrol eder. Örnek Metotlar: componentDidMount: Bileşen DOM'a eklendikten hemen sonra çağrılır. Genellikle API çağrıları, veri abonelikleri gibi işlemler için kullanılır. componentDidUpdate: Bileşen güncellendiğinde (örneğin, yeni props aldığında veya state değiştiğinde) çağrılır. componentWillUnmount: Bileşen DOM'dan kaldırılmadan hemen önce çağrılır. Burada, aboneliklerin iptali gibi temizlik işlemleri yapılır. Nasıl Çalışır: Lifecycle metotları, bileşen sınıfı içinde tanımlanır ve React tarafından otomatik olarak uygun zamanlarda çağrılır. React'ın bu iki konsepti, bileşen tabanlı geliştirme yaklaşımının temel taşlarından biridir ve dinamik, interaktif kullanıcı arayüzleri oluşturmak için esneklik ve güç sağlar. State, bileşenin iç durumunu yönetirken, lifecycle metotları bileşenin yaşam sürecini yönetir. https://www.serhatvarli.com/blog-detay/components-and-props-nedir-66 ReactJS'de "Components and Props" (Bileşenler ve Özellikler), uygulamanızı bağımsız ve yeniden kullanılabilir parçalar halinde inşa etmenizi sağlayan temel kavramlardır. ReactJS 2026-04-04T02:22:08+02:00 message ReactJS'de "Components and Props" (Bileşenler ve Özellikler), uygulamanızı bağımsız ve yeniden kullanılabilir parçalar halinde inşa etmenizi sağlayan temel kavramlardır. İşte bu iki kavram hakkında detaylı bilgi: Bileşenler (Components) Tanım: Bileşenler, React'te kullanıcı arayüzünü oluşturan bağımsız ve yeniden kullanılabilir parçalardır. Bir React uygulaması, genellikle birçok bileşenden oluşur. Türleri: Fonksiyonel Bileşenler: JavaScript fonksiyonları olarak tanımlanırlar ve props olarak adlandırılan girdiler alıp, görüntülenmesi gereken React elemanlarını döndürürler. Örnek: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Sınıf Bileşenleri: JavaScript sınıfları olarak tanımlanırlar ve render metodu içinde görüntülenmesi gereken React elemanlarını döndürürler. Örnek: class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } Yeniden Kullanım ve Bileşim: Bileşenler, kodun yeniden kullanılabilirliğini artırır. Küçük bileşenler büyük bileşenlerde birleştirilebilir. Özellikler (Props) Tanım: Props, bileşenlere veri aktarmak için kullanılır. Bileşenler, kendilerine aktarılan propsları okuyabilir ama değiştiremezler (değişmezlerdir). Kullanım: Bir bileşene prop aktarmak, HTML etiketlerine özellik eklemek gibidir. Örnek: <Welcome name="Sara" /> burada name bir prop'tur. Bileşenler Arası İletişim: Üst bileşenden alt bileşenlere veri aktarımı props aracılığıyla yapılır. Böylece bileşenler arası iletişim sağlanır. Okuma ve Kullanım: Fonksiyonel bileşenlerde props, fonksiyonun parametresi olarak geçilir. Sınıf bileşenlerinde ise this.props üzerinden erişilir. Örnek javascript function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahit" /> <Welcome name="Eda" /> </div> ); } Bu örnekte, Welcome bileşeni farklı isimlerle üç kez kullanılıyor. Her kullanım, name prop'u ile farklı bir isim alıyor. App bileşeni bu Welcome bileşenlerini bir araya getirerek birleşik bir UI oluşturuyor. Bileşenler ve props, React uygulamalarının modüler ve etkili bir şekilde inşa edilmesini sağlar, böylece karmaşık kullanıcı arayüzleri daha yönetilebilir ve anlaşılır hale gelir. https://www.serhatvarli.com/blog-detay/rendering-elements-nedir-65 ReactJS'de "Rendering Elements" (Elemanları Render Etme), bir web arayüzünde kullanıcıya göstermek için React elemanlarının ekrana çizilmesi işlemidir. ReactJS 2026-04-04T02:22:08+02:00 message ReactJS'de "Rendering Elements" (Elemanları Render Etme), bir web arayüzünde kullanıcıya göstermek için React elemanlarının ekrana çizilmesi işlemidir. React elemanları, genellikle HTML öğelerini temsil eden hafif, basit nesnelerdir. Bu elemanlar, React'ın ReactDOM.render() fonksiyonu kullanılarak DOM'a yerleştirilir. İşte bu süreç hakkında daha ayrıntılı bir açıklama: Eleman Oluşturma: React'te, her şey bir eleman olarak başlar. Bir div, span, button gibi HTML etiketlerini veya özel React bileşenlerini temsil edebilirler. Örneğin, const element = <h1>Hello, world!</h1>; ifadesi bir h1 elemanı oluşturur. Elemanı Render Etme: Elemanı ekrana çıkarmak için, React'ın ReactDOM.render() metodunu kullanırsınız. Bu metod, oluşturulan elemanı ve DOM'da elemanın yerleştirileceği bir hedef alır. Örneğin: ReactDOM.render(element, document.getElementById('root'));. Bu kod, element isimli elemanı id'si root olan DOM düğümüne yerleştirir. Reaktif Güncellemeler: React elemanları değişmezdir; bir kez oluşturulduktan sonra çocukları veya özellikleri değiştirilemez. Ancak, UI'ı güncellemek istediğinizde, yeni bir eleman oluşturup ReactDOM.render() ile tekrar render edebilirsiniz. React, önceki ve yeni elemanları karşılaştırarak sadece gerekli olan DOM güncellemelerini yapar. Sanal DOM: React, gerçek DOM'a dokunmadan önce değişiklikleri bir "Sanal DOM" üzerinde gerçekleştirir. Bu, performansı artırır çünkü gerçek DOM'la etkileşim pahalıdır. React, sanal DOM'daki değişiklikleri algılar ve en verimli şekilde gerçek DOM'u günceller. Bileşen Tabanlı Yaklaşım: React, UI'ları bağımsız, yeniden kullanılabilir bileşenler olarak inşa etmeye teşvik eder. Her bileşen kendi durumunu yönetebilir ve bağımsız olarak render edilebilir. Bu, ReactJS'deki "Rendering Elements" sürecinin temel bir özetidir ve React uygulamalarının temelini oluşturur. Bu süreç, web uygulamalarının dinamik ve etkileşimli kullanıcı arayüzlerini kolayca oluşturmasını sağlar. https://www.serhatvarli.com/blog-detay/introducing-jsx-nedir-64 "Introducing JSX" ReactJS'de, JSX'in tanıtımını ve kullanımını ifade eder. ReactJS 2026-04-04T02:22:08+02:00 message "Introducing JSX" ReactJS'de, JSX'in tanıtımını ve kullanımını ifade eder. JSX, JavaScript'i HTML benzeri bir sözdizimiyle genişleten bir ReactJS özelliğidir. Temel olarak, web geliştiricilerinin kullanıcı arayüzlerini daha sezgisel ve okunabilir bir şekilde tanımlamalarını sağlar. Geleneksel JavaScript ile HTML arasında bir köprü görevi görür ve React bileşenlerinin yapısını tanımlamak için kullanılır. JSX'in Öne Çıkan Özellikleri: HTML Benzeri Sözdizimi: JSX, HTML'e benzer bir sözdizimine sahiptir. Bu, geliştiricilerin HTML etiketleriyle benzer bir şekilde kullanıcı arayüzleri oluşturmasını sağlar. JavaScript İfadeleri: JSX içerisinde JavaScript ifadeleri {} içine alınarak kullanılabilir. Bu, dinamik içeriklerin kolayca kullanıcı arayüzüne entegre edilmesini sağlar. Bileşen Yapısı: JSX, React bileşenlerinin yapısal tanımını sağlar. Bileşenler, HTML etiketleri gibi JSX içerisinde kullanılabilir. Öznitelikler ve Olaylar: JSX, HTML özniteliklerine benzer öznitelikler (props) ve olayları (events) destekler. Böylece, bileşenlere özellikler aktarılabilir ve kullanıcı etkileşimleri yönetilebilir. Daha İyi Okunabilirlik ve Bakım: JSX, bileşenlerin yapısını ve davranışını aynı yerde tutarak kodun okunabilirliğini ve bakımını kolaylaştırır. Basit bir JSX örneği: jsx const element = <h1>Hello, world!</h1>; Bu kod parçası, h1 başlık etiketi içinde "Hello, world!" metnini içeren bir JSX ifadesidir. JSX, bu tarz yapıları daha doğal ve anlaşılır kılarak React geliştiricilerinin verimliliğini arttırır. JSX, yalnızca bir sözdizimidir ve tarayıcılar tarafından doğrudan anlaşılamaz. Bu nedenle, React uygulamaları yayınlanmadan önce bir derleyici (genellikle Babel) tarafından normal JavaScript koduna dönüştürülür. https://www.serhatvarli.com/blog-detay/reactjs-hello-world-63 "ReactJS Hello World" temelde, ReactJS kullanarak basit bir uygulama oluşturmanın ilk adımıdır. ReactJS 2026-04-04T02:22:08+02:00 message "ReactJS Hello World" temelde, ReactJS kullanarak basit bir uygulama oluşturmanın ilk adımıdır. ReactJS, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. "Hello World" programı, programlama öğreniminde genellikle ilk adım olarak kabul edilir ve yeni bir programlama dili veya teknolojisine giriş yapmak için kullanılır. ReactJS'de "Hello World" programı genellikle şu adımları içerir: React Kütüphanesinin Eklenmesi: React ve ReactDOM kütüphaneleri projeye dahil edilir. Bu, genellikle bir HTML dosyasına React kütüphanelerinin <script> etiketleri ile eklenmesi veya bir Node.js projesinde npm veya yarn ile kütüphanelerin kurulması ile yapılır. Bir Root DOM Elemanının Oluşturulması: HTML'de, React bileşenlerinin eklenmesi için bir kök (root) DOM elemanı oluşturulur. Bu genellikle bir <div> etiketidir. React Bileşeninin Yazılması: En basit haliyle bir React bileşeni, ekranda gösterilecek içeriği tanımlar. "Hello World" örneğinde, bu genellikle sadece "Hello, World!" metnini döndüren bir fonksiyondur. ReactDOM ile Bileşenin Sayfaya Render Edilmesi: ReactDOM.render() fonksiyonu kullanılarak, oluşturulan React bileşeni, belirlenen kök DOM elemanına eklenir. jsx import React from 'react'; import ReactDOM from 'react-dom'; function HelloWorld() { return <h1>Hello, World!</h1>; } ReactDOM.render(<HelloWorld />, document.getElementById('root')); Bu kod, bir web sayfasında "Hello, World!" başlığını gösterir. Bu, ReactJS'nin temel kullanımını gösterir ve yeni başlayanlar için iyi bir başlangıç noktasıdır. https://www.serhatvarli.com/blog-detay/web-component-nedir-62 Vue.js Web Component, Vue.js kullanan bir web uygulaması geliştirme sürecinde kullanılan, yeniden kullanılabilir ve kendine özgü bir yapıdır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js Web Component, Vue.js kullanan bir web uygulaması geliştirme sürecinde kullanılan, yeniden kullanılabilir ve kendine özgü bir yapıdır. Vue.js, modern web uygulamaları geliştirmek için kullanılan popüler bir JavaScript çerçevesidir. Web Componentler, Vue.js'in temel yapı taşlarından birini oluşturur ve genellikle şu özelliklere sahiptir: Yeniden Kullanılabilirlik: Bir Vue.js Web Component'i, farklı projelerde veya uygulamanın farklı bölümlerinde kolayca yeniden kullanılabilir. Bu, kod tekrarını azaltmaya ve geliştirme sürecini hızlandırmaya yardımcı olur. Encapsulation: Componentler, kendi HTML, CSS ve JavaScript kodlarını içerir. Bu, bir component'in uygulamanın geri kalanından bağımsız olarak geliştirilmesini ve güncellenmesini sağlar. Reaktif Veri Bağlama: Vue.js, veri ve UI arasında reaktif bağlamalar sağlar. Bu, veriler değiştiğinde, UI'nin otomatik olarak güncellenmesini sağlar. Esnek İletişim: Componentler arasında veri ve olayların iletilmesi, props ve events kullanılarak kolayca gerçekleştirilebilir. Bu, componentlerin birbirleriyle etkileşimini ve entegrasyonunu kolaylaştırır. Özelleştirilebilirlik: Vue.js componentleri, belirli ihtiyaçlara uyacak şekilde özelleştirilebilir. Bu, farklı senaryolarda esnek bir kullanım sağlar. Özetle, Vue.js Web Component'leri, web uygulamalarını modüler, bakımı kolay ve etkileşimli bir şekilde geliştirmek için güçlü araçlar sunar. Bu componentler sayesinde geliştiriciler, daha hızlı ve verimli bir şekilde çalışabilirler. https://www.serhatvarli.com/blog-detay/vnode-nedir-61 Vue.js'te bir VNode, ya da "Virtual Node", sanal DOM'da kullanılan bir objedir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'te bir VNode, ya da "Virtual Node", sanal DOM'da kullanılan bir objedir. Sanal DOM, gerçek DOM'un hafif bir temsilcisidir ve DOM güncellemelerinin daha etkili bir şekilde yapılmasına olanak tanır. VNode nesneleri, DOM'da gerçek düğümleri temsil eder, ancak daha az maliyetlidirler çünkü gerçek DOM işlemlerini içermezler. Bir VNode şunları yapabilir: DOM Elemanlarını Temsil Etme: Her VNode bir DOM düğümünü temsil eder. Örneğin, bir div, span veya herhangi bir HTML elementi. Componentleri Temsil Etme: Vue componentleri de VNode ile temsil edilir. Bu, Vue'nun component hiyerarşisini sanal DOM üzerinde yönetmesine olanak tanır. Reaktif Güncellemeler Sağlama: Vue, uygulama durumunda bir değişiklik olduğunda, hangi VNode'ların etkilendiğini tespit eder ve sadece bu düğümleri gerçek DOM'da günceller. Bu, tüm DOM'un yeniden yüklenmesinden daha verimlidir. Slotlar ve Çocuklarla Çalışma: VNodelar, Vue'deki slot mekanizmasının ve çocuk componentlerin yönetiminde temel bir rol oynar. Özetle, VNode, Vue.js'in sanal DOM implementasyonunun bir parçasıdır ve performansı artırmak, reaktif güncellemeleri kolaylaştırmak ve Vue uygulamalarının yapısal özelliklerini yönetmek için kullanılır. https://www.serhatvarli.com/blog-detay/virtual-dom-nedir-60 Vue.js'teki Sanal DOM (Virtual DOM) bir web uygulamasının kullanıcı arayüzünün hafif bir temsilidir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'teki Sanal DOM (Virtual DOM) bir web uygulamasının kullanıcı arayüzünün hafif bir temsilidir. Sanal DOM, Vue.js gibi modern JavaScript çerçevelerinde yaygın olarak kullanılan bir kavramdır ve web uygulamalarının performansını ve verimliliğini artırmak amacıyla geliştirilmiştir. İşte bu konseptin temel unsurları: Sanal DOM'un Tanımı: Sanal DOM, gerçek DOM'un (Document Object Model) hafif bir kopyasıdır. DOM, bir web sayfasının yapısını ve içeriğini temsil eder. Sanal DOM ise, bu yapının JavaScript nesneleri kullanılarak oluşturulan bir temsilidir. Neden Sanal DOM Kullanılır? Gerçek DOM ile doğrudan etkileşim, performans açısından pahalı olabilir, özellikle büyük ve karmaşık web uygulamalarında. DOM güncellemeleri yavaş ve kaynak yoğun olabilir. Sanal DOM, bu etkileşimleri optimize ederek web uygulamalarının daha hızlı çalışmasını sağlar. Çalışma Mekanizması: Vue.js, uygulamanın durumunda bir değişiklik olduğunda, bu değişiklikleri önce Sanal DOM üzerinde gerçekleştirir. Daha sonra, Sanal DOM'daki değişiklikleri gerçek DOM ile karşılaştırır ve sadece gerekli olan güncellemeleri gerçek DOM'a uygular. Bu süreç, "diffing" adı verilen bir algoritma ile gerçekleştirilir. Performans Artışı: Sanal DOM kullanımı, gereksiz DOM manipülasyonlarını ve güncellemelerini azaltarak, uygulamanın performansını iyileştirir. Bu, özellikle kullanıcı etkileşimlerine hızlı yanıt veren dinamik uygulamalar için önemlidir. Reaktif Güncellemeler: Vue.js, reaktif bir sistem kullanır. Bu, uygulama verilerindeki değişikliklerin otomatik olarak algılanarak, ilgili bileşenlerin güncellenmesini sağlar. Sanal DOM, bu reaktif güncellemelerin hızlı ve verimli bir şekilde gerçekleştirilmesine yardımcı olur. Özetle, Vue.js'teki Sanal DOM, web uygulamalarının daha hızlı ve etkili bir şekilde oluşturulmasını sağlayan bir tekniktir. Bu, geliştiricilere daha iyi kullanıcı deneyimi sunan, hızlı ve duyarlı web uygulamaları geliştirme olanağı tanır. https://www.serhatvarli.com/blog-detay/vdom-nedir-59 Vue.js'in Sanal DOM (VDOM) kavramı, web uygulama performansını ve verimliliğini artırmak için kullanılan bir tekniktir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'in Sanal DOM (VDOM) kavramı, web uygulama performansını ve verimliliğini artırmak için kullanılan bir tekniktir. Bu kavram, modern web uygulama geliştirmede önemli bir rol oynar. İşte temel noktalar: Sanal DOM Nedir? Sanal DOM, gerçek DOM'un hafif bir kopyasıdır. Vue.js ve diğer modern JavaScript çerçeveleri, DOM güncellemelerini daha verimli hale getirmek için Sanal DOM'u kullanır. Gerçek DOM İle Karşılaştırma: Gerçek DOM ile etkileşim, özellikle büyük veya karmaşık arayüzlerde yavaş olabilir. Sanal DOM, bu etkileşimleri hızlandırmak için kullanılır. Gerçek DOM'da yapılacak her güncellemenin aksine, Sanal DOM'da yapılan değişiklikler hızlı ve maliyetsizdir. Güncelleme Süreci: Bir Vue bileşeninde veri değiştiğinde, Vue önce bu değişiklikleri Sanal DOM'da gerçekleştirir. Daha sonra, Sanal DOM'daki değişiklikleri gerçek DOM ile karşılaştırarak sadece gerekli olan değişiklikleri gerçek DOM'a uygular. Bu süreç, "diffing" olarak bilinir. Performans Avantajları: Sanal DOM kullanımı, uygulamanın performansını önemli ölçüde artırabilir. Gereksiz DOM güncellemelerinin önlenmesi, sayfa yüklenme süresini ve tepki süresini iyileştirir. Reaktif Veri Güncellemeleri: Vue.js, reaktif veri sistemi ile bileşenlerdeki veri değişikliklerini otomatik olarak takip eder. Veri değiştiğinde, Vue Sanal DOM'u günceller ve ardından gerçek DOM ile senkronize eder. Sanal DOM, modern web geliştirmede önemli bir optimizasyon aracıdır ve Vue.js'in kullanıcı arayüzlerini hızlı ve etkili bir şekilde oluşturmasını sağlar. Bu yaklaşım, geliştiricilerin daha hızlı ve duyarlı uygulamalar geliştirmelerine olanak tanır. https://www.serhatvarli.com/blog-detay/template-ref-nedir-58 Vue.js'de ref özelliği, bileşenlerin veya DOM elemanlarının referanslarını (references) tutmak için kullanılır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de ref özelliği, bileşenlerin veya DOM elemanlarının referanslarını (references) tutmak için kullanılır. ref özelliği, Vue bileşenlerinde veya düz HTML elemanlarında kullanılabilir ve bu elemanlara JavaScript kodu üzerinden doğrudan erişim sağlar. template içinde kullanıldığında, bu özellik Vue'nun reaktif sisteminden bağımsız olarak DOM elemanlarına veya bileşen örneklerine erişim sağlar. İşte ref özelliğinin temel kullanım özellikleri: DOM Elemanlarına Erişim: Bir HTML elemanına ref attribute'u ekleyerek, bu elemana Vue instance'ının this.$refs özelliği üzerinden erişebilirsiniz. Örneğin, <input ref="myInput"> tanımlaması yapıldığında, this.$refs.myInput kodu ile bu input elemanına erişebilirsiniz. Bileşen Örneklerine Erişim: Eğer ref bir Vue bileşenine uygulanırsa, this.$refs üzerinden o bileşenin instance'ına (örneğine) erişebilirsiniz. Bu, bileşenin metodlarını veya verilerini doğrudan kullanmanıza olanak tanır. Reaktif Olmayan: ref özelliği reaktif bir özellik değildir. Yani, ref ile bağlanan bir eleman değiştiğinde, bu değişiklikler Vue'nun reaktif sistemine otomatik olarak yansımaz. Component Lifecycle: ref ile bağlanan elemanlar veya bileşenler, Vue bileşenlerinin yaşam döngüsü (lifecycle) bağlamında kullanılabilir. Örneğin, bileşen tamamen oluşturulduktan (mounted) sonra ref aracılığıyla bir DOM elemanına erişebilirsiniz. ref özelliği, özellikle DOM manipülasyonları veya çocuk bileşenlerle doğrudan etkileşim gerektiren durumlar için kullanışlıdır. Ancak, Vue'nun reaktif sistemi ve deklaratif render mantığı çerçevesinde, ref kullanımının mümkün olduğunca sınırlı tutulması tavsiye edilir. https://www.serhatvarli.com/blog-detay/slot-nedir-57 Vue.js'de "slot" kavramı, bileşenler arasında içerik dağıtımını sağlamak için kullanılır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de "slot" kavramı, bileşenler arasında içerik dağıtımını sağlamak için kullanılır. Slotlar, bir bileşenin şablonunda tanımlanır ve bu slotları kullanan ebeveyn bileşenler tarafından doldurulabilirler. Bu, bileşenler arası içerik entegrasyonunu daha esnek ve yeniden kullanılabilir hale getirir. İşte Vue.js slotlarının temel özellikleri: Varsayılan Slotlar: Eğer bir bileşenin şablonunda <slot></slot> etiketi kullanılmışsa, bu, ebeveyn bileşenlerin içeriğini kabul edebileceği bir yer olduğunu gösterir. Ebeveyn bileşen içeriği, slot etiketi arasına yerleştirilir. İsimlendirilmiş Slotlar: Slotlara isim vermek, daha spesifik içerik yerleştirme imkanı sunar. Örneğin, <slot name="header"></slot> şeklinde bir tanımlama yaparak, ebeveyn bileşenlerin sadece header isimli slot için özel içerik sağlamasına izin verebilirsiniz. Scope Slotlar: Bu slot türü, çocuk bileşenden veri almak ve bu verileri ebeveyn bileşenin şablonunda kullanmak için kullanılır. Scope slotlar sayesinde, bileşenler arasında daha dinamik bir veri akışı sağlanabilir. Fallback İçerik: Bir slot için ebeveyn bileşenden herhangi bir içerik sağlanmadığında gösterilecek varsayılan içeriği belirleyebilirsiniz. Vue.js slotlarını kullanmak, bileşenlerin esnekliğini ve yeniden kullanılabilirliğini artırır, ve genellikle daha temiz ve anlaşılır kod yapısı sağlar. Bu özellik, özellikle büyük ve karmaşık uygulamalar geliştirirken çok yararlı olabilir. https://www.serhatvarli.com/blog-detay/single-file-component-nedir-56 Vue.js'teki Single-File Components (SFC), Vue.js uygulamalarında kullanılan bir dosya formatıdır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'teki Single-File Components (SFC), Vue.js uygulamalarında kullanılan bir dosya formatıdır. Bu yaklaşım, bir Vue bileşeninin HTML, JavaScript ve CSS gibi farklı teknolojilerini tek bir dosyada birleştirmenize olanak tanır. Genellikle .vue uzantısı ile kaydedilen bu dosyalar, Vue.js ekosisteminde yaygın olarak kullanılır. Single-File Component yapısı şu avantajları sunar: Organizasyon: HTML, JavaScript ve CSS kodlarını tek bir dosyada tutmak, bileşen bazlı geliştirmeyi daha düzenli ve yönetilebilir hale getirir. Modülerlik: Her bileşen kendi içinde izole edilir, bu da kodun tekrar kullanılabilirliğini ve bakımını kolaylaştırır. Geliştirme Kolaylığı: Vue.js'in CLI araçları ve webpack gibi yapılandırmalar, .vue dosyalarını kolayca işleyip uygulamaya entegre eder. Bir Single-File Component genellikle üç ana bölümden oluşur: <template>: Bileşenin HTML yapısını içerir. <script>: Vue instance'ı ve JavaScript kodunu içerir. <style>: Bileşene özgü CSS stil tanımlarını içerir. Bu yapı, Vue.js'in reaktif ve bileşen tabanlı doğasını destekleyerek, modern web uygulamalarının geliştirilmesini daha verimli ve etkili bir hale getirir. https://www.serhatvarli.com/blog-detay/side-effect-nedir-55 Vue.js'de "side effect" (yan etki) terimi, genellikle bir bileşenin durumunun veya verisinin dış etkenler tarafından beklenmedik şekilde değiştirilmesini ifade eder. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de "side effect" (yan etki) terimi, genellikle bir bileşenin durumunun veya verisinin dış etkenler tarafından beklenmedik şekilde değiştirilmesini ifade eder. Vue.js, reaktif bir sistem üzerine kurulmuştur ve bileşenlerin verileri, uygulamanın geri kalanıyla reaktif bağlantılar kurar. Ancak, bazı durumlarda bu reaktif sistemin dışında kalan etkileşimler yan etkilere yol açabilir. İşte Vue.js'de yan etkilerle ilgili bazı önemli noktalar: Dış Kaynaklardan Veri Değişiklikleri: Eğer bir Vue bileşeni, dış bir kaynaktan (örneğin, bir API'den veya global bir değişkenden) veri alıyorsa, bu verinin değişmesi yan etki yaratabilir. Bileşenin beklemediği bir değişiklik, uygulamanın davranışını beklenmedik şekilde etkileyebilir. Global State veya Event Bus Kullanımı: Vue.js uygulamasında global state (genel durum) veya event bus (olay otobüsü) gibi yapılar kullanılıyorsa, bu yapılar aracılığıyla yapılan değişiklikler bazı bileşenlerde yan etkilere sebep olabilir. JavaScript'in Kendi Davranışları: JavaScript'in bazı özellikleri, özellikle setTimeout, setInterval veya DOM olay işleyicileri gibi asenkron işlemler, Vue.js'in reaktif sistemini geçersiz kılabilir ve yan etkilere yol açabilir. Dış Kütüphaneler ve Eklentiler: Vue.js dışından eklenen kütüphaneler veya eklentiler, uygulamanın beklenen akışını bozabilir. Bu kütüphanelerin Vue.js'in reaktif sistemine müdahalesi yan etkilere neden olabilir. Computed Properties ve Watchers: Vue.js'de computed özellikleri ve watchers (izleyiciler), veri değişikliklerine yanıt olarak otomatik olarak çalışır. Eğer bu yapılar yanlış kullanılırsa, beklenmedik yan etkilere yol açabilirler. Yan etkilerin yönetimi, bir Vue.js uygulamasının sağlıklı ve tahmin edilebilir bir şekilde çalışmasını sağlamak için önemlidir. Yan etkiler genellikle kaçınılmazdır, ancak iyi bir tasarım ve uygulama pratikleriyle kontrol altında tutulabilirler. Bu, uygulamanın bakımını ve genişletilmesini kolaylaştırır. https://www.serhatvarli.com/blog-detay/sfc-nedir-54 Vue.js Single File Components (SFC) nedir diye soruyorsanız, Vue.js ile ilgili oldukça önemli bir konseptten bahsediyoruz. VueJS 2026-04-04T02:22:08+02:00 message Vue.js Single File Components (SFC) nedir diye soruyorsanız, Vue.js ile ilgili oldukça önemli bir konseptten bahsediyoruz. Vue.js, popüler bir JavaScript çerçevesidir ve SFC, Vue.js'in kullanımını ve geliştirmeyi kolaylaştıran bir yapıdır. İşte SFC'nin ana özellikleri: Tek Dosya Yapısı: Bir Vue SFC, genellikle .vue uzantısı ile kaydedilen tek bir dosyadır. Bu dosya, bir Vue bileşeninin üç ana bölümünü içerir: template, script ve style. Template Bölümü: Bu kısım, bileşenin HTML yapısını tanımlar. Vue.js'in reaktif özellikleri ve direktifleri burada kullanılır. Script Bölümü: JavaScript kodu bu kısımda yer alır. Bileşenin verileri, yöntemleri, hesaplanmış özellikleri ve yaşam döngüsü kancaları gibi özellikleri bu bölümde tanımlanır. Style Bölümü: Bileşene özel stiller bu bölümde tanımlanır. CSS, SCSS gibi stil dilleri kullanılabilir. Ayrıca, stillerin yalnızca bu bileşene özgü olması için "scoped" özelliği kullanılabilir. Modülerlik ve Yeniden Kullanım: SFC yapısı, Vue bileşenlerinin modüler ve yeniden kullanılabilir olmasını sağlar. Her bileşen kendi içinde tamamlanmış ve bağımsızdır, bu da kodun bakımını ve yönetimini kolaylaştırır. Geliştirme Kolaylığı: Vue SFC'ler, Vue.js projelerinde bileşen tabanlı geliştirmeyi basitleştirir. Geliştiriciler, bileşenlerin yapısını, davranışını ve stilini tek bir dosyada kolayca görebilir ve yönetebilirler. Vue.js SFC'ler, modern web uygulamalarının geliştirilmesinde etkinlik ve düzenlilik sağlayarak, Vue.js'in popülerliğinin temel taşlarından biri haline gelmiştir. https://www.serhatvarli.com/blog-detay/scoped-slot-nedir-53 Vue.js'de "scoped slot" (kapsamlı yuva), bir bileşenin içeriğini dışarıdan gelen verilerle özelleştirmek için kullanılan bir özelliktir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de "scoped slot" (kapsamlı yuva), bir bileşenin içeriğini dışarıdan gelen verilerle özelleştirmek için kullanılan bir özelliktir. Bu, bir ebeveyn bileşenin, çocuk bileşenin içeriğine veri aktarmasına olanak tanır. Temel olarak, ebeveyn bileşen, çocuk bileşenin slot'una belirli bir yapı (HTML, diğer bileşenler, vb.) ve veri gönderebilir. Scoped slot'lar, Vue.js'te yeniden kullanılabilir bileşenler oluştururken esneklik sağlar. Bir bileşenin içeriği, ebeveyn bileşenden geçirilen verilere göre dinamik olarak değişebilir. Bu, birçok farklı durumda aynı bileşeni kullanma esnekliği sağlar. Örnek kullanım: Çocuk Bileşen: Çocuk bileşen bir <slot> etiketi içerir. Bu slot etiketi, scoped slot olarak işaretlenir ve çocuk bileşenden veri geçirmek için kullanılır. vue <!-- ChildComponent.vue --> <template> <div> <slot :user="userData"></slot> </div> </template> <script> export default { data() { return { userData: { name: 'John Doe', age: 30 } }; } }; </script> Ebeveyn Bileşen: Ebeveyn bileşen, çocuk bileşenin slot'una kendi içeriğini ve verisini gönderir. vue <!-- ParentComponent.vue --> <template> <ChildComponent> <template v-slot:default="slotProps"> <p>User Name: {{ slotProps.user.name }}</p> <p>User Age: {{ slotProps.user.age }}</p> </template> </ChildComponent> </template> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent } }; </script> Bu örnekte, ChildComponent bileşeni, kullanıcı verisini içeren bir slot sunar ve ParentComponent bu slot'u, veriyi göstermek için kendi HTML yapısıyla doldurur. Scoped slot kullanımı, bileşenler arası veri iletişimini ve yeniden kullanımı kolaylaştırır. https://www.serhatvarli.com/blog-detay/scheduler-nedir-52 Vue.js için bir "scheduler" (zamanlayıcı), genellikle etkinliklerin, görevlerin veya diğer zaman bağlı verilerin planlanması ve görüntülenmesi için kullanılan bir bileşendir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js için bir "scheduler" (zamanlayıcı), genellikle etkinliklerin, görevlerin veya diğer zaman bağlı verilerin planlanması ve görüntülenmesi için kullanılan bir bileşendir. Vue.js, popüler bir JavaScript framework'ü olduğu için, Vue.js ile uyumlu birçok farklı scheduler kütüphanesi ve bileşeni bulunmaktadır. Vue.js scheduler'lar genellikle takvim benzeri bir arayüz sağlar ve kullanıcılara şu özellikleri sunar: Etkinlikleri Planlama ve Düzenleme: Kullanıcılar, belirli tarih ve saatler için etkinlikler veya görevler oluşturabilir ve düzenleyebilir. Görünüm Seçenekleri: Gün, hafta, ay ve bazen zaman çizelgesi gibi farklı görünüm seçenekleri sunarlar. Etkileşimli Kullanıcı Arayüzü: Kullanıcılar, etkinlikleri sürükleyip bırakarak veya boyutlarını değiştirerek kolayca yönetebilirler. Özelleştirilebilirlik: Genellikle, belirli projelere veya kullanım senaryolarına uyacak şekilde özelleştirilebilirler. Veri Entegrasyonu ve Senkronizasyonu: Çeşitli veri kaynaklarından verileri çekebilir ve bu verileri senkronize tutabilirler. Vue.js scheduler bileşenleri, Vue.js'in reaktif ve bileşen tabanlı yapısını kullanarak, dinamik ve kullanıcı dostu planlama çözümleri sağlar. Bu bileşenler, eğitim programları, etkinlik yönetimi, rezervasyon sistemleri ve benzeri uygulamalarda yaygın olarak kullanılır. Vue.js ekosistemindeki popüler bileşen kütüphanelerinden birkaçı, kullanıma hazır scheduler bileşenleri sunar ve bunlar genellikle kolayca entegre edilebilir ve projelere göre özelleştirilebilir. https://www.serhatvarli.com/blog-detay/render-function-nedir-51 "Render function" (Türkçesi: "render fonksiyonu"), genellikle web geliştirme ve kullanıcı arayüzü tasarımında kullanılan bir terimdir. VueJS 2026-04-04T02:22:08+02:00 message "Render function" (Türkçesi: "render fonksiyonu"), genellikle web geliştirme ve kullanıcı arayüzü tasarımında kullanılan bir terimdir. Bu fonksiyon, bir kullanıcı arayüzü bileşeninin görünümünü oluşturmak için kullanılır. Bir render fonksiyonu, genellikle HTML, CSS ve JavaScript gibi dilleri kullanarak bir web sayfasının veya uygulamanın nasıl görüneceğini ve davranacağını tanımlar. Özellikle React gibi modern JavaScript kütüphanelerinde ve framework'lerinde render fonksiyonları yaygındır. React'te bir sınıf bileşeninin render() metodunda veya fonksiyonel bileşenlerdeki dönüş ifadesinde kullanıcı arayüzünün nasıl görüneceğini tanımlarsınız. Bu fonksiyon, bileşenin durumu veya özellikleri değiştiğinde, yani yeniden render edilmesi gerektiğinde otomatik olarak çağrılır. Render fonksiyonları, web uygulamalarının dinamik ve etkileşimli olmasını sağlar. Kullanıcı etkileşimleri veya veri değişiklikleri olduğunda, bu fonksiyonların yeniden çalıştırılması sayesinde arayüz güncellenir ve kullanıcılara anlık geri bildirim sağlanır. https://www.serhatvarli.com/blog-detay/ref-nedir-50 Vue.js'de ref özelliği, Vue bileşenlerinde veya DOM elemanlarında referanslar oluşturmak için kullanılır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de ref özelliği, Vue bileşenlerinde veya DOM elemanlarında referanslar oluşturmak için kullanılır. Bu özellik, Vue uygulamasının JavaScript kısmından, şablon içindeki belirli bir DOM elemanına veya bileşene doğrudan erişim sağlar. Bu, geleneksel DOM manipülasyonu metodlarına bir alternatif olarak Vue'nun reaktif sistemi içinde kalmanıza yardımcı olur. ref Kullanımı: DOM Elemanlarına Erişim: Şablon içinde bir DOM elemanına ref attribute'u ekleyerek, bu elemana Vue örneği üzerinden erişebilirsiniz. javascript <template> <div ref="myDiv">Merhaba Dünya!</div> </template> <script> export default { mounted() { console.log(this.$refs.myDiv); //DOM elemanına erişim sağlar } } </script> Bileşenlere Erişim: Başka bir bileşene ref attribute'u ekleyerek, o bileşenin örneklemesine (instance) ve onun metodlarına, verilerine erişim sağlayabilirsiniz. javascript <ChildComponent ref="myComponent" /> <script> export default { methods: { doSomething() { this.$refs.myComponent.someMethod(); // ChildComponent üzerinde bir metodu çağırır } } } </script> Önemli Noktalar: $refs Vue örneğinde bir objedir ve ref ile belirlenen elemanlara erişim sağlar. Ancak, bu özellikler reaktif değildir. Yani $refs üzerinde yapılan değişiklikler Vue'nun reaktif sistemine dahil edilmez ve değişiklikleri izlemez. ref, bileşenin ya da DOM elemanının oluşturulduğu anda atanır ve mounted ömrü boyunca erişilebilir olur. beforeMount aşamasında $refs içeriği boştur. Dinamik olarak çok sayıda eleman oluşturuyorsanız (örneğin, v-for ile), her bir elemana benzersiz bir ref atamak yerine, aynı ref ismini kullanarak bir array oluşturabilirsiniz. Vue, her bir eleman için bu array'a bir referans ekleyecektir. Vue.js'te ref kullanımı, özellikle DOM'a doğrudan müdahale gerektiğinde veya çocuk bileşenlerin metodlarını çağırmak gibi durumlarda oldukça yararlıdır. Ancak, Vue'nun reaktif sistemini ve veri akışını bozmamak için dikkatli kullanılmalıdır. https://www.serhatvarli.com/blog-detay/reactivity-api-nedir-49 Vue.js'in Reactivity API'si, Vue.js uygulamalarında veri durumunu yönetmek ve kullanıcı arayüzünü otomatik olarak güncellemek için kullanılan bir sistemdir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'in Reactivity API'si, Vue.js uygulamalarında veri durumunu yönetmek ve kullanıcı arayüzünü otomatik olarak güncellemek için kullanılan bir sistemdir. Vue.js, reaktif veri bağlama ve DOM güncellemeleri için bir dizi araç ve yaklaşım sunar. Bu özellikler, uygulamanın veri durumundaki değişiklikleri izlemesine ve bu değişikliklere tepki göstermesine olanak tanır. Reactivity API'nin temel bileşenleri şunlardır: Reactive Data: Vue.js, JavaScript nesnelerini "reaktif" hale getirir. Bu, bir nesnenin özelliklerindeki değişikliklerin otomatik olarak izlenebilmesi ve bunlara tepki verilebilmesi anlamına gelir. Computed Properties: Hesaplanan özellikler, diğer veri kaynaklarına bağlı olarak dinamik olarak hesaplanan reaktif verilerdir. Bu özellikler, temel veriler değiştiğinde otomatik olarak yeniden hesaplanır. Watchers: Vue.js'te izleyiciler, belirli veri ya da hesaplanan özelliklerdeki değişikliklere yanıt olarak özel davranışlar gerçekleştirmek için kullanılır. Bu, veri değişikliklerine daha karmaşık tepkiler vermeyi mümkün kılar. Directives: Vue.js, DOM güncellemelerini yönetmek için özel HTML öznitelikleri sağlar. Örneğin, v-bind ve v-model direktifleri, HTML öğelerini Vue.js veri modeline bağlamak için kullanılır. Virtual DOM: Vue.js, DOM güncellemelerini optimize etmek için sanal DOM kullanır. Bu, gerçek DOM üzerinde minimum değişiklik yaparak uygulamanın performansını artırır. Vue.js'in Reactivity API'si, modern web uygulamalarının dinamik ve etkileşimli kullanıcı arayüzleri oluşturmasına olanak tanırken, kod karmaşıklığını ve performans maliyetlerini azaltır. Bu API, veri akışını ve kullanıcı arayüzü güncellemelerini kolaylaştırarak geliştiricilere zaman kazandırır ve daha sezgisel bir geliştirme deneyimi sunar. https://www.serhatvarli.com/blog-detay/reactivity-nedir-48 Vue.js'de reaktivite (reactivity), uygulamanın veri değişikliklerine otomatik olarak tepki vermesini sağlayan bir sistemdir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de reaktivite (reactivity), uygulamanın veri değişikliklerine otomatik olarak tepki vermesini sağlayan bir sistemdir. Bu sistem, Vue.js'in temelini oluşturur ve uygulamanın veri durumunu etkili bir şekilde yönetmesine imkan tanır. İşte Vue.js reaktivite sisteminin ana özellikleri: Reaktif Veri: Vue, uygulamanın veri modelini izler ve veri öğelerinde yapılan değişiklikleri otomatik olarak algılar. Bu veri öğeleri, genellikle Vue örneklerinin data fonksiyonunda tanımlanır. Bağımlılık İzleme: Vue, veri öğelerinin kullanıldığı yerleri izler. Böylece, bir veri öğesi değiştiğinde, bu veriye bağlı olan tüm bileşenler ve hesaplamalar otomatik olarak güncellenir. Reaktif Getter ve Setterlar: Vue, veri öğelerini reaktif yapmak için getter ve setter metodları kullanır. Bu metodlar, veriye erişildiğinde ve veri değiştiğinde tetiklenir, böylece Vue reaktivite sistemi devreye girer. Hesaplanmış Özellikler (Computed Properties): Hesaplanmış özellikler, diğer veri öğelerine bağlı olan ve bu veri öğelerindeki değişikliklere bağlı olarak yeniden hesaplanan reaktif özelliklerdir. Bu özellikler, verimlilik açısından önemlidir çünkü yalnızca bağımlı oldukları veriler değiştiğinde yeniden hesaplanırlar. İzleyiciler (Watchers): İzleyiciler, belirli veri öğeleri üzerindeki değişiklikleri izlemek ve bu değişikliklere yanıt vermek için kullanılır. Örneğin, bir veri öğesi değiştiğinde belirli bir işlemi tetiklemek için kullanılabilirler. Olay Döngüsü ve Asenkron Güncellemeler: Vue, veri değişikliklerini asenkron olarak işler, bu da uygulamanın verimli çalışmasını sağlar. Veri değişiklikleri bir olay döngüsünde sıraya konur ve etkin bir şekilde işlenir. Reaktivite sistemi sayesinde, Vue.js geliştiricilere, veri ve kullanıcı arayüzü arasında güçlü ve sezgisel bir bağlantı sağlayarak, dinamik ve interaktif web uygulamaları oluşturma imkanı sunar. Bu sistem, modern web geliştirmede önemli bir kolaylık ve verimlilik getirir. https://www.serhatvarli.com/blog-detay/reactive-effect-nedir-47 Vue.js'de "reaktif etki" (reactive effect), veri değişikliklerine yanıt olarak otomatik olarak yürütülen fonksiyonları ifade eder VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de "reaktif etki" (reactive effect), veri değişikliklerine yanıt olarak otomatik olarak yürütülen fonksiyonları ifade eder. Bu kavram, Vue.js'in reaktif sistemine dayanır. İşte temel özellikleri: Reaktif Veri: Vue, bir uygulamanın veri modelini reaktif olarak yönetir. Bu, bir veri öğesi değiştiğinde, Vue bu değişikliğin farkına varır. Etki Fonksiyonları (Effects): Bu, veri değişikliklerine yanıt olarak çalışan fonksiyonlardır. Örneğin, bir veri öğesi değiştiğinde, ilgili DOM güncellemeleri veya hesaplamaları tetikleyebilir. Bağımlılık İzleme: Vue, hangi reaktif verinin hangi etkileri tetiklediğini izler. Böylece, bir veri öğesi değiştiğinde, yalnızca o veriye bağlı etkileri yürütür. Otomatik Yeniden Hesaplama: Bir veri öğesi değiştiğinde, Vue otomatik olarak ilgili etkileri yeniden çalıştırır. Bu, veriler ve kullanıcı arayüzü arasında sürekli bir senkronizasyon sağlar. Kullanım Kolaylığı: Vue.js, bu reaktif sistemi geliştirici için şeffaf ve kolay kullanılır bir şekilde sunar. Geliştiricilerin büyük bir kısmı bu mekanizmanın iç işleyişini düşünmeden uygulamalarını oluşturabilirler. Özetle, Vue.js'de reaktif etki, uygulamanın veri değişikliklerine akıllıca ve verimli bir şekilde yanıt vermesini sağlayan bir mekanizmadır. Bu, modern web uygulamalarının dinamik ve interaktif olmasını kolaylaştırır. https://www.serhatvarli.com/blog-detay/provide-inject-nedir-46 Vue.js'de provide ve inject seçenekleri, bileşen hiyerarşisinde derinlemesine yerleşmiş bileşenler arasında veri aktarmak için kullanılır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de provide ve inject seçenekleri, bileşen hiyerarşisinde derinlemesine yerleşmiş bileşenler arasında veri aktarmak için kullanılır. Bu özellikler, özellikle büyük ve karmaşık uygulamalarda, doğrudan parent-child ilişkisi olmayan bileşenler arasında veri paylaşımını kolaylaştırır. provide ve inject, Vue.js'in reaktif veri sistemiyle entegre şekilde çalışır ve veri akışını yönetmek için güçlü bir yöntem sunar. Provide provide seçeneği, bir bileşenin alt bileşenlerine veri veya metot sağlamak için kullanılır. Sağlanan veri veya metot, hiyerarşide daha alt seviyedeki tüm bileşenler tarafından erişilebilir hale gelir. Bir bileşen içinde provide fonksiyonu tanımlanır ve bu fonksiyon, sağlanacak verileri veya metotları döndürür: javascript export default { provide() { return { sharedData: this.someData }; }, data() { return { someData: 'Bu veri alt bileşenlerle paylaşılacak' }; } }; Inject inject seçeneği, bir üst bileşen tarafından provide ile sağlanan veriyi veya metodu kullanmak için alt bileşenlerde tanımlanır. inject kullanılarak, bir üst bileşenden sağlanan veri veya metot doğrudan alt bileşen içinde kullanılabilir hale gelir. javascript export default { inject: ['sharedData'], mounted() { console.log(this.sharedData); //"Bu veri alt bileşenlerle paylaşılacak" çıktısını verir } }; Kullanım Senaryoları ve Limitler provide ve inject özellikle geniş bileşen ağaçlarında, doğrudan üst-alt bileşen ilişkisi olmayan durumlarda yararlıdır. Bu yöntem, genellikle global durum yönetimi için bir alternatif olarak değil, özel durumlarda kullanılır. provide ve inject, reaktif değillerdir, yani provide ile sağlanan veri değiştiğinde, bu değişiklik otomatik olarak inject yoluyla erişen bileşenlere yansımaz. Ancak, sağlanan veri bir reaktif obje ise (örneğin, Vue'nun reactive fonksiyonu ile oluşturulmuşsa), bu veride yapılan değişiklikler reaktif olarak yansır. provide ve inject kullanımı, bazen uygulamanın takip edilmesini zorlaştırabilir, çünkü veri akışı doğrudan görünmez ve Vue devtools üzerinde de doğrudan takip edilemez. Bu nedenle, bu özellikleri dikkatli ve gerektiğinde kullanmak önemlidir. https://www.serhatvarli.com/blog-detay/prop-nedir-45 Vue.js'de bir "prop" (kısa for "property"), bir bileşenden diğerine veri aktarmak için kullanılan bir mekanizmadır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de bir "prop" (kısa for "property"), bir bileşenden diğerine veri aktarmak için kullanılan bir mekanizmadır. Genellikle, bir üst bileşenden (parent) bir alt bileşene (child) veri geçmek için kullanılır. Props, Vue.js'in reaktif veri akışının temel bir parçasıdır ve bileşenler arasında tek yönlü bir veri bağlantısı oluşturur. Prop'ların temel özellikleri şunlardır: Tek Yönlü Veri Akışı: Prop'lar, üst bileşenden alt bileşene doğru tek yönlü bir veri akışı sağlar. Alt bileşen, gelen prop'u okuyabilir ama doğrudan değiştiremez. Eğer alt bileşen, prop üzerinde bir değişiklik yapmak istiyorsa, genellikle bir olay (event) yayınlayarak bu bilgiyi üst bileşene iletir. Validasyon ve Tip Kontrolü: Vue.js, prop'lar için tip kontrolü ve validasyon sağlar. Bir bileşen, kabul ettiği prop'ların tiplerini, zorunlu olup olmadıklarını ve varsayılan değerlerini tanımlayabilir. Bu, bileşenlerin daha güvenilir ve hata karşı daha dayanıklı olmasını sağlar. Reaktiflik: Prop'lar Vue'nun reaktif sistemine dahildir. Bir üst bileşende bir prop'un değeri değiştiğinde, bu değişiklik otomatik olarak ilgili alt bileşene yansıtılır ve ilgili bileşen yeniden render edilir. Özelleştirilebilirlik: Prop'lar, bileşenleri özelleştirmek ve yeniden kullanılabilir hale getirmek için kullanılır. Farklı veriler ile aynı bileşeni tekrar tekrar kullanabilirsiniz, bu da kod tekrarını azaltır ve uygulamanın bakımını kolaylaştırır. Prop'ları tanımlamak için, bir bileşenin props seçeneğinde, kabul edeceği prop'ların isimlerini ve isteğe bağlı olarak tiplerini, varsayılan değerlerini ve diğer validasyon kurallarını belirtirsiniz. Örneğin: html Vue.component('my-component', { props: { // Basit tanımlama title: String, // Tip ve varsayılan değer ile daha detaylı tanımlama likes: { type: Number, default: 0 }, //Zorunlu ve tip kontrolü ile tanımlama isPublished: { type: Boolean, required: true } } }); Bu şekilde, bileşenler arasında temiz ve anlaşılır bir veri akışı sağlanmış olur. https://www.serhatvarli.com/blog-detay/plugin-nedir-44 Vue.js plugin, Vue.js uygulamalarında kullanılmak üzere tasarlanmış bir ek özellik veya işlevsellik setidir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js plugin, Vue.js uygulamalarında kullanılmak üzere tasarlanmış bir ek özellik veya işlevsellik setidir. Genellikle, Vue.js çekirdek yeteneklerini genişletmek, yeniden kullanılabilir bileşenler veya direktifler eklemek, veya uygulamaları daha modüler ve esnek hale getirmek için kullanılırlar. Vue.js plugin'leri şunları içerebilir: Global Metodlar veya Özellikler: Plugin, Vue'nun prototipine global metodlar veya özellikler ekleyebilir. Bu, tüm Vue örneklerinde bu metodların veya özelliklerin kullanılabilmesini sağlar. Özel Direktifler: Vue.js, özel direktifler yoluyla DOM üzerinde daha fazla kontrol sağlayabilir. Plugin'ler bu tür direktifler ekleyerek, özel davranışlar veya etkileşimler sunabilir. Filtreler: Vue.js, veri biçimlendirmesi için filtreler kullanır. Plugin'ler, uygulamalarda kullanılmak üzere yeni filtreler ekleyebilir. Bileşenler: Yeniden kullanılabilir bileşenler veya UI kitleri, plugin'ler aracılığıyla Vue.js uygulamalarına entegre edilebilir. Mixin'ler: Mixin'ler, Vue bileşenlerine işlevsellik eklemek için kullanılır. Plugin'ler, global mixin'ler sağlayarak, tüm bileşenlere ortak işlevsellikler ekleyebilir. Uygulama Seçenekleri: Bazı plugin'ler, Vue uygulamasının başlangıç aşamasında özel konfigürasyon veya işlevsellik eklemek için kullanılabilir. Vue.js plugin'lerinin kullanımı, Vue.use() metodu ile yapılır. Bu metod, plugin'leri Vue uygulamasına entegre etmeyi ve gerekirse başlangıçta bazı ayarlar yapmayı sağlar. Örneğin, bir yönlendirme kütüphanesi veya durum yönetim kütüphanesi, Vue.js uygulamalarına bu şekilde eklenebilir. https://www.serhatvarli.com/blog-detay/options-api-nedir-43 Vue.js'in Options API'si, Vue bileşenlerini tanımlamak için kullanılan bir yapıdır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'in Options API'si, Vue bileşenlerini tanımlamak için kullanılan bir yapıdır. Vue.js 2 sürümünde tanıtılmış ve popüler hale gelmiştir. Bir Vue bileşeni oluştururken, çeşitli seçenekler (options) tanımlayarak bileşenin nasıl davranacağını belirlersiniz. Bu seçenekler, bileşenin verilerini, özelliklerini, hesaplanmış özelliklerini, yöntemlerini, yaşam döngüsü kancalarını (lifecycle hooks) ve daha fazlasını içerebilir. İşte bazı temel seçenekler: Data: Bileşenin reaktif verilerini tanımlar. Bu veriler, kullanıcı arayüzünde dinamik olarak güncellenir. Methods: Bileşenin yöntemlerini tanımlar. Bu yöntemler, olay işleyicileri (event handlers) gibi çeşitli işlevler için kullanılabilir. Computed: Hesaplanmış özelliklerdir. Veriler üzerinde işlem yaparak yeni veriler üretir ve bu veriler de reaktif özellikler taşır. Watch: Bileşenin belirli verileri veya hesaplanmış özellikleri izlemesini sağlar. İzlenen veri değiştiğinde, belirtilen fonksiyon çalıştırılır. Props: Bileşene dışarıdan veri aktarmak için kullanılır. Üst bileşenden alt bileşenlere veri aktarımında önemlidir. Lifecycle Hooks: Bileşenin yaşam döngüsü boyunca çeşitli aşamalarda çalıştırılan fonksiyonlardır (örneğin created, mounted, updated, destroyed). Components: Bileşen içinde kullanılacak alt bileşenleri tanımlar. Directives: Özel Vue direktiflerini tanımlamak için kullanılır. Filters: Metin formatlaması için kullanılan filtreleri tanımlar (Vue 3'te kaldırılmıştır). Options API, Vue.js'in temelini oluşturur ve genellikle basit ve anlaşılır bir yapı sunar. Vue 3 ile birlikte Composition API da tanıtılmıştır, ancak Options API hala yaygın olarak kullanılmaktadır. Composition API, daha büyük ve karmaşık uygulamalar için daha esnek ve organize bir yapı sağlarken, Options API daha basit ve hızlı başlamak için uygun bir seçenektir. https://www.serhatvarli.com/blog-detay/named-slot-nedir-42 Vue.js'de "named slot" (isimlendirilmiş slot), bir bileşenin farklı içerikler alabilmesi için kullanılan bir yapıdır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de "named slot" (isimlendirilmiş slot), bir bileşenin farklı içerikler alabilmesi için kullanılan bir yapıdır. Standart slotlar, bileşenler arası içerik aktarımı sağlarken, named slotlar bu işlemi daha düzenli ve kontrollü bir şekilde yapmanıza olanak tanır. Bir bileşenin birden fazla slotuna özel içerik yerleştirmek istediğinizde, her bir slot için bir isim belirleyerek, hangi içeriğin hangi slota gideceğini belirleyebilirsiniz. Bu, özellikle karmaşık bileşenlerde içeriği düzenli tutmak için çok yararlıdır. Örnek olarak: html <!-- ParentComponent.vue --> <template> <ChildComponent> <template v-slot:header> <h1>Bu başlık için özel içerik</h1> </template> <template v-slot:default> <p>Bu varsayılan slot içeriği</p> </template> <template v-slot:footer> <footer>Bu footer için özel içerik</footer> </template> </ChildComponent> </template> Bu örnekte, ChildComponent isimli bir bileşen üç farklı named slot (header, default, footer) içeriyor. Ebeveyn bileşen, bu slotları <template v-slot:slot_adı> şeklinde kullanarak her birine özel içerik sağlayabiliyor. Bu sayede, ChildComponent içerisinde bu slotların hangi içeriği göstereceğini kolaylıkla yönetebilirsiniz. https://www.serhatvarli.com/blog-detay/macro-nedir-41 Vue.js macro, Vue.js JavaScript framework'ünü kullanarak web uygulamaları geliştirmede kullanılan bir terimdir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js macro, Vue.js JavaScript framework'ünü kullanarak web uygulamaları geliştirmede kullanılan bir terimdir. Genellikle, Vue.js'de sıkça kullanılan veya tekrar eden işlevselliği basitleştirmek, yeniden kullanılabilir bileşenler oluşturmak veya uygulama geliştirme sürecini hızlandırmak için kullanılan bir dizi kod veya işlev anlamına gelir. Vue.js macro'lar, geliştiricilerin daha az kod yazarak daha fazla işlevsellik elde etmelerine yardımcı olur. Örneğin, bir form elemanının doğrulama mantığını veya bir API'den veri alıp işlemek gibi tekrar eden görevleri otomatikleştirmek için kullanılabilirler. Bu, kod tekrarını azaltır ve uygulamanın okunabilirliğini ve bakımını kolaylaştırır. Vue.js'in kendisi, web arayüzlerini oluşturmak için reaktif bileşenler ve deklaratif render etme gibi özellikler sunan ilerici bir JavaScript çerçevesidir. Vue.js macro'lar, bu çerçevenin sunduğu yapıları ve işlevselliği daha verimli bir şekilde kullanmayı sağlar. https://www.serhatvarli.com/blog-detay/lifecycle-hooks-nedir-40 Vue.js'in yaşam döngüsü (lifecycle hooks), Vue örneğinin (instance) yaratılmasından yok olana kadar geçirdiği çeşitli aşamalarda çalışan özel fonksiyonlardır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'in yaşam döngüsü (lifecycle hooks), Vue örneğinin (instance) yaratılmasından yok olana kadar geçirdiği çeşitli aşamalarda çalışan özel fonksiyonlardır. Bu kancalar, bir Vue bileşeninin (component) yaşam döngüsü boyunca belirli zamanlarda tetiklenir ve geliştiricilere bu aşamalarda müdahale etme imkanı sunar. İşte en yaygın Vue.js yaşam döngüsü ve bunların işlevleri: beforeCreate: Bu kanca, Vue örneği yaratılmadan hemen önce çalışır. Bu aşamada, data ve olaylar (events) henüz kurulmamıştır. created: Bu kanca, Vue örneği yaratıldıktan hemen sonra çalışır. Bu aşamada, data ve metodlar (methods) erişilebilir durumdadır, ancak DOM henüz monte edilmemiş ve $el property'si mevcut değildir. beforeMount: Bu kanca, DOM'a monte edilmeden hemen önce çalışır. Bu aşamada, şablon (template) veya render fonksiyonu sanal DOM'a render edilmiş, ancak gerçek DOM'a uygulanmamıştır. mounted: Bu kanca, Vue örneği DOM'a monte edildikten sonra çalışır. Bu aşamada, bileşenin tamamı render edilmiş ve DOM'a uygulanmıştır. beforeUpdate: Bu kanca, reaktif verilerde bir değişiklik olduğunda ve DOM güncellenmeden önce çalışır. updated: Bu kanca, reaktif veri değişikliklerinin DOM'a uygulandıktan sonra çalışır. beforeDestroy: Bu kanca, Vue örneği yok edilmeden hemen önce çalışır. Bu aşamada, örnek hala tamamen işlevseldir. destroyed: Bu kanca, Vue örneği yok edildikten sonra çalışır. Bu aşamada, tüm olay dinleyicileri (event listeners) ve bağlı tüm alt bileşenler yok edilmiştir. Bu kancalar, Vue bileşenlerinin yaşam döngüsünü yönetmek ve çeşitli aşamalarda özel işlemler gerçekleştirmek için kullanılır. Örneğin, API'dan veri çekme, olay dinleyicileri ayarlama veya temizleme gibi işlemler bu kancalar aracılığıyla gerçekleştirilebilir. https://www.serhatvarli.com/blog-detay/inject-nedir-39 Vue.js'nin inject özelliği, bir üst (parent) bileşenin değerlerini alt (child) bileşenlere iletmek için kullanılan bir mekanizmadır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'nin inject özelliği, bir üst (parent) bileşenin değerlerini alt (child) bileşenlere iletmek için kullanılan bir mekanizmadır. Bu, bileşenler arasında veri veya fonksiyonları paylaşmak için kullanışlı bir yol sağlar. inject özelliği genellikle bir bileşenin provide özelliği aracılığıyla sağladığı değerleri almak için kullanılır. provide özelliği, bir bileşenin altındaki tüm alt bileşenlere değerleri sağlamak için kullanılır. İşte basit bir örnek: html <!-- ParentComponent.vue --> <template> <div> <child-component /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, provide() { return { message: 'Merhaba, bu değeri paylaşıyorum!' }; } }; </script> html <!-- ChildComponent.vue --> <template> <div> <p>{{ injectedMessage }}</p> </div> </template> <script> export default { inject: ['message'], computed: { injectedMessage() { return this.message; } } }; </script> Yukarıdaki örnekte, ParentComponent bileşeni, provide özelliği aracılığıyla message adlı bir değeri altındaki tüm alt bileşenlere sağlıyor. ChildComponent bileşeni ise inject özelliğini kullanarak bu değeri alıyor ve injectedMessage adlı bir computed property üzerinden kullanıyor. Bu sayede ChildComponent, ParentComponent'tan gelen message değerine erişebilir ve bu değeri kullanabilir. Bu tür bir mekanizma, veri paylaşımını ve iletişimini kolaylaştırmak için kullanışlıdır. https://www.serhatvarli.com/blog-detay/in-dom-template-nedir-38 "Vue.js in-DOM template" ifadesi, Vue.js'in bir özelliğini ifade eder. VueJS 2026-04-04T02:22:08+02:00 message "Vue.js in-DOM template" ifadesi, Vue.js'in bir özelliğini ifade eder. Vue.js, bir JavaScript framework'üdür ve kullanıcı arayüzü oluşturmak için kullanılır. Vue.js'in temel özelliklerinden biri, DOM (Document Object Model) içinde inline olarak tanımlanan şablonlardır. Vue.js'de, HTML içinde doğrudan yazılan şablonlar "in-DOM template" olarak adlandırılır. Bu, Vue.js'in kodunun HTML içinde doğrudan yer almasını sağlar. Aşağıda basit bir örnek bulunmaktadır: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js In-DOM Template</title> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script> ne w Vue({ el: '#app', data: { message: 'Merhaba, Vue.js!' } }); </script> </body> </html> Bu örnekte, Vue.js kullanılarak #app ID'li bir div içinde bir şablon tanımlanmıştır. {{ message }} ifadesi, Vue.js tarafından yönetilen message veri öğesine bağlanır. Vue.js, bu veriyi izler ve herhangi bir değişiklik olduğunda otomatik olarak DOM'u günceller. Bu "in-DOM template" yaklaşımı, Vue.js'in kullanımını basitleştirir ve şablonları doğrudan HTML içine entegre etmenizi sağlar. https://www.serhatvarli.com/blog-detay/hoisting-nedir-37 "Vue.js hoisting" terimi, JavaScript'in kavramlarından biri olan "hoisting" ile ilişkilidir. VueJS 2026-04-04T02:22:08+02:00 message "Vue.js hoisting" terimi, JavaScript'in kavramlarından biri olan "hoisting" ile ilişkilidir. Ancak, "hoisting" aslında Vue.js framework'ü ile doğrudan bağlantılı değildir. Vue.js, bir JavaScript framework'üdür ve JavaScript dilinin üzerine inşa edilmiştir. Hoisting, JavaScript'in çalışma mantığından kaynaklanan bir kavramdır. JavaScript yürütülmeden önce değişken tanımlamaları ve fonksiyon tanımlamaları bellekte yukarıya (üst kısma) çıkarılır. Bu, bir değişkeni veya fonksiyonu kullanmadan önce bile bu değişkenin veya fonksiyonun tanımlı olduğu anlamına gelir. Örneğin: html console.log(x); // undefined var x = 5; console.log(x); // 5 Yukarıdaki örnekte, var x = 5; ifadesinden önce console.log(x); çağrıldığında, x değişkeni henüz tanımlı olmadığı için sonuç undefined olur. Vue.js framework'üyle ilgili olarak, Vue.js kendisi hoisting'e özel bir özellik sunmaz. Ancak, Vue.js'in JavaScript temell olduğunu ve genel JavaScript kavramları ile etkileşimde bulunduğunu unutmamak önemlidir. Bu nedenle, Vue.js kodlarınızı yazarken JavaScript dilinin hoisting özelliklerini anlamak yararlı olabilir. https://www.serhatvarli.com/blog-detay/functional-component-nedir-36 Vue.js functional components, genellikle state (durum) yönetimi olmayan ve yalnızca girdi alıp çıktı üreten basit bileşenlerdir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js functional components, genellikle state (durum) yönetimi olmayan ve yalnızca girdi alıp çıktı üreten basit bileşenlerdir. Bu tür bileşenler, işlevsel programlamaya daha yakın bir yaklaşımla tasarlanmıştır. İşlevsel bileşenler, bir durum (state) yönetimine ihtiyaç duymazlar ve giriş aldıkları verilere dayanarak çıktı üretirler. Bu, fonksiyonel programlamanın temel prensiplerinden biridir. Vue.js'de functional component'leri oluşturmak için, functional özelliğini kullanabilirsiniz. Bu özellik, bir bileşenin işlevsel olduğunu belirtir. İşlevsel bir bileşen, bir render fonksiyonu içerir ve durum (state) yönetimini gerektirmez. html <template functional> <div> <p>{{ props.message }}</p> <button @click="props.onClick">Click me</button> </div> </template> <script> export default { functional: true, props: { message: String, onClick: Function, }, }; </script> Yukarıdaki örnekte, functional: true özelliği işlevsel bir bileşen olduğunu belirtir. props bölümünde, bileşene geçirilecek veriler tanımlanır. Daha sonra, bu verilere dayanarak basit bir içerik oluşturulur. İşlevsel bileşenler genellikle daha hızlıdır, çünkü durum yönetimi ve yaşam döngüsü kancaları gibi özelliklerden yoksundur. Bu nedenle, basit görevleri yerine getirmek için kullanılırlar. Ancak, işlevsel bileşenler, duruma ihtiyaç duyulduğunda ve karmaşık durum yönetimi gerektiren bileşenlerle birlikte kullanılabilir. https://www.serhatvarli.com/blog-detay/fragment-nedir-35 Vue.js fragment, Vue.js 2.4.0 sürümünden itibaren tanıtılan bir özelliktir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js fragment, Vue.js 2.4.0 sürümünden itibaren tanıtılan bir özelliktir. Fragmanlar, bir bileşenin birden fazla kök öğe içermesine izin veren bir yapıdır. Önceki Vue sürümlerinde, bir bileşenin bir kök öğesi olması gerekiyordu, yani bir bileşen sadece tek bir öğe içerebilirdi. Ancak, bazı durumlarda, bir bileşenin birden fazla kök öğe içermesi gerekebilir. Vue.js 2.4.0 sürümü ile birlikte, vue-template-compiler'ın 2.4.0 ve üzeri sürümleri, v-else-if, v-else ve v-if gibi direktifler içeren bir kök öğeye sahip olmayan bileşenleri işleyebilir. Bu sayede, bir bileşen birden fazla kök öğe içerebilir ve bu öğeler vue-template-compiler tarafından bir araya getirilir. İşte basit bir örnek: html <template> <!-- Bir fragment kullanımı --> <div> <h1>Başlık</h1> <p>Paragraf 1</p> <p>Paragraf 2</p> </div> </template> Yukarıdaki örnekte, <div> etiketi bir fragment görevi görür. Bu, Vue.js 2.4.0 ve sonraki sürümlerde geçerlidir ve birden fazla kök öğeyi içeren bileşenleri destekler. https://www.serhatvarli.com/blog-detay/event-nedir-33 Vue.js'de "event" (olay) terimi, kullanıcı etkileşimleri veya tarayıcıda meydana gelen diğer olaylar gibi belirli bir durumu ifade eder. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de "event" (olay) terimi, kullanıcı etkileşimleri veya tarayıcıda meydana gelen diğer olaylar gibi belirli bir durumu ifade eder. Vue.js, kullanıcı arayüzü oluşturmak için kullanılan bir JavaScript çerçevesidir ve bu çerçeve, bileşen tabanlı bir yapıda etkileşimli uygulamalar geliştirmeye odaklanmıştır. Vue.js'de olaylar, kullanıcı etkileşimleri (örneğin, bir düğmeye tıklama, bir input kutusuna yazma gibi) veya belirli bir Vue bileşeni içinde gerçekleşen başka olaylar (örneğin, bileşenin oluşturulduğu an gibi) olabilir. Bu olaylar, Vue.js'in olay sistemi aracılığıyla yönetilir. İşte basit bir örnek: javascript <template> <div> <button @click="buttonClicked">Tıkla</button> </div> </template> <script> export default { methods: { buttonClicked() { console.log('Düğmeye tıklandı!'); //Burada başka işlemler de gerçekleştirilebilir. } } } </script> Yukarıdaki örnekte, <button> elementi üzerinde @click direktifi kullanılarak "click" (tıklama) olayına bir dinleyici eklenmiştir. Bu olay gerçekleştiğinde, buttonClicked adlı bir yöntem çağrılır. Bu yöntem, tıklama olayına tepki olarak belirli bir işlevi gerçekleştirir. Vue.js'de olaylar, kullanıcı etkileşimlerini dinlemek, bileşen içindeki durumları güncellemek veya başka bileşenlere haber vermek gibi birçok senaryoda kullanılabilir. Olaylar, Vue bileşenlerinin etkileşimli ve dinamik bir şekilde çalışmasına olanak tanır. https://www.serhatvarli.com/blog-detay/effect-nedir-32 Vue.js'deki effect, aslında Vue 3.0 ve sonraki sürümlerde değil, Vue 2.x sürümlerinde kullanılan bir terim değildir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'deki effect, aslında Vue 3.0 ve sonraki sürümlerde değil, Vue 2.x sürümlerinde kullanılan bir terim değildir. Ancak, Vue 3.0 ve sonrasında, Vue 2.x'deki beforeUpdate ve updated hayat döngüsü yerine kullanılan effect fonksiyonu vardır. effect fonksiyonu, Vue 3.0'da Composition API ile birlikte gelmiştir ve bu API, Vue uygulamalarını daha modüler ve okunabilir hale getirmek için tasarlanmıştır. effect fonksiyonu, bir bağımlılık listesi ve bir etki fonksiyonu alır. Bu etki fonksiyonu, bağımlılıklar değiştiğinde yeniden çalıştırılır. Örnek kullanım: javascript import { ref, effect } from 'vue'; const count = ref(0); //effect fonksiyonu, count değeri değiştiğinde otomatik olarak çalışır effect(() => { console.log('Count değeri güncellendi:', count.value); }); //count değerini güncelledikçe, effect fonksiyonu otomatik olarak çalışacaktır count.value++; //Bu durumda, console'da "Count değeri güncellendi: 1" görülür Bu örnekte, effect fonksiyonu count değişkenine bir bağımlılık oluşturur. count değeri her güncellendiğinde, effect fonksiyonu otomatik olarak çalışır ve güncellenen değeri console'a yazdırır. Bu, Vue 3.0 Composition API'nin bir parçası olarak, reaktivite ve bağımlılıklarla çalışmada daha esnek bir yaklaşım sağlamak için kullanılır. https://www.serhatvarli.com/blog-detay/dynamic-component-nedir-31 VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de dinamik bileşenler (dynamic components), uygulamalarda bir bileşeni programatik olarak değiştirmenizi veya yüklemenizi sağlayan bir özelliktir. Bu, uygulamanızın çalışma zamanında hangi bileşenin görüntüleneceğini belirleme esnekliği sağlar. Vue.js'de dinamik bileşenleri kullanmanın birkaç farklı yolu vardır. İşte bunlardan bazıları: <component> Elemanı: Vue.js'de yerleşik bir <component> elemanı bulunur. Bu eleman, isim prop'unu kullanarak görüntülenen bileşeni belirler. Örneğin: html <template> <component :is="currentComponent"></component> </template> <script> export default { data() { return { currentComponent: 'MyComponent' }; } }; </script> Yukarıdaki örnekte, currentComponent veri öğesi, görüntülenen bileşeni belirlemek için kullanılır. Bu değer, uygulamanızın mantığına bağlı olarak dinamik olarak değiştirilebilir. <keep-alive> Elemanı ile Kullanım: Vue.js'in <keep-alive> elemanı, dinamik bileşenleri bellekte tutmanıza ve yeniden kullanmanıza olanak tanır. Bu, bir bileşenin durumunu ve durumunu korumak istediğinizde faydalı olabilir. Örneğin: html <template> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </template> v-if veya v-show ile Kullanım: Bileşenleri görüntüleme kararını v-if veya v-show direktifleriyle de yapabilirsiniz. Bu, belirli koşullar altında bileşenleri eklemenizi veya kaldırmanızı sağlar. html <template> <div> <my-component v-if="shouldShowComponent"></my-component> </div> </template> <script> export default { data() { return { shouldShowComponent: true }; } }; </script> Bu yöntemler, Vue.js'de dinamik bileşen kullanımının sadece birkaç örneğidir. Hangi yöntemi kullanacağınız, uygulamanızın gereksinimlerine ve yapısına bağlı olarak değişebilir. https://www.serhatvarli.com/blog-detay/directive-nedir-30 Vue.js direktifleri, Vue.js framework'ünün bir parçası olan özel komutlardır ve HTML elementlerine özel davranışlar eklemek için kullanılırlar. VueJS 2026-04-04T02:22:08+02:00 message Vue.js direktifleri, Vue.js framework'ünün bir parçası olan özel komutlardır ve HTML elementlerine özel davranışlar eklemek için kullanılırlar. Bu direktifler, Vue.js'in reaktif özellikleriyle birleştirilerek, HTML dokümanını Vue.js uygulamasının veri modeli ile senkronize etmeye ve etkileşimli web uygulamaları oluşturmaya olanak tanır. ue.js direktifleri, v- öneki ile başlar ve bir HTML elementine eklenerek belirli bir işlevselliği aktive eder. İşte bazı yaygın Vue.js direktifleri: v-bind: HTML attribute'larını dinamik bir şekilde bağlamak için kullanılır. Örneğin, v-bind ile bir elementin href özelliğini belirli bir veriye bağlayabilirsiniz. html <a v-bind:href="url">Bağlantı</a> v-model: Form elemanları (input, textarea, select) ile ilişkilendirilerek, kullanıcının girdiğini bir Vue.js veri özelliğine bağlamak için kullanılır. html <input v-model="username"> v-for: Döngü kullanarak bir liste üzerinde işlem yapmak için kullanılır. Örneğin, bir dizi içindeki öğeleri listelemek için kullanılabilir. html <ul> <li v-for="item in items">{{ item.name }}</li> </ul> v-if, v-else-if, v-else: Bir şartın doğruluğuna bağlı olarak bir HTML elementinin görünürlüğünü kontrol etmek için kullanılır. html <p v-if="isUserLoggedIn">Kullanıcı giriş yaptı!</p> <p v-else>Giriş yapın</p> v-show: v-if gibi, bir şartın doğruluğuna bağlı olarak bir elementin görünürlüğünü kontrol eder, ancak v-show daha hafif bir yöntemdir ve element sadece CSS ile gösterilip gizlenir. html <p v-show="isVisible">Bu metin gösterilecek veya gizlenecek</p> Bu örnekler, Vue.js direktiflerinin çeşitli kullanımlarını göstermektedir. Vue.js direktifleri, HTML ve JavaScript arasında güçlü bir bağlantı sağlar, bu da geliştiricilere daha etkileşimli ve dinamik web uygulamaları oluşturmada esneklik sunar. https://www.serhatvarli.com/blog-detay/custom-element-nedir-29 Vue.js custom element, Vue.js framework'inin Vue 2.x sürümünden itibaren sunulan bir özelliktir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js custom element, Vue.js framework'inin Vue 2.x sürümünden itibaren sunulan bir özelliktir. Bu özellik, Vue.js'in Vue öğelerini, Vue bileşenlerini veya uygulamalarını non-Vue sayfalarında veya farklı JavaScript çerçeveleriyle entegre etmek için kullanılır. Vue.js custom element, Vue bileşenlerini normal HTML öğelerine dönüştürmeyi sağlar, böylece bu bileşenler başka bir framework veya kütüphane tarafından kullanılabilir hale gelir. Bu özellik sayesinde Vue.js uygulamaları diğer teknolojilerle daha kolay entegre edilebilir. Vue.js custom element kullanımı için Vue.customElement fonksiyonu kullanılır. Bu fonksiyon, bir Vue bileşenini bir özel öğe (custom element) haline getirir. Örneğin: javascript //Vue bileşeni oluştur const MyComponent = { template: '<div>Merhaba, benim özel öğem!</div>', data() { return { //Bileşen verileri }; }, methods: { //Bileşen metotları } }; //Vue bileşenini özel öğeye dönüştür Vue.customElement('my-component', MyComponent); //HTML içinde kullanım <my-component></my-component> Bu örnekte, MyComponent adlı Vue bileşeni Vue.customElement fonksiyonu ile "my-component" adlı özel bir HTML öğesine dönüştürülmüştür. Daha sonra bu özel öğe normal bir HTML sayfasında kullanılabilir hale gelir. Bu özellik sayesinde Vue.js, farklı teknolojilerle birleştirilebilen daha modüler ve esnek bir yapıya sahip olur. https://www.serhatvarli.com/blog-detay/composition-api-nedir-28 Vue.js Composition API, Vue.js 3.0'da tanıtılan vegeliştiricilere daha iyi bir organizasyon ve paylaşılabilirlik sağlayan bir API'dir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js Composition API, Vue.js 3.0'da tanıtılan vegeliştiricilere daha iyi bir organizasyon ve paylaşılabilirlik sağlayan bir API'dir. Vue 2.x'de, mantığı özellikler, yöntemler ve diğer öğeler arasında bölüştürmek için genellikle Options API kullanılıyordu. Composition API, bu konuda daha esnek, okunabilir ve düzenli bir alternatif sunar. Composition API'nin başlıca özellikleri şunlardır: Fonksiyonel Bileşenler (Functional Components): Composition API, fonksiyonel bileşenlerin kullanımını teşvik eder. Bu, bileşenin durum yönetimi ve işlevselliği gibi kısımlarını daha küçük ve daha anlamlı fonksiyonlara bölebileceğiniz anlamına gelir. Vue'un Reaktif Sistemi: Composition API, Vue'un reaktif (reactive) sistemini kullanmaya dayanır. ref ve reactive gibi reaktif özelliklerle durum yönetimini kolaylaştırır. Vue'un Yeni `setup` Fonksiyonu: Composition API, Vue 3 ile birlikte gelen yeni setup fonksiyonunu tanıtır. Bu fonksiyon, bileşenin kurulumu sırasında çalıştırılır ve bileşenin içindeki reaktif durumları, yöntemleri ve diğer öğeleri hazırlamanıza olanak tanır. Örnek bir kullanım: vue <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { //Reaktif durumu tanımla const count = ref(0); //İşlevselliği tanımla function increment() { count.value++; } //Dışa açılacak öğeleri döndür return { count, increment }; } }; </script> Bu örnekte, Composition API kullanılarak bir sayacın durumu ve arttırma işlevselliği yönetilmektedir. setup fonksiyonu, bileşenin başlatılması sırasında çalıştırılır ve gerekli reaktif durumları ve işlevselliği döndürerek bileşeni yapılandırır. https://www.serhatvarli.com/blog-detay/composable-nedir-27 Vue.js Composables, Vue.js ekosistemi içindeki bir tasarım deseni ve yapısal bir öğedir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js Composables, Vue.js ekosistemi içindeki bir tasarım deseni ve yapısal bir öğedir. Composables, Vue.js uygulamalarınızdaki mantığı ve işlevselliği paylaşmak ve yönetmek için kullanılan yeniden kullanılabilir fonksiyonlardır. Composables, genellikle bir işlevsellik kümesini gruplamak ve bu işlevselliği bir bileşen içinde değil, başka yerlerde (örneğin, başka bir dosyada veya başka bir bileşende) kullanmak için tasarlanmıştır. Bu, kodunuzu daha düzenli hale getirmenize, tekrar kullanılabilir parçalar oluşturmanıza ve bileşenler arasında mantığı kolayca paylaşmanıza yardımcı olabilir. Bir Vue.js Composable, genellikle bir JavaScript fonksiyonu olarak tanımlanır ve genellikle belirli bir görevi yerine getirmek üzere tasarlanmıştır. Composables, kullanıcılara bir bağlam sağlamak ve genellikle reactive (reaktif) Vue özelliklerini kullanarak durum yönetimini kolaylaştırmak için tasarlanmıştır. İşte basit bir örnek: javascript // useCounter.js import { ref } from 'vue'; export function useCounter () { const count = ref(0); function increment() { count.value++; } function decrement() { count.value--; } return { count, increment, decrement }; } Bu örnek, bir sayacın durumunu ve arttırma/azaltma işlevselliğini yöneten bir Composable örneğidir. Bu Composable, başka bir bileşen içinde kullanılabilir ve sayacın durumunu güncellemek için kullanılabilir. Kullanımı: javascript // MyComponent.vue <template> <div> <p>Count: {{ counter.count }}</p> <button @click="counter.increment">Increment</button> <button @click="counter.decrement">Decrement</button> </div> </template> <script> import { useCounter } from './useCounter'; export default { setup() { const counter = useCounter(); return { counter }; } }; </script> Bu örnekte, useCounter Composable'i, MyComponent adlı bir Vue bileşeni içinde kullanılmaktadır. Bu, sayacın durumunu ve işlevselliğini MyComponent bileşeni içinde kullanmanın kolay ve düzenli bir yolunu sağlar. https://www.serhatvarli.com/blog-detay/component-nedir-26 Vue.js component, Vue.js framework içinde kullanılan ve özelleştirilebilir öğeleri temsil eden bir yapıdır. VueJS 2026-04-04T02:22:08+02:00 message 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: Şablon (Template): Componentlerin içinde görüntü ve yapıyı tanımlamak için HTML tabanlı bir şablon bulunur. 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. Metotlar (Methods): Componentler, olaylara tepki göstermek veya belirli işlevleri gerçekleştirmek için metotları içerebilir. 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. 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. https://www.serhatvarli.com/blog-detay/compiler-macro-nedir-25 Vue.js compiler macro , Vue.js 3 ve sonraki sürümleri için kullanılan bir özelliktir VueJS 2026-04-04T02:22:08+02:00 message Vue.js compiler macro , Vue.js 3 ve sonraki sürümleri için kullanılan bir özelliktir. Bu özellik, Vue.js şablonlarını daha etkili bir şekilde derlemek ve optimize etmek için kullanılan özel bir makro dilini ifade eder. Compiler macro , Vue.js şablonlarını JavaScript koduna dönüştüren Vue Compiler tarafından kullanılır. Bu, Vue.js uygulamalarının çalışma zamanındaki performansını artırmaya yönelik bir optimizasyon mekanizmasıdır. Compiler makroları, Vue.js şablonlarındaki belirli yapıları, özellikle tekrarlanan veya döngü içinde kullanılan yapıları, daha etkili bir şekilde işlemek için kullanılır. Bu sayede, gereksiz tekrarlar veya işlemler engellenir ve uygulama performansı artırılır. Vue.js 3 ile birlikte gelen v-for yönergesi için özel bir compiler macro olan örneğini ele alalım: html <!-- Normal v-for kullanımı --> <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> Yukarıdaki örnekte, v-for ile bir döngü oluşturulmuş ve her öğe için bir index değeri kullanılarak :key özelliği belirlenmiştir. Ancak, bu durumda her zaman index kullanmak etkili olmayabilir ve daha iyi bir anahtar belirleme yöntemi bulunabilir. Bu noktada, v-for kullanımının optimize edilmesi amacıyla compiler macro devreye girer. Compiler macro kullanılarak optimize edilmiş v-for kullanımı: html <!-- Compiler macro ile optimize edilmiş v-for --> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> Bu örnekte, compiler macro sayesinde v-for içinde doğrudan :key="item" kullanılarak daha etkili bir anahtar belirleme işlemi gerçekleştirilmiştir. Compiler makroları, bu tür optimize edilmiş şablon yapılarını, Vue.js uygulamalarının daha hızlı çalışmasını sağlamak amacıyla derleme aşamasında oluşturur. https://www.serhatvarli.com/blog-detay/async-component-nedir-24 Vue.js'de "async component" terimi, bir Vue bileşeninin asenkron olarak yüklenmesi anlamına gelir. VueJS 2026-04-04T02:22:08+02:00 message Vue.js'de "async component" terimi, bir Vue bileşeninin asenkron olarak yüklenmesi anlamına gelir. Bu, uygulama başladığında veya sayfa yüklendiğinde bir bileşenin hemen yüklenmesi gerekmeyen durumlarda kullanılır. Özellikle büyük uygulamalarda veya sayfalarında performansı artırmak için kullanışlıdır. Vue.js'de asenkron bileşenler, import ifadesiyle kullanılabilir ve bu bileşenlerin yüklenmesi gerektiği anda dinamik olarak alınabilir. İşte bir örnek: javascript // AsyncComponent.vue const AsyncComponent = () => import('./MyComponent.vue'); export default AsyncComponent; Yukarıdaki örnekte, AsyncComponent adlı bir asenkron bileşen oluşturulmuştur. import ifadesi içindeki ./MyComponent.vue dosyası, yüklenmesi gereken bileşeni temsil eder. Bu dosya, kullanıcı sayfayı açtığında veya belirli bir olay gerçekleştiğinde yüklenecektir. Bu asenkron bileşeni kullanmak için, genellikle Vue.js içindeki bir bileşen içinde şu şekilde kullanabilirsiniz: javascript // App.vue <template> <div> <AsyncComponent /> </div> </template> <script> import AsyncComponent from './AsyncComponent.vue'; export default { components: { AsyncComponent } } </script> Yukarıdaki örnekte, AsyncComponent adlı bir asenkron bileşen oluşturulmuştur. import ifadesi içindeki ./MyComponent.vue dosyası, yüklenmesi gereken bileşeni temsil eder. Bu dosya, kullanıcı sayfayı açtığında veya belirli bir olay gerçekleştiğinde yüklenecektir. Bu asenkron bileşeni kullanmak için, genellikle Vue.js içindeki bir bileşen içinde şu şekilde kullanabilirsiniz: https://www.serhatvarli.com/blog-detay/less-nedir-23 "LESS," öncelikle bir CSS ön işleyici dilidir. CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemek için kullanılan bir stil dilidir. Less 2026-04-04T02:22:08+02:00 message "LESS," öncelikle bir CSS ön işleyici dilidir. CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemek için kullanılan bir stil dilidir. LESS, CSS kodunun yazımını ve yönetimini daha kolay hale getirmek için geliştirilmiş bir dil olarak öne çıkar. LESS, temel olarak CSS'nin özelliklerini genişleterek ve geliştirerek daha esnek bir stil oluşturma deneyimi sunar. Sözdizimi açısından, LESS daha az kod yazmayı ve stilinizi daha düzenli bir şekilde organize etmeyi sağlar. Ayrıca, LESS'in içinde değişkenler, fonksiyonlar, nesting (iç içe geçmiş yapısı), ve diğer programlama özellikleri gibi avantajlar bulunmaktadır. Örneğin, aşağıda basit bir LESS kodu örneği bulunmaktadır: less @mainColor: #3498db; body { background-color: @mainColor; } h1 { color: darken(@mainColor, 10%); } Bu kod, bir ana renk değişkeni tanımlar (@mainColor), sonra body elemanının arka plan rengini bu değişkenle ayarlar ve h1 başlığının rengini bu ana renkten daha koyu bir tonla belirler. Bu şekilde, LESS kullanılarak daha modüler ve sürdürülebilir bir CSS kodu oluşturmak mümkündür. https://www.serhatvarli.com/blog-detay/html-nedir-22 HTML (Hypertext Markup Language), web sayfalarının yapılandırılması için kullanılan bir işaretleme dilidir. Html 2026-04-04T02:22:08+02:00 message HTML (Hypertext Markup Language), web sayfalarının yapılandırılması için kullanılan bir işaretleme dilidir. HTML, web tarayıcıları tarafından anlaşılır ve yorumlanabilir bir biçimde yazılmış metin tabanlı bir dildir. Web sayfalarındaki metin, bağlantılar, görseller, tablolar, formlar ve diğer öğelerin düzenlenmesi ve tanımlanması için kullanılır. HTML, belirli etiketlerle çevrelenmiş öğeleri tanımlar. Etiketler, açılış (<tag>) ve kapanış (</tag>) biçiminde çiftler halinde gelir ve içerdikleri içeriği belirli bir şekilde düzenlerler. Örneğin, metin içinde bir başlık belirtmek için <h1> ve </h1> etiketleri kullanılır. Benzer şekilde, bir bağlantı oluşturmak için <a> ve </a> etiketleri, bir resim eklemek için <img> etiketi kullanılır. HTML, tarayıcılar tarafından okunup yorumlanarak kullanıcıların web sayfalarını görmelerini sağlar. HTML, genellikle diğer web teknolojileriyle birlikte kullanılır, örneğin CSS (Cascading Style Sheets) ile görünüm düzenlemesi ve JavaScript ile interaktif özellikler eklemek için. Bu üç teknoloji (HTML, CSS, JavaScript), modern web geliştirme süreçlerinin temelini oluşturur. https://www.serhatvarli.com/blog-detay/reactjs-nedir-21 ReactJS, Facebook tarafından geliştirilen ve açık kaynaklı olarak sunulan bir JavaScript kütüphanesidir. ReactJS 2026-04-04T02:22:08+02:00 message ReactJS, Facebook tarafından geliştirilen ve açık kaynaklı olarak sunulan bir JavaScript kütüphanesidir. Web uygulamaları geliştirmek için kullanılan bu kütüphane, kullanıcı arayüzlerini oluşturmak için kullanılır. React, özellikle tek sayfa uygulamaları (Single Page Applications - SPA) için ideal bir çözüm sunar. React, bileşen tabanlı bir yaklaşımı benimser. Uygulamanın farklı bölümleri veya arayüz öğeleri olan bileşenler, bağımsız bir şekilde oluşturulabilir, yönetilebilir ve bir araya getirilebilir. Bu, kodun modüler olmasını sağlar ve geliştiricilere daha düzenli ve sürdürülebilir bir kod yazma imkanı tanır. React'in temel özelliklerinden biri de sanal DOM (Document Object Model) kullanımıdır. React, DOM manipülasyonları yerine bir sanal DOM kullanarak, sadece değişen kısımları güncelleyerek performansı arttırır. Bu, uygulamanın daha hızlı çalışmasını sağlar. React aynı zamanda bir "tek yönlü veri akışı" (one-way data binding) prensibine dayanır. Bu, verinin uygulama içinde tek bir yönde (genellikle üstten aşağı) akmasını sağlar, bu da uygulamanın daha öngörülebilir olmasını sağlar. React, geniş bir topluluğa ve geliştirici ekosistemine sahiptir ve birçok büyük proje tarafından kullanılmaktadır. Ayrıca, React Native adlı bir kardeş proje sayesinde, React'in bileşen tabanlı yaklaşımı mobil uygulama geliştirmek için de kullanılabilir. https://www.serhatvarli.com/blog-detay/vuejs-nedir-20 Vue.js, açık kaynaklı bir JavaScript framework'üdür ve genellikle kullanıcı arayüzü geliştirmek için kullanılır. VueJS 2026-04-04T02:22:08+02:00 message Vue.js, açık kaynaklı bir JavaScript framework'üdür ve genellikle kullanıcı arayüzü geliştirmek için kullanılır. Vue.js, özellikle tek sayfa uygulamaları (SPA) oluşturmak için tasarlanmıştır. Vue.js, hafif ve esnek bir yapıya sahiptir ve bu nedenle özellikle küçük ve orta ölçekli projelerden büyük uygulamalara kadar çeşitli ölçeklerde kullanılabilmektedir. Vue.js'in temel özellikleri şunlardır: Hafif ve Kolay Kullanılabilir: Vue.js, küçük boyutlu bir kütüphaneye sahiptir ve minimal bir öğrenme eğrisi sunar. Bu nedenle, geliştiricilerin hızlı bir şekilde projelerine entegre etmelerini ve kullanmalarını sağlar. İki Yönlü Veri Bağlama (Two-Way Data Binding): Vue.js, modeldeki değişikliklerin otomatik olarak kullanıcı arayüzüne yansıtılmasını sağlayan iki yönlü veri bağlama özelliğine sahiptir. Component (Bileşen) Tabanlı Geliştirme: Vue.js, uygulamaları küçük ve yeniden kullanılabilir bileşenlere bölerek geliştirmeyi teşvik eder. Bu, kodun daha modüler ve bakımı daha kolay hale gelmesini sağlar. Directive (Komut Dosyası): Vue.js, HTML üzerinde özel davranışlar eklemek için kullanılan direktifleri destekler. Bu sayede HTML kodunu daha zengin ve dinamik hale getirmek mümkündür. Templating (Şablonlama): Vue.js, HTML şablonlarını kullanarak kullanıcı arayüzlerini oluşturmayı sağlar. Şablonlar, JavaScript koduyla entegre edilerek dinamik içerikler üretmeyi kolaylaştırır. Vuex State Management: Vue.js uygulamalarında durum yönetimi için Vuex adında bir durum yönetim kütüphanesi bulunur. Bu, uygulama genelinde veri durumunu merkezi bir şekilde yönetmeyi sağlar. Routing (Yönlendirme): Vue.js'in özelleştirilebilir bir yönlendirme çözümü vardır. Vue Router, SPA'ların farklı sayfalar arasında gezinmeyi yönetmelerine olanak tanır. Vue.js, başlangıç düzeyinden deneyimli geliştiricilere kadar geniş bir kullanıcı kitlesine hitap eden bir framework'tür. Hafif olması, öğrenme eğrisinin düşük olması ve esnek yapısı, Vue.js'in popülerliğini artıran faktörlerden biridir. https://www.serhatvarli.com/blog-detay/angularjs-nedir-19 AngularJS, bir JavaScript framework'üdür ve genellikle tek sayfa uygulamalarının (SPA - Single Page Application) geliştirilmesinde kullanılır. AngularJS 2026-04-04T02:22:08+02:00 message AngularJS, bir JavaScript framework'üdür ve genellikle tek sayfa uygulamalarının (SPA - Single Page Application) geliştirilmesinde kullanılır. AngularJS, Google tarafından geliştirilmiştir ve açık kaynaklıdır. İlk kez 2010 yılında duyurulmuş ve web uygulamalarının geliştirilmesinde daha etkili ve modüler bir yaklaşım sunmasıyla dikkat çekmiştir. AngularJS, özellikle MVC (Model-View-Controller) tasarım deseni üzerine inşa edilmiştir. Bu desen, uygulamayı veri (Model), kullanıcı arayüzü (View) ve uygulama mantığı (Controller) olarak üç ana bileşen içerir ve bu bileşenler arasında etkileşimi sağlar. AngularJS'in temel özellikleri şunlardır: İki Yönlü Veri Bağlama (Two-Way Data Binding): AngularJS, modelde yapılan değişiklikleri otomatik olarak kullanıcı arayüzüne yansıtar ve aynı şekilde kullanıcı arayüzündeki değişiklikleri modele iletilir. Modülerlik (Modularity): Uygulamaları küçük, bağımsız ve yeniden kullanılabilir modüllere bölme konusunda AngularJS güçlüdür. Bu, uygulama geliştirme sürecini daha kolay ve yönetilebilir hale getirir. Dependency Injection (Bağımlılık Enjeksiyonu): AngularJS, bağımlılıkları (dependencies) yönetmek için bir enjeksiyon sistemine sahiptir. Bu, bileşenler arasında veri veya hizmet paylaşımını kolaylaştırır. Directive (Komut Dosyası): AngularJS, HTML etiketlerine eklenen direktifler aracılığıyla özelleştirilmiş HTML sözdizimi ekleyebilme yeteneği sunar. Bu, HTML üzerinde dinamik olarak davranışlar eklemek için kullanılır. Templating (Şablonlama): AngularJS, HTML şablonlarını kullanarak kullanıcı arayüzü oluşturmayı kolaylaştırır. Bu şablonlar, modele bağlı olarak dinamik içerik üretmek için kullanılır. Routing (Yönlendirme): AngularJS, uygulama içinde farklı sayfalar arasında gezinmeyi sağlayan bir yönlendirme sistemine sahiptir. AngularJS'in popülerliği, geliştiricilere karmaşık uygulamaları daha etkili bir şekilde yönetme ve geliştirme imkanı sağlamasıyla artmıştır. Ancak, AngularJS'in yerini Angular (Angular 2 ve sonrası sürümler) almıştır ve bu nedenle yeni projeler için genellikle Angular önerilmektedir. https://www.serhatvarli.com/blog-detay/sass-nedir-18 "Sass" (Syntactically Awesome Stylesheets), web geliştirme alanında kullanılan bir CSS ön işleyici dilidir. Sass 2026-04-04T02:22:08+02:00 message "Sass" (Syntactically Awesome Stylesheets), web geliştirme alanında kullanılan bir CSS ön işleyici dilidir. Sass, CSS'e bazı özellikler ekleyerek ve kodu daha düzenli hale getirerek stil sayfalarını daha etkili bir şekilde yönetmeyi amaçlar. Sass'ın temel özellikleri şunlardır: Değişkenler: Değişkenler, renkler, fontlar veya diğer stil özelliklerini depolamak ve kullanmak için kullanılır. Bu, stil sayfalarını daha modüler hale getirir ve kodun tekrarını azaltır. Yerel İmlekler (Nesting): Sass, CSS kurallarını daha düzenli ve hiyerarşik bir yapıda yazmanıza olanak tanır. Bu, kodun okunabilirliğini artırır. Mixin'ler: Mixin'ler, tekrar eden CSS kod bloklarını tanımlamak ve kullanmak için kullanılır. Fonksiyonlar: Sass, matematiksel işlemler ve diğer özel hesaplamalar için fonksiyonları destekler. Sass, daha sonra tarayıcılar tarafından anlaşılabilen düz CSS'e derlenir. Bu nedenle, geliştirme sürecinde daha etkili ve yönetilebilir stil sayfaları oluşturmanıza yardımcı olabilir. https://www.serhatvarli.com/blog-detay/scss-nedir-17 SCSS (Sassy CSS), CSS'nin genişletilmiş bir versiyonudur ve daha fazla özellik ve esneklik sunarak stil kodlamasını daha etkili hale getirir. Scss 2026-04-04T02:22:08+02:00 message SCSS (Sassy CSS), CSS'nin genişletilmiş bir versiyonudur ve daha fazla özellik ve esneklik sunarak stil kodlamasını daha etkili hale getirir. SCSS, SASS (Syntactically Awesome Stylesheets) adlı bir CSS ön işlemcisidir ve SASS'ın yeni ve geliştirilmiş sözdizimini kullanır. SCSS ve SASS arasındaki ana fark, sözdizimidir. SASS, daha açık ve kısa bir sözdizim kullanırken, SCSS, daha geleneksel CSS benzeri bir sözdizimini tercih eder. Yani, SCSS dosyaları genellikle mevcut CSS dosyalarını daha kolay bir şekilde dahil edebilir ve aynı zamanda daha rahat bir geçiş sağlar. SCSS'in bazı temel özellikleri şunlardır: Değişkenler: SCSS, değişkenler kullanarak renkler, fontlar, boyutlar gibi değerleri depolamanıza olanak tanır. Bu, tasarımınızdaki tutarlılığı sağlamak ve değerleri daha kolay güncellemek için kullanışlıdır. scss $main-color: #3498db; body { background-color: $main-color; } İç içe geçmiş Stiller: SCSS, stil kurallarını daha anlaşılır hale getirmek için iç içe geçmiş bir yapı sağlar. scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; margin-right: 10px; } } Miksindirler (Mixins): SCSS, tekrar kullanılabilir mixinler ile stil kurallarını gruplandırmanıza ve birleştirmenize olanak tanır. scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } İmport: SCSS dosyalarını birleştirme işlemi daha kolaydır, çünkü @import komutu sayesinde başka SCSS dosyalarını içe aktarabilirsiniz. scss @import "reset"; @import "base"; @import "layout"; Bu özellikler, SCSS'in CSS yazımını daha modüler, okunabilir ve bakımı kolay hale getirmesini sağlar. SCSS dosyaları genellikle tarayıcılar tarafından doğrudan anlaşılamaz, bu nedenle kullanılmadan önce bir CSS ön işlemci (örneğin, Sass veya Node-sass) kullanılarak CSS'e derlenir. https://www.serhatvarli.com/blog-detay/css-nedir-16 CSS, "Cascading Style Sheets" (Birbirine Bağlı Stil Sayfaları) kısaltmasıdır ve web sayfalarını düzenlemek, stil vermek ve görsel tasarımını kontrol etmek için kullanılan bir stil dilidir. Css 2026-04-04T02:22:08+02:00 message CSS, "Cascading Style Sheets" (Birbirine Bağlı Stil Sayfaları) kısaltmasıdır ve web sayfalarını düzenlemek, stil vermek ve görsel tasarımını kontrol etmek için kullanılan bir stil dilidir. HTML (Hypertext Markup Language) ile birlikte kullanılarak web sayfalarının görünümünü belirlemek için kullanılır. CSS, bir web sayfasındaki metinlerin, resimlerin, arka planların, kenar boşluklarının, renklerin ve diğer öğelerin görünümünü düzenlemek için tasarlanmıştır. Bu, web geliştiricilerin sayfanın yapısını (HTML) ve stilini (CSS) ayrı ayrı kontrol etmelerine olanak tanır, böylece tasarımı ve içeriği daha etkili bir şekilde yönetebilirler. Temel olarak, CSS'in ana görevleri şunlardır: Renk ve Arka Plan: Sayfadaki öğelerin renkleri ve arka plan renkleri gibi görsel özellikleri belirleme.. Yazı Stili: Metinlerin tipografik özellikleri, font boyutu, tipi, renkleri ve diğer stil özelliklerini belirleme.. Konum ve Boyut: Öğelerin yerleşimini, konumunu ve boyutunu kontrol etme.. Kenar Boşlukları ve Yerleşim: Öğeler arasındaki boşlukları, kenar boşluklarını ve yerleşimi belirleme.. Animasyon ve Geçişler: Sayfadaki öğeler arasındaki geçişleri ve animasyonları kontrol etme.. CSS, genellikle bir harici CSS dosyası veya HTML dosyasının içinde yer alabilir. Harici bir CSS dosyası, bir web sitesindeki tüm sayfaların aynı stil kurallarını paylaşmasına ve bu kuralların tek bir yerden güncellenmesine olanak tanır, bu da bakımı kolaylaştırır ve tutarlı bir görünüm sağlar. https://www.serhatvarli.com/blog-detay/jquery-nedir-15 jQuery, JavaScript tabanlı bir açık kaynak kütüphanesidir Jquery 2026-04-04T02:22:08+02:00 message jQuery, JavaScript tabanlı bir açık kaynak kütüphanesidir. jQuery, HTML belgelerindeki olayları manipüle etmek, animasyonlar oluşturmak, AJAX ile veri alışverişi yapmak ve DOM (Belge Nesne Modeli) üzerinde kolayca işlemler gerçekleştirmek gibi web geliştirme görevlerini kolaylaştırmak için tasarlanmıştır. jQuery'nin temel amacı, tarayıcı uyumluluğu sorunlarını çözmek ve geliştiricilere daha basit ve etkili bir şekilde web uygulamaları oluşturma imkanı sağlamaktır. jQuery, özellikle JavaScript ve DOM manipülasyonu konusunda tecrübesi olmayan geliştiriciler için kullanımı daha basit ve anlaşılır hale getirir. jQuery, CSS seçicileri kullanarak DOM elemanlarına kolayca ulaşmayı, olay dinleme ve tepki verme işlemlerini basitleştirmeyi ve AJAX tabanlı veri alışverişini kolaylaştırmayı sağlar. Kod yazımını kısaltarak ve basitleştirerek geliştirme sürecini hızlandırır. Ancak, modern JavaScript ve tarayıcı teknolojilerinin gelişmesiyle birlikte, jQuery'ye olan bağımlılık azalmıştır ve birçok durumda jQuery kullanmak yerine saf JavaScript kullanmak tercih edilebilir hale gelmiştir. https://www.serhatvarli.com/blog-detay/javascript-nedir-14 JavaScript, genellikle web tarayıcılarında kullanılan bir programlama dilidir.  JavaScript 2026-04-04T02:22:08+02:00 message JavaScript, genellikle web tarayıcılarında kullanılan bir programlama dilidir. Web sayfalarını dinamik hale getirmek, kullanıcı etkileşimleri sağlamak, veri manipülasyonu yapmak gibi birçok görevde kullanılır. JavaScript, tarayıcı tarafında çalışan bir betik dilidir ve HTML ile birlikte kullanılarak web sayfalarının etkileşimli hale gelmesini sağlar. JavaScript'in temel özellikleri şunlardır: Tarayıcı Tarafında Çalışma: JavaScript, genellikle tarayıcılar tarafından yorumlanan bir dil olarak çalışır. Bu nedenle, tarayıcı üzerinde doğrudan çalışabilir ve web sayfalarına etkileşim ekleyebilir. Dinamik ve Hafif: JavaScript, tarayıcıda çalışan hafif bir dil olduğu için web sayfalarını dinamik hale getirmek için idealdir. Kullanıcı etkileşimleri, form doğrulama, animasyonlar gibi görevleri kolaylıkla yerine getirebilir.. Nesne Tabanlı Programlama: JavaScript, nesne tabanlı programlama (Object-Oriented Programming - OOP) paradigmasını destekler. Bu, kodun organizasyonunu ve tekrar kullanılabilirliğini artırmak için nesnelerin kullanılmasını içerir.. Platform Bağımsızlığı: JavaScript, tarayıcı tabanlı bir dil olduğu için platform bağımsızdır. Yani farklı işletim sistemleri üzerinde çalışabilir.. HTML ve CSS Entegrasyonu: JavaScript, HTML ve CSS ile birlikte kullanılarak, web sayfalarını daha etkileşimli ve dinamik hale getirebilir. Tarayıcı üzerindeki DOM (Document Object Model) üzerinde işlemler yaparak, sayfa içeriğini dinamik olarak değiştirebilir.. JavaScript, web geliştirmenin temel taşlarından biri olup, günümüzde sadece tarayıcı tabanlı değil, server tarafında da kullanılan popüler bir dil haline gelmiştir (Node.js gibi teknolojilerle). https://www.serhatvarli.com/blog-detay/html-5-nedir-13 HTML5 (Hypertext Markup Language version 5), web üzerinde içerik oluşturmak ve yapılandırmak için kullanılan HTML standardının en son sürümüdür. Html 5 2026-04-04T02:22:08+02:00 message HTML5 (Hypertext Markup Language version 5), web üzerinde içerik oluşturmak ve yapılandırmak için kullanılan HTML standardının en son sürümüdür. Bu, web geliştirmede temel bir teknoloji olup, tüm büyük tarayıcılar tarafından desteklenmektedir. HTML5, önceki sürümleri olan HTML 4.01 ve XHTML 1.0'a göre birçok yeni özellik ve geliştirmeyi içermektedir. Semantik Elemanlar: HTML5, '<article>', '<section>', '<nav>', '<header>', '<footer>', '<aside>', '<figure>' ve '<figcaption>' gibi bir dizi yeni semantik eleman içerir. Bu elemanlar içeriğin yapısını ve anlamını belirlemeye yardımcı olur. Ses ve Video: HTML5, üçüncü taraf eklentilere gerek olmadan ses ve video içeriği gömmek için doğal destek sağlar. '<audio>' ve '<video>' elemanları, medya dosyalarını doğrudan web sayfalarına gömmek için kullanılır. html <audio controls> <source src="ses.mp3" type="audio/mp3"> Tarayıcınız ses etiketini desteklemiyor. </audio> <video width="400" height="300" controls> <source src="video.mp4" type="video/mp4"> Tarayıcınız video etiketini desteklemiyor. </video> Canvas: '<canvas>' elemanı, JavaScript kullanarak grafik ve animasyonlar için bir çizim yüzeyi sağlar. Genellikle oyunlar, grafikler ve etkileşimli içerikler oluşturmak için kullanılır. Html <canvas id="benimCanvas" width="200" height="100"></canvas> Yerel Depolama ve Oturum Depolama: HTML5, localStorage ve sessionStorage API'larını içerir. Bu API'lar, kullanıcının tarayıcısında veri depolamak için kullanılır. Bu, oturumlar arasında veri saklamak için bir yol sağlar. javascript // Veriyi yerel depolamada sakla localStorage.setItem("anahtar", "değer"); // Veriyi yerel depolamadan al var veri = localStorage.getItem("anahtar"); Coğrafi Konum: HTML5, web sitelerinin kullanıcının coğrafi konumunu Geolocation API aracılığıyla talep etmelerine olanak tanır. Bu, konum tabanlı hizmetlere ihtiyaç duyan uygulamalar için faydalıdır. javascript if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { console.log("Geolocation is not supported by this browser."); } function showPosition(position) { console.log("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude); } Web Workers: HTML5, web Workers kavramını tanıtarak geliştiricilere ana sayfadan bağımsız olarak arka planda betik çalıştırma olanağı sağlar. Bu, kaynak yoğun görevleri ayrı iş parçacıklarına aktararak daha iyi performans sağlar. javascript // Yeni bir worker oluştur var worker = new Worker("worker.js"); // Worker gelen mesajları dinle worker.onmessage = function(event) { console.log("Message from worker: " + event.data); }; // Worker mesaj gönder worker.postMessage("Hello from the main page!"); Bunlar, HTML5'te tanıtılan birkaç örnek özelliktir. Web geliştirme teknolojileri evrimleştikçe, HTML5 modern ve etkileşimli web uygulamaları oluşturmak için temel bir yapı taşı olarak kalmaya devam eder. https://www.serhatvarli.com/blog-detay/css-3-nedir-12 CSS (Cascading Style Sheets), web sayfalarını düzenlemek ve görsel stilini belirlemek için kullanılan bir stil dilidir. Css 3 2026-04-04T02:22:08+02:00 message CSS (Cascading Style Sheets), web sayfalarını düzenlemek ve görsel stilini belirlemek için kullanılan bir stil dilidir. CSS, HTML veya XML gibi belge türleriyle birlikte kullanılır ve web tarayıcıları tarafından bu belgelerin nasıl görüntüleneceğini belirlemek için kullanılır. İşte temel CSS özelliklerinden bazıları Türkçe açıklamalarıyla birlikte: Renkler: css /* Renk adı kullanımı */ color: red; /* Hex renk kodu kullanımı */ color: #ff0000; /* RGB renk kodu kullanımı */ color: rgb(255, 0, 0); Arka Plan: css /* Renkli arka plan */ background-color: yellow; /* Arka plan resmi */ background-image: url('resim.png'); Yazı Stili: css /* Yazı tipi ve boyutu */ font-family: 'Arial', sans-serif; font-size: 16px; /* Kalın yazı */ font-weight: bold; /* İtalik yazı */ font-style: italic; Kenarlık ve Yarıçap: css /* Kenarlık rengi, kalınlığı ve stili */ border: 2px solid blue; /* Köşe yarıçapı */ border-radius: 5px; Gölgeler: css /* Kutuya gölge ekleme */ box-shadow: 5px 5px 10px gri; Hizalama: css /* Metni ortala */ text-align: center; /* Kutuyu ortala */ margin: 0 auto; Görünürlük: css /* Görünürlük ayarı */ display: none; /* Görünmez */ display: block; /* Normal */ Bu temel CSS özellikleri, web sayfalarını oluştururken kullanabileceğiniz bazı stil seçeneklerini içermektedir. CSS'nin geniş bir yelpazede özelliklere sahip olduğunu unutmayın ve ihtiyacınıza göre belirli özellikleri ve değerleri özelleştirebilirsiniz.