Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Counter clicking on a button

  • v-on:click or the short-hand @click to map events to methods.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
<div>{{ message }}</div>
<button @click="increment">Count is: {{ counter }}</button>
</div>

<script>
    const { createApp, ref } = Vue

    createApp({
        methods: {
            increment() {
                console.log("increment");
                this.counter++
                console.log(this.counter);
            }
        }, 
        setup() {
            const message = ref('Hello World!')
            const counter = ref(0)
            return {
                message, counter
            }
        }
    }).mount('#app')
</script>