Skip to content

Fix : Corrected file encoding for Turkish #23

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 1 commit into from
Oct 7, 2019
Merged
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
124 changes: 62 additions & 62 deletions src/v2/guide/syntax.md
Original file line number Diff line number Diff line change
@@ -1,82 +1,82 @@
---
title: �ablon Sentaks�
title: Şablon Sentaksı
type: guide
order: 4
---

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.
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.

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.
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.

E�er Sanal DOM kavramlar�na al���ksan�z ve saf JavaScriptin 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.
Eğer Sanal DOM kavramlarına alışıksanız ve saf JavaScriptin 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.

## De�i�ken de�er takibi
## Değişken değer takibi

### Metin

Veri ba�laman�n en basit �ekli �B�y�k� sentaks� (iki�er adet s�sl� parantez) ile yaz�lan metin de�erlerinin takibidir.
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>Mesaj: {{ msg }}</span>
```

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.
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.

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.
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>Bu asla de�i�meyecektir: {{ msg }}</span>
<span v-once>Bu asla değişmeyecektir: {{ msg }}</span>
```

### Saf HTML

�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:
Ç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>B�y�k ile kullan�m: {{ safHtml }}</p>
<p>v-html direktifi ile kullan�m: <span v-html="safHtml"></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>B�y�k ile kullan�m: {{ rawHtml }}</p>
<p>v-html direktifi ile kullan�m: <span v-html="safHtml"></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 {
safHtml: <span style="color: red">Bu metnin rengi k�rm�z� olmal�.</span>'
safHtml: <span style="color: red">Bu metnin rengi kırmızı olmalı.</span>'
}
}
})
</script>
{% endraw %}

`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.
`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">��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>
<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>

### HTML Nitelikleri

HTML nitelikleri i�erisinde b�y�k sentaks� kullan�lamaz. Bunun yerine [v-bind direktifini](../api/#v-bind) kullan�n:
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="dinamikId"></div>
```

Mevcut olmalar� `true` anlam�na gelen boole nitelikleri i�in `v-bind` biraz farkl� faaliyet g�stermektedir. A�a��daki �rne�e bakal�m:
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="butonAktifDegil">Buton</button>
```

E�er `butonAktifDe�il` de�i�keninin de�eri `null`, `undefined` veya `false olursa `disabled` niteli�i, modellenen `<button>` elementine dahil bile edilmeyecektir.
Eğer `butonAktifDeğil` değişkeninin değeri `null`, `undefined` veya `false olursa `disabled` niteliği, modellenen `<button>` elementine dahil bile edilmeyecektir.

### JavaScript �fadelerinin Kullan�m�
### JavaScript İfadelerinin Kullanımı

�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:
Ş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
{{ sayi + 1 }}
Expand All @@ -88,128 +88,128 @@ E
<div v-bind:id="'list-' + id"></div>
```

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**:
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
<!-- A�a��daki kod bir ifade de�il bir beyand�r: -->
<!-- Aşağıdaki kod bir ifade değil bir beyandır: -->
{{ var a = 1 }}

<!-- ak�� kontrol� de �al��mayacakt�r, bunun yerine �� terimli ifadeleri kullan�n -->
<!-- akış kontrolü de çalışmayacaktır, bunun yerine üç terimli ifadeleri kullanın -->
{{ if (ok) { return mesaj } }}
```

<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>
<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>

## Direktifler

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:
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">�u an beni g�r�yorsun</p>
<p v-if="seen">Şu an beni görüyorsun</p>
```

Burada `v-if` direktifi, `<p>` elementini `seen` ifadesine ait de�erin do�ru olup olmad���n� g�re DOMa ekler veya kald�r�r.
Burada `v-if` direktifi, `<p>` elementini `seen` ifadesine ait değerin doğru olup olmadığını göre DOMa ekler veya kaldırır.

### Arg�manlar
### Argümanlar

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:
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>
```

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.
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.

Bir di�er �rnek DOM olaylar�n� dinleyen `v-on` direktifidir:
Bir diğer örnek DOM olaylarını dinleyen `v-on` direktifidir:

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

Burada arg�man dinlenilecek olan olay�n ad�d�r. Olay y�netimine ileride daha yak�ndan de�inece�iz.
Burada argüman dinlenilecek olan olayın adıdır. Olay yönetimine ileride daha yakından değineceğiz.

### Dinamik Arg�manlar
### Dinamik Argümanlar

> 2.6.0+dan itibaren
> 2.6.0+dan itibaren

2.6.0 versiyonundan itibaren bir direktif arg�man� i�erisinde JavaScript ifadelerini k��eli bir parantez i�erisinde kullanmak m�mk�n:
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:[nitelikAdi]="url"> ... </a>
```

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.
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.

Ayn� �ekilde dinamik arg�manlar sayesinde bir olay y�neticisini dinamik bir olay ad�na ba�layabilirsiniz:
Aynı şekilde dinamik argümanlar sayesinde bir olay yöneticisini dinamik bir olay adına bağlayabilirsiniz:

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

Yine yukar�daki gibi `olayAdi`'n�n de�eri `"focus"` ise `v-on:[eventName]` ifadesi `v-on:focus`a kar��l�k gelecektir.
Yine yukarıdaki gibi `olayAdi`'nın değeri `"focus"` ise `v-on:[eventName]` ifadesi `v-on:focus`a karşılık gelecektir.

#### Dinamik Arg�man De�eri K�s�tlamalar�
#### Dinamik Argüman Değeri Kısıtlamaları

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.
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.

#### Dinamik Arg�man �fadesi K�s�tlamalar�
#### Dinamik Argüman İfadesi Kısıtlamaları

<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>
<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>

�rne�in a�a��daki ifade ge�ersizdir:
Örneğin aşağıdaki ifade geçersizdir:

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

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.
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.

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:
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
<!-- A�a��daki ifade DOM i�i �ablonda v-bind:[birnitelik] �eklinde d�n��t�r�lecektir. -->
<!-- Aşağıdaki ifade DOM içi şablonda v-bind:[birnitelik] şeklinde dönüştürülecektir. -->
<a v-bind:[birNitelik]="deger"> ... </a>
```

### De�i�tiriciler
### Değiştiriciler

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:
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>
```

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.
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.

## K�saltmalar
## Kısaltmalar

`v-` �n eki �ablonlar�n�zdaki Vueye �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.jsnin 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-` ön eki şablonlarınızdaki Vueye ö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.jsnin 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` K�saltmas�
### `v-bind` Kısaltması

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

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

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

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

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

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

<!-- dinamik arg�manl� k�satma (2.6.0+) -->
<!-- dinamik argümanlı kısatma (2.6.0+) -->
<a @[olay]="birSeyYap"> ... </a>
```

Bu kullan�m normal HTMLden 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.
Bu kullanım normal HTMLden 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.