{"id":37692,"date":"2026-01-12T19:41:20","date_gmt":"2026-01-12T16:41:20","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37692"},"modified":"2026-01-12T19:41:20","modified_gmt":"2026-01-12T16:41:20","slug":"vue-js-ile-ilk-adim-hello-world-uygulamasi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/","title":{"rendered":"Vue.js ile \u0130lk Ad\u0131m: &#8216;Hello World&#8217; Uygulamas\u0131"},"content":{"rendered":"<p><body><\/p>\n<h2>Vue.js ile \u0130lk Ad\u0131m: &#8216;Hello World&#8217; Uygulamas\u0131<\/h2>\n<h3>Giri\u015f: Vue.js D\u00fcnyas\u0131na Ho\u015f Geldiniz<\/h3>\n<p>Modern web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 aray\u00fczleri (UI) olu\u015fturmak i\u00e7in bir\u00e7ok g\u00fc\u00e7l\u00fc JavaScript \u00e7er\u00e7evesi bulunmaktad\u0131r. React ve Angular gibi devlerin yan\u0131nda, Vue.js, \u00f6\u011frenme kolayl\u0131\u011f\u0131, esnekli\u011fi ve performans\u0131yla \u00f6n plana \u00e7\u0131kan, a\u015famal\u0131 (progressive) bir \u00e7er\u00e7evedir. K\u00fc\u00e7\u00fck, etkile\u015fimli bile\u015fenlerden karma\u015f\u0131k tek sayfa uygulamalar\u0131na (SPA) kadar geni\u015f bir yelpazede kullan\u0131labilen Vue.js, \u00f6zellikle geli\u015ftirici deneyimine verdi\u011fi \u00f6nemle tan\u0131n\u0131r.<\/p>\n<p>Bu makale, Vue.js&#8217;e yeni ba\u015flayanlar i\u00e7in bir rehber niteli\u011findedir. Amac\u0131m\u0131z, &#8220;Hello World&#8221; gibi basit bir uygulama \u00fczerinden Vue.js&#8217;in temel kavramlar\u0131n\u0131, kurulum y\u00f6ntemlerini ve \u00e7al\u0131\u015fma prensiplerini ad\u0131m ad\u0131m a\u00e7\u0131klamakt\u0131r. Bu yolculu\u011fun sonunda, kendi ilk Vue.js uygulaman\u0131z\u0131 olu\u015fturabilecek ve \u00e7er\u00e7evenin sundu\u011fu reaktif d\u00fcnyaya ilk ad\u0131m\u0131 atm\u0131\u015f olacaks\u0131n\u0131z.<\/p>\n<h3>Ba\u015flamadan \u00d6nce: Gerekli Ortam<\/h3>\n<p>Vue.js ile \u00e7al\u0131\u015fmaya ba\u015flamadan \u00f6nce baz\u0131 temel bilgilere ve ara\u00e7lara sahip olman\u0131z gerekmektedir. Bunlar, geli\u015ftirme s\u00fcrecinizi sorunsuz hale getirecek ve Vue.js \u00f6\u011freniminizi h\u0131zland\u0131racakt\u0131r.<\/p>\n<p>*   <strong>Temel HTML, CSS ve JavaScript Bilgisi:<\/strong> Vue.js, bu temel web teknolojileri \u00fczerine in\u015fa edilmi\u015ftir. HTML yap\u0131s\u0131, CSS stil tan\u0131mlar\u0131 ve JavaScript&#8217;in temel programlama kavramlar\u0131 (de\u011fi\u015fkenler, fonksiyonlar, d\u00f6ng\u00fcler, ko\u015fullu ifadeler) hakk\u0131nda bilgi sahibi olman\u0131z b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.<br \/>\n*   <strong>Node.js ve npm\/yarn:<\/strong> Vue CLI (Command Line Interface) gibi ara\u00e7lar\u0131 kullanmak ve proje ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netmek i\u00e7in Node.js \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131na ve paket y\u00f6neticisi npm&#8217;e (Node Package Manager) veya yarn&#8217;a ihtiyac\u0131n\u0131z olacakt\u0131r. Node.js&#8217;i resmi web sitesinden indirip kurabilirsiniz. Kurulumla birlikte npm de otomatik olarak y\u00fcklenecektir. <code>node -v<\/code> ve <code>npm -v<\/code> komutlar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak kurulumu do\u011frulayabilirsiniz.<br \/>\n*   <strong>Kod D\u00fczenleyici:<\/strong> Geli\u015ftirme s\u00fcrecinizde size yard\u0131mc\u0131 olacak iyi bir kod d\u00fczenleyici (IDE) kullanman\u0131z \u00f6nerilir. Visual Studio Code (VS Code), Vue.js i\u00e7in zengin eklenti deste\u011fi (Volar, ESLint gibi) sayesinde pop\u00fcler bir tercihtir.<\/p>\n<p>Bu \u00f6n ko\u015fullar\u0131 sa\u011flad\u0131ktan sonra, Vue.js ile &#8220;Hello World&#8221; uygulamam\u0131z\u0131 olu\u015fturmaya haz\u0131r\u0131z.<\/p>\n<h3>Vue.js Proje Kurulum Y\u00f6ntemleri<\/h3>\n<p>Vue.js projelerini ba\u015flatman\u0131n temelde iki ana yolu vard\u0131r: CDN (Content Delivery Network) kullanarak h\u0131zl\u0131 ve basit bir ba\u015flang\u0131\u00e7 yapmak veya Vue CLI (Command Line Interface) ile daha kapsaml\u0131 ve profesyonel bir proje yap\u0131s\u0131 kurmak. Her iki y\u00f6ntem de farkl\u0131 senaryolar i\u00e7in avantajlar sunar.<\/p>\n<h4>1. CDN ile H\u0131zl\u0131 Ba\u015flang\u0131\u00e7<\/h4>\n<p>CDN, Vue.js k\u00fct\u00fcphanesini do\u011frudan HTML dosyan\u0131za eklemenin en basit yoludur. Bu y\u00f6ntem, \u00f6zellikle k\u00fc\u00e7\u00fck, etkile\u015fimli bile\u015fenler eklemek istedi\u011finiz mevcut bir web sitesine veya h\u0131zl\u0131 prototipleme yapmak istedi\u011finiz durumlarda idealdir. Herhangi bir derleme ad\u0131m\u0131na veya Node.js kurulumuna ihtiya\u00e7 duymazs\u0131n\u0131z.<\/p>\n<p>CDN kullanarak &#8220;Hello World&#8221; uygulamas\u0131 olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyebilirsiniz:<\/p>\n<p>1.  Bo\u015f bir HTML dosyas\u0131 olu\u015fturun (\u00f6rne\u011fin, <code>index.html<\/code>).<br \/>\n2.  Bu dosyaya temel HTML yap\u0131s\u0131n\u0131 ekleyin.<br \/>\n3.  Vue.js k\u00fct\u00fcphanesini bir <code><script><\/code> etiketi arac\u0131l\u0131\u011f\u0131yla CDN'den y\u00fckleyin. Vue 3 i\u00e7in genellikle <code>unpkg.com<\/code> veya <code>cdn.jsdelivr.net<\/code> adresleri kullan\u0131l\u0131r.\n4.  Vue uygulaman\u0131z\u0131 ba\u015flatacak JavaScript kodunu ayr\u0131 bir <code><script><\/code> etiketi i\u00e7inde yaz\u0131n.<\/p>\n<p>Bu y\u00f6ntem, Vue.js'in temel reaktivite ve bildirimsel render \u00f6zelliklerini h\u0131zla deneyimlemek i\u00e7in m\u00fckemmeldir.<\/p>\n<h4>2. Vue CLI ile Profesyonel Kurulum<\/h4>\n<p>Vue CLI, Vue.js tek sayfa uygulamalar\u0131 (SPA'lar) geli\u015ftirmek i\u00e7in standart bir ara\u00e7 tak\u0131m\u0131d\u0131r. Geli\u015fmi\u015f \u00f6zellikler (mod\u00fcl bundler, hot-reloading, linting, test ara\u00e7lar\u0131 vb.) sunar ve b\u00fcy\u00fck \u00f6l\u00e7ekli projeler i\u00e7in \u00f6nerilen y\u00f6ntemdir. Vue CLI ile bir proje olu\u015fturdu\u011funuzda, karma\u015f\u0131k yap\u0131land\u0131rmalar\u0131 sizin i\u00e7in otomatik olarak halleder.<\/p>\n<p>Vue CLI ile bir proje kurmak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyin:<\/p>\n<p>1.  <strong>Vue CLI'\u0131 Global Olarak Kurun:<\/strong> Komut istemcinizi (terminal) a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code class=\"language-bash\">npm install -g @vue\/cli\n    # veya yarn kullan\u0131yorsan\u0131z:\n    # yarn global add @vue\/cli<\/code><\/pre>\n<p>    Bu komut, Vue CLI'\u0131 sisteminize global olarak kurar. Kurulumun ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 <code>vue --version<\/code> komutuyla kontrol edebilirsiniz.\n2.  <strong>Yeni Bir Vue Projesi Olu\u015fturun:<\/strong> Projenizi olu\u015fturmak istedi\u011finiz dizine gidin ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n<pre><code class=\"language-bash\">vue create hello-vue<\/code><\/pre>\n<p>    Bu komut, size birka\u00e7 se\u00e7enek sunacakt\u0131r (Vue 2 veya Vue 3, TypeScript deste\u011fi, Router, Vuex vb.). \u015eimdilik \"Default (Vue 3)\" se\u00e7ene\u011fini se\u00e7ebilirsiniz. CLI, gerekli t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyecek ve proje yap\u0131s\u0131n\u0131 olu\u015fturacakt\u0131r.\n3.  <strong>Proje Dizinine Girin:<\/strong><\/p>\n<pre><code class=\"language-bash\">cd hello-vue<\/code><\/pre>\n<p>4.  <strong>Projeyi \u00c7al\u0131\u015ft\u0131r\u0131n:<\/strong><\/p>\n<pre><code class=\"language-bash\">npm run serve\n    # veya yarn kullan\u0131yorsan\u0131z:\n    # yarn serve<\/code><\/pre>\n<p>    Bu komut, geli\u015ftirme sunucusunu ba\u015flat\u0131r ve uygulaman\u0131z\u0131 genellikle <code>http:\/\/localhost:8080<\/code> adresinde taray\u0131c\u0131n\u0131zda g\u00f6r\u00fcnt\u00fcleyebilirsiniz. Taray\u0131c\u0131n\u0131zda \"Welcome to Your Vue.js App\" yazan varsay\u0131lan bir sayfa g\u00f6rmelisiniz.<\/p>\n<p>Vue CLI ile olu\u015fturulan bir projenin temel yap\u0131s\u0131 genellikle \u015f\u00f6yledir:\n*   <code>public\/<\/code>: Statik dosyalar (index.html, favicon).\n*   <code>src\/<\/code>: Uygulaman\u0131z\u0131n kaynak kodlar\u0131.\n    *   <code>assets\/<\/code>: Statik varl\u0131klar (resimler, CSS dosyalar\u0131).\n    *   <code>components\/<\/code>: Yeniden kullan\u0131labilir Vue bile\u015fenleri.\n    *   <code>App.vue<\/code>: Ana uygulama bile\u015feni.\n    *   <code>main.js<\/code>: Uygulaman\u0131n giri\u015f noktas\u0131, Vue uygulamas\u0131n\u0131 ba\u015flat\u0131r.\n*   <code>package.json<\/code>: Proje ba\u011f\u0131ml\u0131l\u0131klar\u0131 ve script'leri.<\/p>\n<p>Bu iki y\u00f6ntem de Vue.js'e ba\u015flamak i\u00e7in ge\u00e7erlidir, ancak ileriye d\u00f6n\u00fck ve profesyonel projeler i\u00e7in Vue CLI kesinlikle \u00f6nerilir. \u015eimdi, her iki y\u00f6ntemle de \"Hello World\" uygulamam\u0131z\u0131 ad\u0131m ad\u0131m olu\u015ftural\u0131m.<\/p>\n<h3>\"Hello World\" Uygulamas\u0131: Ad\u0131m Ad\u0131m<\/h3>\n<p>\u015eimdi, Vue.js'in temel \u00f6zelliklerini kullanarak \"Hello World\" mesaj\u0131n\u0131 nas\u0131l g\u00f6r\u00fcnt\u00fcleyece\u011fimizi g\u00f6relim.<\/p>\n<h4>CDN Kullanarak \"Hello World\"<\/h4>\n<p>CDN y\u00f6ntemiyle, tek bir HTML dosyas\u0131 i\u00e7inde t\u00fcm Vue.js \"Hello World\" uygulamas\u0131n\u0131 olu\u015fturabiliriz.<\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Vue.js Hello World (CDN)<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            margin: 0;\n            background-color: #f4f4f4;\n            color: #333;\n        }\n        #app {\n            background-color: white;\n            padding: 30px;\n            border-radius: 8px;\n            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\n            text-align: center;\n        }\n        h2 {\n            color: #42b983; \/<em> Vue.js'in ye\u015fil rengi <\/em>\/\n            margin-bottom: 15px;\n        }\n        p {\n            font-size: 1.1em;\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- Vue.js uygulamas\u0131n\u0131n ba\u011flanaca\u011f\u0131 DOM elementi -->\n    <div id=\"app\">\n        <h2>{{ message }}<\/h2>\n        <p>Bu mesaj Vue.js taraf\u0131ndan reaktif olarak y\u00f6netiliyor!<\/p>\n    <\/div>\n\n    <!-- Vue.js k\u00fct\u00fcphanesini CDN'den dahil edin -->\n    <script src=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js\"><\/script>\n    <script>\n        \/\/ Vue 3'te bir uygulama \u00f6rne\u011fi olu\u015fturmak i\u00e7in createApp API'si kullan\u0131l\u0131r.\n        const { createApp } = Vue;\n\n        \/\/ createApp fonksiyonu, bir \"uygulama \u00f6rne\u011fi\" (application instance) d\u00f6nd\u00fcr\u00fcr.\n        \/\/ Bu \u00f6rnek, uygulaman\u0131n k\u00f6k bile\u015feninin se\u00e7eneklerini al\u0131r.\n        createApp({\n            \/\/ data fonksiyonu, Vue uygulamas\u0131n\u0131n reaktif durumunu tan\u0131mlar.\n            \/\/ Burada tan\u0131mlanan \u00f6zellikler (message gibi) otomatik olarak reaktif hale gelir.\n            data() {\n                return {\n                    message: 'Merhaba D\u00fcnya, Vue.js!' \/\/ G\u00f6r\u00fcnt\u00fcleyece\u011fimiz mesaj\n                }\n            }\n        }).mount('#app'); \/\/ Uygulama \u00f6rne\u011fini, id'si \"app\" olan HTML elementine ba\u011fla.\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Bu kodu bir <code>index.html<\/code> dosyas\u0131 olarak kaydedip taray\u0131c\u0131n\u0131zda a\u00e7t\u0131\u011f\u0131n\u0131zda, ortalanm\u0131\u015f bir kutu i\u00e7inde \"Merhaba D\u00fcnya, Vue.js!\" yaz\u0131s\u0131n\u0131 g\u00f6rmelisiniz.<\/p>\n<p><strong>Kodun A\u00e7\u0131klamas\u0131:<\/strong><\/p>\n<p>*   <strong><code><\/p>\n<div id=\"app\"><\/code>:<\/strong> Bu, Vue.js uygulamas\u0131n\u0131n kontrol edece\u011fi HTML elementidir. Vue, bu elementin i\u00e7indeki her \u015feyi y\u00f6netecektir. <code>mount('#app')<\/code> \u00e7a\u011fr\u0131s\u0131 ile Vue uygulamas\u0131n\u0131 bu <code>div<\/code>'e ba\u011fl\u0131yoruz.\n*   <strong><code>{{ message }}<\/code>:<\/strong> Bu, Vue.js'in \"mustache\" (b\u0131y\u0131k) s\u00f6zdizimi olarak bilinen bildirimsel veri ba\u011flama y\u00f6ntemidir. <code>data<\/code> i\u00e7inde tan\u0131mlad\u0131\u011f\u0131m\u0131z <code>message<\/code> \u00f6zelli\u011finin de\u011ferini burada g\u00f6r\u00fcnt\u00fcler. <code>message<\/code> de\u011feri de\u011fi\u015fti\u011finde, DOM'daki bu k\u0131s\u0131m otomatik olarak g\u00fcncellenir. Bu, Vue.js'in reaktif do\u011fas\u0131n\u0131n temel bir g\u00f6stergesidir.\n*   <strong><code><script src=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js\"><\/script><\/code>:<\/strong> Vue.js k\u00fct\u00fcphanesini web sayfam\u0131za dahil eden CDN ba\u011flant\u0131s\u0131d\u0131r.<br \/>\n*   <strong><code>const { createApp } = Vue;<\/code>:<\/strong> Vue 3'te, global <code>Vue<\/code> nesnesinden <code>createApp<\/code> fonksiyonunu i\u00e7e aktar\u0131yoruz. Bu, uygulaman\u0131z i\u00e7in yeni bir Vue uygulama \u00f6rne\u011fi olu\u015fturman\u0131n yoludur.<br \/>\n*   <strong><code>createApp({...}).mount('#app');<\/code>:<\/strong><br \/>\n    *   <code>createApp({...})<\/code>: Bir Vue uygulama \u00f6rne\u011fi olu\u015fturur. Parantez i\u00e7indeki obje, bu uygulaman\u0131n k\u00f6k bile\u015feninin se\u00e7eneklerini tan\u0131mlar.<br \/>\n    *   <code>data() { return { message: '...' } }<\/code>: Bu, k\u00f6k bile\u015fenimizin reaktif veri deposudur. <code>message<\/code> \u00f6zelli\u011fi, uygulaman\u0131n durumunun bir par\u00e7as\u0131d\u0131r.<br \/>\n    *   <code>.mount('#app')<\/code>: Olu\u015fturulan Vue uygulamas\u0131n\u0131, DOM'daki <code>id=\"app\"<\/code> elementine ba\u011flar. Vue art\u0131k bu elementin ve i\u00e7indekilerin kontrol\u00fcn\u00fc ele al\u0131r.<\/p>\n<h4>Vue CLI Kullanarak \"Hello World\"<\/h4>\n<p>Vue CLI ile olu\u015fturulan bir projede, \"Hello World\" uygulamas\u0131n\u0131 Single File Components (SFC) ad\u0131 verilen <code>.vue<\/code> dosyalar\u0131 arac\u0131l\u0131\u011f\u0131yla geli\u015ftiririz. Bu dosyalar, bir bile\u015fenin \u015fablonunu (template), JavaScript mant\u0131\u011f\u0131n\u0131 (script) ve stilini (style) tek bir yerde birle\u015ftirir.<\/p>\n<p>Daha \u00f6nce <code>vue create hello-vue<\/code> komutuyla olu\u015fturdu\u011funuz <code>hello-vue<\/code> projesinin i\u00e7ine girin (<code>cd hello-vue<\/code>) ve projenizi \u00e7al\u0131\u015ft\u0131r\u0131n (<code>npm run serve<\/code>). Taray\u0131c\u0131n\u0131zda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz varsay\u0131lan \"Welcome to Your Vue.js App\" sayfas\u0131n\u0131 kendi \"Hello World\" mesaj\u0131m\u0131zla de\u011fi\u015ftirelim.<\/p>\n<p>1.  <strong><code>src\/components\/HelloWorld.vue<\/code> dosyas\u0131n\u0131 d\u00fczenleyin:<\/strong><br \/>\n    Bu dosya, varsay\u0131lan olarak gelen bir \"Hello World\" bile\u015fenidir. \u0130\u00e7eri\u011fini kendi mesaj\u0131m\u0131z\u0131 ve basit bir etkile\u015fimi g\u00f6sterecek \u015fekilde de\u011fi\u015ftirelim.<\/p>\n<pre><code class=\"language-vue\"><template>\n      <div class=\"hello\">\n        <h3>{{ msg }}<\/h3> <!-- Parent'tan gelen 'msg' prop'unu kullan\u0131yoruz -->\n        <p>\n          Vue CLI ile olu\u015fturulan ilk \"Hello World\" bile\u015feniniz.\n          Bu mesaj, bir bile\u015fenin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6stermektedir.\n        <\/p>\n        <button @click=\"sayHello\">Selam Ver<\/button>\n        <p v-if=\"greeted\">{{ greetingMessage }}<\/p>\n      <\/div>\n    <\/template>\n\n    <script>\n    export default {\n      name: 'HelloWorld', \/\/ Bile\u015fenin ad\u0131\n      props: {\n        msg: String \/\/ Parent component'ten (App.vue) gelen bir prop (\u00f6zellik)\n      },\n      data() {\n        return {\n          greeted: false,\n          greetingMessage: ''\n        };\n      },\n      methods: {\n        sayHello() {\n          this.greeted = true;\n          this.greetingMessage = <code>Merhaba ${this.msg.replace('Welcome to Your Vue.js App', 'D\u00fcnya')}!<\/code>;\n          \/\/ msg prop'unu do\u011frudan de\u011fi\u015ftiremeyiz, bu y\u00fczden yeni bir mesaj olu\u015fturduk.\n        }\n      }\n    }\n    <\/script>\n\n    <style scoped>\n    .hello {\n      margin-top: 20px;\n      color: #333;\n      text-align: center;\n    }\n    h3 {\n      color: #42b983; \/<em> Vue ye\u015fili <\/em>\/\n      font-size: 2.2em;\n      margin-bottom: 10px;\n    }\n    p {\n      font-size: 1.1em;\n      line-height: 1.6;\n    }\n    button {\n        padding: 12px 25px;\n        background-color: #42b983;\n        color: white;\n        border: none;\n        border-radius: 6px;\n        cursor: pointer;\n        margin-top: 20px;\n        font-size: 1em;\n        transition: background-color 0.3s ease;\n    }\n    button:hover {\n        background-color: #368a6e;\n    }\n    <\/style><\/code><\/pre>\n<p>2.  <strong><code>src\/App.vue<\/code> dosyas\u0131n\u0131 inceleyin:<\/strong><br \/>\n    Bu dosya, ana uygulama bile\u015fenidir ve <code>HelloWorld<\/code> bile\u015fenini i\u00e7e aktar\u0131r ve kullan\u0131r.<\/p>\n<pre><code class=\"language-vue\"><template>\n      <img decoding=\"async\" alt=\"Vue logo\" src=\".\/assets\/logo.png\">\n      <!-- HelloWorld bile\u015fenini kullan\u0131yoruz ve ona 'msg' prop'unu iletiyoruz -->\n      <HelloWorld msg=\"Vue.js \u0130lk Uygulama\" \/>\n    <\/template>\n\n    <script>\n    import HelloWorld from '.\/components\/HelloWorld.vue' \/\/ HelloWorld bile\u015fenini i\u00e7e aktar\n\n    export default {\n      name: 'App',\n      components: {\n        HelloWorld \/\/ HelloWorld bile\u015fenini bu bile\u015fende kullan\u0131labilir hale getir\n      }\n    }\n    <\/script>\n\n    <style>\n    #app {\n      font-family: Avenir, Helvetica, Arial, sans-serif;\n      -webkit-font-smoothing: antialiased;\n      -moz-osx-font-smoothing: grayscale;\n      text-align: center;\n      color: #2c3e50;\n      margin-top: 60px;\n    }\n    <\/style><\/code><\/pre>\n<p>3.  <strong><code>src\/main.js<\/code> dosyas\u0131n\u0131 inceleyin:<\/strong><br \/>\n    Bu, uygulaman\u0131n giri\u015f noktas\u0131d\u0131r. <code>App.vue<\/code>'yu i\u00e7e aktar\u0131r ve bir Vue uygulama \u00f6rne\u011fi olu\u015fturup <code>#app<\/code> elementine ba\u011flar.<\/p>\n<pre><code class=\"language-javascript\">import { createApp } from 'vue'\n    import App from '.\/App.vue' \/\/ App bile\u015fenini i\u00e7e aktar\n\n    createApp(App).mount('#app') \/\/ App bile\u015fenini k\u00f6k bile\u015fen olarak kullanarak uygulama olu\u015ftur ve #app'e ba\u011fla<\/code><\/pre>\n<p>De\u011fi\u015fiklikleri kaydettikten sonra, taray\u0131c\u0131n\u0131zda otomatik olarak g\u00fcncellenen sayfada \"Vue.js \u0130lk Uygulama\" ba\u015fl\u0131\u011f\u0131n\u0131 ve alt\u0131ndaki metni g\u00f6rmelisiniz. \"Selam Ver\" butonuna t\u0131klad\u0131\u011f\u0131n\u0131zda ise yeni bir mesaj\u0131n belirdi\u011fini fark edeceksiniz.<\/p>\n<p><strong>Kodun A\u00e7\u0131klamas\u0131 (Vue CLI):<\/strong><\/p>\n<p>*   <strong><code>.vue<\/code> Dosyalar\u0131 (Single File Components - SFC):<\/strong> Vue CLI projelerinde her bile\u015fen <code>.vue<\/code> uzant\u0131l\u0131 tek bir dosya i\u00e7inde tan\u0131mlan\u0131r. Bu dosya \u00fc\u00e7 ana b\u00f6l\u00fcmden olu\u015fur:<br \/>\n    *   <strong><code><template><\/code>:<\/strong> Bile\u015fenin HTML yap\u0131s\u0131n\u0131 i\u00e7erir. <code>{{ }}<\/code> ile veri ba\u011flama ve direktifler (<code>v-if<\/code>, <code>@click<\/code> gibi) burada kullan\u0131l\u0131r.<br \/>\n    *   <strong><code><script><\/code>:<\/strong> Bile\u015fenin JavaScript mant\u0131\u011f\u0131n\u0131 i\u00e7erir. <code>export default<\/code> ile bile\u015fenin se\u00e7enekleri (veri, metotlar, prop'lar vb.) tan\u0131mlan\u0131r.<br \/>\n    *   <strong><code><\/p>\n<style scoped><\/code>:<\/strong> Bile\u015fene \u00f6zg\u00fc CSS stillerini i\u00e7erir. <code>scoped<\/code> niteli\u011fi, bu stillerin yaln\u0131zca mevcut bile\u015fene uygulanmas\u0131n\u0131 sa\u011flar ve di\u011fer bile\u015fenlerle \u00e7ak\u0131\u015fmay\u0131 \u00f6nler.<br \/>\n*   <strong><code>props<\/code>:<\/strong> <code>HelloWorld.vue<\/code> i\u00e7indeki <code>props: { msg: String }<\/code> tan\u0131m\u0131, bu bile\u015fenin d\u0131\u015far\u0131dan (yani parent bile\u015fenden <code>App.vue<\/code>'dan) <code>msg<\/code> ad\u0131nda bir \u00f6zellik (prop) alabilece\u011fini belirtir. <code>App.vue<\/code> i\u00e7inde <code><HelloWorld msg=\"Vue.js \u0130lk Uygulama\" \/><\/code> \u015feklinde bu prop'u iletiyoruz. Props'lar, parent'tan child'a veri aktarman\u0131n birincil yoludur.<br \/>\n*   <strong><code>data()<\/code>:<\/strong> Bu fonksiyon, bile\u015fenin reaktif yerel durumunu tan\u0131mlar. <code>greeted<\/code> ve <code>greetingMessage<\/code> gibi \u00f6zellikler, bile\u015fenin kendi i\u00e7indeki durumunu temsil eder ve de\u011fi\u015ftiklerinde bile\u015fenin \u015fablonu otomatik olarak g\u00fcncellenir.<br \/>\n*   <strong><code>methods<\/code>:<\/strong> Bu obje, bile\u015fenin kullanabilece\u011fi fonksiyonlar\u0131 (olay i\u015fleyicileri gibi) i\u00e7erir. <code>sayHello<\/code> metodu, <code>greeted<\/code> durumunu g\u00fcnceller ve <code>greetingMessage<\/code>'\u0131 ayarlar. <code>this<\/code> anahtar kelimesi, bile\u015fenin kendi <code>data<\/code> \u00f6zelliklerine ve <code>methods<\/code>'lar\u0131na eri\u015fmek i\u00e7in kullan\u0131l\u0131r.<br \/>\n*   <strong><code>@click=\"sayHello\"<\/code>:<\/strong> Bu, <code>v-on:click<\/code> direktifinin k\u0131sa yaz\u0131m \u015feklidir. Butona t\u0131kland\u0131\u011f\u0131nda <code>sayHello<\/code> metodunu \u00e7al\u0131\u015ft\u0131r\u0131r.<br \/>\n*   <strong><code>v-if=\"greeted\"<\/code>:<\/strong> Bu, Vue.js'in ko\u015fullu render direktifidir. <code>greeted<\/code> de\u011feri <code>true<\/code> ise <code><\/p>\n<p><\/code> etiketi render edilir, <code>false<\/code> ise DOM'dan tamamen kald\u0131r\u0131l\u0131r.<\/p>\n<p>Vue CLI ile \u00e7al\u0131\u015fmak, daha organize, \u00f6l\u00e7eklenebilir ve \u00f6zelliklerle dolu uygulamalar geli\u015ftirmenize olanak tan\u0131r.<\/p>\n<h3>Vue.js'in Temel Kavramlar\u0131<\/h3>\n<p>\"Hello World\" \u00f6rneklerinde kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z ve Vue.js'in g\u00fcc\u00fcn\u00fc olu\u015fturan baz\u0131 temel kavramlar\u0131 daha yak\u0131ndan inceleyelim.<\/p>\n<h4>Declarative Rendering (Bildirimsel Olu\u015fturma)<\/h4>\n<p>Vue.js, verileri do\u011frudan DOM'a ba\u011flayarak bildirimsel bir yakla\u015f\u0131mla \u00e7al\u0131\u015f\u0131r. Imperative (emirsel) yakla\u015f\u0131mdan farkl\u0131 olarak (\u00f6rne\u011fin, <code>document.getElementById('app').innerHTML = 'Hello World';<\/code>), Vue'da DOM manip\u00fclasyonu hakk\u0131nda endi\u015felenmenize gerek kalmaz. Siz sadece veriyi tan\u0131mlars\u0131n\u0131z ve Vue, bu verinin DOM'da nas\u0131l g\u00f6r\u00fcnece\u011fini otomatik olarak halleder.<\/p>\n<p><code>{{ message }}<\/code> s\u00f6zdizimi, \"mustache\" (b\u0131y\u0131k) s\u00f6zdizimi olarak bilinir ve bildirimsel render'\u0131n en temel \u015feklidir. JavaScript ifadeleri de b\u0131y\u0131klar aras\u0131na yaz\u0131labilir (\u00f6rne\u011fin, <code>{{ message.toUpperCase() }}<\/code>).<\/p>\n<h4>Reactivity (Reaktivite)<\/h4>\n<p>Vue.js'in en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri reaktivite sistemidir. Bir Vue uygulamas\u0131n\u0131n <code>data<\/code> \u00f6zelli\u011fi i\u00e7inde tan\u0131mlanan herhangi bir veri, reaktif hale getirilir. Bu, o verinin de\u011feri de\u011fi\u015fti\u011finde, onu kullanan t\u00fcm DOM par\u00e7alar\u0131n\u0131n otomatik ve verimli bir \u015fekilde g\u00fcncellenece\u011fi anlam\u0131na gelir.<\/p>\n<p>Vue 3, reaktiviteyi uygulamak i\u00e7in JavaScript'in Proxy API'sini kullan\u0131r. Bu, Vue'nun veri de\u011fi\u015fikliklerini daha derinlemesine izlemesine ve daha performansl\u0131 g\u00fcncellemeler yapmas\u0131na olanak tan\u0131r. Siz <code>this.message = 'Yeni Mesaj';<\/code> dedi\u011finizde, Vue otomatik olarak ilgili DOM elementini bulur ve g\u00fcnceller, sizin manuel olarak DOM manip\u00fclasyonu yapman\u0131za gerek kalmaz.<\/p>\n<h4>Vue Uygulama \u00d6rne\u011fi (<code>createApp<\/code>)<\/h4>\n<p>Her Vue uygulamas\u0131, bir <code>uygulama \u00f6rne\u011fi<\/code> ile ba\u015flar. Vue 3'te bu, <code>createApp<\/code> fonksiyonu ile olu\u015fturulur. <code>createApp<\/code> bir obje al\u0131r ve bu obje, uygulaman\u0131n k\u00f6k bile\u015feninin se\u00e7eneklerini tan\u0131mlar (\u00f6rne\u011fin <code>data<\/code>, <code>methods<\/code>, <code>components<\/code> vb.). Olu\u015fturulan uygulama \u00f6rne\u011fi, <code>.mount()<\/code> metodu ile bir DOM elementine ba\u011flanana kadar hi\u00e7bir \u015feyi render etmez.<\/p>\n<pre><code class=\"language-javascript\">const app = createApp({\n    \/\/ K\u00f6k bile\u015fen se\u00e7enekleri\n    data() { return { ... } },\n    methods: { ... }\n});\n\napp.mount('#app'); \/\/ Uygulamay\u0131 #app elementine ba\u011fla<\/code><\/pre>\n<h4><code>data<\/code> Se\u00e7ene\u011fi<\/h4>\n<p><code>data<\/code> se\u00e7ene\u011fi, bir Vue bile\u015feninin reaktif durumunu tan\u0131mlayan bir fonksiyondur (Vue 2'de obje de olabilirdi). Bu fonksiyon bir obje d\u00f6nd\u00fcrmelidir ve bu objenin i\u00e7indeki t\u00fcm \u00f6zellikler reaktif hale getirilir. Bile\u015fen i\u00e7inden <code>this.propertyName<\/code> \u015feklinde eri\u015filebilirler.<\/p>\n<pre><code class=\"language-javascript\">data() {\n    return {\n        productName: 'Vue.js Kitab\u0131',\n        price: 49.99,\n        inStock: true\n    };\n}<\/code><\/pre>\n<h4><code>mount<\/code> Y\u00f6ntemi<\/h4>\n<p><code>mount<\/code> y\u00f6ntemi, <code>createApp<\/code> taraf\u0131ndan olu\u015fturulan Vue uygulama \u00f6rne\u011fini, DOM'daki belirli bir HTML elementine ba\u011flamak i\u00e7in kullan\u0131l\u0131r. Bu, Vue'nun o elementin ve onun alt\u0131ndaki t\u00fcm DOM a\u011fac\u0131n\u0131n kontrol\u00fcn\u00fc ele almas\u0131n\u0131 sa\u011flar. <code>mount<\/code> edilen elementin i\u00e7eri\u011fi, Vue uygulamas\u0131n\u0131n \u015fablonu taraf\u0131ndan tamamen de\u011fi\u015ftirilir.<\/p>\n<pre><code class=\"language-javascript\">createApp(App).mount('#app');<\/code><\/pre>\n<h4>Bile\u015fenler (Components)<\/h4>\n<p>Bile\u015fenler, Vue.js'in temel yap\u0131 ta\u015flar\u0131d\u0131r. Uygulamalar\u0131 k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir ve ba\u011f\u0131ms\u0131z par\u00e7alara ay\u0131rmam\u0131z\u0131 sa\u011flarlar. Her bile\u015fen kendi \u015fablonuna, mant\u0131\u011f\u0131na ve stiline sahip olabilir. Bu, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n daha y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>Vue CLI ile olu\u015fturulan <code>.vue<\/code> uzant\u0131l\u0131 Single File Components (SFC), bile\u015fen geli\u015ftirmenin en yayg\u0131n ve verimli yoludur. SFC'ler, <code>template<\/code>, <code>script<\/code> ve <code>style<\/code> bloklar\u0131n\u0131 tek bir dosyada birle\u015ftirerek geli\u015ftirici deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n<h4><code>v-bind<\/code> ve <code>v-on<\/code> Direktifleri<\/h4>\n<p>Vue.js, HTML elementlerine \u00f6zel i\u015flevsellik kazand\u0131rmak i\u00e7in direktifler kullan\u0131r. Direktifler, <code>v-<\/code> \u00f6n ekiyle ba\u015flar.<\/p>\n<p>*   <strong><code>v-bind<\/code> (k\u0131sa yaz\u0131m\u0131 <code>:<\/code>):<\/strong> Bir HTML niteli\u011fini (attribute) dinamik olarak bir Vue verisine ba\u011flamak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir <code>img<\/code> etiketinin <code>src<\/code> niteli\u011fini veya bir butonun <code>disabled<\/code> niteli\u011fini reaktif bir de\u011fere ba\u011flayabilirsiniz.<\/p>\n<pre><code class=\"language-html\"><img :src=\"imageUrl\" :alt=\"imageAltText\">\n    <button :disabled=\"isButtonDisabled\">T\u0131kla<\/button><\/code><\/pre>\n<p>*   <strong><code>v-on<\/code> (k\u0131sa yaz\u0131m\u0131 <code>@<\/code>):<\/strong> DOM olaylar\u0131n\u0131 (click, submit, keyup vb.) dinlemek ve bir metodu \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-html\"><button @click=\"handleClick\">Bana T\u0131kla<\/button>\n    <input @input=\"updateValue\"><\/code><\/pre>\n<p>Bu direktifler, Vue.js'in etkile\u015fimli ve dinamik kullan\u0131c\u0131 aray\u00fczleri olu\u015fturma yetene\u011finin temelini olu\u015fturur.<\/p>\n<h3>S\u0131radaki Ad\u0131mlar ve Daha Fazlas\u0131<\/h3>\n<p>\"Hello World\" uygulamas\u0131yla Vue.js'e ilk ad\u0131m\u0131n\u0131z\u0131 att\u0131n\u0131z ve temel kavramlar\u0131 \u00f6\u011frendiniz. Ancak bu, sadece ba\u015flang\u0131\u00e7. Vue.js ekosistemi, daha karma\u015f\u0131k ve ger\u00e7ek d\u00fcnya uygulamalar\u0131 geli\u015ftirmek i\u00e7in bir\u00e7ok ara\u00e7 ve k\u00fct\u00fcphane sunar:<\/p>\n<p>*   <strong>Vue Router:<\/strong> Tek sayfa uygulamalar\u0131nda (SPA) farkl\u0131 URL'ler i\u00e7in farkl\u0131 bile\u015fenleri g\u00f6r\u00fcnt\u00fclemek amac\u0131yla kullan\u0131l\u0131r. Sayfalar aras\u0131 ge\u00e7i\u015fleri y\u00f6netmenizi sa\u011flar.<br \/>\n*   <strong>Durum Y\u00f6netimi (Pinia\/Vuex):<\/strong> Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e, bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131 karma\u015f\u0131k hale gelebilir. Pinia (Vue 3 i\u00e7in \u00f6nerilen) veya Vuex (daha eski Vue 2 projeleri i\u00e7in yayg\u0131n) gibi durum y\u00f6netimi k\u00fct\u00fcphaneleri, uygulaman\u0131z\u0131n global durumunu merkezi bir yerde y\u00f6netmenizi sa\u011flar.<br \/>\n*   <strong>API Entegrasyonu:<\/strong> Backend servisleriyle ileti\u015fim kurmak i\u00e7in <code>axios<\/code> veya yerle\u015fik <code>fetch<\/code> API'sini kullanarak veri al\u0131p g\u00f6ndermeyi \u00f6\u011frenmek, dinamik uygulamalar i\u00e7in kritik \u00f6neme sahiptir.<br \/>\n*   <strong>Geli\u015fmi\u015f Bile\u015fen Tasar\u0131m\u0131:<\/strong> Daha esnek ve yeniden kullan\u0131labilir bile\u015fenler olu\u015fturmak i\u00e7in slotlar, \u00f6zel direktifler, mixin'ler veya composable'lar gibi geli\u015fmi\u015f konular\u0131 ke\u015ffedebilirsiniz.<br \/>\n*   <strong>Test:<\/strong> Uygulaman\u0131z\u0131n do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak i\u00e7in birim testleri (Vitest\/Jest) ve u\u00e7tan uca testleri (Cypress\/Playwright) \u00f6\u011frenmek, profesyonel geli\u015ftirme s\u00fcrecinin bir par\u00e7as\u0131d\u0131r.<br \/>\n*   <strong>Resmi Dok\u00fcmantasyon:<\/strong> Vue.js'in resmi dok\u00fcmantasyonu (vuejs.org), son derece kapsaml\u0131 ve anla\u015f\u0131l\u0131rd\u0131r. Her zaman ba\u015fvuru kayna\u011f\u0131n\u0131z olmal\u0131d\u0131r.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p>Bu makalede, Vue.js ile \"Hello World\" uygulamas\u0131n\u0131 hem CDN hem de Vue CLI y\u00f6ntemleriyle nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 \u00f6\u011frendiniz. Vue.js'in bildirimsel render, reaktivite, bile\u015fenler, <code>data<\/code>, <code>mount<\/code>, <code>v-bind<\/code> ve <code>v-on<\/code> gibi temel kavramlar\u0131na giri\u015f yapt\u0131n\u0131z. Bu bilgiler, Vue.js d\u00fcnyas\u0131nda daha derinlemesine bir yolculu\u011fa \u00e7\u0131kman\u0131z i\u00e7in sa\u011flam bir temel olu\u015fturacakt\u0131r.<\/p>\n<p>Vue.js, sundu\u011fu kolay \u00f6\u011frenme e\u011frisi, esnekli\u011fi ve g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131yla modern web geli\u015ftirmede h\u0131zla pop\u00fclerlik kazanm\u0131\u015ft\u0131r. \u0130lk \"Hello World\" uygulaman\u0131z\u0131 ba\u015far\u0131yla \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131za g\u00f6re, art\u0131k bu g\u00fc\u00e7l\u00fc \u00e7er\u00e7eveyi ke\u015ffetmeye ve daha karma\u015f\u0131k projeler geli\u015ftirmeye haz\u0131rs\u0131n\u0131z. Unutmay\u0131n, pratik yapmak ve s\u00fcrekli \u00f6\u011frenmek, herhangi bir teknolojide ustala\u015fman\u0131n anahtar\u0131d\u0131r. Vue.js ile harika \u015feyler in\u015fa etmeye ba\u015flay\u0131n!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js ile \u0130lk Ad\u0131m: &#8216;Hello World&#8217; Uygulamas\u0131\nGiri\u015f: Vue.js D\u00fcnyas\u0131na Ho\u015f Geldiniz\nModern web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 aray\u00fczler","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-37692","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vue.js ile \u0130lk Ad\u0131m: &#039;Hello World&#039; Uygulamas\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js ile \u0130lk Ad\u0131m: &#039;Hello World&#039; Uygulamas\u0131\" \/>\n<meta property=\"og:description\" content=\"Vue.js ile \u0130lk Ad\u0131m: &#039;Hello World&#039; Uygulamas\u0131 Giri\u015f: Vue.js D\u00fcnyas\u0131na Ho\u015f Geldiniz Modern web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 aray\u00fczler\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-12T16:41:20+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue.js ile \u0130lk Ad\u0131m: &#8216;Hello World&#8217; Uygulamas\u0131\",\"datePublished\":\"2026-01-12T16:41:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/\"},\"wordCount\":2674,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/\",\"name\":\"Vue.js ile \u0130lk Ad\u0131m: 'Hello World' Uygulamas\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-12T16:41:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js ile \u0130lk Ad\u0131m: &#8216;Hello World&#8217; Uygulamas\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue.js ile \u0130lk Ad\u0131m: 'Hello World' Uygulamas\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue.js ile \u0130lk Ad\u0131m: 'Hello World' Uygulamas\u0131","og_description":"Vue.js ile \u0130lk Ad\u0131m: 'Hello World' Uygulamas\u0131 Giri\u015f: Vue.js D\u00fcnyas\u0131na Ho\u015f Geldiniz Modern web geli\u015ftirme d\u00fcnyas\u0131nda kullan\u0131c\u0131 aray\u00fczler","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-12T16:41:20+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue.js ile \u0130lk Ad\u0131m: &#8216;Hello World&#8217; Uygulamas\u0131","datePublished":"2026-01-12T16:41:20+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/"},"wordCount":2674,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/","name":"Vue.js ile \u0130lk Ad\u0131m: 'Hello World' Uygulamas\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-12T16:41:20+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-js-ile-ilk-adim-hello-world-uygulamasi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue.js ile \u0130lk Ad\u0131m: &#8216;Hello World&#8217; Uygulamas\u0131"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37692"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37692\/revisions"}],"predecessor-version":[{"id":37693,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37692\/revisions\/37693"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}