JSFiddle - React, Tailwind, and code Playground

by Federico

HTML

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

<div id="app">
    <hr>
    <br>
    <!-- Exercise 1 -->
    <input type="text" v-on:keyup="methodEx1">
    <p>Output: {{ dataEx1 }}</p>
    <br>
    <hr>
    <br>
    <!-- Exercise 2 -->
    <input type="text" v-on:keyup.ctrl.enter="dataEx2 = $event.target.value">
    <p>Output: {{ dataEx2 }}</p>
    <br>
    <hr>
    <br>
    <!-- Exercise 3 -->
    <form action="" method="GET" v-on:submit.prevent>
        <input type="submit" value="Submit">
    </form>
    <br>
    <hr>
</div>

JavaScript

new Vue({
    el: '#app',
    data: {
        dataEx1: '',
        dataEx2: ''
    },
    methods: {
        methodEx1: function(event) {
            this.dataEx1 = event.target.value
        }
    }
});