Vue.js utamana museurkeun kana bagian visualisasi tina aplikasi, disebut oge ngembangkeun hareup-tungtung. Vue.js janten populer dinten-dinten kusabab éta gampang pisan pikeun ngahijikeun sareng proyék sareng perpustakaan sanés. Hal ieu kacida basajan masang sarta ngagunakeun.
Vue.js mangrupikeun kerangka JavaScript kutang open source dipaké pikeun ngembangkeun panganteur pamaké wéb interaktif sareng aplikasi halaman tunggal (SPA). Vue.js ilaharna disebut salaku Vue sarta diucapkeun salaku "view.js" atawa "view".
Aplikasi Halaman Tunggal atanapi SPA mangrupikeun aplikasi wéb atanapi halaman wéb anu nyayogikeun pangguna pangalaman anu lancar, responsif sareng gancang sami sareng aplikasi desktop. Aplikasi halaman tunggal ngandung ménu, tombol sareng blok dina hiji halaman. Lamun pamaké clicks on salah sahijina, éta dinamis rewrites kaca ayeuna tinimbang loading kaca anyar sakabeh ti server a. Ieu alesan balik speed responsif na.
Vue dasarna dikembangkeun pikeun ngembangkeun frontend, ku kituna kudu nanganan loba HTML, JavaScript jeung file CSS. Vue.js ngagampangkeun pangguna pikeun manjangkeun HTML nganggo atribut HTML anu disebut diréktif. Vue.js nyadiakeun diwangun-di directives sarta loba directives defiNite ku pamaké pikeun ngaronjatkeun pungsionalitas aplikasi HTML.
Di handap ieu daptar fitur pangpentingna Vue.js:
komponén Vue.js mangrupakeun salah sahiji fitur penting kerangka ieu. Éta téh dipaké pikeun manjangkeun elemen HTML dasar pikeun encapsulate kode reusable. Anjeun tiasa nyieun elemen custom reusable dina aplikasi Vue.js nu engké bisa dipaké deui dina HTML.
Vue.js nyadiakeun témplat basis HTML nu bisa dipaké pikeun ngahubungkeun DOM rendered kalawan data conto Vue. Kabéh témplat Vue mangrupakeun HTML valid nu bisa parsed ku panyungsi spésifik-patuh tur parsers HTML. Vue.js compiles model kana fungsi Virtual DOM Rendering. Vue ngajadikeun komponén kana mémori DOM maya saméméh refreshing browser. Vue ogé bisa ngitung jumlah minimum komponén pikeun ulang ngajadikeun jeung nerapkeun jumlah minimum manipulasi DOM nalika ngarobah kaayaan aplikasi.
Vue nyadiakeun sistem responsiveness anu ngagunakeun objék JavaScript basajan tur ngaoptimalkeun ulang Rendering. Dina prosés ieu, unggal komponén ngalacak katergantungan réaktifna, ku kituna sistem terang persis iraha sareng komponén mana anu kedah didamel deui.
Napigasi kaca dipigawé kalayan bantuan vue-router. Anjeun tiasa nganggo perpustakaan vue-router anu dirojong sacara resmi pikeun aplikasi halaman tunggal anjeun.
Vue ngidinan Anjeun pikeun make épék transisi béda lamun elemen diselapkeun, diropéa atawa dikaluarkeun tina DOM.
Aya sababaraha métode ngagunakeun Vue.js. Anjeun tiasa install deui ku buka situs resmi na atawa anjeun bisa mimitian nganggo file Vue.js ti perpustakaan CDN ogé. Ieu sababaraha cara pikeun ngagunakeun Vue.js dina proyék anjeun.
Upami anjeun hoyong nganggo tag <script> tina Vue.js langsung kana file HTML Anjeun, Anjeun kudu ngundeur ti ramatloka resmi.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Hayu urang buka ramatloka resmi Vue.js https://vuejs.org/v2/guide/installation.html pikeun ngundeur vue.js nurutkeun pangabutuh anjeun.
Anjeun oge bisa make file Vue.js ti CDN, dina aplikasi Anjeun. Anggo tautan https://unpkg.com/vue@3/dist/vue.global.js di jero unsur <script>, saperti ieu di handap:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js mangrupikeun salah sahiji téknologi parangkat lunak panganyarna anu seueur dianggo pikeun pamekaran wéb sareng ngawangun Aplikasi Halaman Tunggal (SPA). Sakumaha anjeun tiasa nebak tina nami, biasana dianggo pikeun UI atanapi sisi tampilan proyék.
Hayu urang tingali mangpaat ngagunakeun Vue.js dina proyék anjeun:
Salah sahiji kaunggulan pangbadagna Vue.js téh nya éta pisan leutik dina ukuranana. Kasuksésan kerangka JavaScript gumantung pisan kana ukuranana sareng plugin JavaScript anu pikaresepeun ieu ngan ukur 18-21KB, ku kituna anjeun tiasa ngaunduh sareng ngagunakeunana dina waktos anu lami.
Kerangka Vue.js gaduh struktur anu saderhana pisan sareng gampang kahartos. Ieu salah sahiji alesan pikeun popularitas kerangka ieu. Mun anjeun wawuh jeung HTML jeung JavaScript, anjeun bisa kalayan gampang kode di Vue.js. Pamaké bisa kalayan gampang nambahkeun Vue.js kana proyék web maranéhanana alatan struktur basajan tur ngamekarkeun aplikasi.
Vue.js boga loba komponén pikeun sagalana sarta bisa terpadu pisan gancang kalayan aplikasi aya. Anjeun tiasa ngahijikeun sareng aplikasi naon waé anu ditulis dina JavaScript.
Sifat fléksibel tina Vue.js ogé ngagampangkeun pamekar React.js, Angular.js, sareng kerangka JavaScript énggal anu sanés ngartos. Éta nyayogikeun seueur kalenturan pikeun ngagunakeun titik virtual pikeun nyerat file HTML, file JavaScript sareng file JavaScript murni.
Anjeun tiasa nyiptakeun elemen khusus anu tiasa dianggo deui dina aplikasi Vue.js.
Vue.js nyayogikeun dokuméntasi anu saderhana pisan, lengkep sareng detil, ku kituna pamekar anu gaduh sakedik ide ngeunaan HTML sareng JavaScript tiasa dianggo pikeun program.
Vue.js migunakeun DOM maya sarupa frameworks séjén aya kawas ReactJS, Ember, jsb. DOM maya mangrupikeun perwakilan tangkal mémori anu hampang tina DOM HTML asli sareng diropéa tanpa mangaruhan DOM awal.
Vue.js nyayogikeun komunikasi dua arah sareng arsitéktur Model View View Model (MVVM) anu nyederhanakeun penanganan blok HTML.
kerangka hadir kalawan sistem anu ngamungkinkeun urang pikeun declaratively ngarobah data ka DOM ngagunakeun sintaksis model basajan tur lugas.
Ieu 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>Kerangka Vue.js ngamungkinkeun urang pikeun definire atribut HTML disebut directives, nu dipaké pikeun nyadiakeun fungsionalitas ka aplikasi HTML.
Aya dua jinis diréktif dina Vue.js:
Vue.js nganggo tanda kurung ganda {{}} salaku pananda tempat pikeun data, sareng diréktif Vue.js mangrupikeun atribut HTML anu nganggo awalan v-.
Hiji aplikasi Vue nyambung ka unsur DOM tunggal tur pinuh ngadalikeun eta. Dina conto di luhur, éta #app.
Kalawan Vue urang bisa mertimbangkeun HTML salaku titik Éntri, jeung sagalana sejenna kajadian di jero conto Vue dijieun.
Hayu urang tingali conto dimana urang nyobian unsur sareng atribut ngariung:
<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> Dina hal ieu, atribut v-ngabeungkeut anyar nyaéta diréktif. Directives dipaké kalawan v- awalan pikeun nunjukkeun yén éta téh atribut unik disadiakeun ku Vue, sarta dipaké pikeun nerapkeun kabiasaan responsif husus ka DOM rendered.
Hasil tina conto ieu di handap
Ercole Palmeri
Ngembangkeun kaahlian motorik halus ngaliwatan ngawarnaan nyiapkeun barudak pikeun kaahlian leuwih kompleks kawas nulis. Pikeun ngawarnaan…
Sektor angkatan laut mangrupikeun kakuatan ékonomi global anu leres, anu nuju ka arah pasar 150 milyar ...
Senén kamari, Financial Times ngumumkeun deal sareng OpenAI. FT ngalisensikeun jurnalisme kelas dunya na…
Jutaan jalma mayar jasa streaming, mayar biaya langganan bulanan. Pendapat umum yén anjeun…
