[{"data":1,"prerenderedAt":197},["ShallowReactive",2],{"term-b\u002Fbinding":3,"related-b\u002Fbinding":180},{"id":4,"title":5,"acronym":6,"body":7,"category":161,"description":162,"difficulty":163,"extension":164,"letter":165,"meta":166,"navigation":111,"path":167,"related":168,"seo":174,"sitemap":175,"stem":178,"subcategory":6,"__hash__":179},"terms\u002Fterms\u002Fb\u002Fbinding.md","Binding",null,{"type":8,"value":9,"toc":155},"minimark",[10,15,19,23,26,30,144,148,151],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Binding is connecting your data to your HTML so they stay in sync. You bind a variable to an input and when the variable changes the input shows the new value. It's like tying a string between your code and your UI.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Data binding is the mechanism that synchronizes data between the component's logic and its template. One-way binding flows data from component to template (v-bind in Vue, JSX expressions in React). Two-way binding syncs in both directions (v-model in Vue).",[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","\u003C!-- Vue one-way binding -->\n\u003Cimg :src=\"user.avatar\" :alt=\"user.name\" \u002F>\n\n\u003C!-- Vue two-way binding -->\n\u003Cinput v-model=\"user.name\" \u002F>\n","vue","",[38,39,40,49,106,113,119],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u003C!-- Vue one-way binding -->\n",[41,50,52,56,60,63,67,70,73,77,80,83,85,87,90,92,94,96,98,101,103],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","\u003C",[41,57,59],{"class":58},"swJcz","img",[41,61,62],{"class":54}," :",[41,64,66],{"class":65},"spNyl","src",[41,68,69],{"class":54},"=",[41,71,72],{"class":54},"\"",[41,74,76],{"class":75},"sTEyZ","user",[41,78,79],{"class":54},".",[41,81,82],{"class":75},"avatar",[41,84,72],{"class":54},[41,86,62],{"class":54},[41,88,89],{"class":65},"alt",[41,91,69],{"class":54},[41,93,72],{"class":54},[41,95,76],{"class":75},[41,97,79],{"class":54},[41,99,100],{"class":75},"name",[41,102,72],{"class":54},[41,104,105],{"class":54}," \u002F>\n",[41,107,109],{"class":43,"line":108},3,[41,110,112],{"emptyLinePlaceholder":111},true,"\n",[41,114,116],{"class":43,"line":115},4,[41,117,118],{"class":47},"\u003C!-- Vue two-way binding -->\n",[41,120,122,124,127,130,132,134,136,138,140,142],{"class":43,"line":121},5,[41,123,55],{"class":54},[41,125,126],{"class":58},"input",[41,128,129],{"class":65}," v-model",[41,131,69],{"class":54},[41,133,72],{"class":54},[41,135,76],{"class":75},[41,137,79],{"class":54},[41,139,100],{"class":75},[41,141,72],{"class":54},[41,143,105],{"class":54},[11,145,147],{"id":146},"when-youll-hear-this","When You'll Hear This",[16,149,150],{},"\"Bind the disabled prop to the loading state so the button disables while fetching.\" \u002F \"Are you using one-way or two-way binding there?\"",[152,153,154],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .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":51,"depth":51,"links":156},[157,158,159,160],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":146,"depth":51,"text":147},"frontend","Binding is connecting your data to your HTML so they stay in sync.","beginner","md","b",{},"\u002Fterms\u002Fb\u002Fbinding",[169,170,171,172,173],"Two-way Binding","Reactive","Props","Directive","State",{"title":5,"description":162},{"changefreq":176,"priority":177},"weekly",0.7,"terms\u002Fb\u002Fbinding","cAir-epwIjjb668S84vd3riTvSVTSwG2X8Q_AjJ-jNA",[181,185,188,191,194],{"title":172,"path":182,"acronym":6,"category":161,"difficulty":183,"description":184},"\u002Fterms\u002Fd\u002Fdirective","intermediate","Directives are special HTML attributes that tell Vue (or Angular) to do something special with an element.",{"title":171,"path":186,"acronym":6,"category":161,"difficulty":163,"description":187},"\u002Fterms\u002Fp\u002Fprops","Props are how you pass information INTO a component, like giving a coffee machine its settings.",{"title":170,"path":189,"acronym":6,"category":161,"difficulty":183,"description":190},"\u002Fterms\u002Fr\u002Freactive","Reactive means your data and your UI are connected — when the data changes, the screen updates automatically, like magic.",{"title":173,"path":192,"acronym":6,"category":161,"difficulty":163,"description":193},"\u002Fterms\u002Fs\u002Fstate","State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.",{"title":169,"path":195,"acronym":6,"category":161,"difficulty":183,"description":196},"\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.",1776518260210]