Vue.js, ilerici bir JavaScript çerçevesi olarak itibarını kazanmıştır. Tek sayfalık uygulamalar (SPA'lar) oluşturmak veya belirli kullanıcı arabirimleri geliştirmek için Vue.js'yi kullanabilirsiniz.

Burada, bir Vue bileşeninin nasıl oluşturulacağı ve dinamik verileri işlemek için options nesnesiyle nasıl çalışılacağı da dahil olmak üzere Vue.js'nin temellerini öğreneceksiniz.

Vue.js, en popüler JavaScript çerçeveleri. Vue'ya başlamak için, HTML sayfanıza eklemek için aşağıdaki script etiketini kopyalayın ve head bölümüne yapıştırın:

<senaryokaynak="">senaryo>

CDN bağlantısını kullanmak, statik HTML'yi iyileştirmek veya uygulamanıza işlevsellik eklemek için mükemmel bir seçenektir.

Ancak, tam teşekküllü Vue uygulamaları oluştururken yardımcı olan Tek Dosya Bileşeni (SFC) sözdizimi gibi gelişmiş özelliklerinden daha fazlasını kullanmak için Vue.js'yi npm aracılığıyla yüklemeniz gerekir.

Vue Uygulaması Oluşturma

Vue kitaplığına CDN bağlantısı yoluyla erişim, aşağıdakileri içeren bir Vue nesnesi sağlar: .createApp() yöntem.

Adından da anlaşılacağı gibi, bu yöntemi kullanarak bir Vue uygulaması oluşturabilirsiniz.

Örneğin:

html>
<htmldil="tr">
<KAFA>
<başlık>Vue uygulamasıbaşlık>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<senaryo>
 const uygulaması = Vue.createApp();
senaryo>
vücut>
html>

Burada oluşturulan uygulama şu klasörde saklanır: uygulama değişken. Uygulama örneğini oluşturduktan sonra, onu kullanarak oluşturmanız gerekir. .mount() yöntem. Bu yöntem, uygulamanın nereye bağlanacağını söyler. Belge Nesne Modeli (DOM).

Şöyle:

html>
<htmldil="tr">
<KAFA>
<başlık>Vue uygulamasıbaşlık>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<divİD="uygulama">div>
<senaryo>
 const uygulaması = Vue.createApp();
 app.mount("#uygulama");
senaryo>
vücut>
html>

Vue'ları kullanmak için .mount() yöntemi, bağımsız değişken olarak bir DOM öğesi veya seçici sağlamalısınız. Bu örnekte, DOM öğesini kullanarak Vue uygulamasını bağladık. #uygulama İD.

Vue uygulamasının yalnızca bir kod kullanılarak belirtilen öğeleri kontrol ettiğini not etmek önemlidir. İD. Ayrıca uygulamanın, tıklama etkinlikleri veya diğer etkileşimler dahil olmak üzere bu öğelerin dışındaki hiçbir şey üzerinde kontrolü yoktur.

Bir Vue uygulaması oluşturmanın son adımı, .mount() tüm uygulama yapılandırmalarını tamamladıktan sonra yöntem.

Vue'daki Seçenekler Nesnesi

Vue.js'de, Seçenekler nesneyi bir Vue örneği veya bileşeni oluşturmak için bir yapılandırma nesnesi olarak kullanın.

Her örnek veya bileşen için davranışı ve verileri tanımladığı için bir Vue uygulamasının önemli bir parçasıdır. bu Seçenekler nesne, örneğin veya bileşenin çeşitli yönlerini temsil eden birkaç özellikten oluşur.

Yaygın olarak kullanılan özelliklerden bazıları Seçenekler nesne şunlardır:

• veri: Bu özellik, Vue uygulamaları için veri nesnesini tanımlar. Veri özelliklerini ve bunların ilk değerlerini içeren bir nesneyi döndüren bir işlevdir.
• yöntemler: yöntemler Options nesnesinin özelliği, dinamik işlemeyi etkinleştirmede hayati işlevleri barındırır.
• şablon: Bu özellik, Vue örneği veya bileşeni için HTML şablonunu tanımlar. Vue'nun şablon derleyicisinin ayrıştırabileceği HTML işaretlemesini içeren bir dizedir.

Bir şablon özelliği kullanılırken, Vue derleyicisinin yalnızca şablonda tanımlanan içeriği oluşturacağını unutmayın.

İşte bir Vue uygulaması örneği veri, yöntemler, Ve şablon özellikler:

html>
<htmldil="tr">
<KAFA>
<başlık>Vue uygulamasıbaşlık>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<divİD="uygulama">
<h1 @tıklamak="ters Mesaj" >{{ metin }}h1>
div>
<senaryo>
sabit uygulama = Vue.createApp({
// şablon: '
Vue uygulamanıza hoş geldiniz
',
 veri() {
geri dönmek {
 metin: "Bu sizin Vue Uygulamanız"
 };
 },
 yöntemler: {
 tersMesaj () {
Bu.metin = Bu.metin.böl('').ters().join('')
 }
 }
 });
uygulama.mount("#uygulama");
senaryo>
vücut>
html>

Bu program, metin enterpolasyonunu kullanarak "Bu sizin Vue Uygulamanızdır" metnini görüntüleyen ve kullanıcıların mesajı tersine çevirmek için üzerine tıklamasına izin veren temel bir Vue uygulamasını gösterir.

bu veri() işlev, adı verilen tek bir özelliğe sahip bir nesne döndürür metin. bu @tıklamak direktif bir eklemek için kullanılır tersMesaj() yöntemi tersine çeviren eleman metin mülk.

Bu programı çalıştırırken, oluşturulan Vue uygulaması şöyle görünecektir:

Metne tıklamak onu tersine çevirir.

Programın, Vue uygulamasındaki içeriklerin işlenmesine izin vermek için şablon özelliğini yorumladığını unutmayın. Yorum yapılmadan bırakılırsa, bu Vue uygulaması yalnızca bir şablon özelliği gösterecektir:

gibi başka özellikler de var sahne Ve hesaplanmış, Seçenekler Nesnesini yapılandırırken güçlü ve esnek Vue uygulamaları oluşturmak için de kullanabilirsiniz.

Vue'da Metin Enterpolasyonu

Vue'daki metin enterpolasyonu, verileri HTML öğelerine dinamik olarak bağlamanıza izin veren bir özelliktir. Başka bir deyişle, bir Vue örneğinin veri özelliklerinin değerini HTML'de doğrudan çıktı olarak almanızı sağlayacaktır.

Vue'da metin enterpolasyonu elde etmek için, data özelliğinin adını çift kıvrık parantez içine almanız gerekir. Vue, çift kıvrık parantez içindeki içeriği JavaScript ifadeleri olarak yorumlar ve ayrıca bunları sonuç değerleri ile değiştirir.

Örneğin:

html>
<htmldil="tr">
<KAFA>
<başlık>Vue uygulamasıbaşlık>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<divİD="uygulama">
<h1>{{ İleti }}h1>
<P>hoşgeldin {{ name }}P>
div>
<senaryo>
 const uygulaması = Vue.createApp({
 veri() {
 geri dönmek {
 mesaj: "Bu sizin Vue uygulamanız.",
 isim: "Asil",
 };
 },
 });
 app.mount("#uygulama");
senaryo>
vücut>
html>

Bu örnekte, metin enterpolasyonu İleti Ve isim Vue örneğinde döndürülen veri nesnesinin özellikleri Ve elementler. Vue uygulaması bağlandıktan sonra, şu değerleri görüntüler: İleti Ve isim HTML'deki özellikler ilgili konumlarında.

Ayrıca bir yöntem çağrısının sonucunu görüntüleyebilir veya çift süslü parantez içinde temel JavaScript işlemlerini gerçekleştirebilirsiniz:

html>
<htmldil="tr">
<KAFA>
<başlık>Vue uygulamasıbaşlık>
<senaryokaynak=" https://unpkg.com/vue@3/dist/vue.global.js">senaryo>
KAFA>
<vücut>
<divİD="uygulama">
<h1>{{ İleti }}h1>
<h3>{{ name.toUpperCase() }} hoş geldinizh3>
<P>Adınızda {{ nameLength() }} harf var.P>
div>
<P>burada değilP>
<senaryo>
 const uygulaması = Vue.createApp({
 veri() {
 geri dönmek {
 mesaj: "Bu sizin Vue Uygulamanız",
 isim: "Soylu Okafor",
 };
 },
 yöntemler: {
 adUzunluğu() {
 this.name.length'i döndür - 1;
 },
 },
 });
 app.mount("#uygulama");
senaryo>
vücut>
html>

Bu örnekte, Vue uygulamasının bir veri iki özellik içeren nesne: İleti Ve isim.

Vue uygulamasının içinde, üç HTML öğesi, Vue örneğini kullanarak verileri görüntüler. bu h1 eleman değerini gösterir İleti mülkiyet, iken h3 eleman değerini gösterir isim olan bir mülk toUpperCase() ona uygulanan yöntem.

bu P öğesi, döndürülen sonucu görüntüler adUzunluk() tanımlanan yöntem yöntemler Vue uygulamasının nesnesi. bu adUzunluk() yöntemi, uzunluğunu döndürür isim özellik bir ile çıkarılır.

Yöntemler nesnesindeki veri nesnesinden bir değere erişmek için şunu kullanmanız gerekir: Bu anahtar kelime. Bu anahtar kelime, geçerli Vue örneğini ifade eder ve özelliklerine ve yöntemlerine Vue örneğinden erişmenizi sağlar. Kullanarak Bu, değerini alabilirsiniz isim özelliğini kullanın ve üzerinde gerekli tüm işlemleri gerçekleştirin. yöntemler.

Bu Vue uygulaması, metin enterpolasyonu kullanılarak verilerin HTML öğelerine nasıl bağlanacağını ve bir Vue örneğinde yöntemlerin nasıl tanımlanıp çağrılacağını gösterir.

Vue Kullanarak Ön Uçunuzu Oluşturun

Bu makalede, Vue ile çalışmaya nasıl başlayacağınızı ve Vue'nun şablon oluşturma sözdizimiyle metin enterpolasyonunu nasıl yapacağınızı öğrendiniz. Yönergeler ve yaşam döngüsü kancaları gibi Vue'daki diğer birçok özelliğe erişebilirsiniz, bu da onu dinamik ön uç uygulamaları oluşturmak için mükemmel bir seçim haline getirir.