Phenquestions
Bir çerçeve, geliştiriciler için geliştirme sürecini daha kolay ve daha hızlı hale getiren bu tür özellikleri sağlamayı amaçlar. Vue.js, geliştirme sürecini hızlı bir şekilde yapmak için birçok yerleşik işlev ve yönerge sağlayan, zenginleştirilmiş bir JavaScript çerçevesidir. Ancak, çerçeve tarafından mevcut olmayan bazı işlevlere ihtiyaç duyduğunuzda bazı senaryolar gelmelidir, bu nedenle kendinizinkini oluşturmalısınız.
Bu yazıda, Vue tarafından sağlanan yerleşik yönergeleri öğrenip inceleyeceğiz.js çerçevesi ve ayrıca kendi ısmarlama Vue yönergemizi oluşturmayı ve kullanmayı öğreneceğiz.
Direktif
Yönergeler, kitaplığın bazı görevleri gerçekleştirmek için kullanılan özel bir sözdizimi türü olduğunu bilmeye yardımcı olan “v-” yan tümcesinin ön eki olan DOM öğeleriyle bağlayabileceğiniz niteliklerdir. Direktifler genellikle DOM'un doğrudan manipülasyonu için kullanılır. En çok kullanılan ve ünlü direktiflerden bazıları “v-if”, “v-for” ve “v-show”dur.
Yönergeler, DOM öğelerine efekt uygulamak için kullanılır, ancak reaktif olarak. Bir örnekle anlayalım:
“v-if” Direktifi
Metni görüntüleyebilirsiniz.
Yukarıdaki etikette “v-if” paragraf etiketini silecek veya ekleyecek bir yönergedir
”, “showText” değişkeninin doğruluğuna bağlıdır.
“v-show” Direktifi
Benzer şekilde, yukarıda açıklanan işlevlerin aynısını gerçekleştirebilen “v-show” yönergesine sahibiz:
Metni görüntüleyebilirsiniz.
"v-if" ve "v-show" arasındaki ince fark, bağlı değişken doğru değilse "v-if" öğesinin sayfayı yüklerken öğeyi oluşturmaması ve değişken doğru olduğunda yüklenmesidir. Buna karşılık, "v-show", öğeyi web sayfasının yükleme zamanında oluşturacak, ancak onu gizleyecektir. Dolayısıyla, “v-if” sayfanın yüklenme süresinde zaman açısından etkilidir ve değişken doğru olduğunda zaman alıcıdır. Web sayfasının yüklenme süresinde zaman alıcı değişkenin doğruluğu üzerinde “v-show” zaman etkinken tüm öğeyi oluşturması gerekir.
Peki! Argümanı alan bir yönergeye bir göz atalım.
“v-bağlama” Direktifi
En yaygın olarak kullanılan diğer bir yönerge, HTML niteliklerini etkileşime sokmak ve güncellemek için kullanılan “v-bind”dir. Örneğin, bir değişkeni "href" niteliğine bağlamak istiyorsak, etiketi, "href" niteliğini şu şekilde bağlayabiliriz:
“v-on” Direktifi
Tıpkı "v-bind" yönergesi gibi, Vue, DOM'da başlatılan olayları dinlemek için değişkeni bağlamak için bir "v-on" yönergesi sağlar. Örneğin, Click olayını dinlemek ve ona bazı değişkenleri bağlamak için sözdizimi şöyle olur:
Ters virgüllerde, fonksiyonların yanı sıra ifadeyi de sağlayabiliriz.
Sonuç
Vue'daki direktifleri öğrendik ve direktiflerin nasıl kullanılacağını Vue'da gördük.js. Vue'nun en çok kullanılan ve temel yerleşik yönergelerinden bazılarını tartıştık.Çok yardımcı olan ve geliştirmede büyük miktarda zaman kazandıran js.
