Skip to content

README update for Turkish Translation #2128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 9 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/).
Expand Down
Empty file modified src/index.md
100644 → 100755
Empty file.
172 changes: 86 additions & 86 deletions src/v2/guide/index.md
100644 → 100755

Large diffs are not rendered by default.

78 changes: 39 additions & 39 deletions src/v2/guide/instance.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
title: The Vue Instance
title: Vue Örneği
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
Expand All @@ -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: {
Expand All @@ -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 = {
Expand All @@ -96,12 +96,12 @@ new Vue({
```html
<div id="app">
<p>{{ foo }}</p>
<!-- this will no longer update `foo`! -->
<button v-on:click="foo = 'baz'">Change it</button>
<!-- aşağıdaki işlem `foo`yu güncelleyemecektir! -->
<button v-on:click="foo = 'baz'">Değiştir</button>
</div>
```

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 }
Expand All @@ -113,39 +113,39 @@ 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({
data: {
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.

<p class="tip">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`.</p>
<p class="tip">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.</p>

## 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)
2 changes: 1 addition & 1 deletion src/v2/guide/syntax.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Template Syntax
title: Şablon Sentaksı
type: guide
order: 4
---
Expand Down
2 changes: 1 addition & 1 deletion themes/vue/_config.yml
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
34 changes: 17 additions & 17 deletions themes/vue/layout/index.ejs
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
<p>
<a id="modal-player" class="button has-icon" href="javascript:;">
<%- partial('icons/play') %>
WHY VUE.JS?</a>
<a class="button white" href="<%- url_for("/v2/guide/") %>">GET STARTED</a>
NEDEN VUE.JS?</a>
<a class="button white" href="<%- url_for("/v2/guide/") %>">ÖĞRENMEYE BAŞLAYIN</a>
<a class="button gray has-icon" href="https://github.com/vuejs/vue" target="_blank">
<%- partial('icons/github-dark') %>
GITHUB</a>
Expand All @@ -29,7 +29,7 @@
</div>

<div id="special-sponsor">
<h3>Special Sponsor</h3>
<h3>Özel Sponsorumuz</h3>
<% var specialSponsor = theme.special_sponsors[0]; %>
<a href="<%- specialSponsor.url %>" target="_blank">
<img src="<%- url_for(`/images/${specialSponsor.img}`) %>" style="width:160px" alt="Code.xyz Logo">
Expand All @@ -41,21 +41,21 @@
<div id="highlights">
<div class="inner">
<div class="point">
<h2>Approachable</h2>
<p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
<h2>Öğrenmesi kolay</h2>
<p>HTML, CSS ve JavaScript'e hakim misiniz? Kullanım kılavuzunu okuyarak projenize hızla başlayın!</p>
</div>

<div class="point">
<h2>Versatile</h2>
<p>An incrementally adoptable ecosystem that scales between a library and a full-featured framework.</p>
<h2>Çok yönlü kullanım</h2>
<p>Projelerinizde bir kütüphaneden tam donanımlı bir framework'e kadar kademeli olarak kullanmaya başlayabileceğiniz bir ekosistem.</p>
</div>

<div class="point">
<h2>Performant</h2>
<h2>Yüksek Performanslı</h2>
<p>
20KB min+gzip Runtime<br>
Blazing Fast Virtual DOM<br>
Minimal Optimization Efforts
Min+gzip olarak 20KB Runtime<br>
Hız sınırı tanımayan Sanal DOM<br>
Asgari Optimizasyon ihtiyacı
</p>
</div>
</div>
Expand All @@ -69,7 +69,7 @@

<div id="news">
<div class="inner">
<h3><label for="member_email">Subscribe to our Weekly Newsletter</label></h3>
<h3><label for="member_email">Haftalık Haber Bültenimize abone olun</label></h3>
<form
class="newsletter-form"
id="revue-form"
Expand All @@ -85,7 +85,7 @@
name="member[email]"
id="member_email"
required
placeholder="Email address"
placeholder="E-posta adresi"
>
<input
class="button newsletter-button"
Expand All @@ -96,7 +96,7 @@
>
</form>
<p>
You can read the previous issues and listen to our podcast at <a href="https://news.vuejs.org" target="_blank">news.vuejs.org</a>.
Geçmişteki yayınları okumak ve podcastımızı dinlemek için <a href="https://news.vuejs.org" target="_blank">news.vuejs.org</a> adresini ziyaret edin.
</p>
</div>
</div>
Expand All @@ -113,14 +113,14 @@
<%- partial('icons/medium') %>
</a>
</p>
<p>Released under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a><br>
Copyright &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
<p><a href="https://opensource.org/licenses/MIT" target="_blank">MIT Lisansı</a> çerçevesinde yayınlanmaktadır<br>
Telif Hakkı &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
</div>

<div id="video-modal" class="modal">
<div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div><script src="https://player.vimeo.com/api/player.js"></script>
<p class="modal-text">Video by <a href="https://www.vuemastery.com" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Vue Mastery</a>. Watch Vue Masterys free <a href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Intro to Vue course</a>.
<p class="modal-text">Videoyu hazırlayan: <a href="https://www.vuemastery.com" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Vue Mastery</a>. Watch Vue Mastery's free <a href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Intro to Vue course</a>.
</p>
</div>

Expand Down
8 changes: 4 additions & 4 deletions themes/vue/layout/partials/learn_dropdown.ejs
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
<a class="nav-link<%- page.path.match(/\/(guide(?!\/team.html$)|api|style-guide|examples|cookbook)(\/|$)/) ? ' current' : '' %>">Learn</a><span class="arrow"></span>
<ul class="nav-dropdown">
<li><ul>
<li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/\/guide(\/|$)/) ? ' current' : '' %>">Guide</a></li>
<li><a href="<%- url_for("/v2/guide/") %>" class="nav-link<%- page.path.match(/\/guide(\/|$)/) ? ' current' : '' %>">Kılavuz</a></li>
<li><a href="<%- url_for("/v2/api/") %>" class="nav-link<%- page.path.match(/\/api(\/|$)/) ? ' current' : '' %>">API</a></li>
<li><a href="<%- url_for("/v2/style-guide/") %>" class="nav-link<%- page.path.match(/\/style-guide(\/|$)/) ? ' current' : '' %>">Style Guide</a></li>
<li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/\/examples(\/|$)/) ? ' current' : '' %>">Examples</a></li>
<li><a href="<%- url_for("/v2/cookbook/") %>" class="nav-link<%- page.path.match(/\/cookbook(\/|$)/) ? ' current' : '' %>">Cookbook</a></li>
<li><a href="<%- url_for("/v2/style-guide/") %>" class="nav-link<%- page.path.match(/\/style-guide(\/|$)/) ? ' current' : '' %>">Stil Kılavuzu</a></li>
<li><a href="<%- url_for("/v2/examples/") %>" class="nav-link<%- page.path.match(/\/examples(\/|$)/) ? ' current' : '' %>">Örnekler</a></li>
<li><a href="<%- url_for("/v2/cookbook/") %>" class="nav-link<%- page.path.match(/\/cookbook(\/|$)/) ? ' current' : '' %>">Senaryolar</a></li>
</ul></li>
</ul>
</li>
8 changes: 4 additions & 4 deletions themes/vue/layout/partials/sidebar.ejs
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
<h2>
<% titles = {
api: 'API',
examples: 'Examples',
guide: 'Guide',
cookbook: 'Cookbook<sup class="beta">beta</sup>',
'style-guide': 'Style Guide<sup class="beta">beta</sup>'
examples: 'Örnekler',
guide: 'Kılavuz',
cookbook: 'Senaryolar<sup class="beta">beta</sup>',
'style-guide': 'Stil Kılavuzu<sup class="beta">beta</sup>'
} %>
<%- titles[type] %>
<% if (['cookbook', 'style-guide'].indexOf(type) === -1) { %>
Expand Down
6 changes: 3 additions & 3 deletions themes/vue/layout/partials/sponsors.ejs
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h3>Patreon Sponsors</h3>
<h3>Patreon Sponsorları</h3>

<%_ for (const sponsor of theme.platinum_sponsors) {_%>
<a href="<%- sponsor.url %>" target="_blank" style="width: 160px;">
Expand All @@ -14,10 +14,10 @@
<%_ } _%>
<br>

<a class="become-sponsor button white" href="<%- url_for("/support-vuejs/") %>">Become a Sponsor!</a>
<a class="become-sponsor button white" href="<%- url_for("/support-vuejs/") %>">Siz de sponsor olun!</a>

<div class="open-collective-sponsors">
<h3>OpenCollective Sponsors</h3>
<h3>OpenCollective Sponsorları</h3>
<h4>Platinum</h4>
<%_ for (let i = 0; i < 2; i++) {_%>
<a href="https://opencollective.com/vuejs/tiers/platinum-sponsors/<%- i %>/website" target="_blank">
Expand Down