[{"data":1,"prerenderedAt":133},["ShallowReactive",2],{"site-info":3,"\u002Fwriting\u002Fhow-to-use-built-in-and-custom-directives-in-vue-js":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:hello@daveberning.io","lucide:mail","OH","site-information","Riwsk3KNMBr9V9OmxgoWlnFymJ_mfMFTDiaiIADNjUo",{"id":56,"title":57,"body":58,"category":114,"description":115,"extension":15,"externalUrl":116,"featuredImage":117,"meta":118,"navigation":119,"path":120,"platform":121,"publishedAt":122,"readingTime":123,"seo":124,"status":125,"stem":126,"tags":127,"updatedAt":11,"__hash__":132},"writing\u002Fwriting\u002Fhow-to-use-built-in-and-custom-directives-in-vue-js.md","How To Use Built-In and Custom Directives in Vue.js",{"type":8,"value":59,"toc":112},[60,98,105],[61,62,63,64,68,69,73,74,77,78,81,82,85,86,89,90,93,94,97],"p",{},"This ",[65,66,67],"strong",{},"Vue.js directives tutorial"," breaks down the built-in template features that make Vue feel fast, expressive, and productive for frontend development. It explains when to use ",[70,71,72],"code",{},"v-if",", ",[70,75,76],{},"v-else-if",", and ",[70,79,80],{},"v-show"," for conditional rendering, how ",[70,83,84],{},"v-on"," handles event listeners, how ",[70,87,88],{},"v-bind"," and ",[70,91,92],{},"v-model"," power dynamic attributes and form input binding, and where ",[70,95,96],{},"v-html"," fits when you need to render raw markup carefully.",[61,99,100,101,104],{},"The article also moves beyond the basics and shows how ",[65,102,103],{},"custom Vue directives"," can package repeated DOM behavior into reusable logic. That makes it especially useful for developers who want a clearer mental model of how Vue directives work and when a custom directive is a better fit than component logic alone.",[61,106,107,108,111],{},"If you are learning Vue fundamentals or sharpening your template syntax, this summary of the original guide highlights the key concepts behind ",[65,109,110],{},"Vue directives, data binding, event handling, and reusable DOM behavior",".",{"title":11,"searchDepth":12,"depth":12,"links":113},[],"Tutorial","Learn how to use Vue.js directives like v-if, v-show, v-bind, v-model, and custom directives to build dynamic, interactive front-end components.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-use-built-in-and-custom-directives-in-vue-js","\u002Fwriting\u002Fvuejs.webp",{},true,"\u002Fwriting\u002Fhow-to-use-built-in-and-custom-directives-in-vue-js","DigitalOcean","2021-08-12",5,{"title":57,"description":115},"published","writing\u002Fhow-to-use-built-in-and-custom-directives-in-vue-js",[128,129,130,131],"JavaScript","Vue","Vue Directives","Frontend","PaO83OkAe09zee8F-7-DSeKNYHb9slCzuBlSClIFAHc",1775364556989]