Enterpolasyon, v-bind ve v-model direktifleri ile Vue'da veri bağlamayı nasıl kullanacağınızı öğrenin.

Web uygulamalarında veri bağlama, uygulamanın örneği ile kullanıcı arabirimi (kullanıcı arabirimi) arasında bir bağlantı oluşturur. Uygulamanın örneği, verileri, davranışı ve bileşenleri yönetirken, kullanıcı arabirimi, kullanıcıların etkileşime girdiği görsel yönü temsil eder. Veri bağlama, dinamik web uygulamaları oluşturmanıza olanak tanır.

Burada, tek yönlü ve iki yönlü bağlamalar dahil olmak üzere Vue'daki çeşitli bağlamaları keşfedeceksiniz. Ayrıca bu bağlamaları bıyık şablonları ve v-bind ve v-model gibi yönergelerle uygulamayı öğreneceksiniz.

Vue'da enterpolasyon

Enterpolasyon, Vue'nun en popüler veri bağlama türlerinden biridir. Enterpolasyon, Hyper Text Markup Language (HTML) etiketlerinizdeki veri değerlerini, popüler olarak çift kıvrık ayraçlarla ({{ }}).

Moustache şablonuyla, veri ve yöntem özellikleri gibi dinamik uygulama içeriğini HTML'nize entegre edebilirsiniz. Bunu, veri veya yöntem özellik adlarını çevreleyerek elde edebilirsiniz.

instagram viewer
Vue'daki seçenekler nesnesi bu süslü parantez içinde.

İşte Vue'da enterpolasyon elde etmek için bıyık şablonunu kullanan bir Vue uygulamasının bir örneği:

<vücut>
<divİD="uygulama">
<h1>{{ başlık }}h1>
<P>{{ text.toUpperCase() }}P>
div>
<senaryo>
 const uygulaması = Vue.createApp({
 veri() {
 geri dönmek {
 Başlık: "Hoş Geldiniz",
 metin: "Bu senin dünyan mı?",
 };
 },
 });
 app.mount("#uygulama");
senaryo>
vücut>

Yukarıdaki kod bloğu, Vue uygulamasının veri nesnesindeki title özelliğinin değerini görüntülemek için bıyık şablonunu kullanır. Enterpolasyonlu JavaScript ifade sonuçlarını da görüntüleyebilirsiniz. Örneğin, {{text.toUpperCase()}} ifade P etiketi, aşağıdaki resimde gösterildiği gibi, metin değerinin büyük halini görüntüler:

Bir Vue uygulamasını bağladığınızda, Vue şablonlardaki ifadeleri değerlendirir ve ortaya çıkan değerleri HTML gövdesinde işler. Veri özelliklerinde yapılan herhangi bir değişiklik, kullanıcı arabirimindeki karşılık gelen değerleri günceller.

Örneğin:

<senaryo>
 const uygulaması = Vue.createApp({
 veri() {
 geri dönmek {
 başlık: "Merhaba",
 metin: "Bu senin dünyan mı?",
 };
 },
 });
 app.mount("#uygulama");
senaryo>

Yukarıdaki kod bloğu, başlık özelliğini “ olarak değiştirir.Merhaba". Vue uygulaması, başlık özelliğini aşağıda gösterildiği gibi UI öğesine bağladığından, bu değişiklik otomatik olarak UI'ye yansıtılacaktır:

Enterpolasyon, yalnızca çift kıvrık parantez HTML etiketlerini açma ve kapatma arasında olduğunda verileri verir.

v-bind Direktifi ile Tek Yönlü Veri Bağlama

Enterpolasyon gibi, tek yönlü veri bağlama, uygulamanın örneğini kullanıcı arayüzüne bağlar. Aradaki fark, veri ve yöntemler gibi özellikleri HTML özelliklerine bağlamasıdır.

Tek yönlü veri bağlama, tek yönlü veri akışını destekleyerek kullanıcıların uygulamanın örneğindeki veri özelliklerini etkileyen değişiklikler yapmasını engeller. Bu, uygulama kullanıcısına verileri görüntülemek, ancak kullanıcının verileri değiştirmesini engellemek istediğinizde kullanışlıdır.

Vue ile tek yönlü veri bağlama elde edebilirsiniz. v-bağlama direktif veya kısayol karakteri (:):

 v-bağlama yönergesi 
<giriştip="metin"v-bağlama: değer="metin">
 stenografi karakter 
<giriştip="metin":değer="metin">

Kod bloğu, giriş HTML etiketinin değerini bir text data özelliğine bağlamak için v-bind yönergesinin ve onun kısayolunun kullanımını gösterir. İşte kullanan bir Vue uygulaması örneği v-bağlama tek yönlü veri bağlama elde etmek için yönerge:

<vücut>
<divİD="uygulama">
<giriştip="metin"v-bağlama: değer="metin">
<P>{{ metin }}P>
div>
<senaryo>
 const uygulaması = Vue.createApp({
 veri() {
 geri dönmek {
 metin: "Vue harika!"
 }
 }
 })
 app.mount('#uygulama')
senaryo>
vücut>

Yukarıda, bir giriş alanı ve bir paragraf öğesi, metin mülk. bu değer giriş alanının özniteliği, kullanılarak text özelliğine bağlanır. v-bağlama direktif.

Bu kod bloğu, tek yönlü bir bağlama oluşturur; metin özelliği giriş alanının değerini günceller, ancak giriş alanında yapılan değişiklikler özelliği güncellemez. metin Vue uygulamasının örneğindeki özellik.

Bunu göstermek için, başlangıç ​​değeri ile başlayabiliriz. metin mülk, "Vue harika!”:

Giriş alanının değerini “ olarak değiştirdikten sonraSelam Dünya!", Vue uygulamasının güncellenmediğine ve paragraf etiketindeki metnin aynı kaldığına dikkat edin:

Ancak değerini değiştirdiğimizde metin mülkiyet Selam Dünya! giriş alanı yerine Vue uygulaması örneğinde, giriş alanı yeni değeri yansıtacak şekilde güncellenir:

Verileri bu şekilde bağlama, verileri kullanıcıya göstermek istediğiniz ancak kullanıcının verileri doğrudan değiştirmesini önlediğiniz senaryolarda kullanışlıdır. Vue.js'de v-bind'den yararlanarak, uygulamanızın verilerini UI öğelerine kolayca bağlayarak tek yönlü bir bağlama oluşturabilirsiniz.

v-model Direktifi ile İki Yönlü Veri Bağlama

İki yönlü veri bağlama, bir UI öğesinin değerindeki değişikliklerin temel alınan veri modeline otomatik olarak yansıtılmasına veya tersinin yapılmasına olanak tanır. Çoğu ön uç JavaScript çerçeveleri beğenmek Angular, iki yönlü bağlamayı kullanır verileri paylaşmak ve gerçek zamanlı olayları işlemek için.

Vue.js, iki yönlü bağlamayı mümkün kılar. v modeli direktif. bu v modeli yönergesi, bir form giriş öğesi ile bir data özelliği arasında iki yönlü bir veri bağlama oluşturur. Bir giriş öğesine yazdığınızda, data özelliğinde değer otomatik olarak güncellenir ve data özelliğinde yapılan herhangi bir değişiklik de giriş öğesini günceller.

İşte kullanan bir Vue uygulaması örneği v modeli iki yönlü veri bağlama elde etmek için yönerge:

<KAFA>
<başlık>Vue'da iki yönlü veri bağlamabaşlık>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<divİD="uygulama">
<giriştip="metin"v modeli="metin">
<P>{{ metin }}P>
div>
<senaryo>
 const uygulaması = Vue.createApp({
 veri() {
 geri dönmek {
 metin: "Vue harika!"
 }
 }
 })
 app.mount('#uygulama')
senaryo>
vücut>

Yukarıdaki kod bloğu, aşağıdakilere sahip bir giriş öğesine sahiptir: v modeli bağlayan direktif metin veri özelliği. bu metin özellik başlangıçta şu şekilde ayarlanır: "Vue harika!".

Girdi alanı, içine yazdığınızda text özelliğini günceller ve metin özelliğindeki değişiklikleri P etiket. Vue.js, iki yönlü veri bağlama elde etmek için v-model yönergesini ve giriş öğesini kullanır.

v-bind, Vue uygulamasından UI'ye tek yönlü iletişime izin verirken, v-modeli, Vue uygulaması ile UI arasında çift yönlü iletişim sağlar. Çift yönlü iletişimi mümkün kılabilme özelliğinden dolayı, v modeli genellikle Vue'daki form öğeleriyle çalışırken kullanılır.

Vue Uygulamaları Oluşturma Konusunda Uzmanlığınızı Genişletin

Enterpolasyon ve v-bind ve v-model direktifleri dahil olmak üzere Vue'da veri bağlama hakkında bilgi edindiniz. Bu veri bağlamaları, Vue uygulamalarının temelini oluşturdukları için önemlidir.

Vue, liste oluşturma, olay bağlama ve koşullu işleme gibi kullanım durumları için birçok başka yönergeye sahiptir. Vue yönergelerini anlamak, web uygulamalarınız için dinamik ve etkileşimli bir ön uç oluşturmanıza yardımcı olur.