Vue.js terutama berfokus pada bagian visualisasi aplikasi, juga disebut pengembangan front-end. Vue.js semakin populer dari hari ke hari karena sangat mudah untuk diintegrasikan dengan proyek dan pustaka lainnya. Sangat mudah untuk menginstal dan menggunakan.
Vue.js adalah framework JavaScript progresif open source digunakan untuk mengembangkan antarmuka pengguna web interaktif dan aplikasi halaman tunggal (SPA). Vue.js umumnya disebut sebagai Vue dan diucapkan sebagai "view.js" atau "view".
Aplikasi Halaman Tunggal atau SPA adalah aplikasi web atau situs web yang memberikan pengalaman yang sangat lancar, responsif, dan cepat kepada pengguna, mirip dengan aplikasi desktop. Aplikasi satu halaman berisi menu, tombol, dan blok pada satu halaman. Ketika seorang pengguna mengklik salah satunya, itu secara dinamis menulis ulang halaman saat ini daripada memuat seluruh halaman baru dari server. Inilah alasan di balik kecepatan responsifnya.
Vue pada dasarnya dibuat untuk pengembangan frontend, sehingga harus menangani banyak file HTML, JavaScript, dan CSS. Vue.js memudahkan pengguna untuk memperluas HTML dengan atribut HTML yang disebut direktif. Vue.js menyediakan arahan bawaan dan banyak arahan definite oleh pengguna untuk meningkatkan fungsionalitas aplikasi HTML.
Di bawah ini adalah daftar fitur paling penting dari Vue.js:
Komponen Vue.js adalah salah satu fitur penting dari framework ini. Mereka digunakan untuk memperluas elemen HTML dasar untuk mengenkapsulasi kode yang dapat digunakan kembali. Anda dapat membuat elemen kustom yang dapat digunakan kembali di aplikasi Vue.js yang nantinya dapat digunakan kembali di HTML.
Vue.js menyediakan template berbasis HTML yang dapat digunakan untuk menghubungkan DOM yang dirender dengan data instance Vue. Semua template Vue adalah HTML valid yang dapat diuraikan oleh browser yang sesuai spesifikasi dan parser HTML. Vue.js mengompilasi model ke dalam fungsi rendering DOM Virtual. Vue merender komponen ke dalam memori DOM virtual sebelum menyegarkan browser. Vue juga dapat menghitung jumlah minimum komponen yang akan dirender ulang dan menerapkan jumlah minimum manipulasi DOM saat mengubah status aplikasi.
Vue menyediakan sistem responsif yang menggunakan objek JavaScript sederhana dan mengoptimalkan rendering ulang. Dalam proses ini, setiap komponen melacak dependensi reaktifnya, sehingga sistem tahu persis kapan dan komponen mana yang akan dirender ulang.
Navigasi halaman dilakukan dengan bantuan vue-router. Anda dapat menggunakan pustaka vue-router yang didukung secara resmi untuk aplikasi satu halaman Anda.
Vue memungkinkan Anda menggunakan efek transisi yang berbeda saat elemen dimasukkan, diperbarui, atau dihapus dari DOM.
Ada beberapa metode untuk menggunakan Vue.js. Anda dapat menginstalnya dengan membuka situs resminya atau Anda juga dapat mulai menggunakan file Vue.js dari pustaka CDN. Berikut adalah beberapa cara untuk menggunakan Vue.js di proyek Anda.
Jika Anda ingin menggunakan tag <script> dari Vue.js langsung ke file HTML Anda, Anda perlu mengunduhnya dari situs resminya.
<html>
<head>
<script type = "text/javascript" src = "vue.min.js"></script>
</head>
<body>
</body>
</html> Mari kita pergi ke situs web resmi Vue.js https://vuejs.org/v2/guide/installation.html untuk mengunduh vue.js sesuai dengan kebutuhan Anda.
Anda juga dapat menggunakan file Vue.js dari CDN, di aplikasi Anda. Gunakan tautan https://unpkg.com/vue@3/dist/vue.global.js di dalam elemen <script>, seperti di bawah ini:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js adalah salah satu teknologi perangkat lunak terbaru yang banyak digunakan untuk pengembangan web dan membangun Aplikasi Halaman Tunggal (SPA). Seperti yang bisa Anda tebak dari namanya, sebagian besar digunakan untuk UI atau sisi tampilan proyek.
Mari kita lihat manfaat menggunakan Vue.js di proyek Anda:
Salah satu keuntungan terbesar Vue.js adalah ukurannya yang sangat kecil. Keberhasilan kerangka kerja JavaScript sangat bergantung pada ukurannya dan plugin JavaScript yang menarik ini hanya berukuran 18-21KB, sehingga Anda dapat dengan mudah mengunduh dan menggunakannya dalam waktu singkat.
Framework Vue.js memiliki struktur yang sangat sederhana dan sangat mudah dipahami. Ini adalah salah satu alasan popularitas framework ini. Jika Anda terbiasa dengan HTML dan JavaScript, Anda dapat dengan mudah membuat kode di Vue.js. Pengguna dapat dengan mudah menambahkan Vue.js ke proyek web mereka karena strukturnya yang sederhana dan mengembangkan aplikasi.
Vue.js memiliki banyak komponen untuk semuanya dan dapat diintegrasikan dengan sangat cepat dengan aplikasi yang ada. Anda dapat mengintegrasikannya dengan aplikasi apa pun yang ditulis dalam JavaScript.
Sifat fleksibel Vue.js juga memudahkan pengembang React.js, Angular.js, dan framework JavaScript baru lainnya untuk dipahami. Ini memberikan banyak fleksibilitas untuk menggunakan node virtual untuk menulis file HTML, file JavaScript, dan file JavaScript murni.
Anda dapat membuat elemen khusus yang dapat digunakan kembali di aplikasi Vue.js.
Vue.js menyediakan dokumentasi yang sangat sederhana, lengkap dan terperinci, sehingga pengembang yang memiliki sedikit pengetahuan tentang HTML dan JavaScript dapat menggunakannya untuk memprogram.
Vue.js menggunakan DOM virtual yang mirip dengan kerangka kerja lain yang sudah ada seperti ReactJS, Ember, dll. DOM virtual adalah representasi pohon dalam memori yang ringan dari DOM HTML asli dan diperbarui tanpa memengaruhi DOM awal.
Vue.js menyediakan komunikasi dua arah dengan arsitektur Model View View Model (MVVM) yang menyederhanakan penanganan blok HTML.
Framework dilengkapi dengan sistem yang memungkinkan kita merender data secara deklaratif ke DOM menggunakan sintaks model yang sederhana dan mudah.
Ini contohnya:
<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 memungkinkan kita untuk melakukannya definire atribut HTML yang disebut direktif, yang digunakan untuk menyediakan fungsionalitas untuk aplikasi HTML.
Ada dua jenis arahan di Vue.js:
Vue.js menggunakan kurung kurawal ganda {{}} sebagai placeholder untuk data, dan direktif Vue.js adalah atribut HTML yang menggunakan awalan v-.
Aplikasi Vue terhubung ke satu elemen DOM dan mengontrolnya sepenuhnya. Dalam contoh di atas, ini adalah #app.
Dengan Vue, kita dapat menganggap HTML sebagai titik masuk, dan semua hal lainnya terjadi di dalam instance Vue yang dibuat.
Mari kita lihat contoh di mana kita mencoba pengikatan elemen dan 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> Dalam hal ini, atribut v-bind yang baru adalah direktif. Direktif digunakan dengan awalan v- untuk menunjukkan bahwa mereka adalah atribut unik yang disediakan oleh Vue, dan digunakan untuk menerapkan perilaku responsif khusus ke DOM yang dirender.
Hasil dari contoh adalah sebagai berikut
Ercole Palmeri
Mengembangkan keterampilan motorik halus melalui mewarnai mempersiapkan anak untuk keterampilan yang lebih kompleks seperti menulis. Mewarnai…
Sektor angkatan laut adalah kekuatan ekonomi global sejati, yang telah menuju pasar 150 miliar...
Senin lalu, Financial Times mengumumkan kesepakatan dengan OpenAI. FT melisensikan jurnalisme kelas dunianya…
Jutaan orang membayar layanan streaming, membayar biaya berlangganan bulanan. Sudah menjadi pendapat umum bahwa Anda…
