Saya seorang pengembang tumpukan penuh di Syncrasy Tech (perusahaan solusi IT) . Saya suka menulis kode Bereaksi. Tapi mengapa saya mengatakan ini kepada Anda karena kami di sini untuk membahas praktik terbaik Vue.js untuk pengembangan web. Saya mengatakan ini kepada Anda sehingga Anda dapat memahami latar belakang saya dan mengapa saya membahas di sini Vue.js.
Saya suka mengerjakan kode Bereaksi, tapi saya benci membacanya. Ini adalah alasan di mana saya gagal kode. Bahkan dengan praktik peninjauan kode yang terbaik, saya tidak dapat menemukan sarang komponen Bereaksi yang hanya membantu membuat struktur UI yang lebih kompleks di aplikasi web.
Solusi untuk masalah ini adalah Vue yang sekarang tidak begitu baru dalam blok pengembangan aplikasi web. Saya telah mendengar banyak tentang komponen async Vue, rendering sisi server, alat, dan perpustakaan. Mungkin Anda menemukan banyak sekali istilah yang membingungkan. Percayalah, Anda tidak sendirian dalam hal itu, banyak pengembang dari semua tingkatan merasakan hal yang sama ketika mereka tidak mengetahui praktik terbaik Vue.
Beberapa hari kemudian, saya akhirnya memutuskan untuk memasukkan kode saya ke dalamnya. Apa yang saya bagikan di sini adalah banyak praktik terbaik yang telah saya pelajari melalui pengalaman saya dengan Vue. Saya siap membagikan apa yang saya temukan.
Mari kita mulai
Mencoba untuk mempelajari semuanya sekaligus pada Vue bisa sangat luar biasa. Mari kita mulai dengan angka. Today Vue memiliki 147 ribu bintang Github yang meninggalkan raksasa JS seperti Angular (50,6 bintang) dan React (135 ribu bintang).
Saya telah membagi praktik terbaik Vue menjadi empat kategori:
Fungsionalitas Vue
Fungsionalitas Vue memiliki banyak hal untuk dibahas di bawah tenda secara otomatis. Vue.js adalah platform berorientasi tampilan sederhana yang merupakan keunggulan utama pertamanya. Semua informasi dalam pengkodean hanya valid jika berinteraksi dengan benar dengan tampilan bernama dan bersarang bernama.
Membuat tampilan tunggal cukup sederhana di Vue, Anda hanya perlu memuat antarmuka dan menambahkan JavaScript untuk memulai pengembangan aplikasi web Anda.
let vm = new Vue({ el: "#my-webapp", data: { firstName: "MyFamous", lastName: "Magazine", } })
Kemudian, sedikit markup untuk mendapatkan tampilan akhir:
<div id="my-webapp"> <h1>Hello, {{firstName}} {{lastName}}!</h1> </div>
Apa yang diungkapkan oleh kode di atas?
Contoh pengkodean di atas menunjukkan bagaimana Vue secara otomatis membuat elemen tanpa menggunakan kode. Sintaks sederhana digunakan untuk mengirim data untuk dilihat secara langsung. Menambahkan properti instance dapat digunakan untuk rendering elemen Vue.
Sistem Vue seperti JQuery menyimpan informasi dalam DOM dan untuk semua perubahan tambahan, pengembang perlu melakukan rendering dan modifikasi bagian terkait. Mari kita beralih ke bagian lain dari fungsionalitas Vue.
Komponen
Untuk aplikasi web, pengembang Vue dapat menggunakan komponen seperti perpustakaan lain dengan menggunakan Vue.compoment. Komponen dapat menyertakan nama, konfigurasi, atau pengidentifikasi.
Vue.component('component-name', { /* options */ })
Komponen file tunggal bekerja sangat baik untuk proyek pengembangan web kecil hingga menengah. Sangat mudah untuk menggunakan komponen Vue dalam satu file dan karena manfaat dari logika JavaScript, styling CSS, dan template kode HTML. Juga, lihat sebuah contoh:
<template> <p>{{ hi }}</p> </template> <script> export default { data() { return { hi: 'Hi Folks!' } } } </script> <style scoped> p { color: yellow; } </style>
Komponen file tunggal Vue menggunakan WebPack untuk memberikan kemampuan untuk menggunakan dan menerapkan fitur web modern ke aplikasi web Anda. Coders dapat menentukan templat yang dibuat menggunakan Pug menggunakan preprosesor:
TypeScript
SCSS
Sass
Lebih sedikit
Postcss
Pesek
Fungsi vue v-bind memungkinkan komponen untuk menerima data dari komponen induk (Alat Peraga) yang dapat dilihat dalam array string:
props:{ title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
Ini tidak hanya akan mendokumentasikan komponen Anda tetapi juga akan memperingatkan Anda ketika Anda memasukkan jenis kode yang salah di konsol JavaScript browser.
Singkatnya, Vue menawarkan fleksibilitas yang besar untuk pengembang aplikasi web yang sesuai dengan strategi pengembangan yang berbeda dan juga memfasilitasi interaksi dengan berbagai pustaka Vue.
Acara dan Penangan untuk Menangani Kesalahan di Vue
Vue JS adalah kerangka kerja JS progresif yang berfokus pada lapisan tampilan dan sistem perpustakaan pendukung. Untuk semua tahap pengembangan aplikasi web yang menggunakan Vue, acara dibuat berdasarkan arahan v-on dan titik dua yang digunakan untuk mengidentifikasi jenis acara seperti klik v-on .
Contoh sederhana dari v-on adalah:
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
Beberapa contoh Acara DOM HTML di Vue:
tentang perubahan
di klik
di hover
pada beban
pada mouse-out
pada mouse-over
pada beban
Penangan acara di Vue JS
Penangan ditugaskan untuk menangani kesalahan yang terjadi dalam Acara. Ini memungkinkan pengembang untuk menulis kode ketika suatu peristiwa tertentu dipicu.
Rendering Bersyarat dan Loop di Vue
Rendering bersyarat dalam Vue berarti untuk menghapus atau menambahkan beberapa elemen dari DOM jika nilai yang ditentukan benar. Ini adalah cara terbaik untuk mengikat data bersyarat yang memungkinkan pengembang untuk menghubungkan informasi ketika kondisi tertentu benar. Anda dapat menggunakan arahan v-if untuk rendering bersyarat.
Lihat sebuah contoh:
<template> <div> <h1 v-if="isActive">Hello Vuejs</h1> <button @click="isActive= !isActive">Click</button> </div> </template> <script> export default{ data:function(){ return{ isActive:false } } } </script>
Anda bisa menggunakan v-else untuk memperluas arahan v-if:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Anda dapat memperluas lebih jauh dengan menggunakan blok v-else-if:
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else-if="isActive && a.length===0">You're vuejs</h1> <h1 v-else>Hey Vuejs</h1>
Jika nilai yang ingin dievaluasi oleh programmer adalah benar, maka jalankan templat v-if . Untuk ekstensi lebih lanjut, direktif v-else atau v-if-else dipicu.
Vue JS berisi protokol API sederhana yang memungkinkan membuat ruang untuk direktif v-for yang merender daftar item ke dalam DOM.
Contoh:
<template> <ul> <li v-for="user in users">{{user.name}}</li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"samuel"}, {id:2,name:"queen"}, {id:3,name:"rinha"}, ] } } } </script>
Dalam pengkodean di atas, loop dijalankan melalui kode dalam bentuk array menggunakan direktif v-for . Array merujuk ke objek yang memungkinkan pengguna untuk melihat properti yang ada di dalam array.
Keluaran:
samuel queen rinha
Pengikatan data dua arah untuk mempercepat proses pengembangan
Salah satu fitur utama Vue adalah pengikatan dua arah reaktif yang membuat data, array, dan variabel Anda tetap sinkron dengan DOM tanpa mengharuskan Anda melakukan hal lain. Vue menggunakan arahan v-model untuk pengikatan dua arah. Arahan v-model mengikat elemen input ke properti nama menggunakan arahan v-model yang memperbarui bidang input dan juga memperbarui bidang properti nama yang ditautkan dengannya.
Bagaimana cara kerjanya?
<template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script>
Arahan v-model datang dengan opsi. .lazy modifier yang memperbarui properti data setelah perubahan peristiwa terjadi.
Anda juga dapat menggunakan fungsi .trim untuk menghapus spasi putih dari kode Anda.
Pilihan pengubah angka ada di sana jika Anda ingin menerima angka ke bidang input.
Akhirnya, ini adalah kekuatan utama Vue.js yang dapat Anda gunakan untuk memberi kode aplikasi web dengan benar. Jadi, jika Anda memulai proyek pengembangan web baru, maka Vue.js adalah pilihan Anda. Ini memimpin permainan dengan fitur-fitur yang elegan, pedoman gaya, coding mudah, dan juga menghemat upaya Anda.