~ We are changing the world with technology. ~

Matt Mullenweg

Vuejs: Install & Say Hello

Vuejs: Install & Say Hello

4471 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

6 Cara Mendefinisikan Component di Vue.js VueJS

6 Cara Mendefinisikan Component di Vue.j...

Component menjadi salah satu bagian yang sangat berguna untuk mengelompokkan sebuah fungsi agar bisa digunakan berulang kali. Pengelompokkan fungsi ini berguna untuk mempercepat proses development dan...

Sistem Ongkos Kirim RuangAPI Menggunakan Vue.js VueJS

Sistem Ongkos Kirim RuangAPI Menggunakan...

Membuat simulasi untuk menampilkan ongkos kirim pada sebuah aplikasi yang membutuhkan informasi terkait data pengiriman berdasarkan berat dan tujuan pengiriman hingga pada tingkatan kecamatan. Berikut...

Membuat Datatable Dengan Vue.js & Laravel 6 Laravel VueJS

Membuat Datatable Dengan Vue.js & Larave...

Tak bisa dipungkiri, Datatable telah menarik banyak perhatian sekaligus pengguna karena ragam fitur yang ditawarkannya serta kemudahan dalam mengintegrasikan dengan aplikasi yang sedang kita develop....

Komentar