~ We are changing the world with technology. ~

Matt Mullenweg

Vuejs: Install & Say Hello

Vuejs: Install & Say Hello

3347 Dilihat

Halo teman teman setia pembaca daengweb.id, kali ini kami memutuskan untuk mengangkat pembahasan seputar Vuejs. Meski bukan satu-satunya library javascript yang populer, tapi menjadi salah satu diantara library yang banyak di gunakan. Maka perkenalkan Vuejs yang merupakan sebuah library atau sebuah framework yang progresif untuk membuat interface web yang interaktif. Vuejs sendiri berfokus sebagai view layer. Oleh karena itu sangat mudah untuk digunakan dan diintegrasikan dengan library lainnya atau project yang telah ada.

Vuejs sebagaimana dikutip dalam official documentation, bahwa Vue tidak support untuk IE8 dan versi sebelumnya, karena menggunakan fitur ECMAScript 5 yang tidak didukung di IE8. Namun mendukung semua browser yang sesuai dengan ECMAScript 5.

Vue Devtools

Ketika menggunakan Vue, sangat direkomendasikan untuk menginstall Vue Devtools pada browser anda, hal ini memungkinkan anda untuk melakukan inspect dan debug Vue app dengan tampilan yang user friendly.

Instalasi VueJS

Untuk menginstall Vue, anda dapat mendownload dan memanggilnya dengan script tag. Vue akan terdaftar sebagai global variable. Vuejs telah menyediakan dua versi yang dapat digunakan diantaranya :

1. Development Version : https://vuejs.org/js/vue.js

2. Production Version : https://vuejs.org/js/vue.min.js

Jika anda tidak ingin mendownloadnya secara langsung, maka anda dapat menggunakan opsi lainnya yakni CDN. Maka anda dapat menggunakan cdn yang telah disediakan : unpkg dan cndjs.

Setelah mendownload / jika anda memutuskan menggunakan cdn, maka selanjutnya silahkan buat file index.html lalu tambahkan script tag berikut didalam kerangka html tag.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Vue - DaengWeb</title>
</head>
<body>
  <div id="VueID">
	{{ pesan }}
  </div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script type="text/javascript">
  var app = new Vue({
  	el: '#VueID',
  	data: {
    	pesan: 'Saya sedang belajar vue!'
  	}
  })
</script>
</html>

Pertama, kita memanggil library Vue.js dari cdnjs dengan script tag dan didalam script tag lainnya kita telah memiliki Vue instance. Kita menggunakan div dengan id #VueID yang merupakan element yang akan digunakan, sehingga Vue tahu mana yang akan dituju. Bayangkan element tersebut sebagai sebuah ruang lingkup yang dapat dijangkau oleh Vue. Vue tidak akan bekerja diluar dari element yang telah ditarget. Gunakan el untuk mentarget element yang kamu inginkan.

Menarik bukan ? Pada kesempatan selanjutnya kita akan perlahan-lahan menyelami framework ini. See you next time.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Membuat Aplikasi Chatting Menggunakan Laravel 6 & Vue.js Laravel VueJS

Membuat Aplikasi Chatting Menggunakan La...

Fasilitas komunikasi atau chatting antar pengguna menjadi fitur yang menarik dari sebuah aplikasi, terlebih aplikasi yang sifatnya transaksi jual beli guna menunjang kecepatan dan ketepatan informasi...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #14: Chart & Laporan Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Evaluasi usaha menjadi bagian penting untuk menentukan strategi lanjutan agar transaksi selalu bertambah dari waktu ke waktu. Pada seri Membuat Aplikasi Laundry Laravel 5.8 & Vue.js, dimana kita telah...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #13: List Transaksi Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Melihat rekap dari semua transaksi yang telah dilakukan adalah satu satu fitur yang penting dari sebuah aplikasi berbasis penjualan. Pada seri belajar Membuat Aplikasi Laundry Laravel 5.8 & Vue.js, di...

Komentar