[{"data":1,"prerenderedAt":228},["ShallowReactive",2],{"term-d\u002Fdirective":3,"related-d\u002Fdirective":211},{"id":4,"title":5,"acronym":6,"body":7,"category":191,"description":192,"difficulty":193,"extension":194,"letter":195,"meta":196,"navigation":197,"path":198,"related":199,"seo":205,"sitemap":206,"stem":209,"subcategory":6,"__hash__":210},"terms\u002Fterms\u002Fd\u002Fdirective.md","Directive",null,{"type":8,"value":9,"toc":185},"minimark",[10,15,19,23,26,30,174,178,181],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Directives are special HTML attributes that tell Vue (or Angular) to do something special with an element. v-if says 'only show this if the condition is true', v-for says 'loop through this list'. They're like cheat codes you put directly in your HTML.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Directives are special attributes (prefixed with v- in Vue) that apply reactive behavior to DOM elements. Built-in Vue directives include v-if, v-else, v-for, v-show, v-bind, v-on, and v-model. You can also write custom directives for low-level DOM manipulation.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"item in items\" :key=\"item.id\">\n      {{ item.name }}\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Cp v-if=\"items.length === 0\">No items found.\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,56,67,106,113,123,133,165],"code",{"__ignoreMap":36},[41,42,45,49,53],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sMK4o","\u003C",[41,50,52],{"class":51},"swJcz","template",[41,54,55],{"class":47},">\n",[41,57,59,62,65],{"class":43,"line":58},2,[41,60,61],{"class":47},"  \u003C",[41,63,64],{"class":51},"ul",[41,66,55],{"class":47},[41,68,70,73,76,80,83,86,90,92,95,97,99,102,104],{"class":43,"line":69},3,[41,71,72],{"class":47},"    \u003C",[41,74,75],{"class":51},"li",[41,77,79],{"class":78},"spNyl"," v-for",[41,81,82],{"class":47},"=",[41,84,85],{"class":47},"\"",[41,87,89],{"class":88},"sfazB","item in items",[41,91,85],{"class":47},[41,93,94],{"class":78}," :key",[41,96,82],{"class":47},[41,98,85],{"class":47},[41,100,101],{"class":88},"item.id",[41,103,85],{"class":47},[41,105,55],{"class":47},[41,107,109],{"class":43,"line":108},4,[41,110,112],{"class":111},"sTEyZ","      {{ item.name }}\n",[41,114,116,119,121],{"class":43,"line":115},5,[41,117,118],{"class":47},"    \u003C\u002F",[41,120,75],{"class":51},[41,122,55],{"class":47},[41,124,126,129,131],{"class":43,"line":125},6,[41,127,128],{"class":47},"  \u003C\u002F",[41,130,64],{"class":51},[41,132,55],{"class":47},[41,134,136,138,140,143,145,147,150,152,155,158,161,163],{"class":43,"line":135},7,[41,137,61],{"class":47},[41,139,16],{"class":51},[41,141,142],{"class":78}," v-if",[41,144,82],{"class":47},[41,146,85],{"class":47},[41,148,149],{"class":88},"items.length === 0",[41,151,85],{"class":47},[41,153,154],{"class":47},">",[41,156,157],{"class":111},"No items found.",[41,159,160],{"class":47},"\u003C\u002F",[41,162,16],{"class":51},[41,164,55],{"class":47},[41,166,168,170,172],{"class":43,"line":167},8,[41,169,160],{"class":47},[41,171,52],{"class":51},[41,173,55],{"class":47},[11,175,177],{"id":176},"when-youll-hear-this","When You'll Hear This",[16,179,180],{},"\"Use v-show instead of v-if if the element toggles frequently — it keeps it in the DOM.\" \u002F \"Write a custom directive for that tooltip behavior.\"",[182,183,184],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":58,"depth":58,"links":186},[187,188,189,190],{"id":13,"depth":58,"text":14},{"id":21,"depth":58,"text":22},{"id":28,"depth":58,"text":29},{"id":176,"depth":58,"text":177},"frontend","Directives are special HTML attributes that tell Vue (or Angular) to do something special with an element.","intermediate","md","d",{},true,"\u002Fterms\u002Fd\u002Fdirective",[200,201,202,203,204],"Vue","Angular","Binding","Template","Two-way Binding",{"title":5,"description":192},{"changefreq":207,"priority":208},"weekly",0.7,"terms\u002Fd\u002Fdirective","6eHDQ_CMbk-uKtpdLJ18ZypYnyTyHyaQGru0PUQZoO4",[212,215,219,222,225],{"title":201,"path":213,"acronym":6,"category":191,"difficulty":193,"description":214},"\u002Fterms\u002Fa\u002Fangular","Angular is Google's JavaScript framework — the strict, opinionated one that comes with everything pre-decided.",{"title":202,"path":216,"acronym":6,"category":191,"difficulty":217,"description":218},"\u002Fterms\u002Fb\u002Fbinding","beginner","Binding is connecting your data to your HTML so they stay in sync.",{"title":203,"path":220,"acronym":6,"category":191,"difficulty":217,"description":221},"\u002Fterms\u002Ft\u002Ftemplate","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.",{"title":204,"path":223,"acronym":6,"category":191,"difficulty":193,"description":224},"\u002Fterms\u002Ft\u002Ftwo-way-binding","Two-way binding means your data and your input field are best friends who always tell each other what changed. Type in the box and the data updates.",{"title":200,"path":226,"acronym":6,"category":191,"difficulty":217,"description":227},"\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.",1776518274592]