You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Her Vue uygulaması `Vue` fonksiyonu kullanılarak yeni bir**Vue örneğinin**oluşturulması ile başlar:
9
+
Every Vue application starts by creating a new**Vue instance**with the `Vue` function:
10
10
11
11
```js
12
12
var vm =newVue({
13
-
//seçenekler
13
+
//options
14
14
})
15
15
```
16
16
17
-
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ırız.
17
+
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.
18
18
19
-
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.
19
+
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).
20
20
21
-
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:
21
+
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:
22
22
23
23
```
24
-
Ana Örnek
24
+
Root Instance
25
25
└─ TodoList
26
26
├─ TodoItem
27
27
│ ├─ DeleteTodoButton
@@ -31,42 +31,42 @@ Ana Örnek
31
31
└─ TodoListStatistics
32
32
```
33
33
34
-
[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.
34
+
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).
35
35
36
-
## Veriler ve Metodlar
36
+
## Data and Methods
37
37
38
-
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.
38
+
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.
39
39
40
40
```js
41
-
//Data nesnemiz
41
+
//Our data object
42
42
var data = { a:1 }
43
43
44
-
//Nesneyi, Vue örneğine ekliyoruz
44
+
//The object is added to a Vue instance
45
45
var vm =newVue({
46
46
data: data
47
47
})
48
48
49
-
//Örnek içerisindeki nitelik çağrıldığında
50
-
//orijinal veriye ait değer elde edilecektir
49
+
//Getting the property on the instance
50
+
//returns the one from the original data
51
51
vm.a==data.a// => true
52
52
53
-
//Örnek içerisinde nitelik değiştirildiğinde
54
-
//orijinal data nesnesi de bundan etkilenir
53
+
//Setting the property on the instance
54
+
//also affects the original data
55
55
vm.a=2
56
56
data.a// => 2
57
57
58
-
// ... bunun tam tersi de geçerlidir
58
+
// ... and vice-versa
59
59
data.a=3
60
60
vm.a// => 3
61
61
```
62
62
63
-
Bu veri nesnesi değişir değişmez ekrana yansıtılan görüntü de güncellenecektir. `data`içerisindeki niteliklerin**reaktif**olabilmeleri 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:
63
+
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:
64
64
65
65
```js
66
-
vm.b='selam'
66
+
vm.b='hi'
67
67
```
68
68
69
-
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:
69
+
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:
70
70
71
71
```js
72
72
data: {
@@ -78,7 +78,7 @@ data: {
78
78
}
79
79
```
80
80
81
-
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_.
81
+
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.
82
82
83
83
```js
84
84
var obj = {
@@ -96,12 +96,12 @@ new Vue({
96
96
```html
97
97
<divid="app">
98
98
<p>{{ foo }}</p>
99
-
<!--aşağıdaki işlem `foo`yu güncelleyemecektir! -->
Veri niteliklerine ek olarak Vue örnekleri birçok farklı örnek niteliklerini 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:
104
+
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:
//This callback will be called when `vm.a` changes
119
119
})
120
120
```
121
121
122
-
İhtiyaç duyduğunuzda [API referansı](../api/#Instance-Properties)sayfasında örnek niteliklerinin ve metodlarının tam bir listesini bulabilirsiniz.
122
+
In the future, you can consult the [API reference](../api/#Instance-Properties)for a full list of instance properties and methods.
123
123
124
-
## Örneklerin Yaşam Döngüsü Kancaları
124
+
## Instance Lifecycle Hooks
125
125
126
-
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.
126
+
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.
127
127
128
-
Örneğin [`created`](../api/#created)kancası belirli bir kodun bir örnek yaratıldıktan sonra işleme alınması için kullanılabilir:
128
+
For example, the [`created`](../api/#created)hook can be used to run code after an instance is created:
129
129
130
130
```js
131
131
newVue({
132
132
data: {
133
133
a:1
134
134
},
135
135
created:function () {
136
-
// `this` ıfadesi mevcut vm örneğini temsil eder
137
-
console.log('a'nın değeri:' + this.a)
136
+
// `this` points to the vm instance
137
+
console.log('a is: '+this.a)
138
138
}
139
139
})
140
-
// => "a'nın değeri:1" 1"
140
+
// => "a is: 1"
141
141
```
142
142
143
-
Örneklerin yaşam döngüsünün farklı aşamalarında çağrılan diğer birçok kanca vardır. Ö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.
143
+
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.
144
144
145
-
<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 ofundefined`ve`Uncaught TypeError:this.myMethod is not a function` gibi hatalara neden olacaktır.</p>
145
+
<pclass="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 an arrow function doesn't have a `this`, `this` will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as `Uncaught TypeError: Cannot read property of undefined` or `Uncaught TypeError: this.myMethod is not a function`.</p>
146
146
147
-
## Yaşam Döngüsü Şeması
147
+
## Lifecycle Diagram
148
148
149
-
Aşağıda örneklerin yaşam döngüsüne ait bir şema bulabilirsiniz. Burada olup biten her şeyi tam olarak anlamanız gerekmiyor. Fakat öğrenme sürecinizde ve projelerinizde yararlı bir referans olacaktır.
149
+
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.
150
150
151
-
0 commit comments