Vue.js utamané fokus ing bagean visualisasi saka aplikasi, uga disebut pembangunan ngarep-mburi. Vue.js dadi populer saben dina amarga gampang banget kanggo nggabungake karo proyek lan perpustakaan liyane. Iku banget prasaja kanggo nginstal lan nggunakake.
Vue.js minangka kerangka JavaScript sing progresif mbukak sumber digunakake kanggo ngembangake antarmuka pangguna web interaktif lan aplikasi siji kaca (SPA). Vue.js umume diarani Vue lan diucapake minangka "view.js" utawa "view".
Aplikasi Single Page utawa SPA minangka aplikasi web utawa situs web sing nyedhiyakake pangguna pengalaman sing lancar, responsif lan cepet kaya aplikasi desktop. Aplikasi siji kaca ngemot menu, tombol lan pamblokiran ing sawijining kaca. Nalika pangguna ngeklik salah siji saka wong-wong mau, kanthi dinamis nulis ulang kaca saiki tinimbang mbukak kabeh kaca anyar saka server. Iki alesan konco kacepetan responsif sawijining.
Vue Sejatine dikembangaké kanggo pangembangan frontend, supaya kudu nangani akeh HTML, JavaScript lan file CSS. Vue.js nggampangake pangguna kanggo ngluwihi HTML nganggo atribut HTML sing diarani arahan. Vue.js nyedhiyakake arahan sing dibangun lan akeh arahan definite dening pangguna kanggo nambah fungsi saka aplikasi HTML.
Ing ngisor iki dhaptar fitur paling penting saka Vue.js:
komponen Vue.js iku salah siji fitur penting framework iki. Padha digunakake kanggo ngluwihi unsur HTML dhasar kanggo encapsulate kode bisa digunakake maneh. Sampeyan bisa nggawe unsur adat bisa digunakake maneh ing aplikasi Vue.js sing mengko bisa digunakake maneh ing HTML.
Vue.js nyedhiyakake cithakan basis HTML sing bisa digunakake kanggo nggandhengake DOM sing wis digawe karo data conto Vue. Kabeh cithakan Vue minangka HTML sing sah sing bisa diurai dening browser sing cocog karo spek lan parser HTML. Vue.js nglumpukake model menyang fungsi rendering DOM Virtual. Vue nerjemahake komponen menyang memori DOM virtual sadurunge refresh browser. Vue uga bisa ngetung jumlah minimal komponen kanggo re-render lan aplikasi jumlah minimal manipulasi DOM nalika ngganti negara aplikasi.
Vue menehi sistem responsif sing nggunakake obyek JavaScript prasaja lan ngoptimalake re-rendering. Ing proses iki, saben komponèn nglacak dependensi reaktif sawijining, supaya sistem ngerti persis kapan lan komponen sing arep dirender maneh.
Pandhu arah kaca ditindakake kanthi bantuan vue-router. Sampeyan bisa nggunakake perpustakaan vue-router sing didhukung resmi kanggo aplikasi siji kaca.
Vue ngijini sampeyan kanggo nggunakake efek transisi beda nalika unsur dipasang, dianyari utawa dibusak saka DOM.
Ana sawetara cara kanggo nggunakake Vue.js. Sampeyan bisa nginstal kanthi pindhah menyang situs resmi utawa sampeyan bisa miwiti nggunakake file Vue.js saka perpustakaan CDN uga. Ing ngisor iki sawetara cara kanggo nggunakake Vue.js ing proyek sampeyan.
Yen sampeyan pengin nggunakake tag <script> saka Vue.js langsung menyang file HTML, sampeyan kudu ngundhuh saka website resmi.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Ayo menyang situs web resmi Vue.js https://vuejs.org/v2/guide/installation.html kanggo ngundhuh vue.js miturut kabutuhan.
Sampeyan uga bisa nggunakake file Vue.js saka CDN, ing aplikasi sampeyan. Gunakake link https://unpkg.com/vue@3/dist/vue.global.js nang unsur <script>, kaya ing ngisor iki:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js minangka salah sawijining teknologi piranti lunak paling anyar sing digunakake kanggo pangembangan web lan mbangun Aplikasi Halaman Tunggal (SPA). Minangka sampeyan bisa guess saka jeneng, iku biasane digunakake kanggo UI utawa tampilan sisih project.
Ayo ndeleng keuntungan nggunakake Vue.js ing proyek sampeyan:
Salah sawijining kaluwihan paling gedhe saka Vue.js yaiku ukurane cilik banget. Kasuksesan kerangka JavaScript gumantung banget karo ukurane lan plugin JavaScript sing nyenengake iki mung 18-21KB, saengga sampeyan bisa kanthi gampang ndownload lan nggunakake kanthi cepet.
Framework Vue.js nduweni struktur sing prasaja banget lan gampang banget dimangerteni. Iki minangka salah sawijining alasan kanggo popularitas kerangka iki. Yen sampeyan menowo HTML lan JavaScript, sampeyan bisa kanthi gampang kode ing Vue.js. Pangguna bisa kanthi gampang nambah Vue.js menyang proyek web amarga struktur sing prasaja lan ngembangake aplikasi.
Vue.js wis akeh komponen kanggo kabeh lan bisa Integrasi cepet banget karo aplikasi ana. Sampeyan bisa nggabungake karo aplikasi apa wae sing ditulis ing JavaScript.
Sifat fleksibel saka Vue.js uga nggampangake pangembang React.js, Angular.js, lan kerangka kerja JavaScript anyar liyane. Nyedhiyakake akeh keluwesan kanggo nggunakake simpul virtual kanggo nulis file HTML, file JavaScript lan file JavaScript murni.
Sampeyan bisa nggawe unsur adat sing bisa digunakake maneh ing aplikasi Vue.js.
Vue.js nyedhiyakake dokumentasi sing prasaja, lengkap lan rinci, saengga para pangembang sing ora ngerti babagan HTML lan JavaScript bisa nggunakake program kasebut.
Vue.js nggunakake DOM virtual sing padha karo kerangka kerja liyane sing ana kaya ReactJS, Ember, lsp. DOM virtual minangka perwakilan wit ing memori sing entheng saka DOM HTML asli lan dianyari tanpa mengaruhi DOM awal.
Vue.js nyedhiyakake komunikasi rong arah karo arsitektur Model View View Model (MVVM) sing nyederhanakake penanganan blok HTML.
Kerangka kasebut dilengkapi sistem sing ngidini kita nggawe data kanthi deklaratif menyang DOM nggunakake sintaks model sing prasaja lan langsung.
Punika conto:
<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>Framework Vue.js ngidini kita defiNire atribut HTML sing diarani arahan, sing digunakake kanggo nyedhiyakake fungsionalitas kanggo aplikasi HTML.
Ana rong jinis arahan ing Vue.js:
Vue.js nggunakake kurung pindho {{}} minangka placeholder kanggo data, lan arahan Vue.js minangka atribut HTML sing nggunakake ater-ater v.
Aplikasi Vue nyambung menyang unsur DOM siji lan ngontrol kanthi lengkap. Ing conto ing ndhuwur, iku #app.
Kanthi Vue kita bisa nimbang HTML minangka titik entri, lan kabeh liya mengkono nang conto Vue digawe.
Ayo ndeleng conto ing ngendi kita nyoba ngiket unsur lan atribut:
<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> Ing kasus iki, atribut v-bind anyar yaiku arahan. Directives digunakake karo v-ater-ater kanggo nunjukaké sing padha atribut unik diwenehake dening Vue, lan digunakake kanggo aplikasi prilaku responsif khusus kanggo DOM render.
Asil saka tuladha ing ngisor iki
Ercole Palmeri
Operasi ophthalmoplasty nggunakake penampil komersial Apple Vision Pro ditindakake ing Poliklinik Catania…
Ngembangake katrampilan motorik sing apik liwat pewarnaan nyiapake bocah kanggo katrampilan sing luwih rumit kaya nulis. Kanggo mewarnai…
Sektor angkatan laut minangka kekuwatan ekonomi global sing sejatine, sing wis ngarahake pasar 150 milyar ...
Senin kepungkur, Financial Times ngumumake kesepakatan karo OpenAI. FT menehi lisensi jurnalisme kelas donya…
