VueJS

Vuejs: Install & Say Hello

Vuejs: Install & Say Hello

1315 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.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Membuat Validasi Form Menggunakan Vuelidate VueJS

Membuat Validasi Form Menggunakan Vuelid...

Interaksi antara user dan aplikasi adalah sebuah hal wajar yang pasti terjadi, terlebih dalam hal penginputan data. Pada artikel ini kita akan belajar bagaimana Membuat Validasi Form Menggunakan Vueli...

Tutorial Vuex #3: Module & Helpers VueJS

Tutorial Vuex #3: Module & Helpers

Salah satu fitur lainnya dari Vuex adalah memecah block code menjadi bagian bagian kecil, berikut adalah bagaimana cara membuat modules dan menggunakan helpers pada Vuex

Tutorial Vuex #2: Mutations & Actions VueJS

Tutorial Vuex #2: Mutations & Actions

Mutations bertugas untuk mengkofirmasi setiap perubahan state yang akan dilakukan, sedangkan Actions bertugas untuk memberikan perintah terhadap apa yang akan dilakukan. Seri ini akan menggambarkan ba...

Komentar