[{"data":1,"prerenderedAt":113},["ShallowReactive",2],{"site-info":3,"\u002Fwriting\u002Fhow-to-create-user-interactions-with-events-in-vue":55},{"id":4,"title":5,"baseTitle":6,"body":7,"city":14,"description":11,"extension":15,"firstName":16,"lastName":17,"meta":18,"navigation":19,"path":35,"resumeUrl":36,"role":37,"seo":38,"socialLinks":39,"state":52,"stem":53,"__hash__":54},"siteInfo\u002Fsite-information.md","Site Information","| Front-End Software Engineer | Cincinnati, OH",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"Cincinnati","md","Dave","Berning",{},[20,23,26,29,32],{"name":21,"to":22},"About","\u002Fabout",{"name":24,"to":25},"Work","\u002Fwork",{"name":27,"to":28},"Writing","\u002Fwriting",{"name":30,"to":31},"Endorsements","\u002Fendorsements",{"name":33,"to":34},"Contact","\u002Fcontact","\u002Fsite-information","\u002Fresume","Front-End Software Engineer",{"description":11},[40,44,48],{"label":41,"href":42,"icon":43},"LinkedIn","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdavidberning\u002F","simple-icons:linkedin",{"label":45,"href":46,"icon":47},"GitHub","https:\u002F\u002Fgithub.com\u002Fdaveberning","simple-icons:github",{"label":49,"href":50,"icon":51},"Email","mailto:daveberning@icloud.com","lucide:mail","OH","site-information","NPLL1hH9hpVz07oyT1KXspbl9TxZpTQW2UUiJAMDAjs",{"id":56,"title":57,"body":58,"category":94,"description":95,"extension":15,"externalUrl":96,"featuredImage":97,"meta":98,"navigation":99,"path":100,"platform":101,"publishedAt":102,"readingTime":103,"seo":104,"status":105,"stem":106,"tags":107,"updatedAt":11,"__hash__":112},"writing\u002Fwriting\u002Fhow-to-create-user-interactions-with-events-in-vue.md","How To Create User Interactions with Events in Vue",{"type":8,"value":59,"toc":92},[60,69,85],[61,62,63,64,68],"p",{},"This ",[65,66,67],"strong",{},"Vue events tutorial"," explains how user interactions move through a Vue application, from simple DOM clicks to communication between components. It starts with the role of browser events, then shows how Vue simplifies common interaction patterns inside templates.",[61,70,71,72,76,77,80,81,84],{},"The guide covers listening for events with ",[73,74,75],"code",{},"v-on",", using ",[65,78,79],{},"event modifiers and key modifiers",", and creating ",[65,82,83],{},"custom events"," so child components can notify parent components cleanly. That makes it a useful introduction for developers who are still building intuition around interactive Vue interfaces.",[61,86,87,88,91],{},"If you want to understand ",[65,89,90],{},"Vue event handling, custom events, keyboard interactions, and component communication",", this article gives a practical overview of the core patterns.",{"title":11,"searchDepth":12,"depth":12,"links":93},[],"Tutorial","Learn how to handle Vue events with v-on, event modifiers, key modifiers, and custom events so components respond cleanly to user interactions.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-create-user-interactions-with-events-in-vue","\u002Fwriting\u002Fvuejs.webp",{},true,"\u002Fwriting\u002Fhow-to-create-user-interactions-with-events-in-vue","DigitalOcean","2021-05-28",5,{"title":57,"description":95},"published","writing\u002Fhow-to-create-user-interactions-with-events-in-vue",[108,109,110,111],"JavaScript","Vue","Events","Component Communication","halKG3YxYp7t_PQZCDID8Pmf_plbHc6ye0sSrT-WJ8I",1775699598947]