MODUL VUE JS  3: BAGIAN 1

INSTALASI VUE JS MENGGUNAKAN CDN

1. Pada modul ini kita akan menggunakan vue js pada mode script production
2. Buat folder baru di dalam htdocs dengan nama “latihan-vuecdn” kemudian buka dengan VS code
3. Buat Dokumen  “index.html” didalam folder  “latihan-vuecdn”  lalu isi dengan script html dasar dengan mengetikkan tanda “!”  

4. Kemudian tambahkan link script vue.js 3 dari cdn, bisa dari unpkg, atau jsdelivr atau cdnjs. Silahkan pilih salah satu, misalkan untuk contoh kali ini kita menggunakan vue.js 3 cdn dari unpkg. Untuk awal ini, silahkan gunakan varian vue 3 global (vue.global.js).

Keterangan : Terdapat beberapa jenis file vue.js, dimana masing-masing terdiri atas 2 jenis. Yaitu untuk development, dan untuk production. Semua file vue.js yang berakhiran prod.js atau prod.min.js adalah versi vue.js yang siap digunakan pada zona produksi.

5. Tambahkan script dengan src https://unpkg.com/vue@3/dist/vue.global.js ke dalam html di bagian paling akhir sebelum tag penutup body.

Keterangan : Sebenarnya bisa saja menuliskan script

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

dibagian akhir head, akan tetapi kali ini kita pilih di akhir body untuk alasan best practice.

6. Jika sudah Sampai di sini, vue.js 3 sudah siap untuk digunakan. Seperti biasa kita coba menampilkan kata hello world dengan menggunakan vue.js. Untuk itu, silahkan tambahkan kode dibawah ini dibagian setelah script vue.global.js.

7. Kita coba membuat code baru dengan menambahkan kode dibawah </script> dengan kode

<div id="app"> Hallo selamat datang <b>{{ nama }}</b> </div>

8. Tepat dibawah kode tersebut tambahkan javascript standart :

<script>

        const app = Vue.createApp({

            data(){

                return {

                    nama: "Vue"

                }

            }

        })

        app.mount('#app')

    </script>

Keterangan :  

Di sini kita sedang menyiapkan tempat untuk aplikasi vue.js. Perhatikan tag div dengan id app. id app ini nantinya akan digunakan sebagai tempat untuk menempelkan/render aplikasi vue.js. 

Perhatikan  {{ nama }}. Ini adalah cara menulis text interpolation di vue.js. Dimana bagian ini nanti akan di ganti dengan nilai dari data nama

MODUL VUE JS : BAGIAN 2

MENAMBAHKAN FILE CSS KE DALAM VUE

1. Membuat layout dan stylesheet buat baru dengan nama “style.css” kemudian tambahkan kode CSS berikut ini :

html,

body {

    padding: 0;

    margin: 0;

    font-family: "Montserrat", sans-serif;

    font-family: "Open Sans", sans-serif;

}

#app {

    display: flex;

    flex-direction: row;

}

button.start {

    padding: 10px;

    border-radius: 15px;

    border-width: medium;

    width: 100px;

}

.number {

    font-size: 8rem;

    padding: 20px;

}

.counter {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.hasil {

    display: flex;

    flex-direction: column;

    justify-items: stretch;

    border-left: 1px solid gray;

    padding: 0 5px;    

}

.list {

    overflow: auto;

}

.item {

    padding: 5px;

    margin: 5px 5px 5px 0;

    border: 1px solid #e2e2e2;

    border-radius: 5px;

}

2.  pada index.html masih di dalam <div id=”app”>  tambahkan kode berikut ini

 <div class="counter">

            <div class="number">

                {{ number }}

            </div>

            <button :disabled="counting" @click="calc" class="start">Mulai</button>

        </div>

        <div class="hasil">

            <div class="list">

                <div class="item" v-for="(i,index) in hasil" :key="index">

                    Nomor {{ i }}

                </div>

            </div>

        </div>

Keterangan : {{number}}  dan  Nomor {{ i }} kita akan buat secara dinamis di dalam javascript

3. Kemudian di dalam javascriptnya tambahkan kode :

const { createApp } = Vue

 data() {

        return {

            counting: false,

            number: 0,

            hasil: []

        }

    },

    methods: {

        calc() {

            if (this.counting) {

                return

            }

            var inc = 0

            this.counting = true

            var instance = setInterval(() => {

                this.number = Math.ceil(Math.random() * 100)

                inc++

                if (inc >= 20) {

                    this.hasil.push(this.number)

                    clearInterval(instance)

                    this.counting = false

                }

            },

            50)

        }

    },

})

4. Maka akan tampil berikut ini :

MODUL VUE JS 3: BAGIAN 3

INSTALASI VUE JS PADA KOMPUTER WINDOWS

1. Download Node JS pada situs nodejs.org kemudian install pada computer
2. Cek melalui CMD (Command Prompt). Dengan mengetikkan perintah   npm -v seperti pada gambar dibawah ini :

3. Jika muncul versi dari node js nya maka node js sudah terinstall pada computer kemudian arahkan ke drive c: xampp/htdocs dengan perintah  cd c:/   kemudian cd xampp/htdocs
4. Ketik npm create vue@latest,  beri nama project dengan nama “latihan”   kemudian sisanya tinggal klik enter saja.

5. Jika sudah mendapat tampilan diatas maka lanjutkan dengan perintah “cd latihan” lalu ketik “npm install”

6. terakhir “npm run dev” untuk running vue

7. Cara lain selain instalasi diatas adalah dengan menggunakan CDN

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

8. Contoh : penggunaan dengan CDN pada HTML biasa

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>

  const { createApp, ref } = Vue

  createApp({

    setup() {

      const message = ref('Hello vue!')

      return {

        message

      }

    }

  }).mount('#app')

</script>

9. Pada pengembangan project yang menggunakan vue disarankan menginstall ekstensi chrome vue dev tool untuk memudahkan pengecekan bug