diff --git a/_config.yml b/_config.yml index a0ba1bd4c2..a7409f7b45 100644 --- a/_config.yml +++ b/_config.yml @@ -5,15 +5,15 @@ # Site title: Vue.js subtitle: -description: "The Progressive JavaScript Framework" +description: "Kademeli JavaScript Uygulama Çerçevesi" author: Evan You email: language: # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' -url: https://vuejs.org -root: / +url: https://animyrch.github.io/tr.vuejs.org/ +root: /tr.vuejs.org/ permalink: :year/:month/:day/:title/ tag_dir: tags archive_dir: archives @@ -139,7 +139,7 @@ offline: ## Docs: http://zespia.tw/hexo/docs/deployment.html deploy: type: git - repository: git@github.com:vuejs/vuejs.org.git + repository: git@github.com:animyrch/tr.vuejs.org.git feed: type: atom diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 379bddd78f..8541a7b22c 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -1,48 +1,48 @@ --- -title: Introduction +title: Giriş type: guide order: 2 --- -## What is Vue.js? +## Vue.js nedir? -Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](single-file-components.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#components--libraries). +Vue (/viyuv/ şeklinde telaffuz edilir, İngilizcedeki view kelimesi gibi) kullanıcı arayüzleri oluşturmayı sağlayan kademeli bir uygulama çerçevesidir (framework). Yazılım geliştirme ortamının her alanına nüfus eden diğer uygulama çerçevelerinin aksine Vue, basit bir temel üzerine inşa edildiğinden kademeli olarak kullanılabilir. Ana kütüphane yalnızca görüntüleme katmanına odaklanmaktadır. Öğrenmesi kolay olup diğer kütüphanelere ve mevcut projelere entegre edilebilir. Diğer taraftan, Vue [modern dosya yönetimi](single-file-components.html) ve [destekleyici kütüphaneler](https://github.com/vuejs/awesome-vue#components--libraries) eşliğinde sofistike Tek Sayfa Uygulamalar yaratmak için tamamen uygundur. -If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project. +Eğer Vue öğrenmeye başlamadan önce daha fazla bilgi edinmek isterseniz, bu teknolojinin temel prensiplerinin dile getirildiği ve örnek bir projenin sunulduğu bir video hazırladık. -If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html). +Eğer kullanıcı arayüzü programcılığı alanında deneyimli iseniz ve Vue'nin diğer kütüphaneler/uygulama çerçevelerine göre bir karşılaştırmasını görmek istiyorsanız [Diğer Uygulama Çerçeveleri ile Karşılaştırma](comparison.html) sayfasına bakınız. -
Watch a free video course on Vue Mastery
+
Vue Mastery’de ücretsiz bir ders videosu izleyebilirsiniz
-## Getting Started +## İlk Adımlar -Installation +Kurulum -

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

+

Sitemiz üzerinde sunulan kılavuz HTML, CSS ve JavaScript alanlarında orta seviye bilgiye sahip olduğunuzu varsaymaktadır. Eğer kullanıcı arayüzü programcılığına yeni giriş yapıyorsanız ilk adım olarak bir uygulama çerçevesi öğrenmeye çalışmak doğru olmayabilir. Öncelikle o alanlardaki temel bilgileri öğrenin. Ardından bu kılavuza geri dönebilirsiniz! Diğer uygulama çerçeveleri alanında deneyim işinize yarayacaktır ancak zorunlu değildir.

-The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with: +Vue.js'i denemenin en kolay yolu [JSFiddle Hello World örneği](https://jsfiddle.net/chrisvfritz/50wL7mdz/).'ne bakmaktır. Bu sayfayı başka bir sekmede açarsanız değineceğimiz birtakım basit örneklere daha yakından göz atabilirsiniz. Veya bir index.html sayfası oluşturduktan sonra Vue'yi aşağıdaki bağlantı ile projeye dâhil edebilirsiniz: ``` html - + ``` -or: +veya: ``` html - + ``` -The [Installation](installation.html) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools. +[Kurulum](installation.html) sayfası Vue'nin kurulumuna dair ilave seçenekleri açıklar. Not: Özellikle Node.js bazlı proje kurma araçlarına henüz alışkın değilseniz başlangıç seviyesinde `vue-cli` kullanmanızı tavsiye **etmiyoruz**. -If you prefer something more interactive, you can also check out [this tutorial series on Scrimba](https://scrimba.com/playlist/pXKqta), which gives you a mix of screencast and code playground that you can pause and play around with anytime. +Eğer daha etkileşimli bir ortamı tercih ederseniz, bir taraftan ekran paylaşımlı ders diğer taraftan dilediğiniz anda durdurup kodu değiştirebileceğiniz bir deney ortamı sunan [şu Scrimba ders serisine](https://scrimba.com/playlist/pXKqta) göz atabilirsiniz. -## Declarative Rendering +## Beyansal Görüntüleme -
Try this lesson on Scrimba
+
Bu derse Scrimba üzerinde göz atın
-At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax: +Verileri basit bir şablon sentaksı kullanarak DOM'a beyansal olarak yansıtmayı sağlayan bir sistem Vue.js'nin kalbinde yatmaktadır: ``` html
@@ -53,7 +53,7 @@ At the core of Vue.js is a system that enables us to declaratively render data t var app = new Vue({ el: '#app', data: { - message: 'Hello Vue!' + message: 'Merhaba Vue!' } }) ``` @@ -65,21 +65,21 @@ var app = new Vue({ var app = new Vue({ el: '#app', data: { - message: 'Hello Vue!' + message: 'Merhaba Vue!' } }) {% endraw %} -We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Open your browser's JavaScript console (right now, on this page) and set `app.message` to a different value. You should see the rendered example above update accordingly. +Bu şekilde ilk Vue uygulamamızı yaratmış olduk! Bu teknik, bir dizgi şablonunun ekrana yansıtılmasına oldukça benzemektedir fakat Vue arka planda birçok şey gerçekleştirmektedir. Şu anda veriler ve DOM arasında bir bağlantı kurulmuş ve her şey **reaktif** bir hale gelmiş durumda. Kendi gözlerinizle görmeye ne dersiniz? Tarayıcınızın JavaScript konsolunu açın (doğrudan bu sayfaya ait konsol) ve `app.message` değişkenine farklı bir değer verin. Yukarıda ekrana yansıtılmış olan örneğin girdiğiniz değere göre değiştiğini göreceksiniz. -In addition to text interpolation, we can also bind element attributes like this: +Metin değerlerinin takibine ek olarak aşağıda görebileceğiniz şekilde HTML öğesi niteliklerini de değişkenlere bağlayabilirsiniz: ``` html
- Hover your mouse over me for a few seconds - to see my dynamically bound title! + Fare imlecini üzerimde birkaç saniye bekleterek dinamik + bir şekilde bağlanmış "title" niteliğini görebilirsin!
``` @@ -87,39 +87,39 @@ In addition to text interpolation, we can also bind element attributes like this var app2 = new Vue({ el: '#app-2', data: { - message: 'You loaded this page on ' + new Date().toLocaleString() + message: Bu sayfayı şu zamanda yüklediniz: ' + new Date().toLocaleString() } }) ``` {% raw %}
- Hover your mouse over me for a few seconds to see my dynamically bound title! + Fare imlecini üzerimde bekleterek dinamik bir şekilde bağlanmış "title" niteliğini görebilirsin!
{% endraw %} -Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance." +Burada yeni bir şeye tanıklık ediyoruz. Bu kod parçasında kullanılan `v-bind` niteliğine **direktif** denilir. Direktifler, Vue çerçevesinde özel bir nitelik olduğunu belirten `v-` ifadesi ile başlar ve sizin de tahmin edebileceğiniz gibi ekrana yansıtılan DOM mimarisi üzerinde özel bir reaktivite tesis eder. Yukarıda görmekte olduğunuz kullanım "söz konusu HTML elementinin `title` niteliğini Vue örneğindeki (Vue instance) `message` özelliği ile birebir aynı tut" anlamına geliyor. -If you open up your JavaScript console again and enter `app2.message = 'some new message'`, you'll once again see that the bound HTML - in this case the `title` attribute - has been updated. +Eğer yine JavaScript konsolunu açarsanız ve `app2.message = 'dilediğiniz yeni bir mesaj'` komutunu girerseniz bağlanmış olan HTML elementinin - bu durumda `title` niteliğinin - güncelleneceğini göreceksiniz. -## Conditionals and Loops +## Koşullar ve Döngüler -
Try this lesson on Scrimba
+
Bu derse Scrimba üzerinde göz atın
-It's easy to toggle the presence of an element, too: +Bir elementin görünürlüğünü değiştirmek de son derece kolay: ``` html
- Now you see me + Şu an beni görüyorsun
``` @@ -134,7 +134,7 @@ var app3 = new Vue({ {% raw %}
- Now you see me + Şu an beni görüyorsun
{% endraw %} -Go ahead and enter `app3.seen = false` in the console. You should see the message disappear. +Şimdi konsolu açın ve `app3.seen = false` komutunu girin. Mesajın kaybolacağını göreceksiniz. -This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions.html) when elements are inserted/updated/removed by Vue. +Bu örnek yalnızca metin ve niteliklerin değil, aynı zamanda bütün DOM **yapısının** değişkenlere bağlanabileceğini göstermektedir. Vue aynı zamanda HTML elementlerinin Vue tarafından eklenmesi/güncellenmesi/kaldırılması sırasında otomatik olarak [geçiş efektlerinin](transitions.html) uygulanmasını sağlayan güçlü bir geçiş sistemi temin etmektedir. -There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used for displaying a list of items using the data from an Array: +Her biri farklı bir işleve bir dizi direktif mevcuttur. Örneğin, `v-for` direktifi bir Veri Dizisi içerisindeki verileri kullanarak ekranda bir liste görüntülemek için kullanılabilir: ``` html
@@ -166,9 +166,9 @@ var app4 = new Vue({ el: '#app-4', data: { todos: [ - { text: 'Learn JavaScript' }, - { text: 'Learn Vue' }, - { text: 'Build something awesome' } + { text: 'JavaScript Öğren' }, + { text: 'Vue Öğren' }, + { text: 'Harika bir proje gerçekleştir' } ] } }) @@ -186,34 +186,34 @@ var app4 = new Vue({ el: '#app-4', data: { todos: [ - { text: 'Learn JavaScript' }, - { text: 'Learn Vue' }, - { text: 'Build something awesome' } + { text: 'JavaScript Öğren' }, + { text: 'Vue Öğren' }, + { text: 'Harika bir proje gerçekleştir' } ] } }) {% endraw %} -In the console, enter `app4.todos.push({ text: 'New item' })`. You should see a new item appended to the list. +Konsolu açıp `app4.todos.push({ text: 'Yeni liste elemanı' })` yazın. Yeni liste elemanının listeye eklendiğini göreceksiniz. -## Handling User Input +## Kullanıcı Girdilerini Yönetmek -
Try this lesson on Scrimba
+
Bu derse Scrimba üzerinde göz atın
-To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances: +Kullanıcıların uygulamanız ile etkileşim gerçekleştirmesini sağlamak için Vue örneklerimize ait yöntemleri çağıran olay dinleyicilerini entegre etmek için `v-on` direktifini kullanabiliriz: ``` html

{{ message }}

- +
``` ``` js var app5 = new Vue({ el: '#app-5', data: { - message: 'Hello Vue.js!' + message: 'Merhaba Vue.js!' }, methods: { reverseMessage: function () { @@ -225,13 +225,13 @@ var app5 = new Vue({ {% raw %}

{{ message }}

- +
{% endraw %} -Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic. +Dikkat ederseniz yukarıdaki bu yöntem sayesinde DOM'a dokunma ihtiyacı duymadan uygulamamızın durumunu güncelleyebildik; DOM ile gerçekleştirilmesi gereken tüm etkileşimler Vue tarafından yönetiliyor ve sizin yazdığınız kod da uygulamanızın altında yatan mantığa odaklanıyor. -Vue also provides the `v-model` directive that makes two-way binding between form input and app state a breeze: +Vue aynı zamanda form girdileri ile uygulamanızın durumu arasında iki yönlü etkileşimi çocuk oyuncağı haline getiren `v-model` direktifini de size sunuyor: ``` html
@@ -256,7 +256,7 @@ Vue also provides the `v-model` directive that makes two-way binding between for var app6 = new Vue({ el: '#app-6', data: { - message: 'Hello Vue!' + message: 'Merhaba Vue!' } }) ``` @@ -269,60 +269,60 @@ var app6 = new Vue({ var app6 = new Vue({ el: '#app-6', data: { - message: 'Hello Vue!' + message: 'Merhaba Vue!' } }) {% endraw %} -## Composing with Components +## Bileşenler ile Proje İnşası -
Try this lesson on Scrimba
+
Bu derse Scrimba üzerinde göz atın
-The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components: +Bileşen sistemi Vue içerisinde önem taşıyan bir diğer konsepttir. Bu soyutlama yaklaşımı küçük, kendine yeten ve çoğu zaman yeniden kullanılabilen bileşenleri bir araya getirerek büyük çaplı uygulamalar inşa etmeyi sağlar. Düşünecek olursak her türden uygulama bir bileşenler ağacı olarak soyutlanabilir: -![Component Tree](/images/components.png) +![Bileşen Ağacı](/images/components.png) -In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward: +Vue çerçevesinde bir bileşen, önceden belirlenmiş seçeneklere sahip bir Vue örneğidir. Vue içerisinde bir bileşen oluşturmak son derece basit: ``` js -// Define a new component called todo-item +// todo-item isimli yeni bir bileşen belirlemek Vue.component('todo-item', { - template: '
  • This is a todo
    • ' + template: ‘
  • Yapılacaklar listesi elemanı
    • ' }) ``` -Now you can compose it in another component's template: +Bunun ardından bir başka bileşenin şablon metni içerisinde bu bileşeni dahil edebilirsiniz: ``` html
      - +
    ``` -But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](components.html#Props): +Fakat bu örnek her kullanımda aynı metni ekrana yansıtacağından çok yararlı olmayacaktır. Bizim amacımız bir üst kademeden bu bileşene veri aktarabilmektir. Bileşen beyanını biraz değiştirerek bir [prop](components.html#Props) kabul etmesini sağlayalım: ``` js Vue.component('todo-item', { - // The todo-item component now accepts a - // "prop", which is like a custom attribute. - // This prop is called todo. + // todo-item bileşeni şu anda bizim belirlediğimiz bir HTML + // niteliği olarak hareket edecek olan bir "prop" kabul ediyor. + // Bu prop'a todo adını verdik. props: ['todo'], template: '
  • {{ todo.text }}
    • ' }) ``` -Now we can pass the todo into each repeated component using `v-bind`: +Şimdi `v-bind` direktifini kullanarak tekrar eden her bileşen içerisinde todo niteliğini tayin edebiliriz: ``` html
      {% endraw %} -This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with more complex template and logic without affecting the parent app. +Bu çok gerçekçi bir örnek olmasa da uygulamamızı iki parçaya ayırabildik ve alt konumdaki bileşen üst kademeden prop arayüzü sayesinde yeterli ölçüde ayrılmış durumda. Bu sayede üst kademedeki uygulamayı etkilemeden `` bileşenimizi daha kompleks bir şablon ve mantık ile geliştirebiliriz. -In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](components.html), but here's an (imaginary) example of what an app's template might look like with components: +Büyük çaplı bir uygulamada geliştirme sürecini daha kolay yönetebilmek amacıyla bütün uygulamayı farklı bileşenlere bölmek önem taşır. [Kılavuzun ilerleyen kısımlarında](components.html) bileşenlere daha yakından göz atacağız fakat bir uygulama şablonunun bileşenler aracılığı ile nasıl inşa edilebileceğine dair (teorik) bir örneği aşağıda bulabilirsiniz: ``` html
      @@ -387,18 +387,18 @@ In a large application, it is necessary to divide the whole app into components
      ``` -### Relation to Custom Elements +### Özel HTML Elementlerine Benzerlik -You may have noticed that Vue components are very similar to **Custom Elements**, which are part of the [Web Components Spec](https://www.w3.org/wiki/WebComponents/). That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) and the `is` special attribute. However, there are a few key differences: +Vue bileşenlerinin, [Web Bileşenleri Standartları](https://www.w3.org/wiki/WebComponents/)nın bir parçası olan **Özel HTML Elementleri**ne son derece benzer olduğunu fark etmiş olabilirsiniz. Bunun sebebi Vue'nin bileşen sentaksının kabaca söz konusu standart baz alınarak modellenmiş olmasıdır. Örneğin Vue bileşenleri [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)'yi ve `is` özel niteliğini desteklemektedir. Fakat birtakım kilit farklılıklar da mevcuttur: -1. The Web Components Spec has been finalized, but is not natively implemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components don't require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element. +1. Web Bileşenleri Standartları tamamlanmış olsa da her tarayıcıda otomatik olarak desteklenmemektedir. Web bileşenlerini otomatik olarak destekleyen tarayıcılar Safari 10.1 ve üstü, Chrome 54 ve üstü, Firefox 63 ve üstüdür. Buna karşılık, Vue bileşenleri polyfill uygulanmasını gerektirmez ve bütün tarayıcılarda desteklenmektedir (IE9 ve üstü). Gerek olduğunda Vue bileşenleri özel HTML elementi içerisine yerleştirilebilir. -2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations. +2. Vue bileşenleri sıradan özel elementlerde yer almayan birçok önemli özelliğe sahiptir. Bunların başında ise bileşenlerarası veri akışı, kendi olay iletişimini tasarlama imkanı ve proje kurma araçlarının entegrasyonu geliyor. -Although Vue doesn't use custom elements internally, it has [great interoperability](https://custom-elements-everywhere.com/#vue) when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements. +Vue, özel HTML elementlerini kendi içerisinde kullanmasa da, özel HTML elementi olarak tüketim ve dağıtım gerçekleştirme açısından [güçlü bir çapraz kullanım kapasitesine](https://custom-elements-everywhere.com/#vue) sahiptir. Aynı zamanda Vue CLI, gerçek bir özel HTML elementi olarak tanımlanan Vue bileşenlerinin tasarlanmasına müsaade etmektedir. -## Ready for More? +## Daha fazlası için hazır mısınız? -We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all! +Bu yazı içerisinde ana Vue.js kütüphanesinin en temel özelliklerine değindik. Bu kılavuzun geri kalan kısımlarında bu konseptler ve diğer ileri düzey özellikler çok daha detaylı bir şekilde ele alınacak. Bu kılavuzun tamamını okumanızı tavsiye ederiz! - + diff --git a/src/v2/guide/installation.md b/src/v2/guide/installation.md index 765d2c89e0..9158bf0395 100644 --- a/src/v2/guide/installation.md +++ b/src/v2/guide/installation.md @@ -1,133 +1,133 @@ --- -title: Installation +title: Kurulum type: guide order: 1 -vue_version: 2.5.16 -gz_size: "30.90" +vue_version: 2.06.2010 +gz_size: "33.30" --- -### Compatibility Note +### Uyumluluk -Vue does **not** support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all [ECMAScript 5 compliant browsers](https://caniuse.com/#feat=es5). +Vue, IE8 ve daha önceki versiyonları **desteklememektedir** zira ECMAScript 5’in IE8 için ayar katmanı gerçekleştirilemeyecek özelliklerini kullanır. Fakat [ECMAScript 5 ile uyumlu tarayıcıların](https://caniuse.com/#feat=es5) tamamını desteklemektedir. -### Release Notes +### Sürüm Detayları -Latest stable version: {{vue_version}} +En son stabil versiyon: {{vue_version}} -Detailed release notes for each version are available on [GitHub](https://github.com/vuejs/vue/releases). +Her versiyona ait detaylı sürüm detayları [GitHub](https://github.com/vuejs/vue/releases) üzerinde bulunabilir. ## Vue Devtools -When using Vue, we recommend also installing the [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface. +Vue’yi kullanırken aynı zamanda Vue uygulamalarınızı daha kullanıcı-dostu bir arayüz ile incelemenizi ve hata gidermenizi sağlamak üzere tarayıcınıza [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) eklentisini eklemenizi tavsiye ederiz. -## Direct ` ``` -For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions: +Son kullanıcı ortamında belirli bir versiyon numarasını ve sürümünü hedefleyen bir bağlantı kullanmanızı tavsiye ederiz: ``` html - + ``` -If you are using native ES Modules, there is also an ES Modules compatible build: +Eğer natif ES Modülleri kullanıyorsanız ES Modüllerine uyumlu bir sürüm de mevcuttur: ``` html ``` -You can browse the source of the NPM package at [cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue/). +NPM paketinin içeriğini [cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue/) adresinde inceleyebilirsiniz. -Vue is also available on [unpkg](https://unpkg.com/vue@{{vue_version}}/dist/vue.js) and [cdnjs](https://cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js) (cdnjs takes some time to sync so the latest release may not be available yet). +Vue aynı zamanda [unpkg](https://unpkg.com/vue@{{vue_version}}/dist/vue.js) ve [cdnjs](https://cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js) üzerinde de sunulmaktadır (cdnjs senkronizasyonu biraz zaman aldığından en son versiyon orada olmayabilir). -Make sure to read about [the different builds of Vue](#Explanation-of-Different-Builds) and use the **production - version** in your published site, replacing `vue.js` with `vue.min.js`. This is a smaller build optimized for speed instead of development experience. +[Vue’nin farklı sürümleri](#Explanation-of-Different-Builds) hakkında daha fazla bilgi edinmeyi ve kullanıcılara + sunduğunuz site üzerinde `vue.js`yi `vue.min.js` ile değiştirerek **son kullanıcı versiyonunu** kullanmayı ihmal etmeyin. Bu, geliştirme deneyimi yerine hız sunmak üzere optimize edilmiş daha küçük bir sürümdür. ## NPM -NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). Vue also provides accompanying tools for authoring [Single File Components](single-file-components.html). +Vue ile büyük çaplı uygulamalar inşa etmeniz durumunda NPM ile kurulumu tavsiye ederiz. [Webpack](https://webpack.js.org/) ve [Browserify](http://browserify.org/) gibi modül paketleyicileri ile gayet uyumludur. Vue aynı zamanda [Tek Sayfa Bileşenler](single-file-components.html) oluşturmak için yardımcı araçlar temin etmektedir. ``` bash -# latest stable +# stabil en güncel versiyon $ npm install vue ``` ## CLI -Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. See [the Vue CLI docs](https://cli.vuejs.org) for more details. +Vue, büyük çaplı Tek Sayfa Uygulamaları hızlı bir şekilde inşa etmeyi sağlayan [resmi bir CLI](https://github.com/vuejs/vue-cli)’yi (Komut Satırı Arayüzü) kullanıma sunar. Bu arayüz modern bir kullanıcı arayüzü geliştirme akışı sağlamaya yönelik kendisine yeten proje kurma seçenekleri temin eder. Otomatik güncellemeli, her kayıtta lint kontrollü ve son kullanıcı için hazır sürümleri hazırlayıp yürütmek yalnızca birkaç dakikanızı alacak. Detaylar için [Vue CLI dokümantasyonuna](https://cli.vuejs.org) bakın. -

      The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through the guide without any build tools before using the CLI.

      +

      CLI, Node.js ve ilişkili proje kurma araçları hakkında bilgiye sahip olduğunuzu var sayar. Eğer Vue veya genel olarak kullanıcı arayüzüne yönelik proje kurma araçları sizin için yeni bir konsept ise CLI’yi kullanmadan önce herhangi bir proje kurma aracı kullanmadan kılavuzu kılavuzu baştan sona okumanızı şiddetle tavsiye ederiz.

      -
      Watch a video explanation on Vue Mastery
      +
      Vue Mastery’de bu konuyu açıklayan bir video izleyebilirsiniz
      -## Explanation of Different Builds +## Farklı Sürümlere dair Açıklamalar -In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue/dist/) you will find many different builds of Vue.js. Here's an overview of the difference between them: +[NPM paketinin `dist/` klasöründe](https://cdn.jsdelivr.net/npm/vue/dist/) Vue.js’nin birçok farklı sürümünü bulabilirsiniz. Bu sürümler arasındaki farkların bir özetini aşağıda bulabilirsiniz: -| | UMD | CommonJS | ES Module (for bundlers) | ES Module (for browsers) | +| | UMD | CommonJS | ES Module (paketleyiciler için) | ES Module (tarayıcılar için) | | --- | --- | --- | --- | --- | -| **Full** | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js | -| **Runtime-only** | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - | -| **Full (production)** | vue.min.js | - | - | vue.esm.browser.min.js | -| **Runtime-only (production)** | vue.runtime.min.js | - | - | - | +| **Tam** | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js | +| **Yalnızca yürütme** | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - | +| **Tam (son kullanıcı için)** | vue.min.js | - | - | vue.esm.browser.min.js | +| **Yalnızca yürütme (son kullanıcı için)** | vue.runtime.min.js | - | - | - | -### Terms +### Terimler -- **Full**: builds that contain both the compiler and the runtime. +- **Tam**: İçeriğinde hem derleyiciyi hem de yürütme ortamını barındıran sürümler. -- **Compiler**: code that is responsible for compiling template strings into JavaScript render functions. +- **Derleyici**: Şablon dizgilerinin JavaScript modelleme fonksiyonlarına dönüştürmekten sorumlu kod. -- **Runtime**: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler. +- **Yürütme ortamı**: Vue örneklerinin oluşturulmasından, sanal DOM’un modellenmesi ve güncellenmesinden, vs. sorumlu kod. Bir başka deyişle derleyici hariç her şey. -- **[UMD](https://github.com/umdjs/umd)**: UMD builds can be used directly in the browser via a ` {% endraw %} -The contents of the `span` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition. +`span` içerisindeki metin `rawHtml` özelliğinin değeri ile değiştirilecektir ve bu metin saf HTML olarak yorumlanacak olup veri bağları dikkate alınmayacaktır. `v-html` direktifi içerisinde dinamik şablon oluşturmak mümkün değildir zira Vue, dizgi tabanlı bir şablon motoru değildir. Bunun yerine kullanıcı arayüzü elemanlarının yeniden kullanımı ve birlikte kullanımına yönelik temel birim olarak bileşenler kullanılmaktadır. -

      Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.

      +

      İçeriği belirsiz HTML girdilerinin internet sitenizde dinamik olarak modellenmesi son derece tehlikeli olabilir zira kolayca [XSS zafiyetleri](https://tr.wikipedia.org/wiki/Siteler_aras%C4%B1_betik_%C3%A7al%C4%B1%C5%9Ft%C4%B1rma) ile sonuçlanabilir. HTML değerlerinin takibi işlevini yalnızca güvenilir içerikler üzerinde kullanın ve **asla** kullanıcı tarafından temin edilen içerik üzerinde kullanmayın.<Çp> -### Attributes +### HTML Nitelikleri -Mustaches cannot be used inside HTML attributes. Instead, use a [v-bind directive](../api/#v-bind): +HTML nitelikleri içerisinde bıyık sentaksı kullanılamaz. Bunun yerine [v-bind direktifini](../api/#v-bind) kullanın: ``` html -

      +
      ``` -In the case of boolean attributes, where their mere existence implies `true`, `v-bind` works a little differently. In this example: +Mevcut olmaları `true` anlamına gelen boole nitelikleri için `v-bind` biraz farklı faaliyet göstermektedir. Aşağıdaki örneğe bakalım: ``` html - + ``` -If `isButtonDisabled` has the value of `null`, `undefined`, or `false`, the `disabled` attribute will not even be included in the rendered `

    Vue.js

    - The Progressive
    JavaScript Framework + Kademeli
    JavaScript Uygulama Çerçevesi

    <%- partial('icons/play') %> - WHY VUE.JS? - ">GET STARTED + NEDEN VUE.JS? + ">ÖĞRENMEYE BAŞLAYIN <%- partial('icons/github-dark') %> GITHUB @@ -29,7 +29,7 @@

    -

    Special Sponsor

    +

    Özel Sponsorumuz

    <% var specialSponsor = theme.special_sponsors[0]; %> Code.xyz Logo @@ -41,21 +41,21 @@ diff --git a/themes/vue/layout/partials/ecosystem_dropdown.ejs b/themes/vue/layout/partials/ecosystem_dropdown.ejs index 88a739c322..307eaecf62 100644 --- a/themes/vue/layout/partials/ecosystem_dropdown.ejs +++ b/themes/vue/layout/partials/ecosystem_dropdown.ejs @@ -1,13 +1,13 @@
  • - Ecosystem + Ekosistem diff --git a/themes/vue/layout/partials/language_dropdown.ejs b/themes/vue/layout/partials/language_dropdown.ejs index a5ad14553c..5581679685 100644 --- a/themes/vue/layout/partials/language_dropdown.ejs +++ b/themes/vue/layout/partials/language_dropdown.ejs @@ -1,6 +1,7 @@
  • - Translations + Diğer Diller
    • diff --git a/themes/vue/layout/partials/learn_dropdown.ejs b/themes/vue/layout/partials/learn_dropdown.ejs index 7f79a504d3..7f5acf4220 100644 --- a/themes/vue/layout/partials/learn_dropdown.ejs +++ b/themes/vue/layout/partials/learn_dropdown.ejs @@ -1,17 +1,17 @@
  • - Learn + Öğren
      -

    • Documentation

      • +

    • Dokümantasyon

      • -

    • Video Courses

      • +

    • Video Dersleri

      • Vue Mastery
        • diff --git a/themes/vue/layout/partials/platinum_sponsors.ejs b/themes/vue/layout/partials/platinum_sponsors.ejs index 9af6df99b8..374411ae8a 100644 --- a/themes/vue/layout/partials/platinum_sponsors.ejs +++ b/themes/vue/layout/partials/platinum_sponsors.ejs @@ -1,6 +1,6 @@
        - Platinum Sponsors + Platin Sponsorlar
        <%_ for (const sponsor of theme.platinum_sponsors) {_%>
        "> - Become a Sponsor + Siz de sponsor olun
        diff --git a/themes/vue/layout/partials/sponsors.ejs b/themes/vue/layout/partials/sponsors.ejs index 086397112f..b712da18a2 100644 --- a/themes/vue/layout/partials/sponsors.ejs +++ b/themes/vue/layout/partials/sponsors.ejs @@ -1,4 +1,4 @@ -

        Patreon Sponsors

        +

        Patreon Sponsorları

        <%_ for (const sponsor of theme.platinum_sponsors) {_%> @@ -14,17 +14,17 @@ <%_ } _%>
        -        ">Become a Sponsor! +">Siz de sponsor olun!
        -

        OpenCollective Sponsors

        -

        Platinum

        +

        OpenCollective Sponsorları

        +

        Platin

        <%_ for (let i = 0; i < 2; i++) {_%> <%_ } _%> -

        Gold

        +

        Altın

        <%_ for (let i = 0; i < 8; i++) {_%> diff --git a/themes/vue/layout/partials/sponsors_sidebar.ejs b/themes/vue/layout/partials/sponsors_sidebar.ejs index ea5c392331..9870f66f3f 100644 --- a/themes/vue/layout/partials/sponsors_sidebar.ejs +++ b/themes/vue/layout/partials/sponsors_sidebar.ejs @@ -1,6 +1,6 @@