Vue.js негизинен тиркеменин визуализация бөлүгүнө көңүл бурат, аны алдыңкы өнүктүрүү деп да аташат. Vue.js күндөн күнгө популярдуу болуп баратат, анткени аны башка долбоорлор жана китепканалар менен интеграциялоо абдан оңой. Бул орнотуу жана колдонуу үчүн абдан жөнөкөй.
Vue.js прогрессивдүү JavaScript алкагы болуп саналат ачык булак интерактивдүү веб-колдонуучу интерфейстерин жана бир беттик тиркемелерди (SPAs) иштеп чыгуу үчүн колдонулат. Vue.js көбүнчө Vue деп аталат жана "view.js" же "view" деп айтылат.
Бир беттик тиркеме же SPA - бул колдонуучуларга рабочий тиркемеге окшош абдан жылмакай, жооп берүүчү жана тез тажрыйбаны камсыз кылган веб-тиркеме же веб-сайт. Жалгыз барактагы тиркеме бир баракта меню, баскычтар жана блокторду камтыйт. Колдонуучу алардын бирин чыкылдатканда, серверден жаңы барактарды жүктөөнүн ордуна, учурдагы баракты динамикалык түрдө кайра жазат. Бул анын жооп ылдамдыгынын себеби болуп саналат.
Vue негизинен фронтонду иштеп чыгуу үчүн курулган, ошондуктан ал көптөгөн HTML, JavaScript жана CSS файлдарын иштетүүгө туура келет. Vue.js колдонуучуларга HTMLди директивалар деп аталган HTML атрибуттары менен кеңейтүүнү жеңилдетет. Vue.js камтылган директиваларды жана көптөгөн директиваларды камсыз кылат defiколдонуучу тарабынан HTML тиркемелеринин иштешин жакшыртуу үчүн.
Төмөндө Vue.js эң маанилүү өзгөчөлүктөрүнүн тизмеси:
Vue.js компоненттери бул алкактын маанилүү өзгөчөлүктөрүнүн бири болуп саналат. Алар көп жолу колдонулуучу кодду инкапсуляциялоо үчүн негизги HTML элементтерин кеңейтүү үчүн колдонулат. Vue.js колдонмолорунда кийинчерээк HTMLде кайра колдонула турган көп жолу колдонулуучу ыңгайлаштырылган элементтерди түзө аласыз.
Vue.js көрсөтүлгөн DOMды Vue инстанциясынын берилиштери менен байланыштыруу үчүн колдонула турган HTML негизиндеги калыптарды камсыз кылат. Бардык Vue үлгүлөрү жарактуу HTML болуп саналат, аларды спецификацияга шайкеш келген браузерлер жана HTML талдоочулары талдай алат. Vue.js моделдерди Virtual DOM көрсөтүү функцияларына түзөт. Vue браузерди жаңыртуудан мурун компоненттерди виртуалдык DOM эсине берет. Vue ошондой эле кайра көрсөтүү үчүн компоненттердин минималдуу санын эсептей алат жана колдонмонун абалын өзгөрткөндө DOM манипуляциясынын минималдуу көлөмүн колдоно алат.
Vue жөнөкөй JavaScript объекттерин колдонгон жана кайра көрсөтүүнү оптималдаштырган жооп берүү тутумун камсыз кылат. Бул процессте ар бир компонент өзүнүн реактивдүү көз карандылыктарына көз салып турат, ошондуктан система качан жана кайсы компоненттерди кайра көрсөтүүнү так билет.
Баракча навигация vue-роутердин жардамы менен ишке ашырылат. Сиз бир беттик тиркемеңиз үчүн расмий колдоого алынган Vue-роутер китепканасын колдоно аласыз.
Vue DOMдан элементтер киргизилгенде, жаңыртылганда же алынып салынганда ар кандай өткөөл эффекттерди колдонууга мүмкүндүк берет.
Vue.js колдонуунун бир нече ыкмалары бар. Сиз анын расмий сайтына барып орното аласыз же CDN китепканасынан Vue.js файлын колдоно баштасаңыз болот. Бул жерде 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 жүктөп алуу үчүн.
Сиз ошондой эле колдонмоңузда CDNден Vue.js файлын колдоно аласыз. Элементтин ичиндеги 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 HTML блоктору менен иштөөнү жеңилдеткен Model View View Model (MVVM) архитектурасы менен эки тараптуу байланышты камсыз кылат.
Алкак жөнөкөй жана жөнөкөй моделдин синтаксисин колдонуу менен 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 директивалары v- префиксин колдонгон HTML атрибуттары.
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 атрибуту директива болуп саналат. Директивалар Vue тарабынан берилген уникалдуу атрибуттар экенин көрсөтүү үчүн v префикси менен колдонулат жана көрсөтүлгөн DOMга өзгөчө жооп берүүчү жүрүм-турумду колдонуу үчүн колдонулат.
Мисалдын натыйжасы төмөнкүдөй
Ercole Palmeri
Veeam тарабынан Coveware кибер опузалап инциденттерге жооп берүү кызматтарын көрсөтүүнү улантат. Coveware криминалистика жана ремедиация мүмкүнчүлүктөрүн сунуштайт ...
Болжолдуу тейлөө заводду башкарууга инновациялык жана жигердүү мамиле кылуу менен мунай жана газ секторун революция кылып жатат.…
Улуу Британиянын CMA жасалма интеллект рыногунда Big Tech жүрүм-туруму жөнүндө эскертүү берди. Ал жерде…
Имараттардын энергетикалык натыйжалуулугун жогорулатуу үчүн Европа Биримдиги тарабынан иштелип чыккан "Case Green" Декрети өзүнүн мыйзам чыгаруу процессин аяктады ...
