Skip to content

Tr src v2 guide syntax ani #22

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

Merged
merged 2 commits into from
Oct 7, 2019
Merged
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
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ Spanish translation is maintained by [1950Labs](https://1950labs.com) and Vue.js

### Turkish

* Turkish translation is maintainted by [animyrch](http://blog.traductionturcfrancais.com).
* Turkish translation is maintainted by [animyrch](http://blog.traductionturcfrancais.com)
* Translation Repo - [/animyrch/tr.vuejs.org](https://github.com/animyrch/tr.vuejs.org)

### Vietnamese
Expand Down
164 changes: 82 additions & 82 deletions src/v2/guide/syntax.md
100644 → 100755
Original file line number Diff line number Diff line change
@@ -1,215 +1,215 @@
---
title: Template Syntax
title: �ablon Sentaks�
type: guide
order: 4
---

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Vue.js, ekrana yans�t�lan DOM modelini arka plandaki Vue �rne�ine ait verilere beyansal olarak ba�lamay� sa�layan HTML tabanl� bir �ablon sentaks� kullan�r. Her Vue.js �ablonu ge�erli bir HTML kodu olup standartlara uyum g�steren taray�c�lar ve HTML derleyiciler taraf�ndan okunabilir.

Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
Vue, �ablonlar� kendili�inden Sanal DOM modelleme fonksiyonlar� arac�l���yla derler. Otomatik tepki sisteminin de yard�m�yla Vue yeniden modellenmesi gereken minimum say�daki bile�eni ak�ll�ca tespit edebilir ve uygulaman�n durumu de�i�ti�inde m�mk�n olan en az say�da DOM de�i�ikli�ini ger�ekle�tirir.

If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](render-function.html) instead of templates, with optional JSX support.
E�er Sanal DOM kavramlar�na al���ksan�z ve saf JavaScript�in g�c�nden yararlanmay� tercih ederseniz iste�e ba�l� JSX deste�i sayesinde �ablona gerek olmaks�z�n [do�rudan modelleme fonksiyonlar�](render-function.html) yazabilirsiniz.

## Interpolations
## De�i�ken de�er takibi

### Text
### Metin

The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):
Veri ba�laman�n en basit �ekli �B�y�k� sentaks� (iki�er adet s�sl� parantez) ile yaz�lan metin de�erlerinin takibidir.

``` html
<span>Message: {{ msg }}</span>
<span>Mesaj: {{ msg }}</span>
```

The mustache tag will be replaced with the value of the `msg` property on the corresponding data object. It will also be updated whenever the data object's `msg` property changes.
B�y�k etiketiyle �evrili k�s�m ilgili bile�enin veri nesnesi i�erisinde yer alan `msg` �zelli�inin de�eri ile de�i�tirilecektir. S�z konusu veri nesnesinin `msg` �zelli�i ne zaman de�i�irse bu metin de g�ncellenir.

You can also perform one-time interpolations that do not update on data change by using the [v-once directive](../api/#v-once), but keep in mind this will also affect any other bindings on the same node:
Ayr�ca [v-once direktifini](../api/#v-once) kullanarak de�i�ken de�erinin yaln�zca bir defa kullan�lmas�n� sa�layabilirsiniz. Fakat bu i�lemin ayn� HTML d���m� �zerindeki t�m ba�lar �zerinde etkili olaca��n� unutmay�n.

``` html
<span v-once>This will never change: {{ msg }}</span>
<span v-once>Bu asla de�i�meyecektir: {{ msg }}</span>
```

### Raw HTML
### Saf HTML

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the `v-html` directive:
�ift b�y�k sentaks� verileri d�z metin olarak yorumlar. HTML olarak de�il. Ger�ek HTML yazabilmek i�in `v-html` direktifini kullanmal�s�n�z:

``` html
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<p>B�y�k ile kullan�m: {{ safHtml }}</p>
<p>v-html direktifi ile kullan�m: <span v-html="safHtml"></span></p>
```

{% raw %}
<div id="example1" class="demo">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<p>B�y�k ile kullan�m: {{ rawHtml }}</p>
<p>v-html direktifi ile kullan�m: <span v-html="safHtml"></span></p>
</div>
<script>
new Vue({
el: '#example1',
data: function () {
return {
rawHtml: '<span style="color: red">This should be red.</span>'
safHtml: �<span style="color: red">Bu metnin rengi k�rm�z� olmal�.</span>'
}
}
})
</script>
{% 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.

<p class="tip">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.</p>
<p class="tip">��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
<div v-bind:id="dynamicId"></div>
<div v-bind:id="dinamikId"></div>
```

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
<button v-bind:disabled="isButtonDisabled">Button</button>
<button v-bind:disabled="butonAktifDegil">Buton</button>
```

If `isButtonDisabled` has the value of `null`, `undefined`, or `false`, the `disabled` attribute will not even be included in the rendered `<button>` element.
E�er `butonAktifDe�il` de�i�keninin de�eri `null`, `undefined` veya `false olursa `disabled` niteli�i, modellenen `<button>` elementine dahil bile edilmeyecektir.

### Using JavaScript Expressions
### JavaScript �fadelerinin Kullan�m�

So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:
�u ana kadar �ablonlar�m�zda basit �zellik anahtarlar� �zerinde ba� ger�ekle�tirdik. Halbuki Vue.js veri ba�lar� �zerinde JavaScript ifadelerinin sundu�u t�m g�c� kullanmay� m�mk�n k�l�yor:

``` html
{{ number + 1 }}
{{ sayi + 1 }}

{{ ok ? 'YES' : 'NO' }}
{{ ok ? 'EVET' : 'HAYIR' }}

{{ message.split('').reverse().join('') }}
{{ mesaj.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
```

These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain **one single expression**, so the following will **NOT** work:
Bu ifadeler ba�l� olduklar� Vue �rne�inin veri kapsam� i�erisinde JavaScript olarak de�erlendirilecektir. Bu a��dan tek s�n�rlama her ba� i�erisinde **yaln�zca bir ifadenin** kullan�lma zorunlulu�udur. Yani a�a��daki ifade **�ALI�MAYACAKTIR**:

``` html
<!-- this is a statement, not an expression: -->
<!-- A�a��daki kod bir ifade de�il bir beyand�r: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}
<!-- ak�� kontrol� de �al��mayacakt�r, bunun yerine �� terimli ifadeleri kullan�n -->
{{ if (ok) { return mesaj } }}
```

<p class="tip">Template expressions are sandboxed and only have access to a whitelist of globals such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.</p>
<p class="tip">�ablon ifadeleri d�� ortamdan ayr�lm�� olup yaln�zca `Math` ve `Date` gibi global de�i�kenleri i�eren s�n�rl� bir listeye eri�im sunar. �ablon ifadeleri i�erisinde kullan�c� taraf�ndan belirlenen global de�i�kenlere eri�im ger�ekle�tirmeye �al��may�n.</p>

## Directives
## Direktifler

Directives are special attributes with the `v-` prefix. Directive attribute values are expected to be **a single JavaScript expression** (with the exception of `v-for`, which will be discussed later). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes. Let's review the example we saw in the introduction:
Direktifler `v-` �n ekini kullanan �zel niteliklerdir. Direktif nitelikleri, **tek bir JavaScript ifadesine** kar��l�k gelen bir de�er i�ermelidir (`v-for` bu a��dan bir istisna olup buna a�a��da de�inece�iz). Direktiflerin g�revi, i�erisindeki ifadenin de�eri de�i�ti�inde bunun yan etkilerini DOM modeline reaktif olarak yans�tmakt�r. Giri� b�l�m�nde g�rd���m�z �rne�i yeniden inceleyelim:

``` html
<p v-if="seen">Now you see me</p>
<p v-if="seen">�u an beni g�r�yorsun</p>
```

Here, the `v-if` directive would remove/insert the `<p>` element based on the truthiness of the value of the expression `seen`.
Burada `v-if` direktifi, `<p>` elementini `seen` ifadesine ait de�erin do�ru olup olmad���n� g�re DOM�a ekler veya kald�r�r.

### Arguments
### Arg�manlar

Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind` directive is used to reactively update an HTML attribute:
Baz� direktifler, direktif ad�ndan sonra iki nokta ile i�aret edilen bir �arg�man� alabilir. �rne�in `v-bind` direktifi bir HTML niteli�ini reaktif olarak g�ncellemek �zere kullan�l�r:

``` html
<a v-bind:href="url"> ... </a>
```

Here `href` is the argument, which tells the `v-bind` directive to bind the element's `href` attribute to the value of the expression `url`.
Burada `href`, `v-bind`��n arg�man� olarak kullan�l�yor ve s�z konusu elementin `href` niteli�ini `url` ifadesinin de�erine ba�l�yor.

Another example is the `v-on` directive, which listens to DOM events:
Bir di�er �rnek DOM olaylar�n� dinleyen `v-on` direktifidir:

``` html
<a v-on:click="doSomething"> ... </a>
<a v-on:click="birSeyYap"> ... </a>
```

Here the argument is the event name to listen to. We will talk about event handling in more detail too.
Burada arg�man dinlenilecek olan olay�n ad�d�r. Olay y�netimine ileride daha yak�ndan de�inece�iz.

### Dynamic Arguments
### Dinamik Arg�manlar

> New in 2.6.0+
> 2.6.0+�dan itibaren

Starting in version 2.6.0, it is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets:
2.6.0 versiyonundan itibaren bir direktif arg�man� i�erisinde JavaScript ifadelerini k��eli bir parantez i�erisinde kullanmak m�mk�n:

``` html
<a v-bind:[attributeName]="url"> ... </a>
<a v-bind:[nitelikAdi]="url"> ... </a>
```

Here `attributeName` will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument. For example, if your Vue instance has a data property, `attributeName`, whose value is `"href"`, then this binding will be equivalent to `v-bind:href`.
Burada `nitelikAdi` dinamik bir �ekilde JavaScript ifadesi olarak de�erlendirilecek ve tespit edilen de�er bu arg�man�n nihai de�eri olarak kullan�lacak. �rne�in e�er Vue �rne�iniz `"href"` de�erine sahip `nitelikAdi` �eklindeki bir data niteli�ine sahipse yukar�daki ba� `v-bind:href`e denk olacakt�r.

Similarly, you can use dynamic arguments to bind a handler to a dynamic event name:
Ayn� �ekilde dinamik arg�manlar sayesinde bir olay y�neticisini dinamik bir olay ad�na ba�layabilirsiniz:

``` html
<a v-on:[eventName]="doSomething"> ... </a>
<a v-on:[olayAd�]="birSeyYap"> ... </a>
```

Similarly, when `eventName`'s value is `"focus"`, for example, `v-on:[eventName]` will be equivalent to `v-on:focus`.
Yine yukar�daki gibi `olayAdi`'n�n de�eri `"focus"` ise `v-on:[eventName]` ifadesi `v-on:focus`a kar��l�k gelecektir.

#### Dynamic Argument Value Constraints
#### Dinamik Arg�man De�eri K�s�tlamalar�

Dynamic arguments are expected to evaluate to a string, with the exception of `null`. The special value `null` can be used to explicitly remove the binding. Any other non-string value will trigger a warning.
Dinamik arg�manlar `null` d���nda yaln�zca dizgi olarak de�erlendirilmesi beklenir. S�z konusu ba�� kald�rabilmek i�in istinai olarak `null` kullan�lmas�na m�saade edilir. Bunun d���nda dizgi olmayan t�m de�erler bir uyar� verecektir.

#### Dynamic Argument Expression Constraints
#### Dinamik Arg�man �fadesi K�s�tlamalar�

<p class="tip">Dynamic argument expressions have some syntax constraints because certain characters are invalid inside HTML attribute names, such as spaces and quotes. You also need to avoid uppercase keys when using in-DOM templates.</p>
<p class="tip">Dinamik arg�man ifadeleri �zerinde bir tak�m sentaks k�s�tlamalar� mevcuttur zira HTML nitelik isimleri i�erisinde bo�luk veya t�rnak gibi baz� karakterlerin kullan�lmas� m�mk�n de�ildir. Ayr�ca DOM i�erisinde kullan�lan �ablonlarda b�y�k harf kullan�lmamas�na da dikkat etmelisiniz.</p>

For example, the following is invalid:
�rne�in a�a��daki ifade ge�ersizdir:

``` html
<!-- This will trigger a compiler warning. -->
<a v-bind:['foo' + bar]="value"> ... </a>
<!-- Bu bir derleyici uyar�s�n� tetikleyecektir. -->
<a v-bind:['foo' + bar]="deger"> ... </a>
```

The workaround is to either use expressions without spaces or quotes, or replace the complex expression with a computed property.
Bu uyar�n�n ortaya ��kmas�n� engellemek i�in bo�luk veya t�rnak kullanmay�n veya karma��k ifadeleri hesaplanm�� bir nitelik ile de�i�tirin.

In addition, if you are using in-DOM templates (templates directly written in an HTML file), you have to be aware that browsers will coerce attribute names into lowercase:
Buna ek olarak DOM i�erisinde �ablon kullan�yorsan�z (�ablonunuzu do�rudan bir HTML dosyas� i�erisinde yaz�yorsan�z) taray�c�lar�n nitelik isimlerini k���k harf olarak d�zeltece�ini unutmay�n:

``` html
<!-- This will be converted to v-bind:[someattr] in in-DOM templates. -->
<a v-bind:[someAttr]="value"> ... </a>
<!-- A�a��daki ifade DOM i�i �ablonda v-bind:[birnitelik] �eklinde d�n��t�r�lecektir. -->
<a v-bind:[birNitelik]="deger"> ... </a>
```

### Modifiers
### De�i�tiriciler

Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent` modifier tells the `v-on` directive to call `event.preventDefault()` on the triggered event:
De�i�tiriciler bir nokta ile g�sterilen �zel eklerdir ve bir direktifin �zel bir �ekilde ba�lanmas� gerekti�ini ifade eder. �rne�in `.prevent` de�i�tiricisi `v-on` direktifine tetiklenen olay �zerinde `event.preventDefault()` ifadesini �a��rmas�n� s�yler:

``` html
<form v-on:submit.prevent="onSubmit"> ... </form>
```

You'll see other examples of modifiers later, [for `v-on`](events.html#Event-Modifiers) and [for `v-model`](forms.html#Modifiers), when we explore those features.
S�z konusu b�l�mlere geldi�imizde [`v-on`a](events.html#Event-Modifiers) ve [`v-model`e](forms.html#Modifiers) y�nelik ba�ka de�i�tirici �rneklerini g�receksiniz.

## Shorthands
## K�saltmalar

The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building a [SPA](https://en.wikipedia.org/wiki/Single-page_application), where Vue manages every template. Therefore, Vue provides special shorthands for two of the most often used directives, `v-bind` and `v-on`:
`v-` �n eki �ablonlar�n�zdaki Vue�ye �zg� nitelikleri kolayca tespit edebilmeyi sa�layan g�rsel bir ipucu g�revi g�r�r. Hali haz�rda yaz�lm�� olan bi�imli metinlere dinamik davran��lar eklemek i�in Vue.js�nin kullan�lmas� s�ras�nda yararl� olsa da direktiflerin s�k�a kullan�ld��� durumlarda metin kalabal��� yaratabilir. Ayn� zamanda her �eyin Vue taraf�ndan y�netildi�i bir [SPA](https://tr.wikipedia.org/wiki/Tek_sayfa_uygulamas%C4%B1) geli�tirdi�iniz s�rada `v-` �n eki �nemini kaybeder. Bu nedenle Vue en �ok kullan�lan iki direktif olan `v-bind` ve `v-on` i�in �zel k�saltmalar sunar:

### `v-bind` Shorthand
### `v-bind` K�saltmas�

``` html
<!-- full syntax -->
<!-- uzun sentaks -->
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<!-- k�saltma -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<!-- dinamik arg�manl� k�satma (2.6.0+) -->
<a :[key]="url"> ... </a>
```

### `v-on` Shorthand
### `v-on` K�saltmas�

``` html
<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>
<!-- uzun sentaks -->
<a v-on:click="birSeyYap"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>
<!-- k�saltma -->
<a @click="birSeyYap"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
<!-- dinamik arg�manl� k�satma (2.6.0+) -->
<a @[olay]="birSeyYap"> ... </a>
```

They may look a bit different from normal HTML, but `:` and `@` are valid characters for attribute names and all Vue-supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.
Bu kullan�m normal HTML�den biraz farkl� g�r�nebilir ama `:` ve `@` karakterleri ge�erli nitelik isimleri aras�ndad�r ve Vue�n�n desteklendi�i t�m taray�c�lar taraf�ndan do�ru bir �ekilde okunabilir. Ayr�ca bunlar ekrana yans�t�lan nihai bi�imli metin i�erisinde g�r�nt�lenmez. K�saltma sentaks� iste�e ba�l� olmakla beraber kullan�m�n� daha yak�ndan ��rendik�e ho�unuza gidece�ini d���n�yoruz.