Vue.js əsasən tətbiqin vizuallaşdırma hissəsinə diqqət yetirir, buna front-end inkişafı da deyilir. Vue.js günü-gündən populyarlaşır, çünki digər layihələr və kitabxanalarla inteqrasiya etmək çox asandır. Quraşdırmaq və istifadə etmək çox sadədir.
Vue.js mütərəqqi JavaScript çərçivəsidir açıq mənbə interaktiv veb istifadəçi interfeyslərini və tək səhifəli proqramları (SPA) inkişaf etdirmək üçün istifadə olunur. Vue.js adətən Vue kimi istinad edilir və "view.js" və ya "view" kimi oxunur.
Tək Səhifəli Tətbiq və ya SPA, istifadəçilərə masaüstü proqrama bənzər çox hamar, həssas və sürətli təcrübə təqdim edən veb proqram və ya veb saytdır. Tək səhifəli proqram bir səhifədə menyu, düymələr və bloklardan ibarətdir. İstifadəçi onlardan birinə kliklədikdə, serverdən bütün yeni səhifələri yükləmək əvəzinə, cari səhifəni dinamik şəkildə yenidən yazır. Bu, onun cavab sürətinin səbəbidir.
Vue əsasən frontend inkişafı üçün qurulmuşdur, ona görə də çoxlu HTML, JavaScript və CSS fayllarını idarə etməlidir. Vue.js istifadəçilərə HTML-i direktiv adlanan HTML atributları ilə genişləndirməyi asanlaşdırır. Vue.js daxili direktivləri və bir çox direktivləri təmin edir defiHTML proqramlarının funksionallığını yaxşılaşdırmaq üçün istifadəçi tərəfindən nite.
Aşağıda Vue.js-in ən vacib xüsusiyyətlərinin siyahısı verilmişdir:
Vue.js komponentləri bu çərçivənin mühüm xüsusiyyətlərindən biridir. Onlar təkrar istifadə edilə bilən kodu əhatə etmək üçün əsas HTML elementlərini genişləndirmək üçün istifadə olunur. Siz Vue.js proqramlarında sonradan HTML-də təkrar istifadə oluna bilən təkrar istifadə edilə bilən fərdi elementlər yarada bilərsiniz.
Vue.js göstərilən DOM-u Vue nümunəsi datası ilə əlaqələndirmək üçün istifadə oluna bilən HTML əsaslı şablonlar təqdim edir. Bütün Vue şablonları etibarlı HTML-dir ki, onlar spesifikasiyaya uyğun brauzerlər və HTML təhlilçiləri tərəfindən təhlil edilə bilər. Vue.js modelləri Virtual DOM göstərmə funksiyalarına yığır. Vue, brauzeri yeniləməzdən əvvəl komponentləri virtual DOM yaddaşına təqdim edir. Vue, həmçinin tətbiq vəziyyətini dəyişdirərkən yenidən göstərmək və minimum DOM manipulyasiyasını tətbiq etmək üçün minimum komponent sayını hesablaya bilər.
Vue sadə JavaScript obyektlərindən istifadə edən və yenidən göstərilməsini optimallaşdıran cavab sistemi təqdim edir. Bu prosesdə hər bir komponent öz reaktiv asılılıqlarını izləyir, ona görə də sistem nə vaxt və hansı komponentləri yenidən göstərəcəyini dəqiq bilir.
Səhifənin naviqasiyası vue-routerin köməyi ilə həyata keçirilir. Tək səhifə tətbiqiniz üçün rəsmi olaraq dəstəklənən vue-router kitabxanasından istifadə edə bilərsiniz.
Vue elementlər DOM-a daxil edildikdə, yeniləndikdə və ya silindikdə müxtəlif keçid effektlərindən istifadə etməyə imkan verir.
Vue.js-dən istifadə etmək üçün bir neçə üsul var. Siz onu rəsmi saytına daxil olaraq quraşdıra və ya CDN kitabxanasından Vue.js faylından istifadə etməyə başlaya bilərsiniz. Layihənizdə Vue.js-dən istifadə etməyin bəzi yolları bunlardır.
Əgər etiketdən istifadə etmək istəyirsinizsə <script>
Vue.js faylını birbaşa HTML faylınıza daxil etmək üçün onu rəsmi internet saytından yükləməlisiniz.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html>
Gəlin Vue.js rəsmi saytına gedək https://vuejs.org/v2/guide/installation.html ehtiyaclarınıza uyğun olaraq vue.js yükləmək üçün.
Siz həmçinin CDN-dən Vue.js faylını tətbiqinizdə istifadə edə bilərsiniz. Element daxilində https://unpkg.com/vue@3/dist/vue.global.js linkindən istifadə edin <script>
, aşağıdakı kimi:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Vue.js veb inkişafı və Tək Səhifə Tətbiqləri (SPA) yaratmaq üçün geniş istifadə olunan ən son proqram texnologiyalarından biridir. Adından da təxmin edə bildiyiniz kimi, əsasən layihənin UI və ya ekran tərəfi üçün istifadə olunur.
Layihənizdə Vue.js-dən istifadə etməyin faydalarına baxaq:
Vue.js-in ən böyük üstünlüklərindən biri onun ölçüsünün çox kiçik olmasıdır. JavaScript çərçivəsinin uğuru onun ölçüsündən çox asılıdır və bu maraqlı JavaScript plagini cəmi 18-21KB-dır, ona görə də siz onu çox asanlıqla yükləyə və heç vaxt istifadə edə bilərsiniz.
Vue.js çərçivəsi çox sadə bir quruluşa malikdir və onu başa düşmək çox asandır. Bu çərçivənin populyarlığının səbəblərindən biridir. Əgər HTML və JavaScript ilə tanışsınızsa, Vue.js-də asanlıqla kodlaya bilərsiniz. İstifadəçilər sadə quruluşu sayəsində Vue.js-ni veb layihələrinə asanlıqla əlavə edə və proqramlar inkişaf etdirə bilərlər.
Vue.js hər şey üçün çoxlu komponentlərə malikdir və mövcud proqramlarla çox tez inteqrasiya oluna bilər. Siz onu JavaScript-də yazılmış istənilən proqramla inteqrasiya edə bilərsiniz.
Vue.js-in çevik təbiəti həm də React.js, Angular.js və hər hansı digər yeni JavaScript çərçivələrini tərtib edənlərin başa düşməsini asanlaşdırır. HTML faylları, JavaScript faylları və təmiz JavaScript faylları yazmaq üçün virtual qovşaqlardan istifadə etmək üçün çox rahatlıq təmin edir.
Vue.js proqramlarında təkrar istifadə edilə bilən fərdi elementlər yarada bilərsiniz.
Vue.js çox sadə, tam və ətraflı sənədlər təqdim edir, ona görə də HTML və JavaScript haqqında az təsəvvürü olan tərtibatçılar ondan proqramlaşdırmaq üçün istifadə edə bilərlər.
Vue.js, ReactJS, Ember və s. kimi digər mövcud çərçivələrə bənzər virtual DOM-dan istifadə edir. Virtual DOM orijinal HTML DOM-un yüngül yaddaşdaxili ağac təsviridir və ilkin DOM-a təsir etmədən yenilənir.
Vue.js HTML bloklarının idarə edilməsini asanlaşdıran Model Görünüş Görünüşü Modeli (MVVM) arxitekturası ilə ikitərəfli əlaqəni təmin edir.
Çərçivə sadə və sadə model sintaksisindən istifadə edərək məlumatları DOM-a deklarativ şəkildə təqdim etməyə imkan verən bir sistemlə gəlir.
Budur bir nümunə:
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'This is a simple Vue.js Declarative Rendering example!'
}
})
</script>
</body>
Vue.js çərçivəsi bizə imkan verir defiHTML proqramlarına funksionallıq təmin etmək üçün istifadə olunan direktiv adlanan HTML atributları.
Vue.js-də iki növ direktiv var:
Vue.js data üçün yer tutanlar kimi qoşa mötərizələrdən {{}} istifadə edir və Vue.js direktivləri v-prefiksindən istifadə edən HTML atributlarıdır.
Vue proqramı tək bir DOM elementinə qoşulur və ona tam nəzarət edir. Yuxarıdakı misalda bu #appdır.
Vue ilə biz HTML-i giriş nöqtəsi kimi nəzərdən keçirə bilərik və qalan hər şey yaradılmış Vue instansiyasında baş verir.
Element və atribut bağlamasını sınadığımız bir nümunəyə baxaq:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover mouse over me for a few seconds
and see a dynamically bound title which I have set!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
Bu halda, yeni v-bind atributu direktivdir. Direktivlər Vue tərəfindən təmin edilən unikal atributlar olduğunu göstərmək üçün v-prefiksi ilə istifadə olunur və göstərilən DOM-a xüsusi cavab davranışı tətbiq etmək üçün istifadə olunur.
Nümunənin nəticəsi aşağıdakı kimidir
Ercole Palmeri
Coveware by Veeam kiber qəsb hallarına cavab xidmətləri göstərməyə davam edəcək. Coveware məhkəmə və remediasiya imkanları təklif edəcək...
Proqnozlaşdırılan texniki xidmət zavodun idarə edilməsinə innovativ və proaktiv yanaşma ilə neft və qaz sektorunda inqilab edir.…
Böyük Britaniyanın CMA süni intellekt bazarında Big Tech-in davranışı ilə bağlı xəbərdarlıq edib. Orada…
Avropa İttifaqı tərəfindən binaların enerji səmərəliliyini artırmaq üçün tərtib edilən "Yaşıl Evlər" Fərmanı qanunvericilik prosesini yekunlaşdırdı ...