Vue Academy · Ders

Ara Değiştirme ve Yönergeler

Şablonlarda mustache ara değiştirmesini ve temel yönergeleri kullanın.

Ara Değiştirme ve Yönergeler, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Şablon Söz Dizimine Genel Bakış

Vue şablonları, özel söz dizimiyle geliştirilmiş geçerli HTML'dir:

Metin için Mustache metin yerleştirmesi
Davranış için yönergeler (v- ön ekli öznitelikler)

Vue, bunları verimli oluşturma işlevlerine dönüştürür.

Mustache ile Metin Yerleştirme

Çift küme ayraçları veya mustache söz dizimi, metin çıktısı üretir.

İçerik yalnızca bir değişken adı değil, bir JavaScript ifadesidir.

<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>

Öznitelikler İçin v-bind

Mustache ifadeleri HTML özniteliklerinin içinde çalışmaz. Verileri bir özniteliğe bağlamak için v-bind kullanın.

<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>

v-bind Kısa Yazımı

v-bind o kadar sık kullanılır ki kısa bir yazımı vardır: yalnızca iki nokta işareti.

<!-- Full syntax -->
<a v-bind:href="url">Link</a>

<!-- Shorthand -->
<a :href="url">Link</a>

Olaylar İçin v-on

v-on yönergesi DOM olaylarını dinler ve işleyicileri çalıştırır.

<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>

v-on Kısa Yazımı

v-on yönergesinin de kısa bir yazımı vardır: @ işareti.

<!-- Full syntax -->
<button v-on:click="save">Save</button>

<!-- Shorthand -->
<button @click="save">Save</button>

Satır İçi ve Yöntem İşleyicileri

Olay işleyicileri satır içi ifadeler veya yöntem adları olabilir.

<!-- Inline expression -->
<button @click="count++">Add</button>

<!-- Method handler -->
<button @click="increment">Add</button>

<!-- Inline with the event object -->
<button @click="log($event)">Log</button>

v-text

v-text yönergesi, bir öğenin metin içeriğini ayarlar. Bir mustache ifadesiyle eşdeğerdir.

<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>

v-html

v-html yönergesi, bir dizeyi kaçış karakterleri eklenmiş metin olarak değil, gerçek HTML olarak oluşturur.

<div v-html="rawHtml"></div>

<!-- If rawHtml = "<b>Bold</b>",
     it renders actual bold text -->

v-html ve XSS Uyarısı

Uyarı: v-html, güvenilmeyen içerikle kullanıldığında tehlikelidir.

Kötü amaçlı betikler ekleyebilir (XSS saldırıları)
Yalnızca tamamen güvendiğiniz içerikte kullanın
Kullanıcı tarafından gönderilen HTML'yi doğrudan asla oluşturmayın

Normal metin için HTML'den kaçan Mustache metin yerleştirmesini her zaman tercih edin.

Yönerge Bağımsız Değişkenleri

Bazı yönergeler, hangi özniteliğin veya olayın kullanılacağını belirtmek için iki nokta işaretinden sonra bir bağımsız değişken alır.

<!-- argument is the attribute name -->
<a :href="url">Link</a>

<!-- argument is the event name -->
<button @click="run">Run</button>

<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>

Hızlı Kontrol

Metin yerleştirme ve yönergeleri ne kadar anladığınızı test edin.

Özet: Metin Yerleştirme ve Yönergeler

Vue şablonlarının temellerini öğrendiniz:

{{ }} mustache ifadelerinin metin çıktısını üretir
v-bind (kısa yazımı :) öznitelikleri bağlar
v-on (kısa yazımı @) olayları işler
v-text metin içeriğini ayarlar
v-html ham HTML oluşturur (XSS riski taşır, dikkatli kullanın)

Sıradaki konu: koşullu ifadeler ve döngüler.

Sıkça Sorulan Sorular

“Ara Değiştirme ve Yönergeler” dersi ücretsiz mi?

Evet — “Ara Değiştirme ve Yönergeler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Ara Değiştirme ve Yönergeler” dersinde ne öğreneceğim?

Şablonlarda mustache ara değiştirmesini ve temel yönergeleri kullanın. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.

“Ara Değiştirme ve Yönergeler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön