Məqalələr

Tək Səhifəli Tətbiq nədir və Vue.js nədir

Vue.js interaktiv veb istifadəçi interfeyslərini və tək səhifə proqramlarını inkişaf etdirmək üçün istifadə edilən mütərəqqi və açıq mənbəli JavaScript çərçivəsidir.

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 nə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 (SPA) nədir?

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.

Vue.js xüsusiyyətləri

Aşağıda Vue.js-in ən vacib xüsusiyyətlərinin siyahısı verilmişdir:

Komponentlər

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.

Şablonlar

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.

Yenidən fəaliyyət

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.

Yönlendirme

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.

Keçidlər

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-i necə quraşdırmaq olar?

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.

Birbaşa HTML faylında

Ə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.

CDN-dən istifadə

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-dən istifadənin üstünlükləri

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:

Çox kiçik ölçü

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.

İnnovasiya bülleteni
Yeniliklərlə bağlı ən vacib xəbərləri qaçırmayın. Onları e-poçtla almaq üçün qeydiyyatdan keçin.
Anlamaq və kodlaşdırmaq asandır

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.

Mövcud proqramlarla sadə inteqrasiya

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.

Təbiətcə elastikdir

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.

Komponentlər

Vue.js proqramlarında təkrar istifadə edilə bilən fərdi elementlər yarada bilərsiniz.

Sadə, tam və ətraflı sənədlər

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.

virtual DOM

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.

İkitərəfli rabitə

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.

Vue.js deklarativ təqdimatı

Çə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:

  • inteqrasiya olunmuş direktivlər e
  • direktivlər defiistifadəçi tərəfindən başa düşüldü.

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

İnnovasiya bülleteni
Yeniliklərlə bağlı ən vacib xəbərləri qaçırmayın. Onları e-poçtla almaq üçün qeydiyyatdan keçin.

Articoli recenti

Veeam müdafiədən tutmuş cavab və bərpaya qədər ransomware üçün ən əhatəli dəstəyi təqdim edir

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...

23 Aprel 2024

Yaşıl və Rəqəmsal İnqilab: Proqnozlaşdırılan Baxım Neft və Qaz Sənayesini necə çevirir?

Proqnozlaşdırılan texniki xidmət zavodun idarə edilməsinə innovativ və proaktiv yanaşma ilə neft və qaz sektorunda inqilab edir.…

22 Aprel 2024

Böyük Britaniyanın antiinhisar tənzimləyicisi GenAI üzərində BigTech həyəcanını qaldırır

Böyük Britaniyanın CMA süni intellekt bazarında Big Tech-in davranışı ilə bağlı xəbərdarlıq edib. Orada…

18 Aprel 2024

Casa Green: İtaliyada davamlı gələcək üçün enerji inqilabı

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ı ...

18 Aprel 2024