Who I am

function fn() {
  let foo = "bar"
  var foo2 = "bar"
  if (true) {
    let foo // pas d'erreur, foo === undefined
    var foo2 // Les déclarations "var" ne sont pas scopées au niveau bloc foo2 est en réalité écrasée !
    foo = "qux"
    foo2 = "qux"
    console.log(foo) // "qux", la variable appartient au scope de son blocs (le "if")
    console.log(foo2) // "qux"
  }
  console.log(foo) // "bar", la variable appartient au scope de son bloc (la fonction "fn")
  console.log(foo2) // "qux"
}

let double = number => number * 2 // Le return est implicite
double(5) // 10

this.divClicked = false
document.querySelector('div').addEventListener('click', event => {
    event.preventDefault()
    this.divClicked = true
    // Some code
})

var double = function (number) {
    return number * 2
}
double(5) // 10

this.divClicked = false
document.querySelector('div').addEventListener('click', function (event) {
    event.preventDefault()
    this.divClicked = true
    // Some code
}.bind(this))

let ages = [12, 19, 6, 4]

let firstAdult = ages.find(age => age >= 18) // 19
let firstAdultIndex = ages.findIndex(age => age >= 18) // 1

let numbers = [9, 4, 7, 1]
Math.min(...numbers) // 1
// Math.min(9, 4, 7, 1)

// Convertis NodeList en Array
let divsArray = [...document.querySelectorAll('div')]

// Fusion d'objet
let object = { tata: 'tata', toto: 'toto' }
let newObject = { ...object, titi: 'titi' }
// newObject : { tata: 'tata', toto: 'toto', titi: 'titi' }

let user = {
    firstname: 'Michel',
    lastname: 'Dupont',
    nickname: 'titi'
}

// pseudo est changé en username et on récupère firstname
function sayFirstName ({ nickname: username, firstname }) {
    console.log(lastname) // undefined
    return 'Le prénom de ' + username + ' est ' + firstname
}

sayFirstName(user) // Le prénom de titi est Michel

// Raccourcis pour les noms de propriétés
var a = "toto", b = 42, c = {}
var o = { a, b, c }

// Raccourcis pour les noms de méthodes
var o = {
  mafonction: function () {}
  mafonction () {}
}

// Noms calculés pour les propriétés
var prop = "toto"
var o = {
  [prop]: "hey",
  ["tr" + "uc"]: "ho",
}

...
<div id="app">
    <!-- Vue.JS -->
</div>
...
<script>
    let app = new Vue({
      el: '#app'
    })
</script>

...
<div id="app">
  {{ message }}
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue !'
      }
    })
</script>

...
<div id="app">
  <img v-bind:src="image" />
  <img :src="image" /> <!-- syntaxe courte -->
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      data: {
        image: 'https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-580335.jpg'
      }
    })
</script>

...
<div id="app">
  <div v-if="!image">
    Oh noooon !
  </div>
  <img v-else src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-509703.png"/>

  <img v-show="isRed" src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-377340.jpg"/>
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      data: {
        image: true
        isRed: false
      }
    })
</script>

...
<div id="app">
  <ul>
    <li v-for="name in users">{{ name }}</li>
  </ul>
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      data: {
        users: [ 'toto', 'titi', 'tata' ]
      }
    })
</script>

...
<div id="app">
  <button v-on:click="alertYou" >Click me !</button>
  <button @click="alertYou" >Click me !</button> <!-- syntaxe courte -->
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      methods: {
        alertYou () {
            alert('Hey you')
        }
      }
    })
</script>

<div id="app">
    <!-- La propagation de l'évènement `click` sera stoppée -->
    <a @click.stop></a>

    <!-- L'évènement `submit` ne rechargera plus la page -->
    <form @submit.prevent></form>

    <!-- L'évènement ne s'applique qu'à l'élément pas aux enfants -->
    <div @click.self="doThat">...</div>

    <!-- Appel submit() quand on appuis sur la touche entrée -->
    <input @keyup.enter="submit">

    <!-- Utilise le mode "capture" de addEventListener -->
    <!-- (l'évènement est lancé avant celui des enfants) -->
    <div @click.capture="alert('Capture')">
        <button @click="alert('Hello world')">Click me</button>
    </div>

    <!-- 2.1.4+ : L'évènement n'est lancé qu'une fois -->
    <div @click.once="sayHello">...</div>
</div>

...
<div id="app">
  <input v-model="message">
  {{ message }}
</div>
...
<script>
    let app = new Vue({
      el: '#app'
      data: {
        message: 'I am watching you'
      }
    })
</script>

<div id="app">
    <!-- synchronisé après le "change" au lieu du "input" -->
    <input v-model.lazy="message">

    <!-- Force le type number -->
    <input v-model.number="age" type="number">

    <!-- Supprime les espaces superflus -->
    <input v-model.trim="message">
</div>

...
<div id="app">
    <button @click="show = !show"> Permuter </button>
    <transition name="fade">
        <p v-if="show">Hello world</p>
    </transition>
</div>
...
<script>
    let app = new Vue({
      el: '#app'
      data: {
        show: true
      }
    })
</script>
<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>

...
<div id="app">
  {{ fullName }}
</div>
...
<script>
    let app = new Vue({
      el: '#app'
      data: {
        firstName: 'Toto',
        lastName: 'Tata',
        fullName: 'Toto Tata'
      },
      watch: {
        firstName (val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName (val) {
            this.fullName = this.firstName + ' ' + val 
        }
      }
    })
</script>

...
<div id="app">
  {{ fullName }}
</div>
...
<script>
    let app = new Vue({
      el: '#app'
      data: {
        firstName: 'Toto',
        lastName: 'Tata'
      },
      computed: {
        fullName () {
            return this.firstName + ' ' + this.lastName
        }
      }
    })
</script>

...
<div id="app">
    <input v-model="messsage" placeholder="Saisir un message">
    <span>Message: {{ messsage }}</span>
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      data: {
        messsage: ''
      }
    })
</script>

...
<div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <span>Noms cochés: {{ checkedNames }}</span>
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      data: {
        checkedNames: []
      }
    })
</script>

...
<div id="app">
    <input type="radio" id="jack" name="name" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="radio" id="john" name="name" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <span>Noms choisi: {{ checkedName }}</span>
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      data: {
        checkedName: ''
      }
    })
</script>

...
<div id="app">
    <select v-model="selected">
        <option value="123">123</option>
        <option value="256">256</option>
    </select>
    <span>Montant {{ selected }}</span>
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      data: {
        selected: 0
      }
    })
</script>

...
<div id="app">
    <label for="check">Check me :</label>
    <input type="checkbox" value="{ text: 'Hello world' }" v-model="message" id="check">
    {{ message }} <!--  [ "{ text: 'Hello world' }" ] -->
</div>
...
<script>
    let app = new Vue({
      el: '#app',
      data: {
        message: []
      }
    })
</script>

...
<div id="app">
    <my-component></my-component>
</div>
...
<script>
    let myComponent = Vue.component('my-component', {
        template: '<div>Un composant personnalisé !</div>'
    })
    let app = new Vue({
      el: '#app',
      components: {
        myComponent
      }
    })
</script>

<!-- Erreur ! -->
<table>
    <my-row>...</my-row>
</table>

<!-- Solution ! -->
<table>
    <tr is="my-row"></tr>
</table>

...
<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
...
<script>
    Vue.component('my-component', {
      template: '<span>{{ message }}</span>',
      data: {
        message: 'bonjour' // Warning : Même objet !
      }
    })
    ...
</script>

...
<div id="app">
    <my-component message="bonjour !"></my-component>
</div>
...
<script>
    Vue.component('my-component', {
        props: ['message'],
        template: '<span>{{ message }}</span>'
    })
    ...
</script>

<div id="app">
    <!-- Ceci est un String "1" -->
    <comp some-prop="1"></comp>
    <!-- Ceci est un Number 1 -->
    <comp :some-prop="1"></comp>
</div>

Vue.component('child', {
    props: {
        propA: String,
        propB: [String, Number],
        propC: { type: String, required: true }
        propD: { type: String, default: 'Hello world' }
        propE: { type: Object, default () { return { message: 'hello' } } }
        propF: {
            validor (value) {
                return (value / 10) > 10
            }
        }
    }
})

<!-- Utilisation -->
<div>
    <h1>Je suis le titre du parent</h1>
    <my-component>
        <p>Ceci est le contenu original</p>
    </my-component>
</div>

<!-- Composant -->
<div>
    <h2>Je suis le titre de l'enfant</h2>
    <slot> Serra remplacé </slot>
</div>

<!-- Résultat -->
<div>
    <h1>Je suis le titre du parent</h1>
    <div>
        <h2>Je suis le titre de l'enfant</h2>
        <p>Ceci est le contenu original</p>
    </div>
</div>

<!-- Utilisation -->
<app-layout>
  <h1 slot="header">Voici un titre de page</h1>

  <p>Un paragraphe pour le contenu principal.</p>
  <p>Et un autre.</p>

  <p slot="footer">Ici plusieurs informations de contact</p>
</app-layout>

<!-- Composant -->
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

...
<div id="app">
    <child @hello="alert('Enfant dit bonjour')"></child>
</div>
...
<script>
    Vue.component('child', {
        props: ['message'],
        template: '<button @click="sayHello">Dire bonjour</button>'
        methods: {
            sayHello () {
                this.$emit('hello')
            }
        }
    })
    ...
</script>

<template>
    <p>Hello {{ name }}</p>
    <button @click="sayHello">Dire bonjour</button>
</template>
<script>
export default {
    data () {
        return {
            name: 'Jon Snow'
        }
    }
    methods: {
        sayHello () {
            alert(`You don't know`)
        }
    }
}
</script>
<style scoped>
p {
    font-size: 2rem;
}
</style>

...
<div>
    <nav>
        <!-- `<router-link>` sera rendu en tag `<a>` par défaut -->
        <router-link to="/foo">Aller à Foo</router-link>
        <router-link to="/bar">Aller à Bar</router-link>
    </nav>
    <!-- La page sera rendu ici -->
    <router-view></router-view>
</div>
...
<script>
const router = new VueRouter({
    routes: [
        { path: '/foo', component: { template: '<div>foo</div>' } },
        { path: '/bar', component: { template: '<div>bar</div>' } }
    ]
})

const app = new Vue({
  router
}).$mount('#app')
</script>

import { required, minLength } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      name: ''
    }
  },
  validations: {
    name: {
      required, // Name est requis
      minLength: minLength(4) // Minimum 4 lettres
    }
  }
}

...
<div id="app">
    <p>{{ $t("message") }}</p> <!-- hello world -->
</div>
...
<script>
const messages = {
  en: {
    message: 'hello world'
  },
  fr: {
    message: 'Bonjour tout le monde'
  }
}

const i18n = new VueI18n({
  locale: 'en', // Définit la langue
  messages, // Initialise le dictionnaire
})

const app = new Vue({ i18n }).$mount('#app')
</script>