JSFiddle - React, Tailwind, and code Playground

by Federico

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <div v-bind:title="firstName + ' ' + lastName">Hover to see my name</div>
    <hr>
    <button v-on:click="clickedButton('Hello Federico!', $event)">Click here!</button>
    <hr>
    <div v-on:click="showDialog">
        <button v-on:click.stop="showDialog">Click here and stop div!</button>
    </div>
    <hr>
    <div>
        <button v-on:click.once="showDialog">Click here just once!</button>
        <a href="http://google.com" v-on:click.prevent target="_blank">Google and <strong>prevent</strong></a>
    </div>
    <hr>
    <input type="text" v-on:keyup.enter.space="pressedSomething">
    <hr>
    <input type="text" v-on:keyup.shift.enter="myListener">
    <hr>
    <button v-on:click.meta="myButtonListener">Modifier test</button>
</div>

JavaScript

new Vue({
    el: '#app',
    data: {
        firstName: "Federico",
        lastName: "Taddei"
    },
    methods: {
        clickedButton: function(message, event) {
            console.log(event)
            alert(message)
        },
        showDialog: function() {
            alert('Just clicked...')
        },
        pressedSomething: function() {
            alert('You pressed the enter or the space keys!')
        },
        myListener: function() {
            alert('Shift + Enter!')
        },
        myButtonListener: function() {
            alert('I work only when you press shift!')
        }
    }
});