Мақолаҳо

Барномаи ягонаи саҳифа чист ва Vue.js чист

Vue.js чаҳорчӯбаи пешқадам ва кушодаасоси JavaScript мебошад, ки барои таҳияи интерфейсҳои интерактивии корбари веб ва замимаҳои як саҳифа истифода мешавад.

Vue.js асосан ба қисми визуализатсияи барнома тамаркуз мекунад, ки онро рушди пешрафта низ меноманд. Vue.js рӯз то рӯз маъмул шуда истодааст, зеро ҳамгироӣ бо дигар лоиҳаҳо ва китобхонаҳо хеле осон аст. Насб кардан ва истифода бурдани он хеле осон аст.

Vue.js чист?

Vue.js чаҳорчӯбаи пешрафтаи JavaScript аст манбаи кушода барои таҳияи интерфейсҳои интерактивии корбар ва барномаҳои як саҳифа (SPA) истифода мешавад. Vue.js маъмулан ҳамчун Vue номида мешавад ва ҳамчун "view.js" ё "view" талаффуз мешавад.

Аризаи ягонаи саҳифа (SPA) чист?

Барномаи ягона ё SPA як веб-барнома ё вебсайтест, ки ба корбарон таҷрибаи хеле ҳамвор, ҷавобгӯ ва зуд ба монанди барномаи мизи корӣ медиҳад. Барномаи ягонаи саҳифа дорои меню, тугмаҳо ва блокҳо дар як саҳифа аст. Вақте ки корбар ба яке аз онҳо клик мекунад, он ба ҷои бор кардани саҳифаҳои нав аз сервер ба таври динамикӣ саҳифаи ҷорӣро аз нав менависад. Ин сабаби суръати ҷавобии он аст.

Vue асосан барои таҳияи интерфейс сохта шудааст, аз ин рӯ он бояд файлҳои зиёди HTML, JavaScript ва CSS-ро идора кунад. Vue.js ба корбарон имкон медиҳад, ки HTML-ро бо атрибутҳои HTML бо номи дастурҳо васеъ кунанд. Vue.js дастурҳои дарунсохт ва бисёр дастурҳоро таъмин мекунад definite аз ҷониби корбар барои беҳтар кардани фаъолияти барномаҳои HTML.

Хусусиятҳои Vue.js

Дар зер рӯйхати муҳимтарин хусусиятҳои Vue.js оварда шудааст:

Компоненти

Ҷузъҳои Vue.js яке аз хусусиятҳои муҳими ин чаҳорчӯба мебошанд. Онҳо барои васеъ кардани унсурҳои асосии HTML истифода мешаванд, то коди такрорӣ истифода шаванд. Шумо метавонед дар барномаҳои Vue.js унсурҳои фармоишии такрорӣ эҷод кунед, ки баъдтар дар HTML дубора истифода мешаванд.

Шаблонҳои

Vue.js қолибҳои дар асоси HTML асосёфтаро пешниҳод мекунад, ки метавонанд барои пайваст кардани DOM-и додашуда бо маълумоти мисоли Vue истифода шаванд. Ҳама қолибҳои Vue HTML дуруст мебошанд, ки онҳоро браузерҳои ба мушаххас мувофиқ ва таҳлилгари HTML таҳлил кардан мумкин аст. Vue.js моделҳоро ба функсияҳои пешниҳоди виртуалии DOM тартиб медиҳад. Vue пеш аз навсозии браузер ҷузъҳоро ба хотираи виртуалии DOM медиҳад. Vue инчунин метавонад шумораи ҳадди ақали ҷузъҳоро барои аз нав намоиш додан ва татбиқ кардани ҳадди ақали коркарди DOM ҳангоми тағир додани ҳолати барнома ҳисоб кунад.

Бозгаштан

Vue як системаи вокунишро таъмин мекунад, ки объектҳои оддии JavaScript-ро истифода мебарад ва дубора намоишро оптимизатсия мекунад. Дар ин раванд, ҳар як ҷузъ вобастагии реактивии худро пайгирӣ мекунад, аз ин рӯ система дақиқ медонад, ки кай ва кадом ҷузъҳоро дубора намоиш додан лозим аст.

Роуминг

Навигатсияи саҳифа бо ёрии vue-роутер анҷом дода мешавад. Шумо метавонед китобхонаи расман дастгирӣшавандаи vue-роутерро барои барномаи ягонаи саҳифаи худ истифода баред.

Гузариш

Vue ба шумо имкон медиҳад, ки эффектҳои гузаришро истифода баред, вақте ки унсурҳо аз DOM ворид, навсозӣ ё хориҷ карда мешаванд.

Чӣ тавр Vue.js -ро насб кардан мумкин аст?

Якчанд усулҳои истифодаи Vue.js вуҷуд доранд. Шумо метавонед онро бо рафтан ба сайти расмии он насб кунед ё шумо метавонед бо истифода аз файли Vue.js аз китобхонаи CDN низ оғоз кунед. Инҳоянд чанд роҳҳои истифодаи Vue.js дар лоиҳаи худ.

Бевосита дар файли HTML

Агар шумо хоҳед, ки тегро истифода баред <script> Vue.js-ро мустақиман ба файли HTML-и худ ворид кунед, шумо бояд онро аз вебсайти расмӣ зеркашӣ кунед.

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>  

Биёед ба вебсайти расмии Vue.js равем https://vuejs.org/v2/guide/installation.html барои зеркашии vue.js мувофиқи ниёзҳои худ.

Истифодаи CDN

Шумо инчунин метавонед файли Vue.js-ро аз CDN, дар аризаи худ истифода баред. Дар дохили элемент истиноди https://unpkg.com/vue@3/dist/vue.global.js -ро истифода баред <script>, ба таври зерин:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Манфиатҳои истифодаи Vue.js

Vue.js яке аз технологияҳои навтарини нармафзор мебошад, ки барои таҳияи веб ва сохтани Барномаҳои Single Page (SPA) васеъ истифода мешавад. Тавре ки шумо метавонед аз ном тахмин кунед, он асосан барои UI ё намоиши лоиҳа истифода мешавад.

Биёед манфиатҳои истифодаи Vue.js-ро дар лоиҳаи худ бубинем:

Андозаи хеле хурд

Яке аз бузургтарин бартариҳои Vue.js дар он аст, ки андозаи он хеле хурд аст. Муваффақияти чаҳорчӯбаи JavaScript аз андозаи он вобаста аст ва ин плагини ҷолиби JavaScript ҳамагӣ 18-21 КБ аст, бинобар ин шумо метавонед онро ба осонӣ зеркашӣ ва истифода баред.

Бюллетени инноватсионӣ
Муҳимтарин хабарҳоро дар бораи навоварӣ аз даст надиҳед. Барои гирифтани онҳо тавассути почтаи электронӣ обуна шавед.
Фаҳмидани осон ва рамзгузорӣ

Чаҳорчӯбаи Vue.js дорои сохтори хеле содда аст ва фаҳмидани он хеле осон аст. Ин яке аз сабабҳои маъруфияти ин чаҳорчӯба аст. Агар шумо бо HTML ва JavaScript шинос бошед, шумо метавонед ба осонӣ дар Vue.js рамзгузорӣ кунед. Истифодабарандагон метавонанд ба осонӣ Vue.js-ро ба лоиҳаи веби худ илова кунанд, зеро сохтори оддӣ ва таҳияи барномаҳо.

Интегратсияи оддӣ бо барномаҳои мавҷуда

Vue.js дорои ҷузъҳои зиёде барои ҳама чиз аст ва метавонад хеле зуд бо замимаҳои мавҷуда муттаҳид карда шавад. Шумо метавонед онро бо ҳама гуна замимаҳое, ки дар JavaScript навишта шудаанд, ҳамҷоя кунед.

Табиат чандир

Табиати чандирии Vue.js инчунин фаҳмидани онро барои таҳиягарони React.js, Angular.js ва дигар чаҳорчӯбаҳои нави JavaScript осон мекунад. Он чандирии зиёдеро барои истифодаи гиреҳҳои виртуалӣ барои навиштани файлҳои HTML, файлҳои JavaScript ва файлҳои тозаи JavaScript таъмин мекунад.

Компоненти

Шумо метавонед унсурҳои фармоиширо эҷод кунед, ки дар барномаҳои Vue.js дубора истифода мешаванд.

Ҳуҷҷатҳои оддӣ, пурра ва муфассал

Vue.js ҳуҷҷатҳои хеле содда, мукаммал ва муфассалро пешкаш мекунад, бинобар ин таҳиягароне, ки дар бораи HTML ва JavaScript тасаввуроти кам доранд, метавонанд онро барои барномасозӣ истифода баранд.

DOM виртуалӣ

Vue.js DOM-и виртуалиро ба дигар чаҳорчӯбаҳои мавҷуда ба монанди ReactJS, Ember ва ғайра истифода мебарад. DOM виртуалӣ як тасвири сабуки дарахти хотираи аслии HTML DOM аст ва бидуни таъсир ба DOM ибтидоӣ навсозӣ мешавад.

Муоширати дутарафа

Vue.js иртиботи дутарафаро бо меъмории Model View View Model (MVVM) таъмин мекунад, ки коркарди блокҳои HTML-ро содда мекунад.

Таъмини декларативии Vue.js

Чаҳорчӯба бо системае меояд, ки ба мо имкон медиҳад ба таври декларативӣ маълумотро ба DOM бо истифода аз синтаксиси модели оддӣ ва содда пешниҳод кунем.

Инак як мисол:

<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 ба мо имкон медиҳад definire атрибутҳои HTML, ки директиваҳо номида мешаванд, ки барои таъмини функсияҳои барномаҳои HTML истифода мешаванд.

Дар Vue.js ду намуди дастурҳо мавҷуданд:

  • директивахои интеграционй д
  • директивахо defiаз ҷониби корбар фаҳмид.

Vue.js қавсҳои дукарата {{}}-ро ҳамчун ҷойнишин барои маълумот истифода мебарад ва дастурҳои Vue.js атрибутҳои HTML мебошанд, ки префикси v-ро истифода мебаранд.

Барномаи Vue ба як унсури DOM пайваст мешавад ва онро пурра назорат мекунад. Дар мисоли боло, он #app аст.

Бо Vue мо метавонем HTML-ро ҳамчун нуқтаи вуруд баррасӣ кунем ва ҳама чизи дигар дар дохили мисоли Vue сохташуда рӯй медиҳад.
Биёед мисолеро бубинем, ки дар он мо пайваст кардани элемент ва атрибутро месанҷем:

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

Дар ин ҳолат, атрибути нави v-bind директива мебошад. Директиваҳо бо префикси v- истифода мешаванд, то нишон диҳанд, ки онҳо атрибутҳои беназири аз ҷониби Vue пешниҳодшуда мебошанд ва барои татбиқи рафтори махсуси ҷавобӣ ба DOM-и додашуда истифода мешаванд.

Натичаи мисол чунин аст

Ercole Palmeri

Бюллетени инноватсионӣ
Муҳимтарин хабарҳоро дар бораи навоварӣ аз даст надиҳед. Барои гирифтани онҳо тавассути почтаи электронӣ обуна шавед.

Мақолаҳои охирин

Veeam дорои дастгирии ҳамаҷонибаи нармафзори ransomware, аз муҳофизат то вокуниш ва барқарорсозӣ мебошад

Coveware аз ҷониби Veeam хидматрасонии вокуниш ба ҳодисаҳои тамаъҷӯии кибериро идома медиҳад. Coveware қобилиятҳои криминалистӣ ва ислоҳиро пешниҳод хоҳад кард ...

23 апрел 2024

Инқилоби сабз ва рақамӣ: Чӣ гуна нигоҳдории пешгӯишаванда саноати нафту газро тағир медиҳад

Нигоҳдории пешгӯишаванда бахши нафту газро бо равиши инноватсионӣ ва фаъол ба идоракунии нерӯгоҳ инқилоб мекунад.…

22 апрел 2024

Танзимгари зиддимонополияи Бритониё ҳушдори BigTechро нисбат ба GenAI баланд мекунад

CMA Бритониё дар бораи рафтори Big Tech дар бозори зеҳни сунъӣ ҳушдор дод. Он ҷо…

18 апрел 2024

Casa Green: инқилоби энергетикӣ барои ояндаи устувор дар Италия

Қарори "Хонаҳои сабз", ки аз ҷониби Иттиҳоди Аврупо барои баланд бардоштани самаранокии энергияи биноҳо таҳия шудааст, раванди қонунгузории худро бо ...

18 апрел 2024

Инноватсияро ба забони худ хонед

Бюллетени инноватсионӣ
Муҳимтарин хабарҳоро дар бораи навоварӣ аз даст надиҳед. Барои гирифтани онҳо тавассути почтаи электронӣ обуна шавед.

Моро дунбол кунед