<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>VueJs Tutorial - coligo</title>
</head>    
<body>
    <div id="vue-instance">
        Nome: <input type="text" v-model="name"/> <br>
        <p v-on:click="sayHello">Clique aqui!</p>
        <button v-on:click="sayHello">Ou aqui!</button>
    </div>
    <script src="https://cdn.jsdelivr.net/vue/2.1.6/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#vue-instance',
            data: {
                name: ''
            },
            methods: {
                sayHello: function(){
                    alert('Hey there, ' + this.name);
                }
            }
        });
    </script>
</body>
</html>

Of course you're not limited to just the click event as the v-on directive accepts the common Javascript events such as v-on:mouseover, v-on:keydown, v-on:submit, v-on:keypress, etc... or even your own custom defined events.

Since you will find yourself using the v-on:* directive quite frequently when developing, Vue provides us with a shorthand notation denoted by the @ symbol and you can simply replace this statement in our previous example:

<button v-on:click="sayHello">Hey there!</button>

with an equivalent @ version:

<button @click="sayHello">Hey there!</button>

results matching ""

    No results matching ""