Vue.js cheatsheet

vue-cheatsheet.md

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="js/app.js"></script>

new Vue({
    el: '#id',
    data: {
        // ...
    },
    methods: {
        fct: function () {
            // ...
        }
    }
})

<div id="app">
    <!-- everything related to el: '#id' goes here -->
</div>

• v-bind => :
• :href="var"
• v-if="var"
• v-show="var": diff with if -> show keeps the HTML code but with display: none whereas if deletes it
• v-else
• v-for="{person in people}" then use {{ person }}
• v-on:click="method" = @click="method" bc v-on = @
• v-model="var"
• v-model="var" :true-value:="valIfTrue" :false-value:"valIfFalse
• :class="bool ? true : false"