In: Genel


Özelleştirilmiş, tekrarlanabilir HTML öğeleri oluşturmak, yazmanız gereken kod miktarını azaltır. Ayrıca, kod tabanınıza organizasyon ve okunabilirlik ekler. Peki özel HTML öğeleri nasıl oluşturulur? Vue.JS zarif bir çözüm sunar.

Vue.JS, kullanımı nispeten kolay olan hafif bir JavaScript çerçevesidir. Aşağıdaki öğreticide, yeni veya mevcut projenize Vue.JS’yi nasıl ekleyeceğinizi ve özel HTML’yi çok kolay hale getiren bileşenleri nasıl hızlı bir şekilde oluşturacağınızı göstereceğim.

Vue’yu projenize dahil etmek, aşağıdaki komut dosyasını kopyalayıp yapıştırmak kadar kolaydır: . Kapanış ve etiketleri arasına etiketi (ve elbette kendi .js dosyanıza referansı) eklemek isteyeceğinizi unutmayın. Etiketleri oraya koymak, komut dosyalarını çağırmadan önce gövdenin yüklenmesine izin verecektir.

Ardından, Vue.JS’nin hedeflemesi için bir HTML öğesi eklemek isteyeceksiniz; sadece id=”vue” olan bir div öğesi ekleyin.

JavaScript’te yapmak isteyeceğiniz ilk şey, Vue nesnesinin yeni bir örneğini bildirmektir. Sadece bir özelliği olan bir nesneyi ileteceksiniz. Bu özelliğin adı el’dir ve değeri daha önce eklenen hedef öğe için bir CSS seçici olacaktır (id=”vue” ile div).

Şimdi özel HTML’mizi oluşturmak için Vue’nun bileşen yöntemini kullanacağız.

Not: Yeni Vue örneğinden ÖNCE bileşen yöntemini çağırmak isteyeceksiniz. 2 Bağımsız değişken 1) özel öğenin adı ve 2) HTML’li bir şablon içeren bir nesne iletilir.

HTML ile, diğer her şeyi içeren tek bir üst düzey öğeyle başlamak isteyeceksiniz. Bir div kullanmak mantıklıdır ve bu div’e özel öğenin adıyla eşleşen bir kimlik (veya sınıf adı) vermek de mantıklıdır. Bunu yapmak, kolay CSS hedeflemesine izin verir. Son olarak, kullanılması tavsiye edilir. şablon değişmezi temiz biçimlendirme için sözdizimi.

Şimdi iyi şeyler için; hadi bu özel HTML’yi çalıştıralım! Bu örnek için basit bir özel banner öğesi ile gideceğim.

İstediğiniz geçerli html ile yazabilirsiniz. Son adım, özel öğe etiketlerini (yani bileşen yöntemine ilettiğiniz ad) hedef öğe HTML’sine (örn.

) yerleştirmektir. Nasıl göründüğünü görmek için yukarıdaki önizlemede HTML sekmesini tıkladığınızdan emin olun. Tüm HTML’yi oluşturmak için özel öğe etiketlerini yalnızca 1 kez kullanmanız gerektiğine dikkat edin.

İşte orada. Vue.JS ile özelleştirilmiş yeniden kullanılabilir HTML oluşturmak çok kolaydır. Her zaman olduğu gibi, okuduğunuz için teşekkürler… Daha fazlası için takipte kalın!

Bir cevap yazın

Ready to Grow Your Business?

We Serve our Clients’ Best Interests with the Best Marketing Solutions. Find out More

How Can We Help You?

Need to bounce off ideas for an upcoming project or digital campaign? Looking to transform your business with the implementation of full potential digital marketing?

For any career inquiries, please visit our careers page here.
[contact-form-7 404 "Bulunamadı"]