Vue.js-ը հիմնականում կենտրոնանում է հավելվածի վիզուալիզացիայի մասի վրա, որը նաև կոչվում է ճակատային զարգացում: Vue.js-ն օրեցօր դառնում է հանրաճանաչ, քանի որ շատ հեշտ է ինտեգրվել այլ նախագծերի և գրադարանների հետ: Այն շատ պարզ է տեղադրել և օգտագործել:
Vue.js-ը առաջադեմ JavaScript շրջանակ է բաց աղբյուր օգտագործվում է ինտերակտիվ վեբ օգտատերերի ինտերֆեյսների և մեկ էջի հավելվածների (SPAs) մշակման համար: Vue.js-ը սովորաբար կոչվում է Vue և արտասանվում է որպես «view.js» կամ «view»:
Մեկ էջի հավելվածը կամ SPA-ն վեբ հավելված կամ կայք է, որն օգտատերերին տրամադրում է շատ հարթ, արձագանքող և արագ փորձ, որը նման է աշխատասեղանի հավելվածին: Մեկ էջի հավելվածը պարունակում է մենյու, կոճակներ և բլոկներ մեկ էջի վրա: Երբ օգտատերը սեղմում է դրանցից մեկի վրա, այն դինամիկ կերպով վերագրում է ընթացիկ էջը, այլ ոչ թե սերվերից բեռնում է նոր էջեր: Սա է դրա արձագանքման արագության պատճառը:
Vue-ը հիմնականում կառուցված է frontend-ի զարգացման համար, ուստի այն պետք է կարգավորի բազմաթիվ HTML, JavaScript և CSS ֆայլեր: Vue.js-ը օգտատերերի համար հեշտացնում է HTML-ի ընդլայնումը HTML ատրիբուտներով, որոնք կոչվում են հրահանգներ: Vue.js-ը տրամադրում է ներկառուցված հրահանգներ և բազմաթիվ հրահանգներ definite օգտագործողի կողմից HTML հավելվածների ֆունկցիոնալությունը բարելավելու համար:
Ստորև ներկայացված է Vue.js-ի ամենակարևոր հատկանիշների ցանկը.
Vue.js բաղադրիչներն այս շրջանակի կարևոր հատկանիշներից են: Դրանք օգտագործվում են HTML-ի հիմնական տարրերը ընդլայնելու համար՝ կրկնակի օգտագործման կոդն ամփոփելու համար: Vue.js հավելվածներում կարող եք ստեղծել բազմակի օգտագործման հատուկ տարրեր, որոնք հետագայում կարող են կրկին օգտագործվել HTML-ում:
Vue.js-ը տրամադրում է HTML-ի վրա հիմնված ձևանմուշներ, որոնք կարող են օգտագործվել ցուցադրված DOM-ը Vue օրինակի տվյալների հետ կապելու համար: Vue-ի բոլոր ձևանմուշները վավեր HTML են, որոնք կարող են վերլուծվել սպեկտրին համապատասխան բրաուզերների և HTML վերլուծիչների կողմից: Vue.js-ը մոդելները կազմում է Virtual DOM-ի մատուցման գործառույթների մեջ: Vue-ն բաղադրիչները փոխանցում է վիրտուալ DOM հիշողության մեջ՝ նախքան զննարկիչը թարմացնելը: Vue-ը կարող է նաև հաշվարկել բաղադրիչների նվազագույն քանակը, որոնք պետք է վերարտադրվեն և կիրառեն DOM-ի մանիպուլյացիայի նվազագույն քանակությունը հավելվածի վիճակը փոխելու ժամանակ:
Vue-ն ապահովում է արձագանքման համակարգ, որն օգտագործում է պարզ JavaScript օբյեկտներ և օպտիմիզացնում է վերարտադրումը: Այս գործընթացում յուրաքանչյուր բաղադրիչ հետևում է իր ռեակտիվ կախվածություններին, ուստի համակարգը հստակ գիտի, թե երբ և որ բաղադրիչները պետք է վերաարտադրել:
Էջի նավարկությունը կատարվում է vue-router-ի օգնությամբ։ Դուք կարող եք օգտագործել պաշտոնապես աջակցվող vue-router գրադարանը ձեր մեկ էջի հավելվածի համար:
Vue-ն թույլ է տալիս օգտագործել տարբեր անցումային էֆեկտներ, երբ տարրերը տեղադրվում, թարմացվում կամ հեռացվում են DOM-ից:
Vue.js-ի օգտագործման մի քանի եղանակ կա: Կարող եք տեղադրել այն՝ այցելելով նրա պաշտոնական կայք կամ կարող եք սկսել օգտագործել Vue.js ֆայլը նաև CDN գրադարանից։ Ստորև տեսնենք Vue.js-ը ձեր նախագծում օգտագործելու մի քանի եղանակ:
Եթե ցանկանում եք օգտագործել պիտակը <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-ը ըստ ձեր կարիքների:
Դուք կարող եք նաև օգտագործել 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-ը վերջին ծրագրային տեխնոլոգիաներից մեկն է, որը լայնորեն օգտագործվում է վեբ մշակման և Single Page Applications (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-ի մասին, կարող են օգտագործել այն ծրագրավորելու համար:
Vue.js-ն օգտագործում է վիրտուալ DOM-ը, որը նման է գոյություն ունեցող այլ շրջանակներին, ինչպիսիք են ReactJS-ը, Ember-ը և այլն: Վիրտուալ DOM-ը բնօրինակ HTML DOM-ի թեթև հիշողության ծառի ներկայացումն է և թարմացվում է՝ առանց նախնական DOM-ի վրա ազդելու:
Vue.js-ն ապահովում է երկկողմանի հաղորդակցություն իր Model View View Model (MVVM) ճարտարապետությամբ, որը հեշտացնում է HTML բլոկների կառավարումը:
Շրջանակը գալիս է մի համակարգով, որը թույլ է տալիս մեզ դեկլարատիվ կերպով տրամադրել տվյալները 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-ում կան երկու տեսակի հրահանգներ.
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-ի Coveware-ը կշարունակի տրամադրել կիբեր շորթման միջադեպերի արձագանքման ծառայություններ: Coveware-ը կառաջարկի դատաբժշկական և վերականգնման հնարավորություններ…
Կանխատեսելի սպասարկումը հեղափոխություն է անում նավթի և գազի ոլորտում՝ կայանի կառավարման նորարարական և ակտիվ մոտեցմամբ:…
Մեծ Բրիտանիայի CMA-ն նախազգուշացում է տարածել արհեստական ինտելեկտի շուկայում Big Tech-ի վարքագծի վերաբերյալ: Այնտեղ…
Շենքերի էներգաարդյունավետության բարձրացման նպատակով Եվրոպական միության կողմից ձևակերպված «Քեյս Գրին» հրամանագիրը իր օրենսդրական գործընթացն ավարտել է…
