Vue.Js

Introduction Vue.js

Vue js merupakan satu framework javascript. Vue Js merupakan framework untuk kebutuhan front end dari sebuah project. Tujuan Vue.Js yaitu menyediakan fungsi reactive data binding dan fungsi mengatur komponen view yang ada didalam API sesimple mungkin. vue js ini hanya difokuskan kepada tampilan/view saja.

Fitur-fitur yang ada di Vue.js antara lain:
  1. Reactive Interfaces
  2. Declarative Rendering
  3. Data Binding
  4. Directives
  5. Template Logic
  6. Components
  7. Event Handling
Cara Install Vue.js

terdapat beberapa cara dalam menginstall vue.js, berikut langkahnya:

  1. Gunakan CDN dengan menyertakan <Script> didalam file HTML
  2. kemudian install dengan menggunakan Node package Manager
  3. Setelah menginstall Node Package Manager, lakukan Install lagi dengan menggunakan Bower
  4. Setelah penginstallan selesai, gunakan Vue-Cli untuk mengatur project
sebelum kita menggunakan Vue-Cli kita harus menginstallnya terlebih dahulu. Vue-Cli ini tersedia di dalam Node Package Manager(NPM) . sebelumnya juga kita harus memastikan bahwa, Node.js dan NPM package sudah tersedia didalam system , setelah itu kita lakukan command :

$ npm install -g vue-cli

dimana Command ini akan menginstall Vue-Cli yang ada didalam NPM. Setelah Vue-Cli sudah terinstall dari command.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue1</title>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
</body>




</html cara diatas dengan mengimplementasikan vue kdalam CDN, vue dapat digunakan

Berikut Contoh Penggunaan Vue dalam Java Script dan HTML :

Script HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tugas Off Class</title>
</head>
<body>
<h2>Belajar Vue</h2>
<input type="text" id="input">
<div id='textValue'> Input String </div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
document.getElementById("input").value = "Tugas off Class Vue js";
window.onkeyup = keyup;
var inputTextValue;
function keyup(e) {
inputTextValue = e.target.value;
jQuery('#textValue').text("Hasil dari Input : " + inputTextValue);
}
</script>
</body>
</html>
Code Diatas, Merupakan code singkat, dimana kita menggunakan vue js, untuk menampilkan input.

Hasil Code: 

Gambar diatas adalah Hasil dari Koding yang ada didalam Script HTML


Sekian tentang Pengenalan dasar Vue.js dari Saya, Jika ada Kesalahan Mohon Maaf sebelumnya, Terima kasih.

Reference:

  1. https://ngide.net/posts/2017/10/17/berkenalan-dengan-vue-js
  2. http://zenhuzaini.blogspot.co.id/2016/04/tutorial-vuejs-bagian-1-tentang-vuejs.html
  3. https://gist.github.com/anonymous/cb6dc3340fc9e590123569b8c7dead86
  4. https://gist.github.com/anonymous/209319afef147f4375c5e09c62c9f1cf#file-index-html
  5. https://codepen.io/f_idriz/pen/RpodBw





Komentar

Posting Komentar