const app = new Vue()

const adventure = new Trip({
    destination: 'Diagon Alley',
    luggage: {
        name: 'Mr. B. Hong',
        house: 'Ravenclaw',
        wand: '12.5" larch wood w/ Dragon heartstring core',
        wallet: {
            galleons: 12,
            sickles: 38,
            knuts: 274
        }
    },
    thingsToDo: {
        visitGringotts,
        visitDiagonAlley,
        drinkButterbeer,
        eatAtTheLeakyCauldron
    }
})

<!-- Start with an HTML element that will serve as
the app's destination -->

<div id="diagon-alley"></div>

// This is the most important configuration
// Mistype this one and nothing will ever happen 😱

const adventure = new Vue({
    el: '#diagon-alley'
})

// This where all your "luggage" items are stored

const adventure = new Vue({
    el: '#diagon-alley',
    data: {
        name: 'Mr. B. Hong',
        house: 'Ravenclaw',
        wand: '12.5" larch wood w/ Dragon heartstring core',
        wallet: {
            galleons: 12,
            sickles: 38,
            knuts: 274
        }
    }
})

// This where all your instructions are stored

const adventure = new Vue({
    el: '#diagon-alley',
    data: {
        name: 'Mr. B. Hong',
        house: 'Ravenclaw',
        wand: '12.5" larch wood w/ Dragon heartstring core',
        wallet: {
            galleons: 12,
            sickles: 38,
            knuts: 274
        }
    },
    methods: {
        visitGringotts() { ... },
        visitDiagonAlley() { ... },
        drinkButterbeer() { ... },
        eatAtTheLeakyCauldron() { ... }
    }
})

<!-- Given the data model on the right -->
<ul>
    <li v-for="house in Hogwarts">
        {{ house }}
    </li>
</ul>


<!-- It will render to -->
<ul>
    <li>Ravenclaw</li>
    <li>Hufflepuff</li>
    <li>Slytherin</li>
    <li>Griffindor</li>
</ul>

// Given this sample Vue instance
new Vue({
    ...
    data: {
        Hogwarts: [
            'Ravenclaw',
            'Hufflepuff',
            'Slytherin',
            'Gryffindor'
        ]
    }
})

<!-- The long form -->
<div v-bind:class="{ active: isActive }">...</div>

<!-- The common shortcut -->
<div :class="{ active: isActive }">...</div>

<!-- If isActive is true, it will render -->
<div class="active">...</div>

<!-- The long form -->
<div v-on:click="alert('Alohomora!')">...</div>

<!-- The common shortcut -->
<div @click="alert('Alohomora!')">...</div>

<input v-model="name" type="text" id="name" />

<script>
new Vue({
    ...
    data: {
        name: 'Sirius Black'
    }
})
</script>