[{"data":1,"prerenderedAt":237},["ShallowReactive",2],{"term-t\u002Ftwo-way-binding":3,"related-t\u002Ftwo-way-binding":220},{"id":4,"title":5,"acronym":6,"body":7,"category":201,"description":202,"difficulty":203,"extension":204,"letter":205,"meta":206,"navigation":126,"path":207,"related":208,"seo":214,"sitemap":215,"stem":218,"subcategory":6,"__hash__":219},"terms\u002Fterms\u002Ft\u002Ftwo-way-binding.md","Two-way Binding",null,{"type":8,"value":9,"toc":195},"minimark",[10,15,19,23,35,39,184,188,191],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"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. Change the data in code and the box updates. They stay perfectly in sync without you doing anything.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25,26,29,30,34],{},"Two-way binding creates a bidirectional link between a form input element and a data property. In Vue it's achieved with v-model (syntactic sugar for ",[27,28],"value",{}," binding + @input event). In React you implement it manually with value + onChange. Angular uses ",[31,32,33],"span",{},"(ngModel)",".",[11,36,38],{"id":37},"show-me-the-code","Show Me The Code",[40,41,46],"pre",{"className":42,"code":43,"language":44,"meta":45,"style":45},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Vue: v-model is two-way binding sugar -->\n\u003Cinput v-model=\"searchQuery\" placeholder=\"Search...\" \u002F>\n\u003Cp>You typed: {{ searchQuery }}\u003C\u002Fp>\n\n\u003C!-- Equivalent to: -->\n\u003Cinput :value=\"searchQuery\" @input=\"searchQuery = $event.target.value\" \u002F>\n","vue","",[47,48,49,57,100,121,128,134],"code",{"__ignoreMap":45},[31,50,53],{"class":51,"line":52},"line",1,[31,54,56],{"class":55},"sHwdD","\u003C!-- Vue: v-model is two-way binding sugar -->\n",[31,58,60,64,68,72,75,78,82,84,87,89,91,95,97],{"class":51,"line":59},2,[31,61,63],{"class":62},"sMK4o","\u003C",[31,65,67],{"class":66},"swJcz","input",[31,69,71],{"class":70},"spNyl"," v-model",[31,73,74],{"class":62},"=",[31,76,77],{"class":62},"\"",[31,79,81],{"class":80},"sTEyZ","searchQuery",[31,83,77],{"class":62},[31,85,86],{"class":70}," placeholder",[31,88,74],{"class":62},[31,90,77],{"class":62},[31,92,94],{"class":93},"sfazB","Search...",[31,96,77],{"class":62},[31,98,99],{"class":62}," \u002F>\n",[31,101,103,105,107,110,113,116,118],{"class":51,"line":102},3,[31,104,63],{"class":62},[31,106,16],{"class":66},[31,108,109],{"class":62},">",[31,111,112],{"class":80},"You typed: {{ searchQuery }}",[31,114,115],{"class":62},"\u003C\u002F",[31,117,16],{"class":66},[31,119,120],{"class":62},">\n",[31,122,124],{"class":51,"line":123},4,[31,125,127],{"emptyLinePlaceholder":126},true,"\n",[31,129,131],{"class":51,"line":130},5,[31,132,133],{"class":55},"\u003C!-- Equivalent to: -->\n",[31,135,137,139,141,144,146,148,150,152,154,157,159,161,163,166,168,171,173,176,178,180,182],{"class":51,"line":136},6,[31,138,63],{"class":62},[31,140,67],{"class":66},[31,142,143],{"class":62}," :",[31,145,27],{"class":70},[31,147,74],{"class":62},[31,149,77],{"class":62},[31,151,81],{"class":80},[31,153,77],{"class":62},[31,155,156],{"class":62}," @",[31,158,67],{"class":70},[31,160,74],{"class":62},[31,162,77],{"class":62},[31,164,165],{"class":80},"searchQuery ",[31,167,74],{"class":62},[31,169,170],{"class":80}," $event",[31,172,34],{"class":62},[31,174,175],{"class":80},"target",[31,177,34],{"class":62},[31,179,27],{"class":80},[31,181,77],{"class":62},[31,183,99],{"class":62},[11,185,187],{"id":186},"when-youll-hear-this","When You'll Hear This",[16,189,190],{},"\"Use v-model for two-way binding on form inputs.\" \u002F \"React doesn't have two-way binding built in — you wire it up manually.\"",[192,193,194],"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 pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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":45,"searchDepth":59,"depth":59,"links":196},[197,198,199,200],{"id":13,"depth":59,"text":14},{"id":21,"depth":59,"text":22},{"id":37,"depth":59,"text":38},{"id":186,"depth":59,"text":187},"frontend","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.","intermediate","md","t",{},"\u002Fterms\u002Ft\u002Ftwo-way-binding",[209,210,211,212,213],"Binding","Directive","State","Vue","Angular",{"title":5,"description":202},{"changefreq":216,"priority":217},"weekly",0.7,"terms\u002Ft\u002Ftwo-way-binding","YfnzoZDD7GX_qXz9rkhtIQLNo3ntcoSH8FhAimNAvt4",[221,224,228,231,234],{"title":213,"path":222,"acronym":6,"category":201,"difficulty":203,"description":223},"\u002Fterms\u002Fa\u002Fangular","Angular is Google's JavaScript framework — the strict, opinionated one that comes with everything pre-decided.",{"title":209,"path":225,"acronym":6,"category":201,"difficulty":226,"description":227},"\u002Fterms\u002Fb\u002Fbinding","beginner","Binding is connecting your data to your HTML so they stay in sync.",{"title":210,"path":229,"acronym":6,"category":201,"difficulty":203,"description":230},"\u002Fterms\u002Fd\u002Fdirective","Directives are special HTML attributes that tell Vue (or Angular) to do something special with an element.",{"title":211,"path":232,"acronym":6,"category":201,"difficulty":226,"description":233},"\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":212,"path":235,"acronym":6,"category":201,"difficulty":226,"description":236},"\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.",1776518320410]