From 36bf5e7f81aac3d038103e66f646d360d45202be Mon Sep 17 00:00:00 2001 From: Emir OZCELIK Date: Wed, 20 Feb 2019 20:48:50 +0100 Subject: [PATCH 1/9] initiated Turkish translation --- src/index.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) mode change 100644 => 100755 src/index.md diff --git a/src/index.md b/src/index.md old mode 100644 new mode 100755 From 652bed40da79f14416d142b6f5815cfa96bc5069 Mon Sep 17 00:00:00 2001 From: Emir OZCELIK Date: Wed, 20 Feb 2019 20:54:25 +0100 Subject: [PATCH 2/9] first highlight point on homepage done --- themes/vue/layout/index.ejs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) mode change 100644 => 100755 themes/vue/layout/index.ejs diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs old mode 100644 new mode 100755 index 10eed9f2ca..3f19cc0c79 --- a/themes/vue/layout/index.ejs +++ b/themes/vue/layout/index.ejs @@ -41,8 +41,8 @@
-

Approachable

-

Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!

+

Öğrenmesi kolay

+

HTML, CSS ve JavaScript'e hakim misiniz? Kullanım kılavuzunu okuyarak projenize hızla başlayın!

From aef96cd682a6c1dff474e749bb4b50c44022c5e6 Mon Sep 17 00:00:00 2001 From: Emir OZCELIK Date: Thu, 28 Feb 2019 21:21:19 +0100 Subject: [PATCH 3/9] started translation of Guide and some main menu items --- src/v2/guide/index.md | 8 ++--- themes/vue/_config.yml | 2 +- themes/vue/layout/index.ejs | 30 +++++++++---------- themes/vue/layout/partials/learn_dropdown.ejs | 8 ++--- themes/vue/layout/partials/sidebar.ejs | 8 ++--- themes/vue/layout/partials/sponsors.ejs | 6 ++-- 6 files changed, 31 insertions(+), 31 deletions(-) mode change 100644 => 100755 src/v2/guide/index.md mode change 100644 => 100755 themes/vue/_config.yml mode change 100644 => 100755 themes/vue/layout/partials/learn_dropdown.ejs mode change 100644 => 100755 themes/vue/layout/partials/sidebar.ejs mode change 100644 => 100755 themes/vue/layout/partials/sponsors.ejs diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md old mode 100644 new mode 100755 index 9f81c29936..c9a2490634 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -4,13 +4,13 @@ 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 framework**'tür. Yazılım geliştirme ortamının her alanına nüfus eden diğer framework'lerin aksine Vue, basit bir temel üzerinde inşa edildiğinden kademeli olarak kademeli olarak kullanmaya başlayabilirsiniz. Ana kütüphane yalnızca görüntüleme katmanına odaklanmaktadır. Öğrenmesi kolay olup diğer kütüphanelere veya ileri aşamalardaki 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 son derece elverişlidir. -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/framework'lere göre bir karşılaştırmasını görmek istiyorsanız [Diğer Framework'ler ile Karşılaştırma](comparison.html) sayfasına bakınız.
Watch a free video course on Vue Mastery
diff --git a/themes/vue/_config.yml b/themes/vue/_config.yml old mode 100644 new mode 100755 index c0022ff13d..056b10debe --- a/themes/vue/_config.yml +++ b/themes/vue/_config.yml @@ -8,7 +8,7 @@ platinum_sponsors_china: special_sponsors: - url: 'https://stdlib.com/' img: stdlib.png - description: 'Build APIs you need in minutes instead of days, for free.' + description: 'API projenizi günler yerine dakikalar içerisinde ücretsiz olarak tasarlayın.' platinum_sponsors: - url: >- https://moduscreate.com/?utm_source=Vue&utm_medium=Partnership&utm_campaign=VueShip diff --git a/themes/vue/layout/index.ejs b/themes/vue/layout/index.ejs index 3f19cc0c79..ecd4954063 100755 --- a/themes/vue/layout/index.ejs +++ b/themes/vue/layout/index.ejs @@ -18,8 +18,8 @@

<%- 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 @@ -46,16 +46,16 @@
-

Versatile

-

An incrementally adoptable ecosystem that scales between a library and a full-featured framework.

+

Çok yönlü kullanım

+

Projelerinizde bir kütüphaneden tam donanımlı bir framework'e kadar kademeli olarak kullanmaya başlayabileceğiniz bir ekosistem.

-

Performant

+

Yüksek Performanslı

- 20KB min+gzip Runtime
- Blazing Fast Virtual DOM
- Minimal Optimization Efforts + Min+gzip olarak 20KB Runtime
+ Hız sınırı tanımayan Sanal DOM
+ Asgari Optimizasyon ihtiyacı

@@ -69,7 +69,7 @@ @@ -113,14 +113,14 @@ <%- partial('icons/medium') %>

-

Released under the MIT License
- Copyright © 2014-<%- new Date().getFullYear() %> Evan You

+

MIT Lisansı çerçevesinde yayınlanmaktadır
+ Telif Hakkı © 2014-<%- new Date().getFullYear() %> Evan You

diff --git a/themes/vue/layout/partials/learn_dropdown.ejs b/themes/vue/layout/partials/learn_dropdown.ejs old mode 100644 new mode 100755 index 5e6db6282d..e7cdd9fd23 --- a/themes/vue/layout/partials/learn_dropdown.ejs +++ b/themes/vue/layout/partials/learn_dropdown.ejs @@ -2,11 +2,11 @@ Learn diff --git a/themes/vue/layout/partials/sidebar.ejs b/themes/vue/layout/partials/sidebar.ejs old mode 100644 new mode 100755 index 25c98c0289..ff869d9230 --- a/themes/vue/layout/partials/sidebar.ejs +++ b/themes/vue/layout/partials/sidebar.ejs @@ -9,10 +9,10 @@

<% titles = { api: 'API', - examples: 'Examples', - guide: 'Guide', - cookbook: 'Cookbookbeta', - 'style-guide': 'Style Guidebeta' + examples: 'Örnekler', + guide: 'Kılavuz', + cookbook: 'Senaryolarbeta', + 'style-guide': 'Stil Kılavuzubeta' } %> <%- titles[type] %> <% if (['cookbook', 'style-guide'].indexOf(type) === -1) { %> diff --git a/themes/vue/layout/partials/sponsors.ejs b/themes/vue/layout/partials/sponsors.ejs old mode 100644 new mode 100755 index 086397112f..55e204cca7 --- 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,10 +14,10 @@ <%_ } _%>
-">Become a Sponsor! +">Siz de sponsor olun!
-

OpenCollective Sponsors

+

OpenCollective Sponsorları

Platinum

<%_ for (let i = 0; i < 2; i++) {_%> From 67f4935f38706fec68dca5e1b5bf4694bda05717 Mon Sep 17 00:00:00 2001 From: Emir OZCELIK Date: Sun, 24 Mar 2019 15:17:45 +0100 Subject: [PATCH 4/9] finalized translation of guide main page --- src/v2/guide/index.md | 158 +++++++++++++++++++++--------------------- 1 file changed, 79 insertions(+), 79 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index c9a2490634..93fe747de4 100755 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -12,35 +12,35 @@ Eğer Vue öğrenmeye başlamadan önce daha fazla bilgi edinmek isterseniz, bu Eğer kullanıcı arayüzü programcılığı alanında deneyimli iseniz ve Vue'nin diğer kütüphaneler/framework'lere göre bir karşılaştırmasını görmek istiyorsanız [Diğer Framework'ler ile Karşılaştırma](comparison.html) sayfasına bakınız. -
Watch a free video course on Vue Mastery
+
Vue Mastery'de ücretsiz video dersleri izleyin
-## Getting Started +## İlk Adımlar -

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 framework öğrenmeye çalışmak doğru olmayabilir. Öncelikle bu alandaki temel bilgileri öğrenin. Ardından bu kılavuza geri dönebilirsiniz! Diğer framework'ler alanında deneyime sahip olmak 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 sekme 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: ``` 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'yi projeye dâhil etmeye yönelik 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 dersi 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ı kullarak DOM'a beyansal olarak yansıtmayı sağlayan bir sistem Vue.js'nin kalbinde yatmaktadır: ``` html
@@ -69,15 +69,15 @@ var app = new 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 konsolounu 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 bekleterek dinamik + bir şekilde bağlanmış "title" niteliğini görebilirsiniz!
``` @@ -85,39 +85,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örebilirsiniz!
{% 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 tarafından temin edilen özel niteliklere sahip olduklarını 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
``` @@ -132,7 +132,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 sahip birkaç adet farklı direktif daha mevcuttur. Örneğin, `v-for` direktifi bir Veri Dizisi içerisindeki veri dizinlerini kullanarak ekranda bir liste görüntülemek için kullanılabilir: ``` html
@@ -164,9 +164,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' } ] } }) @@ -184,34 +184,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 eylem 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 () { @@ -223,13 +223,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
@@ -254,7 +254,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!' } }) ``` @@ -267,60 +267,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. Dikkat ederseniz 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. Bir üst kademeden bu bileşene veri aktarmak daha ilgi çekici olacaktır. 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 öğesi + // 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. We will talk a lot more about components [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
      @@ -385,16 +385,16 @@ 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 farketmiş 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çerisinde 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ırada özel elementlerde yer almayan birçok önemli özellikliğe sahiptir. Bunların başında ise bileşenlerarası veri akışı, özel etkileşim iletişimi ve yazılım ortamı entegrasyonu geliyor. -## 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! - + From 00521096e2519d9887112a4764fee8aedf5ef615 Mon Sep 17 00:00:00 2001 From: Emir OZCELIK Date: Mon, 1 Apr 2019 18:50:41 +0200 Subject: [PATCH 5/9] small translatable example code content translated --- src/v2/guide/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 93fe747de4..1fe08eee36 100755 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -51,7 +51,7 @@ Verileri basit bir şablon sentaksı kullarak DOM'a beyansal olarak yansıtmayı var app = new Vue({ el: '#app', data: { - message: 'Hello Vue!' + message: 'Merhaba Vue!' } }) ``` @@ -63,7 +63,7 @@ var app = new Vue({ var app = new Vue({ el: '#app', data: { - message: 'Hello Vue!' + message: 'Merhaba Vue!' } }) From ba37f439d9b0816ab10f7b07430396d92b2a8933 Mon Sep 17 00:00:00 2001 From: Emir OZCELIK Date: Mon, 1 Apr 2019 18:51:22 +0200 Subject: [PATCH 6/9] guide - 'vue instance' section translation completed --- src/v2/guide/instance.md | 76 ++++++++++++++++++++-------------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index 826aa97d9c..ca18e2caef 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -4,24 +4,24 @@ type: guide order: 3 --- -## Creating a Vue Instance +## Bir Vue Örneği Oluşturmak -Every Vue application starts by creating a new **Vue instance** with the `Vue` function: +Her Vue uygulaması `Vue` fonksiyonu kullanılarak yeni bir **Vue örneğinin** oluşturulması ile başlar: ```js var vm = new Vue({ - // options + // seçenekler }) ``` -Although not strictly associated with the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), Vue's design was partly inspired by it. As a convention, we often use the variable `vm` (short for ViewModel) to refer to our Vue instance. +Her ne kadar [MVVM deseni](https://en.wikipedia.org/wiki/Model_View_ViewModel)'ni sıkı sıkıya takip etmese de Vue'nin tasarımı kısmen bu desenden ilham almıştır. Teknik jargon olarak Vue örneğine hitap etmek için genellikle `vm` (ViewModel'in kısaltması) değişkenini kullanılırız. -When you create a Vue instance, you pass in an **options object**. The majority of this guide describes how you can use these options to create your desired behavior. For reference, you can also browse the full list of options in the [API reference](../api/#Options-Data). +Bir Vue örneği oluşturduğunuzda bir **seçenekler nesnesi** parametre olarak girilir. Bu kılavuzun büyük bir çoğunluğu söz konusu bu seçenekleri arzu ettiğiniz davranışı elde etmek üzere nasıl kullanabileceğinizi tarif eder. Referans olarak kullanmak üzere seçeneklerin tam bir listesini [API referansı](../api/#Options-Data)nda bulabilirsiniz. -A Vue application consists of a **root Vue instance** created with `new Vue`, optionally organized into a tree of nested, reusable components. For example, a todo app's component tree might look like this: +Bir Vue uygulaması `new Vue` komutu ile yaratılan bir **ana Vue örneğinden** oluşur ve arzu edildiği takdirde birbiri içerisinde ve farklı projelerde kullanılabilen bileşenler halinde organize edilebilir. Örneğin bir yapılacaklar listesi uygulamasının bileşen ağacı şuna benzeyebilir: ``` -Root Instance +Ana Örnek └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton @@ -31,42 +31,42 @@ Root Instance └─ TodoListStatistics ``` -We'll talk about [the component system](components.html) in detail later. For now, just know that all Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options). +[Bileşenler sistemine](components.html) ileride daha detaylı bir şekilde değineceğiz. Şimdilik her Vue bileşeninin aynı zamanda bir Vue örneği olduğunu ve dolayısıyla aynı seçenekler nesnesini (ana örneğe özgü birkaç seçenek dışında) kabul ettiğini aklınızda bulundurun. -## Data and Methods +## Veriler ve Metodlar -When a Vue instance is created, it adds all the properties found in its `data` object to Vue's **reactivity system**. When the values of those properties change, the view will "react", updating to match the new values. +Bir Vue örneği oluşturulduğunda `data` nesnesi içerisindeki tüm nitelikler Vue'nin **otomatik tepki sistemine** eklenir. Bu niteliklerin değeri değiştiğinde ekrana yansıtılan görüntü "tepki gösterecek" ve yeni değerleri yansıtmak üzere kendisini güncelleyecektir. ```js -// Our data object +// Data nesnemiz var data = { a: 1 } -// The object is added to a Vue instance +// Nesneyi, Vue örneğine ekliyoruz var vm = new Vue({ data: data }) -// Getting the property on the instance -// returns the one from the original data +// Örnek içerisindeki niteliği kullanmak +// aşağıdaki ifade orijinal data nesnesindeki veriyi gönderir vm.a == data.a // => true -// Setting the property on the instance -// also affects the original data +// Örnek içerisinde niteliği tayin etmek +// orijinal data nesnesini de etkiler vm.a = 2 data.a // => 2 -// ... and vice-versa +// ... bunun tam tersi de geçerlidir data.a = 3 vm.a // => 3 ``` -When this data changes, the view will re-render. It should be noted that properties in `data` are only **reactive** if they existed when the instance was created. That means if you add a new property, like: +Bu veri nesnesi ne zaman değişirse ekrana yansıtılan görüntü de güncellenecektir. `data` içerisindeki niteliklerin **otomatik tepki** gösterebilmesi için söz konusu örnek yaratıldığı sırada mevcut olmaları gerektiğini unutmayın. Mesela aşağıdaki şekilde yeni bir nitelik eklediğimizi farz edelim: ```js -vm.b = 'hi' +vm.b = 'selam' ``` -Then changes to `b` will not trigger any view updates. If you know you'll need a property later, but it starts out empty or non-existent, you'll need to set some initial value. For example: +Bu durumda `b` üzerinde gerçekleştirilen değişiklikler herhangi bir görüntü güncellemesini tetiklemeyecektir. Eğer ileride bir niteliğe ihtiyaç duyacağınızı biliyorsanız fakat bu niteliğin başlangıçta boş olması veya mevcut olmaması gerekiyorsa bir başlangıç değeri belirlemeniz gerekecektir. Örneğin: ```js data: { @@ -78,7 +78,7 @@ data: { } ``` -The only exception to this being the use of `Object.freeze()`, which prevents existing properties from being changed, which also means the reactivity system can't _track_ changes. +Bunun tek istisnası `Object.freeze()` komutunun kullanılmasıdır. Bu durumda mevcut niteliklerdeki değişimler engellenir ve otomatik tepki sistemi değişiklikleri _takip edemez_. ```js var obj = { @@ -96,12 +96,12 @@ new Vue({ ```html

      {{ foo }}

      - - + +
      ``` -In addition to data properties, Vue instances expose a number of useful instance properties and methods. These are prefixed with `$` to differentiate them from user-defined properties. For example: +Veri niteliklerine ek olarak Vue örnekleri birçok farklı örnek niteliklerine ve metodlarını kullanıma sunar. Kullanıcı tarafından belirlenen niteliklerden ayırt edilmeleri amacıyla `$` ön eki ile kullanılırlar. Örneğin: ```js var data = { a: 1 } @@ -113,19 +113,19 @@ var vm = new Vue({ vm.$data === data // => true vm.$el === document.getElementById('example') // => true -// $watch is an instance method +// $watch bir örnek metodudur vm.$watch('a', function (newValue, oldValue) { - // This callback will be called when `vm.a` changes + // Bu callback metodu `vm.a` değiştiğinde çağrılacaktır }) ``` -In the future, you can consult the [API reference](../api/#Instance-Properties) for a full list of instance properties and methods. +İhtiyaç duyduğunuzda [API referansı](../api/#Instance-Properties) sayfasında örnek niteliklerinin ve metodlarının tam bir listesini bulabilirsiniz. -## Instance Lifecycle Hooks +## Örnek Yaşam Döngüsü Kancaları -Each Vue instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages. +Her Vue örneği yaratıldığı sırada bir dizi başlatma adımlarından geçer - Örneğin veri gözlem mekanizmasını kurar, şablon derlemesini gerçekleştirir, örneği DOM'a enjekte eder ve veri değiştiğinde DOM'u günceller. Bu sırada kullanıcıların belirli aşamalarda kendi kodlarını ekleyebilmesi için **yaşam döngüsü kancaları** adı verilen fonksiyonları yerine getirir. -For example, the [`created`](../api/#created) hook can be used to run code after an instance is created: +Örneğin [`created`](../api/#created) kancası belirli bir kodun bir örnek yaratıldıktan sonra işleme alınması için kullanılabilir: ```js new Vue({ @@ -133,19 +133,19 @@ new Vue({ a: 1 }, created: function () { - // `this` points to the vm instance - console.log('a is: ' + this.a) + // `this` ıfadesi mevcut vm örneğini temsil eder + console.log('a\'nın değeri: ' + this.a) } }) -// => "a is: 1" +// => "a'nın değeri: 1" ``` -There are also other hooks which will be called at different stages of the instance's lifecycle, such as [`mounted`](../api/#mounted), [`updated`](../api/#updated), and [`destroyed`](../api/#destroyed). All lifecycle hooks are called with their `this` context pointing to the Vue instance invoking it. +Örneğin yaşam döngüsünün farklı aşamalarında çağrılan diğer birçok kanca mevcuttur. Örneğin [`mounted`](../api/#mounted), [`updated`](../api/#updated), ve [`destroyed`](../api/#destroyed). Bütün yaşam döngüsü kancaları ait oldukları Vue örneğini temsil eden `this` bağlamı ile çağrılır. -

      Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on an options property or callback, such as `created: () => console.log(this.a)` or `vm.$watch('a', newValue => this.myMethod())`. Since arrow functions are bound to the parent context, `this` will not be the Vue instance as you'd expect, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`.

      +

      Seçenek nitelikleri ve callback metodları üzerinde `created: () => console.log(this.a)` veya `vm.$watch('a', newValue => this.myMethod())` gibi [ok fonksiyonları](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) kullanmayın. Ok fonksiyonları bir üst seviyedeki bağlama ait olduklarından `this` ifadesi umduğunuz gibi Vue örneğine karşılık gelmeyecektir ve sık sık `Uncaught TypeError: Cannot read property of undefined` ve `Uncaught TypeError: this.myMethod is not a function` gibi hatalara neden olacaktır.

      -## Lifecycle Diagram +## Yaşam Döngüsü Şeması -Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference. +Aşağıda örnek yaşam döngüsüne ait bir şema bulabilirsiniz. Burada olup biten her şeyi tam olarak anlamız gerekiyor. Fakat öğrenme sürecinizde ve projelerinizde yararlı bir referans olacaktır. -![The Vue Instance Lifecycle](/images/lifecycle.png) +![Vue Örneği Yaşam Döngüsü](/images/lifecycle.png) From b11c6bc022e6d249cfe86b01281dbaade5756f1b Mon Sep 17 00:00:00 2001 From: Emir OZCELIK Date: Mon, 1 Apr 2019 18:58:13 +0200 Subject: [PATCH 7/9] initialized translation of guide - section 'template syntax' --- src/v2/guide/syntax.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index a0693af2c2..2c7bab200f 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -1,5 +1,5 @@ --- -title: Template Syntax +title: Şablon Sentaksı type: guide order: 4 --- From 94db1cdce311944f211b0a93749766b7a6e86925 Mon Sep 17 00:00:00 2001 From: Emir OZCELIK Date: Tue, 16 Apr 2019 22:07:16 +0200 Subject: [PATCH 8/9] title corrections --- src/v2/guide/index.md | 2 +- src/v2/guide/instance.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 1fe08eee36..18f402ce09 100755 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -1,5 +1,5 @@ --- -title: Introduction +title: Giriş type: guide order: 2 --- diff --git a/src/v2/guide/instance.md b/src/v2/guide/instance.md index ca18e2caef..5f9a05ef03 100644 --- a/src/v2/guide/instance.md +++ b/src/v2/guide/instance.md @@ -1,5 +1,5 @@ --- -title: The Vue Instance +title: Vue Örneği type: guide order: 3 --- From e50c7817a4ca75d843fb905d3c41f64eeae6bef7 Mon Sep 17 00:00:00 2001 From: Emir OZCELIK Date: Tue, 16 Apr 2019 22:53:33 +0200 Subject: [PATCH 9/9] added Turkish translation's primary maintainer and repo information to the README --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index db4b5ba602..b52043ca72 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,12 @@ Spanish translation is maintained by [1950Labs](https://1950labs.com) and Vue.js * Translation Repo - [/1950Labs/vuejs.org](https://github.com/1950Labs/vuejs.org) +### Turkish + +Turkish translation is maintainted by [animyrch](http://blog.traductionturcfrancais.com). + +* Translation Repo - [/animyrch/tr.vuejs.org](https://github.com/animyrch/tr.vuejs.org) + ### Vietnamese Vietnamese translation is maintained by [Vue.js Vietnam User group](https://github.com/vuejs-vn/).