Vue.js asosan dasturning vizualizatsiya qismiga e'tibor qaratadi, uni front-end ishlab chiqish deb ham ataladi. Vue.js kundan kunga ommalashib bormoqda, chunki uni boshqa loyihalar va kutubxonalar bilan integratsiya qilish juda oson. O'rnatish va ishlatish juda oddiy.
Vue.js progressiv JavaScript ramkasidir Ochiq manba interaktiv veb-foydalanuvchi interfeyslarini va bitta sahifali ilovalarni (SPA) ishlab chiqish uchun foydalaniladi. Vue.js odatda Vue deb ataladi va "view.js" yoki "view" deb talaffuz qilinadi.
Yagona sahifali ilova yoki SPA bu veb-ilova yoki veb-sayt bo'lib, foydalanuvchilarga ish stoli ilovasiga o'xshash juda silliq, sezgir va tezkor tajribani taqdim etadi. Bitta sahifali ilova bitta sahifadagi menyu, tugmalar va bloklarni o'z ichiga oladi. Foydalanuvchi ulardan birini bosganda, u serverdan butunlay yangi sahifalarni yuklamasdan, joriy sahifani dinamik ravishda qayta yozadi. Bu uning sezgir tezligining sababi.
Vue asosan frontend ishlab chiqish uchun yaratilgan, shuning uchun u juda ko'p HTML, JavaScript va CSS fayllarini boshqarishi kerak. Vue.js foydalanuvchilarga HTMLni direktivlar deb ataladigan HTML atributlari bilan kengaytirishni osonlashtiradi. Vue.js o'rnatilgan direktivalar va ko'plab ko'rsatmalar beradi defiHTML ilovalarining funksionalligini yaxshilash uchun foydalanuvchi tomonidan nite.
Quyida Vue.js-ning eng muhim xususiyatlari ro'yxati keltirilgan:
Vue.js komponentlari ushbu ramkaning muhim xususiyatlaridan biridir. Ular qayta foydalanish mumkin bo'lgan kodni inkapsulyatsiya qilish uchun asosiy HTML elementlarini kengaytirish uchun ishlatiladi. Vue.js ilovalarida qayta foydalanish mumkin bo‘lgan maxsus elementlarni yaratishingiz mumkin, ular keyinchalik HTMLda qayta ishlatilishi mumkin.
Vue.js ko'rsatilgan DOMni Vue namunasi ma'lumotlari bilan bog'lash uchun ishlatilishi mumkin bo'lgan HTML-ga asoslangan shablonlarni taqdim etadi. Barcha Vue shablonlari to'g'ri HTML bo'lib, ularni maxsus mos brauzerlar va HTML tahlilchilari tomonidan tahlil qilish mumkin. Vue.js modellarni Virtual DOM renderlash funksiyalariga kompilyatsiya qiladi. Vue brauzerni yangilashdan oldin komponentlarni virtual DOM xotirasiga beradi. Vue, shuningdek, dastur holatini o'zgartirganda qayta ko'rsatish va minimal miqdordagi DOM manipulyatsiyasini qo'llash uchun komponentlarning minimal sonini hisoblashi mumkin.
Vue oddiy JavaScript obyektlaridan foydalanadigan va qayta ishlashni optimallashtiradigan javob berish tizimini taqdim etadi. Ushbu jarayonda har bir komponent o'zining reaktiv bog'liqliklarini kuzatib boradi, shuning uchun tizim qachon va qaysi komponentlarni qayta ko'rsatishni aniq biladi.
Sahifani navigatsiya qilish vue-router yordamida amalga oshiriladi. Siz bitta sahifali ilovangiz uchun rasmiy ravishda qo'llab-quvvatlanadigan Vue-router kutubxonasidan foydalanishingiz mumkin.
Vue DOM-ga elementlar kiritilganda, yangilanganda yoki o'chirilganda turli o'tish effektlaridan foydalanish imkonini beradi.
Vue.js dan foydalanishning bir necha usullari mavjud. Siz uni rasmiy saytiga borib o'rnatishingiz mumkin yoki CDN kutubxonasidan Vue.js faylidan foydalanishni boshlashingiz mumkin. Loyihangizda Vue.js dan foydalanishning ba'zi usullari.
Agar siz tegdan foydalanmoqchi bo'lsangiz <script> Vue.js faylini to'g'ridan-to'g'ri HTML faylingizga kiritsangiz, uni rasmiy veb-saytdan yuklab olishingiz kerak.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Keling, Vue.js rasmiy veb-saytiga o'tamiz https://vuejs.org/v2/guide/installation.html ehtiyojlaringizga ko'ra vue.js yuklab olish uchun.
Ilovangizda CDN dan Vue.js faylidan ham foydalanishingiz mumkin. Element ichidagi https://unpkg.com/vue@3/dist/vue.global.js havolasidan foydalaning <script>, quyidagi kabi:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js veb-ishlab chiqish va Yagona sahifali ilovalarni (SPA) yaratish uchun keng qo'llaniladigan so'nggi dasturiy ta'minot texnologiyalaridan biridir. Nomidan taxmin qilganingizdek, u asosan UI yoki loyihaning ekran tomoni uchun ishlatiladi.
Keling, loyihangizda Vue.js-dan foydalanishning afzalliklarini ko'rib chiqaylik:
Vue.js ning eng katta afzalliklaridan biri uning hajmi jihatidan juda kichikligidir. JavaScript ramkasining muvaffaqiyati ko'p jihatdan uning hajmiga bog'liq va bu hayajonli JavaScript plagini bor-yo'g'i 18-21 KB ni tashkil qiladi, shuning uchun siz uni juda oson yuklab olishingiz va qisqa vaqt ichida foydalanishingiz mumkin.
Vue.js ramkasi juda oddiy tuzilishga ega va uni tushunish juda oson. Bu ushbu ramkaning mashhurligining sabablaridan biridir. Agar siz HTML va JavaScript-ni yaxshi bilsangiz, Vue.js-da osongina kodlashingiz mumkin. Foydalanuvchilar Vue.js-ni sodda tuzilishi tufayli veb-loyihalariga osongina qo'shishlari va ilovalarni ishlab chiqishlari mumkin.
Vue.js hamma narsa uchun juda ko'p komponentlarga ega va mavjud ilovalar bilan juda tez birlashtirilishi mumkin. Siz uni JavaScript-da yozilgan har qanday dastur bilan integratsiya qilishingiz mumkin.
Vue.js-ning moslashuvchan tabiati React.js, Angular.js va boshqa har qanday yangi JavaScript ramkalarini ishlab chiquvchilarga tushunishni osonlashtiradi. Bu HTML fayllari, JavaScript fayllari va sof JavaScript fayllarini yozish uchun virtual tugunlardan foydalanish uchun juda ko'p moslashuvchanlikni ta'minlaydi.
Vue.js ilovalarida qayta foydalanish mumkin bo'lgan maxsus elementlarni yaratishingiz mumkin.
Vue.js juda oddiy, to'liq va batafsil hujjatlarni taqdim etadi, shuning uchun HTML va JavaScript haqida kam tasavvurga ega bo'lgan dasturchilar undan dasturlash uchun foydalanishlari mumkin.
Vue.js virtual DOM-dan ReactJS, Ember va boshqalar kabi boshqa mavjud ramkalar kabi foydalanadi. Virtual DOM asl HTML DOM ning xotiradagi engil daraxt tasviridir va dastlabki DOMga ta'sir qilmasdan yangilanadi.
Vue.js HTML bloklari bilan ishlashni soddalashtiradigan Model View View Model (MVVM) arxitekturasi bilan ikki tomonlama aloqani ta'minlaydi.
Ramka oddiy va sodda model sintaksisidan foydalangan holda DOMga ma'lumotlarni deklarativ tarzda taqdim etish imkonini beruvchi tizim bilan birga keladi.
Mana bir misol:
<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 ramkasi bizga imkon beradi definire HTML atributlari direktivalar deb ataladi, ular HTML ilovalarining funksionalligini ta'minlash uchun ishlatiladi.
Vue.js da ikki xil direktivalar mavjud:
Vue.js maʼlumotlar uchun joy ushlagich sifatida qoʻsh qavslardan {{}} foydalanadi va Vue.js direktivalari v-prefiksidan foydalanadigan HTML atributlaridir.
Vue ilovasi bitta DOM elementiga ulanadi va uni to'liq boshqaradi. Yuqoridagi misolda bu #app.
Vue bilan biz HTMLni kirish nuqtasi sifatida ko'rib chiqishimiz mumkin va qolgan hamma narsa yaratilgan Vue misolida sodir bo'ladi.
Keling, element va atributlarni bog'lashni sinab ko'rgan misolni ko'rib chiqaylik:
<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> Bunday holda, yangi v-bind atributi direktivdir. Direktivlar Vue tomonidan taqdim etilgan noyob atributlar ekanligini ko'rsatish uchun v-prefiksi bilan ishlatiladi va ko'rsatilgan DOMga maxsus sezgir xatti-harakatlarni qo'llash uchun ishlatiladi.
Misolning natijasi quyidagicha
Ercole Palmeri
Evropa Ittifoqi tomonidan binolarning energiya samaradorligini oshirish uchun ishlab chiqilgan "Yashil uylar" qarori qonunchilik jarayonini yakunladi ...
Casaleggio Associati kompaniyasining Italiyada elektron tijorat bo'yicha yillik hisoboti taqdim etildi. “AI-Commerce: sun’iy intellekt bilan elektron tijoratning chegaralari” deb nomlangan hisobot.…
Doimiy texnologik innovatsiyalar va atrof-muhit va odamlar farovonligiga sodiqlik natijasi. Bandalux Airpure® chodirini taqdim etadi ...
Dizayn naqshlari dasturiy ta'minotni loyihalashda takrorlanadigan muammolarni hal qilishning o'ziga xos past darajadagi echimlari. Dizayn naqshlari ...
