VueJS merupakan progressive framework untuk membangun user interface yang terfokus pada pembangunan layout layer atau tampilan dari sebuah web. Pada artikel ini kita akan membahas bagaimana cara install Vue.js dan membuat contoh sederhana menggunakan Vue.js.
Install Vue.js
Karena Vue.js adalah sebuah framework javascript, cara install Vue.js pada dasarnya kita hanya perlu untuk menginclude / meload kode Vue.js pada project kita. Dibawah ini terdapat beberapa cara untuk mendownload source Vue.js.
Standalone Version
Download dari vuejs.org
Untuk menginstall Vue kita hanya perlu mendownload dan gunakan script tag untuk menggunakan Vue.js
- Versi Development https://vuejs.org/js/vue.js
- Versi Production https://vuejs.org/js/vue.min.js
Tips: Jangan gunakan versi minified atau production selama proses development. Semua pesan Vue warning untuk kesalahan-kesalahan yang umum akan dihilangkan di versi production, Pesan ini akan sangat berguna selama proses development.
Menggunakan CDN
Seperti kebanyakan framework / plugin javascript lainnya, cara instalasi yang paling mudah adalah dengan menginclude script untuk dipasang di project kita dengan referal CDN yang telah disediakan oleh framework yang akan kita pasang.
Untuk proses development atau tujuan pembelajaran, kita bisa menggunakan versi terakhir dari Vue.js dengan menggunakan kode dibawah ini
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Sementara untuk production, direkomendasikan untuk menginclude versi dari Vue.js yang digunakan untuk mencegah perubahan yang deprecated/breaking changes pada versi terbaru.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>Menggunakan NPM
NPM adalah cara instalasi yang direkomendasikan ketika membangun aplikasi yang besar menggunakan Vue.js.
# latest stable
$ npm install vue
# latest stable + CSP-compliant
$ npm install vue@csp
# dev build (directly from GitHub):
$ npm install vuejs/vue#devMenggunakan Bower
Selain menggunakan kedua cara diatas, kita juga bisa menggunakan bower untuk menginstal Vue.js
# latest stable
$ bower install vueUntuk instruksi cara instal yang lebih lengkap dan update, silahkan lihat pada Vue.js Installation Guide.
Membuat Hello World dengan Vue.Js
Sudah menjadi hal yang biasa ketika kita belajar sebuah bahasa pemrograman / framework yang baru, biasanya kita akan membuat sebuah output Hello World dengan menggunakan bahasa pemrograman/framework baru tersebut. Oleh karena itu, pada bagian ini kita akan membuat contoh sederhana ini dengan menggunakan Vue.js. Pada contoh ini kita akan menggunakan CDN untuk load framework Vue.js
Pertama buatlah sebuah file html baru misalnya hello.html
<html>
<head>
<title>Hello Vue</title>
</head>
<body>
<h1>Hello Vue</h1>
</body>
</html>Diatas adalah sebuah file HTML sederhana, sekarang kita akan menambahkan Vue.js dengan menginclude Vue.js dan membuat instance Vue baru.
<html>
<head>
<title>Hello Vue</title>
</head>
<body>
<div id="app">
<h1>Hello Vue</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</html>Didalam tag <script> kita telah membuat sebuah Vue instance dimana kita menggunakan sebuah element HTML dengan id app (#app) yang kita rujuk. Dengan kata lain, bayangkan bahwa elemen ini sebagai wadah tempat Vue bekerja, Vue tidak akan mengenali apapun diluar element yang ditargetkan.
Selanjutnya kita akan mengirimkan sebuah message untuk ditampilkan di dalam UI. Sebagai contoh, kita akan membuat sebuah variable didalam object bernama data. Kemudian kita akan mengirim data obkect ini sebagai option di Vue constructor.
var data = {
message: 'Hello Vue'
}
new Vue({
el: '#app',
data: data
})Untuk menampilkan data message pada halaman UI, kita hanya perlu membungkus variable message diatas dengan dua kurung kurawal.
<div id="app">
<h1>{{ message }}</h1>
</div>Cara lain untuk mendefinisikan message variable adalah dengan mendefinisikannya secara langsung didalam Vue constructor pada object data.
new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
})Keduanya menghasilkan output yang sama persis, jadi kalian bebas memilih kode mana yang akan dipilih sesuai dengan selera.
Dua kurung kurawal yang kita gunakan diatas bukanlah sebuah kode HTML tetapi kode scripting, apapun yang berada didalam dua kurung kurawal ini disebut dengan binding expression. Javascript akan mengevaluasi expression ini. {{ message }} pada contoh diatas menampilkan nilai dari variable javascript. Karena javascript akan mengevaluasi expression apapun yang berada pada dua kurung kurawal ini, {{ 2 + 2 }} akan menampilkan 4.
No Comments
Leave a comment Cancel