[{"data":1,"prerenderedAt":97},["ShallowReactive",2],{"term-t\u002Ftemplate":3,"related-t\u002Ftemplate":79},{"id":4,"title":5,"acronym":6,"body":7,"category":59,"description":60,"difficulty":61,"extension":62,"letter":63,"meta":64,"navigation":65,"path":66,"related":67,"seo":73,"sitemap":74,"stem":77,"subcategory":6,"__hash__":78},"terms\u002Fterms\u002Ft\u002Ftemplate.md","Template",null,{"type":8,"value":9,"toc":55},"minimark",[10,15],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18,19],"p",{},"A template is the HTML part of your component — the blueprint for what it looks like. In Vue you write it inside a ",[20,21,22,23,27],"template",{}," tag. In React you return JSX. It's the thing that says 'render a button here, show this text there'.\n",[11,24,26],{"id":25},"real-talk","Real Talk",[16,28,29,30],{},"A component template defines the HTML structure that the component renders. In Vue, the ",[20,31,32,33,37,48,52],{}," block is compiled into render functions. In React, JSX in the return statement serves the same purpose. Templates can contain dynamic expressions, directives, and child components.\n",[11,34,36],{"id":35},"show-me-the-code","Show Me The Code",[38,39,45],"pre",{"className":40,"code":42,"language":43,"meta":44},[41],"language-vue","\u003Ctemplate>\n  \u003Cdiv class=\"user-card\">\n    \u003Cimg :src=\"user.avatar\" \u002F>\n    \u003Ch2>{{ user.name }}\u003C\u002Fh2>\n    \u003Cp>{{ user.bio }}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[46,47,42],"code",{"__ignoreMap":44},[11,49,51],{"id":50},"when-youll-hear-this","When You'll Hear This",[16,53,54],{},"\"Keep logic out of the template — move it to computed properties.\" \u002F \"The template is just HTML with superpowers.\"",{"title":44,"searchDepth":56,"depth":56,"links":57},2,[58],{"id":13,"depth":56,"text":14},"frontend","A template is the HTML part of your component — the blueprint for what it looks like. In Vue you write it inside a \u003Ctemplate> tag. In React you return JSX.","beginner","md","t",{},true,"\u002Fterms\u002Ft\u002Ftemplate",[68,69,70,71,72],"Component","Directive","Slot","Render","Vue",{"title":5,"description":60},{"changefreq":75,"priority":76},"weekly",0.7,"terms\u002Ft\u002Ftemplate","fCePgfjTknsAhfxtKSA2ir1fcMqa0-aTnrdnLVK0ySA",[80,83,87,91,94],{"title":68,"path":81,"acronym":6,"category":59,"difficulty":61,"description":82},"\u002Fterms\u002Fc\u002Fcomponent","A component is a self-contained LEGO brick for your UI.",{"title":69,"path":84,"acronym":6,"category":59,"difficulty":85,"description":86},"\u002Fterms\u002Fd\u002Fdirective","intermediate","Directives are special HTML attributes that tell Vue (or Angular) to do something special with an element.",{"title":71,"path":88,"acronym":6,"category":89,"difficulty":61,"description":90},"\u002Fterms\u002Fr\u002Frender","cloud","Render is another developer-friendly hosting platform that does web services, databases, cron jobs, and static sites all in one place.",{"title":70,"path":92,"acronym":6,"category":59,"difficulty":85,"description":93},"\u002Fterms\u002Fs\u002Fslot","A slot is a placeholder in a component where a parent can inject its own custom content.",{"title":72,"path":95,"acronym":6,"category":59,"difficulty":61,"description":96},"\u002Fterms\u002Fv\u002Fvue","Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.",1776518318004]