<template><div><h1>Hello! I'm {{ name }}.</h1><p>You can also call me {{ pronouns }}.</p><p>Currently, I'm learning {{ currentlyLearning }}.</p><h2>My Skills:</h2><ul><liv-for="skill in skills" :key="skill">{{ skill }}</li></ul><button@click="learnNewSkill('Nuxt.js')">Learn Nuxt.js</button></div></template><script>
import{ref}from'@nuxtjs/composition-api';exportdefault{setup(){constname=ref('Kerim');constpronouns=ref('He'||'Him');constcurrentlyLearning=ref('Nuxt.js');constskills=ref(['PHP','JavaScript','C#','VB','Git','Linux','Databases','REST APIs',]);constintroduce=()=>{alert(`Hello! I'm ${name.value}. You can also call me ${pronouns.value}.`);};constlearnNewSkill=(newSkill)=>{skills.value.push(newSkill);alert(`I'm now learning ${newSkill}!`);};return{
name,
pronouns,
currentlyLearning,
skills,
introduce,
learnNewSkill,};},};