Sedikit Berkenalan Dengan Vue.JS 😎

Apasih Kebelihan Vue.JS ? Vue dapat membuat interface dan tampilan lebih menarik karena DOM telah tertanam dalam VUE.JS itu sendiri. Mari kita berEksperimen dengan vue.js untuk melihat kelebihanya. Di sini kita menggunakan VUE.JS dari CDN yang telah di sediakan oleh VUE.JS untuk penulisan kode nya seperti di bawah ini.

Vue (di ucapkan /vjuː/, seperti view) adalah sebuah framework yang progresif guna membangun dan mengembangkan antarmuka pengguna (Interace). Berbeda dengan beberapa kerangka kerja monolitik yang lain, Vue bangun dari dasar sekali agar dapat diadopsi secara bertahap. Pustaka intinya difokuskan pada layer tampilan saja, dan sangat mudah untuk diintegrasikan dengan pustaka yang lain atau dengan proyek yang sudah ada. Di sisi lain, Vue sangat mampu memberikan dan mendukung Single Page Application yang canggih ketika dikombinasikan dengan perkakas modern dan dukungan pustaka.

Framework (Vue.JS) ini berkembang dengan pesat, sehingga banyak perusahaan besar tertarik untuk menggunakannya, sebagai contoh Google dan Adobe. Vue JS pertama kali dikembangkan pada tahun 2013 oleh Evan You yang sebelumnya bekerja di Google dengan menggunakan AngularJS. Hal itulah yang melatarbelakangi seorang Evan You mengembangkan sebuah library yang lebih ringan daripada AngularJS. Penulisan Vue.JS memiliki sifat reaktif artinya data dapat di rubah sewaktu waktu.

So markicob, mari kita coba kodingan nya.

Tools

Kita butuh tools untuk alat tempur kita.

Text Editor bisa pakai (VSCODE,Atom,Sublime)
Browser dalam hal ini saya menggunakan Google Chrome
Vue Package

Installation

karena kita masih di ruang lingkup web aplikasi kita bisa buat sebuah file index.html kemudian jalankan index.html di browser kesayangan anda.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        
    </head>
    <body>
        <p>Selamat Datang Di Web Saya</p>
    </body>
</html>

Buka di browser anda.

Apasih Kebelihan Vue.JS ?

Vue dapat membuat interface dan tampilan lebih menarik karena DOM telah tertanam dalam VUE.JS itu sendiri.

Mari kita berEksperimen dengan vue.js untuk melihat kelebihanya. Di sini kita menggunakan VUE.JS dari CDN yang telah di sediakan oleh VUE.JS untuk penulisan kode nya seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        
    </head>
    <body>
        <p>Selamat Datang Di Web Saya</p>
        <div id="app">
            {{ pesan }}
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el : '#app',
            data:{
                // your data
                pesan : 'Hallo Bro'
            }
        })
    </script>
</html>

pada Vue js, Objek Vue dijadikan tempat untuk mengolah nilai-nilai dari vue js, pada gambar diatas terdapat el : ‘#app’ dimana vue akan mencari elemen dengan id app dan hanya pada wilayah app saja vue dapat di gunakan karena dari objek di targetkan pada #app tanda pagar sendiri merujuk pada id dimana jika kita pernah mengunakan CSS pemangilan id, di definisikan oleh tanda pagar #

Kembali ke browser dan coba untuk reload halaman browser tersebut.

*note : jika menggunakan cdn untuk vue.js nya akan ada load ke internet jadi harus pakai jaringan internet ya.

Belum kelihatan reaktifnya dimana.

Tenang, coba kalian buka console ketikan vm.pesan ingat!! jangan menekan enter.

sudah kelihatan kelebihanyakan dari gambar diatas kita dapat mengetahui variabel yang telah kita inisiasi di awal dengan nilai String Hello Bro. Mari kita coba lagi, kita ganti nilainya tanpa mengEdit di text Editor cukup menggunakan console sahaja.

Mungkin pengenalan Ini belum cukup untuk mengenal vue lebih dalam lagi. tapi saya rasa di tulisan ini kita jadi bisa tau reaktifnya vue.js.

Semoga berguna.