Vuejs Training

First App With Just JavaScript

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A First App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="app">
      <div>
        <label for="goal">Goal</label>
        <input type="text" id="goal" />
        <button>Add Goal</button>
      </div>
      <ul>
       
      </ul>
    </div>
    <script src="app.js"></script>
  </body>
</html>

app.js

const buttonEl = document.querySelector('button');
const inputEl = document.querySelector('input');
const listEl = document.querySelector('ul');

function addGoal() {
  const enteredValue = inputEl.value;
  const listItemEl = document.createElement('li');
  listItemEl.textContent = enteredValue;
  listEl.appendChild(listItemEl);
  inputEl.value = '';
}

buttonEl.addEventListener('click', addGoal);

styles.css

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}

#app {
  margin: 3rem auto;
  max-width: 40rem;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}

label, input {
  margin-bottom: 0.5rem;
  display: block;
  width: 100%;
}

label {
  font-weight: bold;
}

ul {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

li {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #ccc;
}

Rebuilding The App With Vue

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A First App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="app">
      <div>
        <label for="goal">Goal</label>
        <input type="text" id="goal" v-model="enteredValue" />
        <button @click="addGoal()">Add Goal</button>
      </div>
      <ul>
        <li v-for="goal in goals">{{ goal }}</li>
      </ul>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>

app.js

Vue.createApp({
  data() {
    return {
      goals: [],
      enteredValue: ''
    }
  },

  methods: {
    addGoal() {
      this.goals.push(this.enteredValue);
      this.enteredValue = '';
    }
  }
}).mount('#app');

Popular Programming Language 2021

Intro Slides

Create Vue SPA Project
------------------------
1. download install nodejs
 node --version
 npm --version
 vue --version

2. npm install -g @vue/cli

3. vue create firstapp

4. cd firstapp

5. npm run serve

6. http://localhost:8080

Vue 3 Laravel 8
----------------------------

> npm install

> npm run dev
 - compile / transpile

install vue version 3
-----------------------
> npm install vue@next
> npm install vue-loader@next
> npm install @vue/compiler-sfc

edit webpack.mix.js
 

mix.js('resources/js/app.js', 'public/js')

    .vue()

    .postCss('resources/css/app.css', 'public/css', [

        //

    ]);

Bootstrap installation using NPM

install bootstrap
-------------------
> npm install bootstrap@next
> npm install @popperjs/core

Webpack
 - npm run serve
  - webpack (babel, minified, unified)
Mix

Sail
 - Docker
 - 

> npm install

projek laraone
----------------
users
id int not null auto_increment
name var(50)
email var(50)
password var(100)
role var(25)
created_at datetime
updated_at datetime



> npm run dev OR npm run watch
 - compile / transpile

install vue version 3
-----------------------
> npm install vue@next
> npm install vue-loader@next
> npm install @vue/compiler-sfc

install bootstrap
-------------------
> npm install bootstrap@next
> npm install @popperjs/core


optional
------------------------------
- default configure utk vue version 2

> composer require laravel/ui

> php artisan ui vue

> npm install

> npm install vue-loader

> npm run dev


firstapp
- node_modules
- public
- src

larvue
- node_modules
- public
- resources/js/...


Vuejs
-------
- MPA vs SPA

Flow Pembangunan Sistem menggunakan Vue
1. sistem sedia ada (MPA)


2. new sistem (SPA)
 - full stack dev. (front-end + back-end)
 - 1 projek


3. new sistem (SPA)
 - ada dev front-end (html, vuejs, css)
 - ada dev back-end
 - 2 projek (laravel, vuejs) - micro services

 laravel : laraone
 > composer create-project --prefer-dist laravel/laravel laraone
 > php artisan serve

 vuejs : vueone
 > vue create vueone
 > cd vueone
 > npm run serve

SAPURA
- front-end + back-end
- Angular + Spring Framework (java 2 EE)


Flashback 3rd day
------------------
1. router

2. fetch data
 - jsonplaceholder.typicode

3. dynamic component
 - url tak berubah
 - tiada SEO

4. ES 6 array features
 - ... = spread operator = copy content dalam array
   const arr = [...arrLama, 1,2,3]
 - push(), unshift(), find(callback),
 - map(callback), reduce(callback), filter(callback)
 - indexOf
 - lodash (utility library)

5. <slot name="abc"></slot>
 - component wrapper
 - <the-card v-slot:abc>content</the-card>

4th Day
-------------------
Flow Pembangunan Guna Vue
 - Laravel
 - php artisan serve
 - npm run serve

Create laravel Project
- guna cli
- php -v
- composer create-project --prefer-dist laravel/laravel <nama projek>
- nama pojek = laravue