Example

Code of the Vue Component "Example"

<template>
    <div>
        <h1 
            ref="fullname"
            style="color: red;"
            @click="greetFormal"
        >{{ fullname }}</h1>
        <ul class="list">
            <li @mousemove="greetInformal">Firstname: {{ firstname }}</li>
            <li @mousemove="greetFormal">Lastname: {{ lastname }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'example',
        props: {
            firstname: {
                type: String,
                default: ''
            },
            lastname: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                boolValue: false,
                stringValue: 'example'
            };
        },
        computed: {
            fullname() {
                return `${this.firstname} ${this.lastname}`;
            }
        },
        methods: {
            greetInformal() {
                this.$emit('greet', `Hi ${this.firstname}`);
            },
            greetFormal() {
                this.$emit('greet', `Hello, ${this.fullname}`);
            }
        }
    };
</script>