Inicio
Blogs
Series
Componentes

Series

Explora este contenido en un orden recomendado.

No hay artículos disponibles aún

1989,21990,21991,21993,21994,114],{},"Útil cuando una porción del template es costosa y depende de pocas señales estables. Nota importante: ",[26,21992,21916],{}," existe desde Vue ",[82,21995,21996],{},"3.2+",[202,21998,21999],{"id":21919},[26,22000,21919],{},[31,22002,22003,22004,22007,22008,22010],{},"Le dice a Vue que ",[82,22005,22006],{},"no compile"," ese bloque. Las interpolaciones ",[26,22009,20627],{}," se muestran como texto literal.",[31,22012,22013],{},"Es perfecto para ejemplos de código o snippets donde quieres imprimir sintaxis de Vue sin evaluarla.",[40,22015,139],{"id":138},[31,22017,22018],{},"Usa estas directivas cuando tengas una razón concreta y medible:",[48,22020,22021,22026,22034],{},[51,22022,22023,22025],{},[26,22024,21913],{},": bloques estáticos que no deben reaccionar a cambios.",[51,22027,22028,22030,22031,114],{},[26,22029,21916],{},": listas o tarjetas complejas con alto costo de render cuando conoces ",[82,22032,22033],{},"dependencias exactas",[51,22035,22036,22038],{},[26,22037,21919],{},": documentación, tutoriales o demos donde quieres mostrar moustaches literalmente.",[31,22040,22041],{},"Casos reales:",[48,22043,22044,22051,22054],{},[51,22045,22046,22047,22050],{},"Dashboard con cards densas que solo cambian por ",[26,22048,22049],{},"id"," y estado puntual.",[51,22052,22053],{},"Pantalla de onboarding con secciones 100% estáticas.",[51,22055,22056],{},"Vista de documentación dentro de tu app que muestra sintaxis de Vue “en crudo”.",[40,22058,166],{"id":165},[31,22060,22061],{},"Evítalas cuando solo intentas “optimizar por optimizar”:",[48,22063,22064,22070,22075],{},[51,22065,22066,22067,22069],{},"No uses ",[26,22068,21913],{}," en datos que luego deben actualizarse.",[51,22071,22066,22072,22074],{},[26,22073,21916],{}," sin entender bien sus dependencias; puede ocultar cambios esperados.",[51,22076,22066,22077,22079],{},[26,22078,21919],{}," en bloques que sí necesitan bindings o eventos.",[31,22081,22082],{},"Si no has detectado un problema real de render, primero mide con Vue Devtools antes de complejizar el template.",[40,22084,5397],{"id":5396},[48,22086,22087,22092,22097],{},[51,22088,22089,22091],{},[26,22090,21913],{},": congelado permanente después del primer render.",[51,22093,22094,22096],{},[26,22095,21916],{},": congelado condicional según dependencias.",[51,22098,22099,22101],{},[26,22100,21919],{},": sin compilación de plantilla; salida literal.",[31,22103,22104],{},"Regla rápida:",[48,22106,22107,22112,22117],{},[51,22108,22109,22110,114],{},"Quieres “no volver a actualizar nunca”: ",[26,22111,21913],{},[51,22113,22114,22115,114],{},"Quieres “actualizar solo si cambian X dependencias”: ",[26,22116,21916],{},[51,22118,22119,22120,114],{},"Quieres “mostrar template sin interpretar”: ",[26,22121,21919],{},[40,22123,200],{"id":199},[202,22125,22127,22128,22130],{"id":22126},"_1-aplicar-v-once-sobre-datos-que-sí-cambian","1) Aplicar ",[26,22129,21913],{}," sobre datos que sí cambian",[31,22132,22133,22134,22136],{},"Si la fuente cambia pero el nodo tiene ",[26,22135,21913],{},", la UI quedará desfasada.",[31,22138,22139,22142,22143,22145],{},[82,22140,22141],{},"Solución:"," limita ",[26,22144,21913],{}," a contenido estrictamente inmutable.",[202,22147,22149,22150],{"id":22148},"_2-definir-mal-dependencias-en-v-memo","2) Definir mal dependencias en ",[26,22151,21916],{},[31,22153,22154],{},"Si olvidas una dependencia relevante, Vue puede reutilizar un subárbol viejo.\nSi incluyes demasiadas dependencias, pierdes el beneficio.",[31,22156,22157,22159],{},[82,22158,22141],{}," declara solo señales que realmente afectan el HTML renderizado (y asegúrate de incluir todas).",[202,22161,22163,22164,22166],{"id":22162},"_3-esperar-que-v-pre-procese-directivas-o-interpolaciones","3) Esperar que ",[26,22165,21919],{}," procese directivas o interpolaciones",[31,22168,12003,22169,22171],{},[26,22170,21919],{},", Vue no interpreta nada dentro del bloque (ni moustaches, ni directivas anidadas).",[31,22173,22174,17026,22176,22178],{},[82,22175,22141],{},[26,22177,21919],{}," solo para salida literal/documentación.",[202,22180,22182],{"id":22181},"_4-usarlas-sin-validar-impacto","4) Usarlas sin validar impacto",[31,22184,22185],{},"Agregar estas directivas indiscriminadamente puede aumentar complejidad sin mejorar performance real.",[31,22187,22188,22190],{},[82,22189,22141],{}," perfila primero y optimiza donde el costo sea comprobable.",[40,22192,1953],{"id":1952},[202,22194,22196,22197],{"id":22195},"_1-bloque-estático-con-v-once","1) Bloque estático con ",[26,22198,21913],{},[277,22200,22203],{"className":279,"code":22201,"filename":281,"highlights":22202,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst counter = ref(0);\nconst buildVersion = \"2026.02.24\";\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"counter++\">Clicks: {{ counter }}\u003C/button>\n\n \u003Cp v-once>Build: {{ buildVersion }}\u003C/p>\n\u003C/template>\n",[410],[26,22204,22205,22221,22233,22237,22254,22268,22276,22280,22288,22308,22312,22329],{"__ignoreMap":9},[286,22206,22207,22209,22211,22213,22215,22217,22219],{"class":288,"line":289},[286,22208,293],{"class":292},[286,22210,297],{"class":296},[286,22212,301],{"class":300},[286,22214,304],{"class":300},[286,22216,307],{"class":292},[286,22218,311],{"class":310},[286,22220,314],{"class":292},[286,22222,22223,22225,22227,22229,22231],{"class":288,"line":317},[286,22224,321],{"class":320},[286,22226,11013],{"class":292},[286,22228,327],{"class":320},[286,22230,18155],{"class":310},[286,22232,18158],{"class":292},[286,22234,22235],{"class":288,"line":333},[286,22236,336],{"emptyLinePlaceholder":6},[286,22238,22239,22241,22244,22246,22248,22250,22252],{"class":288,"line":339},[286,22240,413],{"class":320},[286,22242,22243],{"class":364}," counter",[286,22245,348],{"class":320},[286,22247,421],{"class":300},[286,22249,456],{"class":292},[286,22251,3549],{"class":364},[286,22253,18284],{"class":292},[286,22255,22256,22258,22261,22263,22266],{"class":288,"line":354},[286,22257,413],{"class":320},[286,22259,22260],{"class":364}," buildVersion",[286,22262,348],{"class":320},[286,22264,22265],{"class":310}," \"2026.02.24\"",[286,22267,18158],{"class":292},[286,22269,22270,22272,22274],{"class":288,"line":368},[286,22271,793],{"class":292},[286,22273,297],{"class":296},[286,22275,314],{"class":292},[286,22277,22278],{"class":288,"line":379},[286,22279,336],{"emptyLinePlaceholder":6},[286,22281,22282,22284,22286],{"class":288,"line":389},[286,22283,293],{"class":292},[286,22285,810],{"class":296},[286,22287,314],{"class":292},[286,22289,22290,22292,22294,22296,22298,22301,22304,22306],{"class":288,"line":399},[286,22291,818],{"class":292},[286,22293,4274],{"class":296},[286,22295,4285],{"class":300},[286,22297,307],{"class":292},[286,22299,22300],{"class":310},"\"counter++\"",[286,22302,22303],{"class":292},">Clicks: {{ counter }}\u003C/",[286,22305,4274],{"class":296},[286,22307,314],{"class":292},[286,22309,22310],{"class":288,"line":405},[286,22311,336],{"emptyLinePlaceholder":6},[286,22313,22315,22317,22319,22322,22325,22327],{"class":22314,"line":410},[288,9405],[286,22316,818],{"class":292},[286,22318,31],{"class":296},[286,22320,22321],{"class":300}," v-once",[286,22323,22324],{"class":292},">Build: {{ buildVersion }}\u003C/",[286,22326,31],{"class":296},[286,22328,314],{"class":292},[286,22330,22331,22333,22335],{"class":288,"line":444},[286,22332,793],{"class":292},[286,22334,810],{"class":296},[286,22336,314],{"class":292},[277,22338,22341],{"className":279,"code":22339,"filename":979,"highlights":22340,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n counter: 0,\n buildVersion: \"2026.02.24\",\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"counter++\">Clicks: {{ counter }}\u003C/button>\n \u003Cp v-once>Build: {{ buildVersion }}\u003C/p>\n\u003C/template>\n",[469],[26,22342,22343,22357,22365,22371,22377,22386,22396,22400,22404,22408,22416,22420,22428,22446,22461],{"__ignoreMap":9},[286,22344,22345,22347,22349,22351,22353,22355],{"class":288,"line":289},[286,22346,293],{"class":292},[286,22348,297],{"class":296},[286,22350,304],{"class":300},[286,22352,307],{"class":292},[286,22354,311],{"class":310},[286,22356,314],{"class":292},[286,22358,22359,22361,22363],{"class":288,"line":317},[286,22360,1065],{"class":320},[286,22362,1068],{"class":320},[286,22364,351],{"class":292},[286,22366,22367,22369],{"class":288,"line":333},[286,22368,1094],{"class":300},[286,22370,481],{"class":292},[286,22372,22373,22375],{"class":288,"line":339},[286,22374,1101],{"class":320},[286,22376,351],{"class":292},[286,22378,22379,22382,22384],{"class":288,"line":354},[286,22380,22381],{"class":292}," counter: ",[286,22383,3549],{"class":364},[286,22385,1085],{"class":292},[286,22387,22388,22391,22394],{"class":288,"line":368},[286,22389,22390],{"class":292}," buildVersion: ",[286,22392,22393],{"class":310},"\"2026.02.24\"",[286,22395,1085],{"class":292},[286,22397,22398],{"class":288,"line":379},[286,22399,18485],{"class":292},[286,22401,22402],{"class":288,"line":389},[286,22403,1139],{"class":292},[286,22405,22406],{"class":288,"line":399},[286,22407,18262],{"class":292},[286,22409,22410,22412,22414],{"class":288,"line":405},[286,22411,793],{"class":292},[286,22413,297],{"class":296},[286,22415,314],{"class":292},[286,22417,22418],{"class":288,"line":410},[286,22419,336],{"emptyLinePlaceholder":6},[286,22421,22422,22424,22426],{"class":288,"line":444},[286,22423,293],{"class":292},[286,22425,810],{"class":296},[286,22427,314],{"class":292},[286,22429,22430,22432,22434,22436,22438,22440,22442,22444],{"class":288,"line":464},[286,22431,818],{"class":292},[286,22433,4274],{"class":296},[286,22435,4285],{"class":300},[286,22437,307],{"class":292},[286,22439,22300],{"class":310},[286,22441,22303],{"class":292},[286,22443,4274],{"class":296},[286,22445,314],{"class":292},[286,22447,22449,22451,22453,22455,22457,22459],{"class":22448,"line":469},[288,9405],[286,22450,818],{"class":292},[286,22452,31],{"class":296},[286,22454,22321],{"class":300},[286,22456,22324],{"class":292},[286,22458,31],{"class":296},[286,22460,314],{"class":292},[286,22462,22463,22465,22467],{"class":288,"line":484},[286,22464,793],{"class":292},[286,22466,810],{"class":296},[286,22468,314],{"class":292},[3118,22470,22471],{},[31,22472,22473,22474,22477,22478,22480],{},"Nota: este ejemplo asume que ",[26,22475,22476],{},"buildVersion"," es inmutable. Si en tu app podría cambiar (p. ej., viene de una llamada async), ",[26,22479,21913],{}," no es lo correcto.",[202,22482,22484,22485],{"id":22483},"_2-segmento-pesado-con-v-memo","2) Segmento pesado con ",[26,22486,21916],{},[277,22488,22491],{"className":279,"code":22489,"filename":281,"highlights":22490,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\ntype UserCard = { id: number; name: string; isOnline: boolean; score: number };\n\nconst selectedId = ref\u003Cnumber | null>(null);\nconst users = ref\u003CUserCard[]>([\n { id: 1, name: \"Ana\", isOnline: true, score: 98 },\n { id: 2, name: \"Luis\", isOnline: false, score: 77 },\n { id: 3, name: \"Marta\", isOnline: true, score: 88 },\n]);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Carticle\n v-for=\"user in users\"\n :key=\"user.id\"\n v-memo=\"[user.id, user.isOnline, selectedId === user.id]\"\n class=\"card\"\n >\n \u003Ch3>{{ user.name }}\u003C/h3>\n \u003Cp>Puntaje: {{ user.score }}\u003C/p>\n \u003Cp>{{ user.isOnline ? \"En línea\" : \"Desconectado\" }}\u003C/p>\n \u003Cbutton @click=\"selectedId = user.id\">Seleccionar\u003C/button>\n \u003C/article>\n\u003C/template>\n",[528],[26,22492,22493,22509,22521,22525,22572,22576,22601,22619,22643,22665,22687,22692,22700,22704,22712,22719,22729,22739,22750,22760,22765,22778,22791,22804,22824,22832],{"__ignoreMap":9},[286,22494,22495,22497,22499,22501,22503,22505,22507],{"class":288,"line":289},[286,22496,293],{"class":292},[286,22498,297],{"class":296},[286,22500,301],{"class":300},[286,22502,304],{"class":300},[286,22504,307],{"class":292},[286,22506,311],{"class":310},[286,22508,314],{"class":292},[286,22510,22511,22513,22515,22517,22519],{"class":288,"line":317},[286,22512,321],{"class":320},[286,22514,11013],{"class":292},[286,22516,327],{"class":320},[286,22518,18155],{"class":310},[286,22520,18158],{"class":292},[286,22522,22523],{"class":288,"line":333},[286,22524,336],{"emptyLinePlaceholder":6},[286,22526,22527,22529,22532,22534,22536,22538,22540,22542,22545,22547,22549,22551,22553,22556,22558,22561,22563,22566,22568,22570],{"class":288,"line":339},[286,22528,342],{"class":320},[286,22530,22531],{"class":300}," UserCard",[286,22533,348],{"class":320},[286,22535,6002],{"class":292},[286,22537,22049],{"class":357},[286,22539,361],{"class":320},[286,22541,2480],{"class":364},[286,22543,22544],{"class":292},"; ",[286,22546,21378],{"class":357},[286,22548,361],{"class":320},[286,22550,21383],{"class":364},[286,22552,22544],{"class":292},[286,22554,22555],{"class":357},"isOnline",[286,22557,361],{"class":320},[286,22559,22560],{"class":364}," boolean",[286,22562,22544],{"class":292},[286,22564,22565],{"class":357},"score",[286,22567,361],{"class":320},[286,22569,2480],{"class":364},[286,22571,19704],{"class":292},[286,22573,22574],{"class":288,"line":354},[286,22575,336],{"emptyLinePlaceholder":6},[286,22577,22578,22580,22583,22585,22587,22589,22591,22593,22595,22597,22599],{"class":288,"line":368},[286,22579,413],{"class":320},[286,22581,22582],{"class":364}," selectedId",[286,22584,348],{"class":320},[286,22586,421],{"class":300},[286,22588,293],{"class":292},[286,22590,7978],{"class":364},[286,22592,429],{"class":320},[286,22594,432],{"class":364},[286,22596,435],{"class":292},[286,22598,438],{"class":364},[286,22600,18284],{"class":292},[286,22602,22603,22605,22607,22609,22611,22613,22616],{"class":288,"line":379},[286,22604,413],{"class":320},[286,22606,11028],{"class":364},[286,22608,348],{"class":320},[286,22610,421],{"class":300},[286,22612,293],{"class":292},[286,22614,22615],{"class":300},"UserCard",[286,22617,22618],{"class":292},"[]>([\n",[286,22620,22621,22623,22625,22628,22630,22633,22635,22638,22641],{"class":288,"line":389},[286,22622,2116],{"class":292},[286,22624,2079],{"class":364},[286,22626,22627],{"class":292},", name: ",[286,22629,17591],{"class":310},[286,22631,22632],{"class":292},", isOnline: ",[286,22634,2156],{"class":364},[286,22636,22637],{"class":292},", score: ",[286,22639,22640],{"class":364},"98",[286,22642,2139],{"class":292},[286,22644,22645,22647,22649,22651,22654,22656,22658,22660,22663],{"class":288,"line":399},[286,22646,2116],{"class":292},[286,22648,2146],{"class":364},[286,22650,22627],{"class":292},[286,22652,22653],{"class":310},"\"Luis\"",[286,22655,22632],{"class":292},[286,22657,2130],{"class":364},[286,22659,22637],{"class":292},[286,22661,22662],{"class":364},"77",[286,22664,2139],{"class":292},[286,22666,22667,22669,22671,22673,22676,22678,22680,22682,22685],{"class":288,"line":405},[286,22668,2116],{"class":292},[286,22670,2170],{"class":364},[286,22672,22627],{"class":292},[286,22674,22675],{"class":310},"\"Marta\"",[286,22677,22632],{"class":292},[286,22679,2156],{"class":364},[286,22681,22637],{"class":292},[286,22683,22684],{"class":364},"88",[286,22686,2139],{"class":292},[286,22688,22689],{"class":288,"line":410},[286,22690,22691],{"class":292},"]);\n",[286,22693,22694,22696,22698],{"class":288,"line":444},[286,22695,793],{"class":292},[286,22697,297],{"class":296},[286,22699,314],{"class":292},[286,22701,22702],{"class":288,"line":464},[286,22703,336],{"emptyLinePlaceholder":6},[286,22705,22706,22708,22710],{"class":288,"line":469},[286,22707,293],{"class":292},[286,22709,810],{"class":296},[286,22711,314],{"class":292},[286,22713,22714,22716],{"class":288,"line":484},[286,22715,818],{"class":292},[286,22717,22718],{"class":296},"article\n",[286,22720,22721,22724,22726],{"class":288,"line":508},[286,22722,22723],{"class":300}," v-for",[286,22725,307],{"class":292},[286,22727,22728],{"class":310},"\"user in users\"\n",[286,22730,22731,22734,22736],{"class":288,"line":513},[286,22732,22733],{"class":300}," :key",[286,22735,307],{"class":292},[286,22737,22738],{"class":310},"\"user.id\"\n",[286,22740,22742,22745,22747],{"class":22741,"line":528},[288,9405],[286,22743,22744],{"class":300}," v-memo",[286,22746,307],{"class":292},[286,22748,22749],{"class":310},"\"[user.id, user.isOnline, selectedId === user.id]\"\n",[286,22751,22752,22755,22757],{"class":288,"line":547},[286,22753,22754],{"class":300}," class",[286,22756,307],{"class":292},[286,22758,22759],{"class":310},"\"card\"\n",[286,22761,22762],{"class":288,"line":553},[286,22763,22764],{"class":292}," >\n",[286,22766,22767,22769,22771,22774,22776],{"class":288,"line":558},[286,22768,837],{"class":292},[286,22770,202],{"class":296},[286,22772,22773],{"class":292},">{{ user.name }}\u003C/",[286,22775,202],{"class":296},[286,22777,314],{"class":292},[286,22779,22780,22782,22784,22787,22789],{"class":288,"line":586},[286,22781,837],{"class":292},[286,22783,31],{"class":296},[286,22785,22786],{"class":292},">Puntaje: {{ user.score }}\u003C/",[286,22788,31],{"class":296},[286,22790,314],{"class":292},[286,22792,22793,22795,22797,22800,22802],{"class":288,"line":591},[286,22794,837],{"class":292},[286,22796,31],{"class":296},[286,22798,22799],{"class":292},">{{ user.isOnline ? \"En línea\" : \"Desconectado\" }}\u003C/",[286,22801,31],{"class":296},[286,22803,314],{"class":292},[286,22805,22806,22808,22810,22812,22814,22817,22820,22822],{"class":288,"line":596},[286,22807,837],{"class":292},[286,22809,4274],{"class":296},[286,22811,4285],{"class":300},[286,22813,307],{"class":292},[286,22815,22816],{"class":310},"\"selectedId = user.id\"",[286,22818,22819],{"class":292},">Seleccionar\u003C/",[286,22821,4274],{"class":296},[286,22823,314],{"class":292},[286,22825,22826,22828,22830],{"class":288,"line":614},[286,22827,962],{"class":292},[286,22829,821],{"class":296},[286,22831,314],{"class":292},[286,22833,22834,22836,22838],{"class":288,"line":622},[286,22835,793],{"class":292},[286,22837,810],{"class":296},[286,22839,314],{"class":292},[277,22841,22844],{"className":279,"code":22842,"filename":979,"highlights":22843,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n selectedId: null as number | null,\n users: [\n { id: 1, name: \"Ana\", isOnline: true, score: 98 },\n { id: 2, name: \"Luis\", isOnline: false, score: 77 },\n { id: 3, name: \"Marta\", isOnline: true, score: 88 },\n ],\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Carticle\n v-for=\"user in users\"\n :key=\"user.id\"\n v-memo=\"[user.id, user.isOnline, selectedId === user.id]\"\n class=\"card\"\n >\n \u003Ch3>{{ user.name }}\u003C/h3>\n \u003Cp>Puntaje: {{ user.score }}\u003C/p>\n \u003Cp>{{ user.isOnline ? \"En línea\" : \"Desconectado\" }}\u003C/p>\n \u003Cbutton @click=\"selectedId = user.id\">Seleccionar\u003C/button>\n \u003C/article>\n\u003C/template>\n",[553],[26,22845,22846,22860,22868,22874,22880,22897,22902,22922,22942,22962,22966,22970,22974,22978,22986,22990,22998,23004,23012,23020,23029,23037,23041,23053,23065,23077,23095,23103],{"__ignoreMap":9},[286,22847,22848,22850,22852,22854,22856,22858],{"class":288,"line":289},[286,22849,293],{"class":292},[286,22851,297],{"class":296},[286,22853,304],{"class":300},[286,22855,307],{"class":292},[286,22857,311],{"class":310},[286,22859,314],{"class":292},[286,22861,22862,22864,22866],{"class":288,"line":317},[286,22863,1065],{"class":320},[286,22865,1068],{"class":320},[286,22867,351],{"class":292},[286,22869,22870,22872],{"class":288,"line":333},[286,22871,1094],{"class":300},[286,22873,481],{"class":292},[286,22875,22876,22878],{"class":288,"line":339},[286,22877,1101],{"class":320},[286,22879,351],{"class":292},[286,22881,22882,22885,22887,22889,22891,22893,22895],{"class":288,"line":354},[286,22883,22884],{"class":292}," selectedId: ",[286,22886,438],{"class":364},[286,22888,1113],{"class":320},[286,22890,2480],{"class":364},[286,22892,429],{"class":320},[286,22894,432],{"class":364},[286,22896,1085],{"class":292},[286,22898,22899],{"class":288,"line":368},[286,22900,22901],{"class":292}," users: [\n",[286,22903,22904,22906,22908,22910,22912,22914,22916,22918,22920],{"class":288,"line":379},[286,22905,2671],{"class":292},[286,22907,2079],{"class":364},[286,22909,22627],{"class":292},[286,22911,17591],{"class":310},[286,22913,22632],{"class":292},[286,22915,2156],{"class":364},[286,22917,22637],{"class":292},[286,22919,22640],{"class":364},[286,22921,2139],{"class":292},[286,22923,22924,22926,22928,22930,22932,22934,22936,22938,22940],{"class":288,"line":389},[286,22925,2671],{"class":292},[286,22927,2146],{"class":364},[286,22929,22627],{"class":292},[286,22931,22653],{"class":310},[286,22933,22632],{"class":292},[286,22935,2130],{"class":364},[286,22937,22637],{"class":292},[286,22939,22662],{"class":364},[286,22941,2139],{"class":292},[286,22943,22944,22946,22948,22950,22952,22954,22956,22958,22960],{"class":288,"line":399},[286,22945,2671],{"class":292},[286,22947,2170],{"class":364},[286,22949,22627],{"class":292},[286,22951,22675],{"class":310},[286,22953,22632],{"class":292},[286,22955,2156],{"class":364},[286,22957,22637],{"class":292},[286,22959,22684],{"class":364},[286,22961,2139],{"class":292},[286,22963,22964],{"class":288,"line":405},[286,22965,10181],{"class":292},[286,22967,22968],{"class":288,"line":410},[286,22969,18485],{"class":292},[286,22971,22972],{"class":288,"line":444},[286,22973,1139],{"class":292},[286,22975,22976],{"class":288,"line":464},[286,22977,18262],{"class":292},[286,22979,22980,22982,22984],{"class":288,"line":469},[286,22981,793],{"class":292},[286,22983,297],{"class":296},[286,22985,314],{"class":292},[286,22987,22988],{"class":288,"line":484},[286,22989,336],{"emptyLinePlaceholder":6},[286,22991,22992,22994,22996],{"class":288,"line":508},[286,22993,293],{"class":292},[286,22995,810],{"class":296},[286,22997,314],{"class":292},[286,22999,23000,23002],{"class":288,"line":513},[286,23001,818],{"class":292},[286,23003,22718],{"class":296},[286,23005,23006,23008,23010],{"class":288,"line":528},[286,23007,22723],{"class":300},[286,23009,307],{"class":292},[286,23011,22728],{"class":310},[286,23013,23014,23016,23018],{"class":288,"line":547},[286,23015,22733],{"class":300},[286,23017,307],{"class":292},[286,23019,22738],{"class":310},[286,23021,23023,23025,23027],{"class":23022,"line":553},[288,9405],[286,23024,22744],{"class":300},[286,23026,307],{"class":292},[286,23028,22749],{"class":310},[286,23030,23031,23033,23035],{"class":288,"line":558},[286,23032,22754],{"class":300},[286,23034,307],{"class":292},[286,23036,22759],{"class":310},[286,23038,23039],{"class":288,"line":586},[286,23040,22764],{"class":292},[286,23042,23043,23045,23047,23049,23051],{"class":288,"line":591},[286,23044,837],{"class":292},[286,23046,202],{"class":296},[286,23048,22773],{"class":292},[286,23050,202],{"class":296},[286,23052,314],{"class":292},[286,23054,23055,23057,23059,23061,23063],{"class":288,"line":596},[286,23056,837],{"class":292},[286,23058,31],{"class":296},[286,23060,22786],{"class":292},[286,23062,31],{"class":296},[286,23064,314],{"class":292},[286,23066,23067,23069,23071,23073,23075],{"class":288,"line":614},[286,23068,837],{"class":292},[286,23070,31],{"class":296},[286,23072,22799],{"class":292},[286,23074,31],{"class":296},[286,23076,314],{"class":292},[286,23078,23079,23081,23083,23085,23087,23089,23091,23093],{"class":288,"line":622},[286,23080,837],{"class":292},[286,23082,4274],{"class":296},[286,23084,4285],{"class":300},[286,23086,307],{"class":292},[286,23088,22816],{"class":310},[286,23090,22819],{"class":292},[286,23092,4274],{"class":296},[286,23094,314],{"class":292},[286,23096,23097,23099,23101],{"class":288,"line":633},[286,23098,962],{"class":292},[286,23100,821],{"class":296},[286,23102,314],{"class":292},[286,23104,23105,23107,23109],{"class":288,"line":645},[286,23106,793],{"class":292},[286,23108,810],{"class":296},[286,23110,314],{"class":292},[3118,23112,23113],{},[31,23114,23115,23116,23118,23119,23122,23123,23126],{},"Importante: el arreglo de ",[26,23117,21916],{}," debe incluir ",[82,23120,23121],{},"todo"," lo que afecte el HTML. Si ",[26,23124,23125],{},"user.score"," puede cambiar, también debería estar en dependencias (si no, el DOM podría quedarse con un puntaje viejo).",[202,23128,23130,23131],{"id":23129},"_3-bloque-literal-con-v-pre","3) Bloque literal con ",[26,23132,21919],{},[277,23134,23137],{"className":279,"code":23135,"filename":281,"highlights":23136,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nconst message = \"No debe renderizarse dentro del bloque v-pre\";\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp>{{ message }}\u003C/p>\n\n \u003Cpre v-pre>{{ message }} + {{ 2 + 2 }}\u003C/pre>\n\u003C/template>\n",[389],[26,23138,23139,23155,23169,23177,23181,23189,23202,23206,23223],{"__ignoreMap":9},[286,23140,23141,23143,23145,23147,23149,23151,23153],{"class":288,"line":289},[286,23142,293],{"class":292},[286,23144,297],{"class":296},[286,23146,301],{"class":300},[286,23148,304],{"class":300},[286,23150,307],{"class":292},[286,23152,311],{"class":310},[286,23154,314],{"class":292},[286,23156,23157,23159,23162,23164,23167],{"class":288,"line":317},[286,23158,413],{"class":320},[286,23160,23161],{"class":364}," message",[286,23163,348],{"class":320},[286,23165,23166],{"class":310}," \"No debe renderizarse dentro del bloque v-pre\"",[286,23168,18158],{"class":292},[286,23170,23171,23173,23175],{"class":288,"line":333},[286,23172,793],{"class":292},[286,23174,297],{"class":296},[286,23176,314],{"class":292},[286,23178,23179],{"class":288,"line":339},[286,23180,336],{"emptyLinePlaceholder":6},[286,23182,23183,23185,23187],{"class":288,"line":354},[286,23184,293],{"class":292},[286,23186,810],{"class":296},[286,23188,314],{"class":292},[286,23190,23191,23193,23195,23198,23200],{"class":288,"line":368},[286,23192,818],{"class":292},[286,23194,31],{"class":296},[286,23196,23197],{"class":292},">{{ message }}\u003C/",[286,23199,31],{"class":296},[286,23201,314],{"class":292},[286,23203,23204],{"class":288,"line":379},[286,23205,336],{"emptyLinePlaceholder":6},[286,23207,23209,23211,23213,23216,23219,23221],{"class":23208,"line":389},[288,9405],[286,23210,818],{"class":292},[286,23212,277],{"class":296},[286,23214,23215],{"class":300}," v-pre",[286,23217,23218],{"class":292},">{{ message }} + {{ 2 + 2 }}\u003C/",[286,23220,277],{"class":296},[286,23222,314],{"class":292},[286,23224,23225,23227,23229],{"class":288,"line":399},[286,23226,793],{"class":292},[286,23228,810],{"class":296},[286,23230,314],{"class":292},[277,23232,23235],{"className":279,"code":23233,"filename":979,"highlights":23234,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n message: \"No debe renderizarse dentro del bloque v-pre\",\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp>{{ message }}\u003C/p>\n \u003Cpre v-pre>{{ message }} + {{ 2 + 2 }}\u003C/pre>\n\u003C/template>\n",[464],[26,23236,23237,23251,23259,23265,23271,23281,23285,23289,23293,23301,23305,23313,23325,23340],{"__ignoreMap":9},[286,23238,23239,23241,23243,23245,23247,23249],{"class":288,"line":289},[286,23240,293],{"class":292},[286,23242,297],{"class":296},[286,23244,304],{"class":300},[286,23246,307],{"class":292},[286,23248,311],{"class":310},[286,23250,314],{"class":292},[286,23252,23253,23255,23257],{"class":288,"line":317},[286,23254,1065],{"class":320},[286,23256,1068],{"class":320},[286,23258,351],{"class":292},[286,23260,23261,23263],{"class":288,"line":333},[286,23262,1094],{"class":300},[286,23264,481],{"class":292},[286,23266,23267,23269],{"class":288,"line":339},[286,23268,1101],{"class":320},[286,23270,351],{"class":292},[286,23272,23273,23276,23279],{"class":288,"line":354},[286,23274,23275],{"class":292}," message: ",[286,23277,23278],{"class":310},"\"No debe renderizarse dentro del bloque v-pre\"",[286,23280,1085],{"class":292},[286,23282,23283],{"class":288,"line":368},[286,23284,18485],{"class":292},[286,23286,23287],{"class":288,"line":379},[286,23288,1139],{"class":292},[286,23290,23291],{"class":288,"line":389},[286,23292,18262],{"class":292},[286,23294,23295,23297,23299],{"class":288,"line":399},[286,23296,793],{"class":292},[286,23298,297],{"class":296},[286,23300,314],{"class":292},[286,23302,23303],{"class":288,"line":405},[286,23304,336],{"emptyLinePlaceholder":6},[286,23306,23307,23309,23311],{"class":288,"line":410},[286,23308,293],{"class":292},[286,23310,810],{"class":296},[286,23312,314],{"class":292},[286,23314,23315,23317,23319,23321,23323],{"class":288,"line":444},[286,23316,818],{"class":292},[286,23318,31],{"class":296},[286,23320,23197],{"class":292},[286,23322,31],{"class":296},[286,23324,314],{"class":292},[286,23326,23328,23330,23332,23334,23336,23338],{"class":23327,"line":464},[288,9405],[286,23329,818],{"class":292},[286,23331,277],{"class":296},[286,23333,23215],{"class":300},[286,23335,23218],{"class":292},[286,23337,277],{"class":296},[286,23339,314],{"class":292},[286,23341,23342,23344,23346],{"class":288,"line":469},[286,23343,793],{"class":292},[286,23345,810],{"class":296},[286,23347,314],{"class":292},[202,23349,23351],{"id":23350},"_4-ejemplo-completo","4) Ejemplo completo",[31,23353,23354,23355,23357,23358,23360,23361,23363],{},"Componente de lista con cabecera estática (",[26,23356,21913],{},"), tarjetas memoizadas (",[26,23359,21916],{},") y snippet literal (",[26,23362,21919],{},"):",[277,23365,23367],{"className":279,"code":23366,"filename":281,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\ntype Task = { id: number; title: string; done: boolean; owner: string };\n\nconst selectedOwner = ref\u003C\"all\" | string>(\"all\");\nconst tasks = ref\u003CTask[]>([\n { id: 1, title: \"Configurar CI\", done: true, owner: \"Ana\" },\n { id: 2, title: \"Refactor store\", done: false, owner: \"Luis\" },\n { id: 3, title: \"Actualizar docs\", done: false, owner: \"Ana\" },\n]);\n\nconst owners = computed(() => [\"all\", ...new Set(tasks.value.map((t) => t.owner))]);\nconst visibleTasks = computed(() =>\n selectedOwner.value === \"all\"\n ? tasks.value\n : tasks.value.filter((t) => t.owner === selectedOwner.value)\n);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cheader v-once>\n \u003Ch2>Panel de tareas del sprint\u003C/h2>\n \u003Cp>Contenido institucional estático\u003C/p>\n \u003C/header>\n\n \u003Clabel>\n Filtrar por owner\n \u003Cselect v-model=\"selectedOwner\">\n \u003Coption v-for=\"owner in owners\" :key=\"owner\" :value=\"owner\">{{ owner }}\u003C/option>\n \u003C/select>\n \u003C/label>\n\n \u003Csection\n v-for=\"task in visibleTasks\"\n :key=\"task.id\"\n v-memo=\"[task.id, task.title, task.owner, task.done, selectedOwner]\"\n class=\"task-card\"\n >\n \u003Ch3>{{ task.title }}\u003C/h3>\n \u003Cp>Owner: {{ task.owner }}\u003C/p>\n \u003Cp>Estado: {{ task.done ? \"Completada\" : \"Pendiente\" }}\u003C/p>\n \u003C/section>\n\n \u003Caside>\n \u003Ch4>Snippet para docs\u003C/h4>\n \u003Ccode v-pre>{{ title }} - {{ owner }}\u003C/code>\n \u003C/aside>\n\u003C/template>\n",[26,23368,23369,23385,23398,23402,23447,23451,23477,23493,23514,23535,23556,23560,23564,23608,23622,23632,23639,23664,23668,23676,23680,23688,23698,23711,23724,23732,23736,23744,23749,23766,23801,23809,23817,23821,23828,23836,23844,23853,23862,23866,23879,23892,23905,23913,23917,23925,23939,23954,23962],{"__ignoreMap":9},[286,23370,23371,23373,23375,23377,23379,23381,23383],{"class":288,"line":289},[286,23372,293],{"class":292},[286,23374,297],{"class":296},[286,23376,301],{"class":300},[286,23378,304],{"class":300},[286,23380,307],{"class":292},[286,23382,311],{"class":310},[286,23384,314],{"class":292},[286,23386,23387,23389,23392,23394,23396],{"class":288,"line":317},[286,23388,321],{"class":320},[286,23390,23391],{"class":292}," { computed, ref } ",[286,23393,327],{"class":320},[286,23395,18155],{"class":310},[286,23397,18158],{"class":292},[286,23399,23400],{"class":288,"line":333},[286,23401,336],{"emptyLinePlaceholder":6},[286,23403,23404,23406,23408,23410,23412,23414,23416,23418,23420,23423,23425,23427,23429,23432,23434,23436,23438,23441,23443,23445],{"class":288,"line":339},[286,23405,342],{"class":320},[286,23407,5637],{"class":300},[286,23409,348],{"class":320},[286,23411,6002],{"class":292},[286,23413,22049],{"class":357},[286,23415,361],{"class":320},[286,23417,2480],{"class":364},[286,23419,22544],{"class":292},[286,23421,23422],{"class":357},"title",[286,23424,361],{"class":320},[286,23426,21383],{"class":364},[286,23428,22544],{"class":292},[286,23430,23431],{"class":357},"done",[286,23433,361],{"class":320},[286,23435,22560],{"class":364},[286,23437,22544],{"class":292},[286,23439,23440],{"class":357},"owner",[286,23442,361],{"class":320},[286,23444,21383],{"class":364},[286,23446,19704],{"class":292},[286,23448,23449],{"class":288,"line":354},[286,23450,336],{"emptyLinePlaceholder":6},[286,23452,23453,23455,23458,23460,23462,23464,23467,23469,23471,23473,23475],{"class":288,"line":368},[286,23454,413],{"class":320},[286,23456,23457],{"class":364}," selectedOwner",[286,23459,348],{"class":320},[286,23461,421],{"class":300},[286,23463,293],{"class":292},[286,23465,23466],{"class":310},"\"all\"",[286,23468,429],{"class":320},[286,23470,21383],{"class":364},[286,23472,435],{"class":292},[286,23474,23466],{"class":310},[286,23476,18284],{"class":292},[286,23478,23479,23481,23483,23485,23487,23489,23491],{"class":288,"line":379},[286,23480,413],{"class":320},[286,23482,2104],{"class":364},[286,23484,348],{"class":320},[286,23486,421],{"class":300},[286,23488,293],{"class":292},[286,23490,5691],{"class":300},[286,23492,22618],{"class":292},[286,23494,23495,23497,23499,23501,23504,23506,23508,23510,23512],{"class":288,"line":389},[286,23496,2116],{"class":292},[286,23498,2079],{"class":364},[286,23500,2121],{"class":292},[286,23502,23503],{"class":310},"\"Configurar CI\"",[286,23505,2127],{"class":292},[286,23507,2156],{"class":364},[286,23509,2133],{"class":292},[286,23511,17591],{"class":310},[286,23513,2139],{"class":292},[286,23515,23516,23518,23520,23522,23525,23527,23529,23531,23533],{"class":288,"line":399},[286,23517,2116],{"class":292},[286,23519,2146],{"class":364},[286,23521,2121],{"class":292},[286,23523,23524],{"class":310},"\"Refactor store\"",[286,23526,2127],{"class":292},[286,23528,2130],{"class":364},[286,23530,2133],{"class":292},[286,23532,22653],{"class":310},[286,23534,2139],{"class":292},[286,23536,23537,23539,23541,23543,23546,23548,23550,23552,23554],{"class":288,"line":405},[286,23538,2116],{"class":292},[286,23540,2170],{"class":364},[286,23542,2121],{"class":292},[286,23544,23545],{"class":310},"\"Actualizar docs\"",[286,23547,2127],{"class":292},[286,23549,2130],{"class":364},[286,23551,2133],{"class":292},[286,23553,17591],{"class":310},[286,23555,2139],{"class":292},[286,23557,23558],{"class":288,"line":410},[286,23559,22691],{"class":292},[286,23561,23562],{"class":288,"line":444},[286,23563,336],{"emptyLinePlaceholder":6},[286,23565,23566,23568,23571,23573,23575,23577,23579,23582,23584,23586,23589,23591,23594,23596,23598,23601,23603,23605],{"class":288,"line":464},[286,23567,413],{"class":320},[286,23569,23570],{"class":364}," owners",[286,23572,348],{"class":320},[286,23574,2207],{"class":300},[286,23576,2210],{"class":292},[286,23578,609],{"class":320},[286,23580,23581],{"class":292}," [",[286,23583,23466],{"class":310},[286,23585,235],{"class":292},[286,23587,23588],{"class":320},"...new",[286,23590,16427],{"class":300},[286,23592,23593],{"class":292},"(tasks.value.",[286,23595,3851],{"class":300},[286,23597,2341],{"class":292},[286,23599,23600],{"class":357},"t",[286,23602,2347],{"class":292},[286,23604,609],{"class":320},[286,23606,23607],{"class":292}," t.owner))]);\n",[286,23609,23610,23612,23614,23616,23618,23620],{"class":288,"line":469},[286,23611,413],{"class":320},[286,23613,2202],{"class":364},[286,23615,348],{"class":320},[286,23617,2207],{"class":300},[286,23619,2210],{"class":292},[286,23621,3723],{"class":320},[286,23623,23624,23627,23629],{"class":288,"line":484},[286,23625,23626],{"class":292}," selectedOwner.value ",[286,23628,2510],{"class":320},[286,23630,23631],{"class":310}," \"all\"\n",[286,23633,23634,23637],{"class":288,"line":508},[286,23635,23636],{"class":320}," ?",[286,23638,5926],{"class":292},[286,23640,23641,23644,23646,23648,23650,23652,23654,23656,23659,23661],{"class":288,"line":513},[286,23642,23643],{"class":320}," :",[286,23645,2222],{"class":292},[286,23647,2225],{"class":300},[286,23649,2341],{"class":292},[286,23651,23600],{"class":357},[286,23653,2347],{"class":292},[286,23655,609],{"class":320},[286,23657,23658],{"class":292}," t.owner ",[286,23660,2510],{"class":320},[286,23662,23663],{"class":292}," selectedOwner.value)\n",[286,23665,23666],{"class":288,"line":528},[286,23667,18284],{"class":292},[286,23669,23670,23672,23674],{"class":288,"line":547},[286,23671,793],{"class":292},[286,23673,297],{"class":296},[286,23675,314],{"class":292},[286,23677,23678],{"class":288,"line":553},[286,23679,336],{"emptyLinePlaceholder":6},[286,23681,23682,23684,23686],{"class":288,"line":558},[286,23683,293],{"class":292},[286,23685,810],{"class":296},[286,23687,314],{"class":292},[286,23689,23690,23692,23694,23696],{"class":288,"line":586},[286,23691,818],{"class":292},[286,23693,4145],{"class":296},[286,23695,22321],{"class":300},[286,23697,314],{"class":292},[286,23699,23700,23702,23704,23707,23709],{"class":288,"line":591},[286,23701,837],{"class":292},[286,23703,40],{"class":296},[286,23705,23706],{"class":292},">Panel de tareas del sprint\u003C/",[286,23708,40],{"class":296},[286,23710,314],{"class":292},[286,23712,23713,23715,23717,23720,23722],{"class":288,"line":596},[286,23714,837],{"class":292},[286,23716,31],{"class":296},[286,23718,23719],{"class":292},">Contenido institucional estático\u003C/",[286,23721,31],{"class":296},[286,23723,314],{"class":292},[286,23725,23726,23728,23730],{"class":288,"line":614},[286,23727,962],{"class":292},[286,23729,4145],{"class":296},[286,23731,314],{"class":292},[286,23733,23734],{"class":288,"line":622},[286,23735,336],{"emptyLinePlaceholder":6},[286,23737,23738,23740,23742],{"class":288,"line":633},[286,23739,818],{"class":292},[286,23741,3882],{"class":296},[286,23743,314],{"class":292},[286,23745,23746],{"class":288,"line":645},[286,23747,23748],{"class":292}," Filtrar por owner\n",[286,23750,23751,23753,23756,23759,23761,23764],{"class":288,"line":654},[286,23752,837],{"class":292},[286,23754,23755],{"class":296},"select",[286,23757,23758],{"class":300}," v-model",[286,23760,307],{"class":292},[286,23762,23763],{"class":310},"\"selectedOwner\"",[286,23765,314],{"class":292},[286,23767,23768,23770,23773,23775,23777,23780,23782,23784,23787,23790,23792,23794,23797,23799],{"class":288,"line":676},[286,23769,887],{"class":292},[286,23771,23772],{"class":296},"option",[286,23774,12792],{"class":300},[286,23776,307],{"class":292},[286,23778,23779],{"class":310},"\"owner in owners\"",[286,23781,4324],{"class":300},[286,23783,307],{"class":292},[286,23785,23786],{"class":310},"\"owner\"",[286,23788,23789],{"class":300}," :value",[286,23791,307],{"class":292},[286,23793,23786],{"class":310},[286,23795,23796],{"class":292},">{{ owner }}\u003C/",[286,23798,23772],{"class":296},[286,23800,314],{"class":292},[286,23802,23803,23805,23807],{"class":288,"line":681},[286,23804,930],{"class":292},[286,23806,23755],{"class":296},[286,23808,314],{"class":292},[286,23810,23811,23813,23815],{"class":288,"line":687},[286,23812,962],{"class":292},[286,23814,3882],{"class":296},[286,23816,314],{"class":292},[286,23818,23819],{"class":288,"line":692},[286,23820,336],{"emptyLinePlaceholder":6},[286,23822,23823,23825],{"class":288,"line":708},[286,23824,818],{"class":292},[286,23826,23827],{"class":296},"section\n",[286,23829,23830,23832,23834],{"class":288,"line":725},[286,23831,22723],{"class":300},[286,23833,307],{"class":292},[286,23835,6523],{"class":310},[286,23837,23838,23840,23842],{"class":288,"line":730},[286,23839,22733],{"class":300},[286,23841,307],{"class":292},[286,23843,6533],{"class":310},[286,23845,23846,23848,23850],{"class":288,"line":737},[286,23847,22744],{"class":300},[286,23849,307],{"class":292},[286,23851,23852],{"class":310},"\"[task.id, task.title, task.owner, task.done, selectedOwner]\"\n",[286,23854,23855,23857,23859],{"class":288,"line":746},[286,23856,22754],{"class":300},[286,23858,307],{"class":292},[286,23860,23861],{"class":310},"\"task-card\"\n",[286,23863,23864],{"class":288,"line":755},[286,23865,22764],{"class":292},[286,23867,23868,23870,23872,23875,23877],{"class":288,"line":762},[286,23869,837],{"class":292},[286,23871,202],{"class":296},[286,23873,23874],{"class":292},">{{ task.title }}\u003C/",[286,23876,202],{"class":296},[286,23878,314],{"class":292},[286,23880,23881,23883,23885,23888,23890],{"class":288,"line":780},[286,23882,837],{"class":292},[286,23884,31],{"class":296},[286,23886,23887],{"class":292},">Owner: {{ task.owner }}\u003C/",[286,23889,31],{"class":296},[286,23891,314],{"class":292},[286,23893,23894,23896,23898,23901,23903],{"class":288,"line":785},[286,23895,837],{"class":292},[286,23897,31],{"class":296},[286,23899,23900],{"class":292},">Estado: {{ task.done ? \"Completada\" : \"Pendiente\" }}\u003C/",[286,23902,31],{"class":296},[286,23904,314],{"class":292},[286,23906,23907,23909,23911],{"class":288,"line":790},[286,23908,962],{"class":292},[286,23910,4128],{"class":296},[286,23912,314],{"class":292},[286,23914,23915],{"class":288,"line":800},[286,23916,336],{"emptyLinePlaceholder":6},[286,23918,23919,23921,23923],{"class":288,"line":805},[286,23920,818],{"class":292},[286,23922,21488],{"class":296},[286,23924,314],{"class":292},[286,23926,23927,23929,23932,23935,23937],{"class":288,"line":815},[286,23928,837],{"class":292},[286,23930,23931],{"class":296},"h4",[286,23933,23934],{"class":292},">Snippet para docs\u003C/",[286,23936,23931],{"class":296},[286,23938,314],{"class":292},[286,23940,23941,23943,23945,23947,23950,23952],{"class":288,"line":834},[286,23942,837],{"class":292},[286,23944,26],{"class":296},[286,23946,23215],{"class":300},[286,23948,23949],{"class":292},">{{ title }} - {{ owner }}\u003C/",[286,23951,26],{"class":296},[286,23953,314],{"class":292},[286,23955,23956,23958,23960],{"class":288,"line":857},[286,23957,962],{"class":292},[286,23959,21488],{"class":296},[286,23961,314],{"class":292},[286,23963,23964,23966,23968],{"class":288,"line":862},[286,23965,793],{"class":292},[286,23967,810],{"class":296},[286,23969,314],{"class":292},[277,23971,23973],{"className":279,"code":23972,"filename":979,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n selectedOwner: \"all\",\n tasks: [\n { id: 1, title: \"Configurar CI\", done: true, owner: \"Ana\" },\n { id: 2, title: \"Refactor store\", done: false, owner: \"Luis\" },\n { id: 3, title: \"Actualizar docs\", done: false, owner: \"Ana\" },\n ],\n };\n },\n computed: {\n owners() {\n return [\"all\", ...new Set(this.tasks.map((t) => t.owner))];\n },\n visibleTasks() {\n return this.selectedOwner === \"all\"\n ? this.tasks\n : this.tasks.filter((t) => t.owner === this.selectedOwner);\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cheader v-once>\n \u003Ch2>Panel de tareas del sprint\u003C/h2>\n \u003Cp>Contenido institucional estático\u003C/p>\n \u003C/header>\n\n \u003Clabel>\n Filtrar por owner\n \u003Cselect v-model=\"selectedOwner\">\n \u003Coption v-for=\"owner in owners\" :key=\"owner\" :value=\"owner\">{{ owner }}\u003C/option>\n \u003C/select>\n \u003C/label>\n\n \u003Csection\n v-for=\"task in visibleTasks\"\n :key=\"task.id\"\n v-memo=\"[task.id, task.title, task.owner, task.done, selectedOwner]\"\n class=\"task-card\"\n >\n \u003Ch3>{{ task.title }}\u003C/h3>\n \u003Cp>Owner: {{ task.owner }}\u003C/p>\n \u003Cp>Estado: {{ task.done ? \"Completada\" : \"Pendiente\" }}\u003C/p>\n \u003C/section>\n\n \u003Caside>\n \u003Ch4>Snippet para docs\u003C/h4>\n \u003Ccode v-pre>{{ title }} - {{ owner }}\u003C/code>\n \u003C/aside>\n\u003C/template>\n",[26,23974,23975,23989,23997,24003,24009,24018,24022,24042,24062,24082,24086,24090,24094,24098,24105,24138,24142,24148,24161,24170,24198,24202,24206,24210,24218,24222,24230,24240,24252,24264,24272,24276,24284,24288,24302,24332,24340,24348,24352,24358,24366,24374,24382,24390,24394,24406,24418,24430,24438,24442,24450,24462,24476,24484],{"__ignoreMap":9},[286,23976,23977,23979,23981,23983,23985,23987],{"class":288,"line":289},[286,23978,293],{"class":292},[286,23980,297],{"class":296},[286,23982,304],{"class":300},[286,23984,307],{"class":292},[286,23986,311],{"class":310},[286,23988,314],{"class":292},[286,23990,23991,23993,23995],{"class":288,"line":317},[286,23992,1065],{"class":320},[286,23994,1068],{"class":320},[286,23996,351],{"class":292},[286,23998,23999,24001],{"class":288,"line":333},[286,24000,1094],{"class":300},[286,24002,481],{"class":292},[286,24004,24005,24007],{"class":288,"line":339},[286,24006,1101],{"class":320},[286,24008,351],{"class":292},[286,24010,24011,24014,24016],{"class":288,"line":354},[286,24012,24013],{"class":292}," selectedOwner: ",[286,24015,23466],{"class":310},[286,24017,1085],{"class":292},[286,24019,24020],{"class":288,"line":368},[286,24021,2666],{"class":292},[286,24023,24024,24026,24028,24030,24032,24034,24036,24038,24040],{"class":288,"line":379},[286,24025,2671],{"class":292},[286,24027,2079],{"class":364},[286,24029,2121],{"class":292},[286,24031,23503],{"class":310},[286,24033,2127],{"class":292},[286,24035,2156],{"class":364},[286,24037,2133],{"class":292},[286,24039,17591],{"class":310},[286,24041,2139],{"class":292},[286,24043,24044,24046,24048,24050,24052,24054,24056,24058,24060],{"class":288,"line":389},[286,24045,2671],{"class":292},[286,24047,2146],{"class":364},[286,24049,2121],{"class":292},[286,24051,23524],{"class":310},[286,24053,2127],{"class":292},[286,24055,2130],{"class":364},[286,24057,2133],{"class":292},[286,24059,22653],{"class":310},[286,24061,2139],{"class":292},[286,24063,24064,24066,24068,24070,24072,24074,24076,24078,24080],{"class":288,"line":399},[286,24065,2671],{"class":292},[286,24067,2170],{"class":364},[286,24069,2121],{"class":292},[286,24071,23545],{"class":310},[286,24073,2127],{"class":292},[286,24075,2130],{"class":364},[286,24077,2133],{"class":292},[286,24079,17591],{"class":310},[286,24081,2139],{"class":292},[286,24083,24084],{"class":288,"line":405},[286,24085,10181],{"class":292},[286,24087,24088],{"class":288,"line":410},[286,24089,18485],{"class":292},[286,24091,24092],{"class":288,"line":444},[286,24093,1139],{"class":292},[286,24095,24096],{"class":288,"line":464},[286,24097,2749],{"class":292},[286,24099,24100,24103],{"class":288,"line":469},[286,24101,24102],{"class":300}," owners",[286,24104,481],{"class":292},[286,24106,24107,24109,24111,24113,24115,24117,24119,24121,24123,24125,24127,24129,24131,24133,24135],{"class":288,"line":484},[286,24108,2761],{"class":320},[286,24110,23581],{"class":292},[286,24112,23466],{"class":310},[286,24114,235],{"class":292},[286,24116,23588],{"class":320},[286,24118,16427],{"class":300},[286,24120,456],{"class":292},[286,24122,1349],{"class":364},[286,24124,2766],{"class":292},[286,24126,3851],{"class":300},[286,24128,2341],{"class":292},[286,24130,23600],{"class":357},[286,24132,2347],{"class":292},[286,24134,609],{"class":320},[286,24136,24137],{"class":292}," t.owner))];\n",[286,24139,24140],{"class":288,"line":508},[286,24141,7023],{"class":292},[286,24143,24144,24146],{"class":288,"line":513},[286,24145,2754],{"class":300},[286,24147,481],{"class":292},[286,24149,24150,24152,24154,24157,24159],{"class":288,"line":528},[286,24151,2761],{"class":320},[286,24153,1276],{"class":364},[286,24155,24156],{"class":292},".selectedOwner ",[286,24158,2510],{"class":320},[286,24160,23631],{"class":310},[286,24162,24163,24166,24168],{"class":288,"line":547},[286,24164,24165],{"class":320}," ?",[286,24167,1276],{"class":364},[286,24169,6774],{"class":292},[286,24171,24172,24175,24177,24179,24181,24183,24185,24187,24189,24191,24193,24195],{"class":288,"line":553},[286,24173,24174],{"class":320}," :",[286,24176,1276],{"class":364},[286,24178,2766],{"class":292},[286,24180,2225],{"class":300},[286,24182,2341],{"class":292},[286,24184,23600],{"class":357},[286,24186,2347],{"class":292},[286,24188,609],{"class":320},[286,24190,23658],{"class":292},[286,24192,2510],{"class":320},[286,24194,1276],{"class":364},[286,24196,24197],{"class":292},".selectedOwner);\n",[286,24199,24200],{"class":288,"line":558},[286,24201,7023],{"class":292},[286,24203,24204],{"class":288,"line":586},[286,24205,1139],{"class":292},[286,24207,24208],{"class":288,"line":591},[286,24209,18262],{"class":292},[286,24211,24212,24214,24216],{"class":288,"line":596},[286,24213,793],{"class":292},[286,24215,297],{"class":296},[286,24217,314],{"class":292},[286,24219,24220],{"class":288,"line":614},[286,24221,336],{"emptyLinePlaceholder":6},[286,24223,24224,24226,24228],{"class":288,"line":622},[286,24225,293],{"class":292},[286,24227,810],{"class":296},[286,24229,314],{"class":292},[286,24231,24232,24234,24236,24238],{"class":288,"line":633},[286,24233,818],{"class":292},[286,24235,4145],{"class":296},[286,24237,22321],{"class":300},[286,24239,314],{"class":292},[286,24241,24242,24244,24246,24248,24250],{"class":288,"line":645},[286,24243,837],{"class":292},[286,24245,40],{"class":296},[286,24247,23706],{"class":292},[286,24249,40],{"class":296},[286,24251,314],{"class":292},[286,24253,24254,24256,24258,24260,24262],{"class":288,"line":654},[286,24255,837],{"class":292},[286,24257,31],{"class":296},[286,24259,23719],{"class":292},[286,24261,31],{"class":296},[286,24263,314],{"class":292},[286,24265,24266,24268,24270],{"class":288,"line":676},[286,24267,962],{"class":292},[286,24269,4145],{"class":296},[286,24271,314],{"class":292},[286,24273,24274],{"class":288,"line":681},[286,24275,336],{"emptyLinePlaceholder":6},[286,24277,24278,24280,24282],{"class":288,"line":687},[286,24279,818],{"class":292},[286,24281,3882],{"class":296},[286,24283,314],{"class":292},[286,24285,24286],{"class":288,"line":692},[286,24287,23748],{"class":292},[286,24289,24290,24292,24294,24296,24298,24300],{"class":288,"line":708},[286,24291,837],{"class":292},[286,24293,23755],{"class":296},[286,24295,23758],{"class":300},[286,24297,307],{"class":292},[286,24299,23763],{"class":310},[286,24301,314],{"class":292},[286,24303,24304,24306,24308,24310,24312,24314,24316,24318,24320,24322,24324,24326,24328,24330],{"class":288,"line":725},[286,24305,887],{"class":292},[286,24307,23772],{"class":296},[286,24309,12792],{"class":300},[286,24311,307],{"class":292},[286,24313,23779],{"class":310},[286,24315,4324],{"class":300},[286,24317,307],{"class":292},[286,24319,23786],{"class":310},[286,24321,23789],{"class":300},[286,24323,307],{"class":292},[286,24325,23786],{"class":310},[286,24327,23796],{"class":292},[286,24329,23772],{"class":296},[286,24331,314],{"class":292},[286,24333,24334,24336,24338],{"class":288,"line":730},[286,24335,930],{"class":292},[286,24337,23755],{"class":296},[286,24339,314],{"class":292},[286,24341,24342,24344,24346],{"class":288,"line":737},[286,24343,962],{"class":292},[286,24345,3882],{"class":296},[286,24347,314],{"class":292},[286,24349,24350],{"class":288,"line":746},[286,24351,336],{"emptyLinePlaceholder":6},[286,24353,24354,24356],{"class":288,"line":755},[286,24355,818],{"class":292},[286,24357,23827],{"class":296},[286,24359,24360,24362,24364],{"class":288,"line":762},[286,24361,22723],{"class":300},[286,24363,307],{"class":292},[286,24365,6523],{"class":310},[286,24367,24368,24370,24372],{"class":288,"line":780},[286,24369,22733],{"class":300},[286,24371,307],{"class":292},[286,24373,6533],{"class":310},[286,24375,24376,24378,24380],{"class":288,"line":785},[286,24377,22744],{"class":300},[286,24379,307],{"class":292},[286,24381,23852],{"class":310},[286,24383,24384,24386,24388],{"class":288,"line":790},[286,24385,22754],{"class":300},[286,24387,307],{"class":292},[286,24389,23861],{"class":310},[286,24391,24392],{"class":288,"line":800},[286,24393,22764],{"class":292},[286,24395,24396,24398,24400,24402,24404],{"class":288,"line":805},[286,24397,837],{"class":292},[286,24399,202],{"class":296},[286,24401,23874],{"class":292},[286,24403,202],{"class":296},[286,24405,314],{"class":292},[286,24407,24408,24410,24412,24414,24416],{"class":288,"line":815},[286,24409,837],{"class":292},[286,24411,31],{"class":296},[286,24413,23887],{"class":292},[286,24415,31],{"class":296},[286,24417,314],{"class":292},[286,24419,24420,24422,24424,24426,24428],{"class":288,"line":834},[286,24421,837],{"class":292},[286,24423,31],{"class":296},[286,24425,23900],{"class":292},[286,24427,31],{"class":296},[286,24429,314],{"class":292},[286,24431,24432,24434,24436],{"class":288,"line":857},[286,24433,962],{"class":292},[286,24435,4128],{"class":296},[286,24437,314],{"class":292},[286,24439,24440],{"class":288,"line":862},[286,24441,336],{"emptyLinePlaceholder":6},[286,24443,24444,24446,24448],{"class":288,"line":884},[286,24445,818],{"class":292},[286,24447,21488],{"class":296},[286,24449,314],{"class":292},[286,24451,24452,24454,24456,24458,24460],{"class":288,"line":899},[286,24453,837],{"class":292},[286,24455,23931],{"class":296},[286,24457,23934],{"class":292},[286,24459,23931],{"class":296},[286,24461,314],{"class":292},[286,24463,24464,24466,24468,24470,24472,24474],{"class":288,"line":913},[286,24465,837],{"class":292},[286,24467,26],{"class":296},[286,24469,23215],{"class":300},[286,24471,23949],{"class":292},[286,24473,26],{"class":296},[286,24475,314],{"class":292},[286,24477,24478,24480,24482],{"class":288,"line":927},[286,24479,962],{"class":292},[286,24481,21488],{"class":296},[286,24483,314],{"class":292},[286,24485,24486,24488,24490],{"class":288,"line":937},[286,24487,793],{"class":292},[286,24489,810],{"class":296},[286,24491,314],{"class":292},[40,24493,1604],{"id":1603},[31,24495,24496,235,24498,1704,24500,24502],{},[26,24497,21913],{},[26,24499,21916],{},[26,24501,21919],{}," son herramientas de precisión:",[48,24504,24505,24510,24515],{},[51,24506,24507,24509],{},[26,24508,21913],{}," para congelar contenido inmutable.",[51,24511,24512,24514],{},[26,24513,21916],{}," para evitar renders cuando dependencias clave no cambian.",[51,24516,24517,24519],{},[26,24518,21919],{}," para mostrar template literal sin compilación.",[31,24521,24522],{},"La clave no es usarlas en todo, sino en puntos donde el costo de render sea real y el comportamiento esperado sea claro.",[1614,24524,24525],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":9,"searchDepth":317,"depth":317,"links":24527},[24528,24529,24534,24535,24536,24537,24546,24555],{"id":20631,"depth":317,"text":20632},{"id":70,"depth":317,"text":71,"children":24530},[24531,24532,24533],{"id":21913,"depth":333,"text":21913},{"id":21916,"depth":333,"text":21916},{"id":21919,"depth":333,"text":21919},{"id":138,"depth":317,"text":139},{"id":165,"depth":317,"text":166},{"id":5396,"depth":317,"text":5397},{"id":199,"depth":317,"text":200,"children":24538},[24539,24541,24543,24545],{"id":22126,"depth":333,"text":24540},"1) Aplicar v-once sobre datos que sí cambian",{"id":22148,"depth":333,"text":24542},"2) Definir mal dependencias en v-memo",{"id":22162,"depth":333,"text":24544},"3) Esperar que v-pre procese directivas o interpolaciones",{"id":22181,"depth":333,"text":22182},{"id":1952,"depth":317,"text":1953,"children":24547},[24548,24550,24552,24554],{"id":22195,"depth":333,"text":24549},"1) Bloque estático con v-once",{"id":22483,"depth":333,"text":24551},"2) Segmento pesado con v-memo",{"id":23129,"depth":333,"text":24553},"3) Bloque literal con v-pre",{"id":23350,"depth":333,"text":23351},{"id":1603,"depth":317,"text":1604},"https://res.cloudinary.com/denj4fg7f/image/upload/v1771897190/directives-vue-v-once-v-memo-v-pre-guide_ljsdlv.png","Imagen temporal para portada del artículo sobre v-once, v-memo y v-pre en Vue","2026-02-24","Aprende cuándo usar v-once, v-memo y v-pre en Vue 3 para optimizar renderizado, evitar trabajo innecesario y mantener componentes claros.",{"script":24561},[24562],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":24563},[24564],{"headline":24565,"author":24566,"datePublished":24567,"@type":1647},"Directivas en Vue: v-once, v-memo y v-pre para renderizado eficiente",{"name":1644,"@type":1645},"2026-02-23T21:00:00-05:00",{"updatedAt":24567,"coverCaption":17766,"author":1644,"keywords":24569},[1652,21913,21916,21919,24570],"optimización render","/blog/directives-vue-v-once-v-memo-v-pre-guide.es",[24573],{"headline":24565,"author":24574,"datePublished":24567,"@type":1647},{"name":1644,"@type":1645},{"title":21905,"description":24559},"blog/directives-vue-v-once-v-memo-v-pre-guide.es",[24578,24579,24580,24581,24582],{"tag":20595,"color":20596},{"tag":17781,"color":17782},{"tag":3171,"color":3172},{"tag":3174,"color":3175},{"tag":1678,"color":1679},"u7xDBS4OCgvFrVZ023tOXJV01IYSpQtqWv2fP6XZnHw",{"id":24585,"title":24586,"body":24587,"cover":25839,"coverAlt":25840,"date":25841,"description":25842,"draft":12,"extension":1635,"head":25843,"locale":1663,"meta":25850,"navigation":6,"path":25854,"schemaOrg":25855,"seo":25858,"series":20589,"seriesDescription":20590,"seriesOrder":389,"seriesTitle":20591,"slug":1663,"stem":25859,"tags":25860,"__hash__":25865},"blog/blog/directives-vue-v-text-v-html-guide.es.md","Directivas en Vue: v-text y v-html",{"type":18,"value":24588,"toc":25802},[24589,24598,24606,24623,24628,24630,24638,24652,24657,24661,24665,24672,24702,24705,24722,24731,24735,24742,24771,24774,24798,24802,24807,24826,24831,24852,24856,24861,24866,24871,24889,24891,24897,24900,24928,24945,24952,24955,24972,24983,24990,24999,25003,25006,25008,25014,25049,25056,25091,25095,25158,25160,25468,25755,25757,25785,25799],[21,24590,20612,24592,12501,24595],{"id":24591},"directivas-en-vue-v-text-vs-v-html",[26,24593,24594],{},"v-text",[26,24596,24597],{},"v-html",[31,24599,24600,24601,1704,24603,24605],{},"En Vue, ",[26,24602,24594],{},[26,24604,24597],{}," permiten renderizar contenido dinámico en el DOM, pero no hacen lo mismo ni implican el mismo nivel de riesgo.",[48,24607,24608,24616],{},[51,24609,24610,24612,24613,114],{},[26,24611,24594],{}," inserta ",[82,24614,24615],{},"texto plano",[51,24617,24618,24612,24620,114],{},[26,24619,24597],{},[82,24621,24622],{},"HTML interpretado por el navegador",[3118,24624,24625],{},[31,24626,24627],{},"Entender esta diferencia es clave para evitar bugs de UI y, sobre todo, vulnerabilidades de seguridad como XSS.",[40,24629,20632],{"id":20631},[31,24631,24632,24633,1704,24635,24637],{},"En proyectos reales es habitual recibir contenido desde APIs, CMS o incluso formularios de usuario. Elegir incorrectamente entre ",[26,24634,24594],{},[26,24636,24597],{}," puede provocar:",[48,24639,24640,24643,24646,24649],{},[51,24641,24642],{},"Diseños rotos por etiquetas inesperadas.",[51,24644,24645],{},"Exposición a ataques XSS.",[51,24647,24648],{},"Lógica de sanitización duplicada en múltiples componentes.",[51,24650,24651],{},"Inconsistencias visuales difíciles de depurar.",[3118,24653,24654],{},[31,24655,24656],{},"Tomar la decisión correcta desde el inicio mejora la seguridad, el mantenimiento y la coherencia del código.",[40,24658,24660],{"id":24659},"concepto-base","Concepto base",[202,24662,24663],{"id":24594},[26,24664,24594],{},[31,24666,24667,24668,24671],{},"Renderiza el valor como contenido textual del nodo (",[26,24669,24670],{},"textContent",").\nSi el valor incluye etiquetas HTML, estas se muestran como texto literal, no se interpretan.",[277,24673,24675],{"className":279,"code":24674,"filename":9346,"language":282,"meta":9,"style":9},"\u003Cp v-text=\"message\">\u003C/p>\n",[26,24676,24677],{"__ignoreMap":9},[286,24678,24679,24681,24683,24686,24688,24690,24693,24695,24698,24700],{"class":288,"line":289},[286,24680,293],{"class":292},[286,24682,31],{"class":296},[286,24684,24685],{"class":300}," v-text",[286,24687,307],{"class":292},[286,24689,874],{"class":310},[286,24691,24692],{"class":292},"message",[286,24694,874],{"class":310},[286,24696,24697],{"class":292},">\u003C/",[286,24699,31],{"class":296},[286,24701,314],{"class":292},[31,24703,24704],{},"Es equivalente a la interpolación estándar:",[277,24706,24708],{"className":279,"code":24707,"filename":9346,"language":282,"meta":9,"style":9},"\u003Cp>{{ message }}\u003C/p>\n",[26,24709,24710],{"__ignoreMap":9},[286,24711,24712,24714,24716,24718,24720],{"class":288,"line":289},[286,24713,293],{"class":292},[286,24715,31],{"class":296},[286,24717,23197],{"class":292},[286,24719,31],{"class":296},[286,24721,314],{"class":292},[3118,24723,24724],{},[31,24725,24726,24727,24730],{},"En la práctica, la interpolación (",[26,24728,24729],{},"{{ }}",") es la forma más común y legible para texto dinámico.",[202,24732,24733],{"id":24597},[26,24734,24597],{},[31,24736,24737,24738,24741],{},"Renderiza el valor como HTML dentro del nodo (",[26,24739,24740],{},"innerHTML",").\nSi el string contiene etiquetas, el navegador las procesa como parte del DOM.",[277,24743,24745],{"className":279,"code":24744,"filename":9346,"language":282,"meta":9,"style":9},"\u003Cdiv v-html=\"htmlSnippet\">\u003C/div>\n",[26,24746,24747],{"__ignoreMap":9},[286,24748,24749,24751,24753,24756,24758,24760,24763,24765,24767,24769],{"class":288,"line":289},[286,24750,293],{"class":292},[286,24752,4208],{"class":296},[286,24754,24755],{"class":300}," v-html",[286,24757,307],{"class":292},[286,24759,874],{"class":310},[286,24761,24762],{"class":292},"htmlSnippet",[286,24764,874],{"class":310},[286,24766,24697],{"class":292},[286,24768,4208],{"class":296},[286,24770,314],{"class":292},[31,24772,24773],{},"Consideraciones importantes:",[48,24775,24776,24784,24792,24795],{},[51,24777,24778,10976,24780,24783],{},[26,24779,24597],{},[82,24781,24782],{},"no compila plantillas Vue"," dentro del contenido inyectado.",[51,24785,24786,24787,235,24789,1815],{},"No enlaza directivas (",[26,24788,7545],{},[26,24790,24791],{},"@click",[51,24793,24794],{},"No debe utilizarse con contenido no confiable.",[51,24796,24797],{},"El contenido inyectado queda fuera del scope del compilador de plantillas.",[40,24799,24801],{"id":24800},"cuándo-usar-cada-uno","Cuándo usar cada uno",[202,24803,20784,24805,7676],{"id":24804},"usa-v-text-cuando",[26,24806,24594],{},[48,24808,24809,24812,24820,24823],{},[51,24810,24811],{},"Renderizas texto dinámico simple y seguro.",[51,24813,24814,24815,128,24817,24819],{},"El contenido puede incluir ",[26,24816,293],{},[26,24818,9928],{}," y necesitas que se muestren literalmente.",[51,24821,24822],{},"No necesitas formato enriquecido.",[51,24824,24825],{},"Quieres la opción más segura por defecto.",[202,24827,20784,24829,7676],{"id":24828},"usa-v-html-cuando",[26,24830,24597],{},[48,24832,24833,24836,24839,24849],{},[51,24834,24835],{},"Renderizas contenido HTML previamente sanitizado.",[51,24837,24838],{},"El contenido proviene de un CMS controlado o backend confiable.",[51,24840,24841,24842,235,24845,24848],{},"Necesitas respetar formato enriquecido (",[26,24843,24844],{},"\u003Cstrong>",[26,24846,24847],{},"\u003Cem>",", listas, enlaces, etc.).",[51,24850,24851],{},"Existe una estrategia clara y centralizada de sanitización.",[40,24853,24855],{"id":24854},"cuándo-evitarlos","Cuándo evitarlos",[202,24857,7671,24859,7676],{"id":24858},"evita-v-text-cuando",[26,24860,24594],{},[48,24862,24863],{},[51,24864,24865],{},"Necesitas HTML real con formato enriquecido.",[202,24867,7671,24869,7676],{"id":24868},"evita-v-html-cuando",[26,24870,24597],{},[48,24872,24873,24876,24879,24882],{},[51,24874,24875],{},"El contenido proviene directamente de input de usuario sin sanitizar.",[51,24877,24878],{},"No tienes una estrategia centralizada de sanitización.",[51,24880,24881],{},"El mismo resultado puede lograrse con componentes explícitos (más seguro y mantenible).",[51,24883,24884,24885,24888],{},"Puedes modelar la estructura con datos y renderizarla con ",[26,24886,24887],{},"v-for"," y componentes en lugar de inyectar HTML crudo.",[40,24890,200],{"id":199},[202,24892,20828,24894,24896],{"id":24893},"_1-usar-v-html-con-contenido-no-confiable",[26,24895,24597],{}," con contenido no confiable",[31,24898,24899],{},"Incorrecto:",[277,24901,24903],{"className":279,"code":24902,"filename":9346,"language":282,"meta":9,"style":9},"\u003Cdiv v-html=\"userBio\">\u003C/div>\n",[26,24904,24905],{"__ignoreMap":9},[286,24906,24907,24909,24911,24913,24915,24917,24920,24922,24924,24926],{"class":288,"line":289},[286,24908,293],{"class":292},[286,24910,4208],{"class":296},[286,24912,24755],{"class":300},[286,24914,307],{"class":292},[286,24916,874],{"class":310},[286,24918,24919],{"class":292},"userBio",[286,24921,874],{"class":310},[286,24923,24697],{"class":292},[286,24925,4208],{"class":296},[286,24927,314],{"class":292},[31,24929,24930,24931,24933,24934,24937,24938,235,24941,24944],{},"Si ",[26,24932,24919],{}," no está sanitizado, puede inyectar ",[26,24935,24936],{},"\u003Cscript>",", atributos peligrosos (",[26,24939,24940],{},"onerror",[26,24942,24943],{},"onclick",") o URLs maliciosas.",[202,24946,24948,24949,24951],{"id":24947},"_2-esperar-que-v-html-procese-directivas-de-vue","2) Esperar que ",[26,24950,24597],{}," procese directivas de Vue",[31,24953,24954],{},"Esto no funciona:",[277,24956,24958],{"className":15979,"code":24957,"filename":19445,"language":15982,"meta":9,"style":9},"const html = '\u003Cbutton @click=\"save\">Guardar\u003C/button>'\n",[26,24959,24960],{"__ignoreMap":9},[286,24961,24962,24964,24967,24969],{"class":288,"line":289},[286,24963,413],{"class":320},[286,24965,24966],{"class":364}," html",[286,24968,348],{"class":320},[286,24970,24971],{"class":310}," '\u003Cbutton @click=\"save\">Guardar\u003C/button>'\n",[3118,24973,24974],{},[31,24975,24976,24977,10976,24979,24982],{},"Las directivas dentro de un string inyectado con ",[26,24978,24597],{},[82,24980,24981],{},"no se compilan ni se enlazan"," al contexto del componente.",[202,24984,24986,24987,24989],{"id":24985},"_3-usar-v-html-por-flexibilidad","3) Usar ",[26,24988,24597],{}," “por flexibilidad”",[31,24991,24992,24993,24995,24996,24998],{},"Si solo necesitas texto, usa interpolación (",[26,24994,24729],{},") o ",[26,24997,24594],{},".\nEs más simple, más legible y más seguro.",[202,25000,25002],{"id":25001},"_4-repetir-la-sanitización-en-cada-componente","4) Repetir la sanitización en cada componente",[31,25004,25005],{},"La sanitización debe vivir en una función, composable o utility centralizada.\nDuplicarla en cada vista aumenta el riesgo de inconsistencias y errores.",[40,25007,1953],{"id":1952},[202,25009,25011,25012,29],{"id":25010},"_1-mensaje-dinámico-seguro-v-text","1) Mensaje dinámico seguro (",[26,25013,24594],{},[277,25015,25017],{"className":279,"code":25016,"filename":9346,"language":282,"meta":9,"style":9},"\u003Cp class=\"status\" v-text=\"statusMessage\">\u003C/p>\n",[26,25018,25019],{"__ignoreMap":9},[286,25020,25021,25023,25025,25027,25029,25032,25034,25036,25038,25041,25043,25045,25047],{"class":288,"line":289},[286,25022,293],{"class":292},[286,25024,31],{"class":296},[286,25026,824],{"class":300},[286,25028,307],{"class":292},[286,25030,25031],{"class":310},"\"status\"",[286,25033,24685],{"class":300},[286,25035,307],{"class":292},[286,25037,874],{"class":310},[286,25039,25040],{"class":292},"statusMessage",[286,25042,874],{"class":310},[286,25044,24697],{"class":292},[286,25046,31],{"class":296},[286,25048,314],{"class":292},[202,25050,25052,25053,25055],{"id":25051},"_2-descripción-enriquecida-desde-un-cms-v-html-sanitización-previa","2) Descripción enriquecida desde un CMS (",[26,25054,24597],{}," + sanitización previa)",[277,25057,25059],{"className":279,"code":25058,"filename":9346,"language":282,"meta":9,"style":9},"\u003Carticle class=\"prose\" v-html=\"safeHtml\">\u003C/article>\n",[26,25060,25061],{"__ignoreMap":9},[286,25062,25063,25065,25067,25069,25071,25074,25076,25078,25080,25083,25085,25087,25089],{"class":288,"line":289},[286,25064,293],{"class":292},[286,25066,821],{"class":296},[286,25068,824],{"class":300},[286,25070,307],{"class":292},[286,25072,25073],{"class":310},"\"prose\"",[286,25075,24755],{"class":300},[286,25077,307],{"class":292},[286,25079,874],{"class":310},[286,25081,25082],{"class":292},"safeHtml",[286,25084,874],{"class":310},[286,25086,24697],{"class":292},[286,25088,821],{"class":296},[286,25090,314],{"class":292},[202,25092,25094],{"id":25093},"_3-fallback-entre-html-permitido-y-texto-plano","3) Fallback entre HTML permitido y texto plano",[277,25096,25098],{"className":279,"code":25097,"filename":9346,"language":282,"meta":9,"style":9},"\u003Cdiv v-if=\"allowRichText\" v-html=\"safeHtml\">\u003C/div>\n\u003Cp v-else v-text=\"plainText\">\u003C/p>\n",[26,25099,25100,25133],{"__ignoreMap":9},[286,25101,25102,25104,25106,25108,25110,25112,25115,25117,25119,25121,25123,25125,25127,25129,25131],{"class":288,"line":289},[286,25103,293],{"class":292},[286,25105,4208],{"class":296},[286,25107,842],{"class":320},[286,25109,307],{"class":292},[286,25111,874],{"class":310},[286,25113,25114],{"class":292},"allowRichText",[286,25116,874],{"class":310},[286,25118,24755],{"class":300},[286,25120,307],{"class":292},[286,25122,874],{"class":310},[286,25124,25082],{"class":292},[286,25126,874],{"class":310},[286,25128,24697],{"class":292},[286,25130,4208],{"class":296},[286,25132,314],{"class":292},[286,25134,25135,25137,25139,25141,25143,25145,25147,25150,25152,25154,25156],{"class":288,"line":317},[286,25136,293],{"class":292},[286,25138,31],{"class":296},[286,25140,949],{"class":320},[286,25142,24685],{"class":300},[286,25144,307],{"class":292},[286,25146,874],{"class":310},[286,25148,25149],{"class":292},"plainText",[286,25151,874],{"class":310},[286,25153,24697],{"class":292},[286,25155,31],{"class":296},[286,25157,314],{"class":292},[40,25159,1983],{"id":1982},[277,25161,25163],{"className":279,"code":25162,"filename":281,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\nconst allowRichText = ref(true);\nconst rawFromCms = ref(\"\u003Ch3>Novedades\u003C/h3>\u003Cp>\u003Cstrong>Vue 3\u003C/strong> mejora DX.\u003C/p>\");\nconst plainFallback = ref(\"Novedades: Vue 3 mejora DX.\");\n\nfunction sanitizeHtml(input: string) {\n // Placeholder: en producción usa una librería robusta como DOMPurify.\n return input.replace(/\u003Cscript.*?>.*?\u003C\\/script>/gi, \"\");\n}\n\nconst safeHtml = computed(() => sanitizeHtml(rawFromCms.value));\n\u003C/script>\n\n\u003Ctemplate>\n \u003Csection>\n \u003Ch2>Contenido editorial\u003C/h2>\n\n \u003Cdiv v-if=\"allowRichText\" class=\"prose\" v-html=\"safeHtml\">\u003C/div>\n \u003Cp v-else v-text=\"plainFallback\">\u003C/p>\n \u003C/section>\n\u003C/template>\n",[26,25164,25165,25181,25193,25197,25214,25232,25250,25254,25271,25276,25326,25330,25334,25354,25362,25366,25374,25382,25395,25399,25431,25452,25460],{"__ignoreMap":9},[286,25166,25167,25169,25171,25173,25175,25177,25179],{"class":288,"line":289},[286,25168,293],{"class":292},[286,25170,297],{"class":296},[286,25172,301],{"class":300},[286,25174,304],{"class":300},[286,25176,307],{"class":292},[286,25178,311],{"class":310},[286,25180,314],{"class":292},[286,25182,25183,25185,25187,25189,25191],{"class":288,"line":317},[286,25184,321],{"class":320},[286,25186,23391],{"class":292},[286,25188,327],{"class":320},[286,25190,18155],{"class":310},[286,25192,18158],{"class":292},[286,25194,25195],{"class":288,"line":333},[286,25196,336],{"emptyLinePlaceholder":6},[286,25198,25199,25201,25204,25206,25208,25210,25212],{"class":288,"line":339},[286,25200,413],{"class":320},[286,25202,25203],{"class":364}," allowRichText",[286,25205,348],{"class":320},[286,25207,421],{"class":300},[286,25209,456],{"class":292},[286,25211,2156],{"class":364},[286,25213,18284],{"class":292},[286,25215,25216,25218,25221,25223,25225,25227,25230],{"class":288,"line":354},[286,25217,413],{"class":320},[286,25219,25220],{"class":364}," rawFromCms",[286,25222,348],{"class":320},[286,25224,421],{"class":300},[286,25226,456],{"class":292},[286,25228,25229],{"class":310},"\"\u003Ch3>Novedades\u003C/h3>\u003Cp>\u003Cstrong>Vue 3\u003C/strong> mejora DX.\u003C/p>\"",[286,25231,18284],{"class":292},[286,25233,25234,25236,25239,25241,25243,25245,25248],{"class":288,"line":368},[286,25235,413],{"class":320},[286,25237,25238],{"class":364}," plainFallback",[286,25240,348],{"class":320},[286,25242,421],{"class":300},[286,25244,456],{"class":292},[286,25246,25247],{"class":310},"\"Novedades: Vue 3 mejora DX.\"",[286,25249,18284],{"class":292},[286,25251,25252],{"class":288,"line":379},[286,25253,336],{"emptyLinePlaceholder":6},[286,25255,25256,25258,25261,25263,25265,25267,25269],{"class":288,"line":389},[286,25257,2467],{"class":320},[286,25259,25260],{"class":300}," sanitizeHtml",[286,25262,456],{"class":292},[286,25264,18048],{"class":357},[286,25266,361],{"class":320},[286,25268,21383],{"class":364},[286,25270,2483],{"class":292},[286,25272,25273],{"class":288,"line":399},[286,25274,25275],{"class":12748}," // Placeholder: en producción usa una librería robusta como DOMPurify.\n",[286,25277,25278,25280,25283,25286,25288,25290,25294,25296,25299,25301,25303,25305,25307,25311,25314,25316,25319,25321,25324],{"class":288,"line":405},[286,25279,2219],{"class":320},[286,25281,25282],{"class":292}," input.",[286,25284,25285],{"class":300},"replace",[286,25287,456],{"class":292},[286,25289,15958],{"class":310},[286,25291,25293],{"class":25292},"sA_wV","\u003Cscript",[286,25295,114],{"class":364},[286,25297,25298],{"class":320},"*?",[286,25300,9928],{"class":25292},[286,25302,114],{"class":364},[286,25304,25298],{"class":320},[286,25306,293],{"class":25292},[286,25308,25310],{"class":25309},"snhLl","\\/",[286,25312,25313],{"class":25292},"script>",[286,25315,15958],{"class":310},[286,25317,25318],{"class":320},"gi",[286,25320,235],{"class":292},[286,25322,25323],{"class":310},"\"\"",[286,25325,18284],{"class":292},[286,25327,25328],{"class":288,"line":410},[286,25329,402],{"class":292},[286,25331,25332],{"class":288,"line":444},[286,25333,336],{"emptyLinePlaceholder":6},[286,25335,25336,25338,25341,25343,25345,25347,25349,25351],{"class":288,"line":464},[286,25337,413],{"class":320},[286,25339,25340],{"class":364}," safeHtml",[286,25342,348],{"class":320},[286,25344,2207],{"class":300},[286,25346,2210],{"class":292},[286,25348,609],{"class":320},[286,25350,25260],{"class":300},[286,25352,25353],{"class":292},"(rawFromCms.value));\n",[286,25355,25356,25358,25360],{"class":288,"line":469},[286,25357,793],{"class":292},[286,25359,297],{"class":296},[286,25361,314],{"class":292},[286,25363,25364],{"class":288,"line":484},[286,25365,336],{"emptyLinePlaceholder":6},[286,25367,25368,25370,25372],{"class":288,"line":508},[286,25369,293],{"class":292},[286,25371,810],{"class":296},[286,25373,314],{"class":292},[286,25375,25376,25378,25380],{"class":288,"line":513},[286,25377,818],{"class":292},[286,25379,4128],{"class":296},[286,25381,314],{"class":292},[286,25383,25384,25386,25388,25391,25393],{"class":288,"line":528},[286,25385,837],{"class":292},[286,25387,40],{"class":296},[286,25389,25390],{"class":292},">Contenido editorial\u003C/",[286,25392,40],{"class":296},[286,25394,314],{"class":292},[286,25396,25397],{"class":288,"line":547},[286,25398,336],{"emptyLinePlaceholder":6},[286,25400,25401,25403,25405,25407,25409,25412,25414,25416,25418,25420,25422,25425,25427,25429],{"class":288,"line":553},[286,25402,837],{"class":292},[286,25404,4208],{"class":296},[286,25406,842],{"class":300},[286,25408,307],{"class":292},[286,25410,25411],{"class":310},"\"allowRichText\"",[286,25413,824],{"class":300},[286,25415,307],{"class":292},[286,25417,25073],{"class":310},[286,25419,24755],{"class":300},[286,25421,307],{"class":292},[286,25423,25424],{"class":310},"\"safeHtml\"",[286,25426,24697],{"class":292},[286,25428,4208],{"class":296},[286,25430,314],{"class":292},[286,25432,25433,25435,25437,25439,25441,25443,25446,25448,25450],{"class":288,"line":558},[286,25434,837],{"class":292},[286,25436,31],{"class":296},[286,25438,949],{"class":300},[286,25440,24685],{"class":300},[286,25442,307],{"class":292},[286,25444,25445],{"class":310},"\"plainFallback\"",[286,25447,24697],{"class":292},[286,25449,31],{"class":296},[286,25451,314],{"class":292},[286,25453,25454,25456,25458],{"class":288,"line":586},[286,25455,962],{"class":292},[286,25457,4128],{"class":296},[286,25459,314],{"class":292},[286,25461,25462,25464,25466],{"class":288,"line":591},[286,25463,793],{"class":292},[286,25465,810],{"class":296},[286,25467,314],{"class":292},[277,25469,25471],{"className":279,"code":25470,"filename":979,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n allowRichText: true,\n rawFromCms: \"\u003Ch3>Novedades\u003C/h3>\u003Cp>\u003Cstrong>Vue 3\u003C/strong> mejora DX.\u003C/p>\",\n plainFallback: \"Novedades: Vue 3 mejora DX.\",\n };\n },\n computed: {\n safeHtml() {\n return this.sanitizeHtml(this.rawFromCms);\n },\n },\n methods: {\n sanitizeHtml(input) {\n // Placeholder: en producción usa una librería robusta como DOMPurify.\n return input.replace(/\u003Cscript.*?>.*?\u003C\\/script>/gi, \"\");\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Csection>\n \u003Ch2>Contenido editorial\u003C/h2>\n\n \u003Cdiv v-if=\"allowRichText\" class=\"prose\" v-html=\"safeHtml\">\u003C/div>\n \u003Cp v-else v-text=\"plainFallback\">\u003C/p>\n \u003C/section>\n\u003C/template>\n",[26,25472,25473,25481,25489,25495,25501,25510,25519,25528,25532,25536,25540,25547,25565,25569,25573,25577,25588,25593,25633,25637,25641,25645,25653,25657,25665,25673,25685,25689,25719,25739,25747],{"__ignoreMap":9},[286,25474,25475,25477,25479],{"class":288,"line":289},[286,25476,293],{"class":292},[286,25478,297],{"class":296},[286,25480,314],{"class":292},[286,25482,25483,25485,25487],{"class":288,"line":317},[286,25484,1065],{"class":320},[286,25486,1068],{"class":320},[286,25488,351],{"class":292},[286,25490,25491,25493],{"class":288,"line":333},[286,25492,1094],{"class":300},[286,25494,481],{"class":292},[286,25496,25497,25499],{"class":288,"line":339},[286,25498,1101],{"class":320},[286,25500,351],{"class":292},[286,25502,25503,25506,25508],{"class":288,"line":354},[286,25504,25505],{"class":292}," allowRichText: ",[286,25507,2156],{"class":364},[286,25509,1085],{"class":292},[286,25511,25512,25515,25517],{"class":288,"line":368},[286,25513,25514],{"class":292}," rawFromCms: ",[286,25516,25229],{"class":310},[286,25518,1085],{"class":292},[286,25520,25521,25524,25526],{"class":288,"line":379},[286,25522,25523],{"class":292}," plainFallback: ",[286,25525,25247],{"class":310},[286,25527,1085],{"class":292},[286,25529,25530],{"class":288,"line":389},[286,25531,18485],{"class":292},[286,25533,25534],{"class":288,"line":399},[286,25535,1139],{"class":292},[286,25537,25538],{"class":288,"line":405},[286,25539,2749],{"class":292},[286,25541,25542,25545],{"class":288,"line":410},[286,25543,25544],{"class":300}," safeHtml",[286,25546,481],{"class":292},[286,25548,25549,25551,25553,25555,25558,25560,25562],{"class":288,"line":444},[286,25550,2761],{"class":320},[286,25552,1276],{"class":364},[286,25554,114],{"class":292},[286,25556,25557],{"class":300},"sanitizeHtml",[286,25559,456],{"class":292},[286,25561,1349],{"class":364},[286,25563,25564],{"class":292},".rawFromCms);\n",[286,25566,25567],{"class":288,"line":464},[286,25568,7023],{"class":292},[286,25570,25571],{"class":288,"line":469},[286,25572,1139],{"class":292},[286,25574,25575],{"class":288,"line":484},[286,25576,1148],{"class":292},[286,25578,25579,25582,25584,25586],{"class":288,"line":508},[286,25580,25581],{"class":300}," sanitizeHtml",[286,25583,456],{"class":292},[286,25585,18048],{"class":357},[286,25587,2483],{"class":292},[286,25589,25590],{"class":288,"line":513},[286,25591,25592],{"class":12748}," // Placeholder: en producción usa una librería robusta como DOMPurify.\n",[286,25594,25595,25597,25599,25601,25603,25605,25607,25609,25611,25613,25615,25617,25619,25621,25623,25625,25627,25629,25631],{"class":288,"line":528},[286,25596,2761],{"class":320},[286,25598,25282],{"class":292},[286,25600,25285],{"class":300},[286,25602,456],{"class":292},[286,25604,15958],{"class":310},[286,25606,25293],{"class":25292},[286,25608,114],{"class":364},[286,25610,25298],{"class":320},[286,25612,9928],{"class":25292},[286,25614,114],{"class":364},[286,25616,25298],{"class":320},[286,25618,293],{"class":25292},[286,25620,25310],{"class":25309},[286,25622,25313],{"class":25292},[286,25624,15958],{"class":310},[286,25626,25318],{"class":320},[286,25628,235],{"class":292},[286,25630,25323],{"class":310},[286,25632,18284],{"class":292},[286,25634,25635],{"class":288,"line":547},[286,25636,7023],{"class":292},[286,25638,25639],{"class":288,"line":553},[286,25640,1139],{"class":292},[286,25642,25643],{"class":288,"line":558},[286,25644,18262],{"class":292},[286,25646,25647,25649,25651],{"class":288,"line":586},[286,25648,793],{"class":292},[286,25650,297],{"class":296},[286,25652,314],{"class":292},[286,25654,25655],{"class":288,"line":591},[286,25656,336],{"emptyLinePlaceholder":6},[286,25658,25659,25661,25663],{"class":288,"line":596},[286,25660,293],{"class":292},[286,25662,810],{"class":296},[286,25664,314],{"class":292},[286,25666,25667,25669,25671],{"class":288,"line":614},[286,25668,818],{"class":292},[286,25670,4128],{"class":296},[286,25672,314],{"class":292},[286,25674,25675,25677,25679,25681,25683],{"class":288,"line":622},[286,25676,837],{"class":292},[286,25678,40],{"class":296},[286,25680,25390],{"class":292},[286,25682,40],{"class":296},[286,25684,314],{"class":292},[286,25686,25687],{"class":288,"line":633},[286,25688,336],{"emptyLinePlaceholder":6},[286,25690,25691,25693,25695,25697,25699,25701,25703,25705,25707,25709,25711,25713,25715,25717],{"class":288,"line":645},[286,25692,837],{"class":292},[286,25694,4208],{"class":296},[286,25696,842],{"class":300},[286,25698,307],{"class":292},[286,25700,25411],{"class":310},[286,25702,824],{"class":300},[286,25704,307],{"class":292},[286,25706,25073],{"class":310},[286,25708,24755],{"class":300},[286,25710,307],{"class":292},[286,25712,25424],{"class":310},[286,25714,24697],{"class":292},[286,25716,4208],{"class":296},[286,25718,314],{"class":292},[286,25720,25721,25723,25725,25727,25729,25731,25733,25735,25737],{"class":288,"line":654},[286,25722,837],{"class":292},[286,25724,31],{"class":296},[286,25726,949],{"class":300},[286,25728,24685],{"class":300},[286,25730,307],{"class":292},[286,25732,25445],{"class":310},[286,25734,24697],{"class":292},[286,25736,31],{"class":296},[286,25738,314],{"class":292},[286,25740,25741,25743,25745],{"class":288,"line":676},[286,25742,962],{"class":292},[286,25744,4128],{"class":296},[286,25746,314],{"class":292},[286,25748,25749,25751,25753],{"class":288,"line":681},[286,25750,793],{"class":292},[286,25752,810],{"class":296},[286,25754,314],{"class":292},[40,25756,1604],{"id":1603},[48,25758,25759,25764,25772,25777,25782],{},[51,25760,25761,25763],{},[26,25762,24594],{}," es para texto plano y es la opción por defecto cuando no necesitas HTML.",[51,25765,25766,25767,25769,25770,114],{},"La interpolación (",[26,25768,24729],{},") suele ser más idiomática que ",[26,25771,24594],{},[51,25773,25774,25776],{},[26,25775,24597],{}," solo debe usarse con contenido confiable o previamente sanitizado.",[51,25778,25779,25781],{},[26,25780,24597],{}," no compila ni enlaza directivas Vue.",[51,25783,25784],{},"Centraliza la sanitización en una capa clara (utility/composable).",[3118,25786,25787],{},[31,25788,25789,25792,25793,25795,25796,25798],{},[82,25790,25791],{},"Regla práctica:"," si dudas, empieza con interpolación o ",[26,25794,24594],{},", y utiliza ",[26,25797,24597],{}," únicamente cuando el caso de uso lo justifique explícitamente.",[1614,25800,25801],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}",{"title":9,"searchDepth":317,"depth":317,"links":25803},[25804,25805,25809,25815,25821,25830,25837,25838],{"id":20631,"depth":317,"text":20632},{"id":24659,"depth":317,"text":24660,"children":25806},[25807,25808],{"id":24594,"depth":333,"text":24594},{"id":24597,"depth":333,"text":24597},{"id":24800,"depth":317,"text":24801,"children":25810},[25811,25813],{"id":24804,"depth":333,"text":25812},"Usa v-text cuando:",{"id":24828,"depth":333,"text":25814},"Usa v-html cuando:",{"id":24854,"depth":317,"text":24855,"children":25816},[25817,25819],{"id":24858,"depth":333,"text":25818},"Evita v-text cuando:",{"id":24868,"depth":333,"text":25820},"Evita v-html cuando:",{"id":199,"depth":317,"text":200,"children":25822},[25823,25825,25827,25829],{"id":24893,"depth":333,"text":25824},"1) Usar v-html con contenido no confiable",{"id":24947,"depth":333,"text":25826},"2) Esperar que v-html procese directivas de Vue",{"id":24985,"depth":333,"text":25828},"3) Usar v-html “por flexibilidad”",{"id":25001,"depth":333,"text":25002},{"id":1952,"depth":317,"text":1953,"children":25831},[25832,25834,25836],{"id":25010,"depth":333,"text":25833},"1) Mensaje dinámico seguro (v-text)",{"id":25051,"depth":333,"text":25835},"2) Descripción enriquecida desde un CMS (v-html + sanitización previa)",{"id":25093,"depth":333,"text":25094},{"id":1982,"depth":317,"text":1983},{"id":1603,"depth":317,"text":1604},"https://res.cloudinary.com/denj4fg7f/image/upload/v1771635700/directives-vue-v-text-v-html-guide_n0cemz.png","Ejemplo de uso de v-text y v-html en Vue.js","2026-02-21","Aprende cuándo usar v-text y v-html en Vue, diferencias clave, riesgos de seguridad, errores comunes y patrones recomendados con ejemplos en Composition API y Options API.",{"script":25844},[25845],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":25846},[25847],{"headline":24586,"author":25848,"datePublished":25849,"@type":1647},{"name":1644,"@type":1645},"2026-02-20T20:00:00-05:00",{"updatedAt":25849,"coverCaption":25851,"keywords":25852},"Aprende a usar v-text y v-html de forma segura y efectiva en tus proyectos Vue",[1652,24594,24597,25853,10652,281,979],"XSS","/blog/directives-vue-v-text-v-html-guide.es",[25856],{"headline":24586,"author":25857,"datePublished":25849,"@type":1647},{"name":1644,"@type":1645},{"title":24586,"description":25842},"blog/directives-vue-v-text-v-html-guide.es",[25861,25862,25863,25864],{"tag":20595,"color":20596},{"tag":21898,"color":21899},{"tag":3171,"color":3172},{"tag":9081,"color":9082},"ETrb_1hy2LBFoBJtNI7Bdx3vS8ERBw0U59cL2Y3giRY",{"id":25867,"title":25868,"body":25869,"cover":28096,"coverAlt":28097,"date":28098,"description":28099,"draft":12,"extension":1635,"head":28100,"locale":1648,"meta":28108,"navigation":6,"path":28113,"schemaOrg":28114,"seo":28117,"series":20589,"seriesDescription":20590,"seriesOrder":379,"seriesTitle":20591,"slug":1663,"stem":28118,"tags":28119,"__hash__":28125},"blog/blog/directives-vue-v-slot-guide.es.md","Directivas en Vue: v-slot",{"type":18,"value":25870,"toc":28075},[25871,25877,25882,25885,25887,25890,25901,25908,25910,25917,25977,26044,26047,26072,26075,26098,26109,26111,26115,26136,26138,26140,26151,26156,26158,26167,26172,26182,26218,26258,26262,26269,26323,26326,26330,26333,26335,26355,26360,26364,26367,26370,26396,26398,26402,26477,26481,26633,26637,26778,26785,26788,26861,26866,26870,26873,27199,27456,27460,27463,27786,28044,28046,28072],[21,25872,20612,25874],{"id":25873},"directivas-en-vue-v-slot",[26,25875,25876],{},"v-slot",[31,25878,25879,25881],{},[26,25880,25876],{}," permite decidir, desde el componente padre, qué contenido se renderizará dentro de zonas específicas definidas por el componente hijo.\nEn términos simples: el hijo define “huecos” y el padre decide qué colocar en ellos.",[31,25883,25884],{},"Es una de las herramientas más potentes de Vue 3 para construir componentes reutilizables sin perder control sobre el renderizado.",[40,25886,20632],{"id":20631},[31,25888,25889],{},"Sin slots, muchos componentes terminan siendo rígidos:",[48,25891,25892,25895,25898],{},[51,25893,25894],{},"Con textos y botones “quemados” dentro del hijo.",[51,25896,25897],{},"Con demasiadas props para cubrir casos muy específicos.",[51,25899,25900],{},"Difíciles de reutilizar en pantallas diferentes.",[3118,25902,25903],{},[31,25904,12003,25905,25907],{},[26,25906,25876],{},", puedes diseñar componentes base (cards, modals, tablas, layouts) que se adapten a distintos contextos sin duplicar lógica ni sacrificar claridad.",[40,25909,24660],{"id":24659},[31,25911,25912,25913,25916],{},"Un componente hijo define ",[26,25914,25915],{},"\u003Cslot />",", y el padre inyecta contenido:",[277,25918,25922],{"className":279,"code":25919,"filename":25920,"highlights":25921,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003Csection class=\"card\">\n \u003Cslot />\n \u003C/section>\n\u003C/template>\n","BaseCard.vue",[333],[26,25923,25924,25932,25947,25961,25969],{"__ignoreMap":9},[286,25925,25926,25928,25930],{"class":288,"line":289},[286,25927,293],{"class":292},[286,25929,810],{"class":296},[286,25931,314],{"class":292},[286,25933,25934,25936,25938,25940,25942,25945],{"class":288,"line":317},[286,25935,818],{"class":292},[286,25937,4128],{"class":296},[286,25939,824],{"class":300},[286,25941,307],{"class":292},[286,25943,25944],{"class":310},"\"card\"",[286,25946,314],{"class":292},[286,25948,25950,25952,25955,25959],{"class":25949,"line":333},[288,9405],[286,25951,837],{"class":292},[286,25953,25954],{"class":296},"slot",[286,25956,25958],{"class":25957},"s7hpK"," /",[286,25960,314],{"class":292},[286,25962,25963,25965,25967],{"class":288,"line":339},[286,25964,962],{"class":292},[286,25966,4128],{"class":296},[286,25968,314],{"class":292},[286,25970,25971,25973,25975],{"class":288,"line":354},[286,25972,793],{"class":292},[286,25974,810],{"class":296},[286,25976,314],{"class":292},[277,25978,25981],{"className":279,"code":25979,"filename":9346,"highlights":25980,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003CBaseCard>\n \u003Ch2>Título dinámico\u003C/h2>\n \u003Cp>Contenido personalizado desde el padre.\u003C/p>\n \u003C/BaseCard>\n\u003C/template>\n",[317,354],[26,25982,25983,25991,26001,26014,26027,26036],{"__ignoreMap":9},[286,25984,25985,25987,25989],{"class":288,"line":289},[286,25986,293],{"class":292},[286,25988,810],{"class":296},[286,25990,314],{"class":292},[286,25992,25994,25996,25999],{"class":25993,"line":317},[288,9405],[286,25995,818],{"class":292},[286,25997,25998],{"class":296},"BaseCard",[286,26000,314],{"class":292},[286,26002,26003,26005,26007,26010,26012],{"class":288,"line":333},[286,26004,837],{"class":292},[286,26006,40],{"class":296},[286,26008,26009],{"class":292},">Título dinámico\u003C/",[286,26011,40],{"class":296},[286,26013,314],{"class":292},[286,26015,26016,26018,26020,26023,26025],{"class":288,"line":339},[286,26017,837],{"class":292},[286,26019,31],{"class":296},[286,26021,26022],{"class":292},">Contenido personalizado desde el padre.\u003C/",[286,26024,31],{"class":296},[286,26026,314],{"class":292},[286,26028,26030,26032,26034],{"class":26029,"line":354},[288,9405],[286,26031,962],{"class":292},[286,26033,25998],{"class":296},[286,26035,314],{"class":292},[286,26037,26038,26040,26042],{"class":288,"line":368},[286,26039,793],{"class":292},[286,26041,810],{"class":296},[286,26043,314],{"class":292},[31,26045,26046],{},"Tipos de slots:",[48,26048,26049,26056,26064],{},[51,26050,26051,20706,26054],{},[82,26052,26053],{},"Slot por defecto",[26,26055,25915],{},[51,26057,26058,20706,26061],{},[82,26059,26060],{},"Slots nombrados",[26,26062,26063],{},"\u003Cslot name=\"header\" />",[51,26065,26066,20706,26069],{},[82,26067,26068],{},"Slots con props (scoped slots)",[26,26070,26071],{},"\u003Cslot name=\"row\" :item=\"item\" />",[31,26073,26074],{},"Sintaxis común en el padre:",[48,26076,26077,26083,26092],{},[51,26078,26079,26082],{},[26,26080,26081],{},"#default"," para el slot por defecto.",[51,26084,26085,235,26088,26091],{},[26,26086,26087],{},"#header",[26,26089,26090],{},"#footer",", etc. para slots nombrados.",[51,26093,26094,26097],{},[26,26095,26096],{},"#row=\"{ item }\""," para recibir props desde el hijo.",[3118,26099,26100],{},[31,26101,26102,26105,26106,114],{},[26,26103,26104],{},"#"," es la forma abreviada de ",[26,26107,26108],{},"v-slot:",[40,26110,139],{"id":138},[31,26112,20784,26113,7676],{},[26,26114,25876],{},[48,26116,26117,26120,26126],{},[51,26118,26119],{},"Tienes un componente estructural (card, modal, layout) cuyo contenido cambia según la vista.",[51,26121,26122,26123,1902],{},"Necesitas exponer datos internos del hijo al padre para personalizar el render (",[26,26124,26125],{},"scoped slots",[51,26127,26128,26129,235,26132,26135],{},"Quieres una API flexible sin proliferar props booleanas como ",[26,26130,26131],{},"showHeader",[26,26133,26134],{},"showFooter",", etc.",[40,26137,166],{"id":165},[31,26139,172],{},[48,26141,26142,26145,26148],{},[51,26143,26144],{},"El componente tiene estructura y contenido completamente fijos.",[51,26146,26147],{},"Estás usando slots para esconder lógica que debería vivir en composables o en el store.",[51,26149,26150],{},"El template se vuelve excesivamente complejo por anidación profunda de slots.",[3118,26152,26153],{},[31,26154,26155],{},"En estos casos, menos flexibilidad suele traducirse en mayor mantenibilidad.",[40,26157,200],{"id":199},[202,26159,20828,26161,26163,26164],{"id":26160},"_1-usar-v-slot-en-un-elemento-que-no-es-componente-o-template",[26,26162,25876],{}," en un elemento que no es componente o ",[26,26165,26166],{},"\u003Ctemplate>",[31,26168,26169,26171],{},[26,26170,25876],{}," solo puede usarse en:",[48,26173,26174,26177],{},[51,26175,26176],{},"Un componente.",[51,26178,1867,26179,26181],{},[26,26180,26166],{}," que envuelve contenido para un slot específico.",[277,26183,26187],{"className":279,"code":26184,"filename":26185,"highlights":26186,"language":282,"meta":9,"style":9},"\u003Cdiv v-slot:header>\n Título\n\u003C/div>\n","Incorrecto.vue",[289],[26,26188,26189,26205,26210],{"__ignoreMap":9},[286,26190,26192,26194,26196,26199,26201,26203],{"class":26191,"line":289},[288,9405],[286,26193,293],{"class":292},[286,26195,4208],{"class":296},[286,26197,26198],{"class":300}," v-slot",[286,26200,361],{"class":292},[286,26202,4145],{"class":300},[286,26204,314],{"class":292},[286,26206,26207],{"class":288,"line":317},[286,26208,26209],{"class":292}," Título\n",[286,26211,26212,26214,26216],{"class":288,"line":333},[286,26213,793],{"class":292},[286,26215,4208],{"class":296},[286,26217,314],{"class":292},[277,26219,26223],{"className":279,"code":26220,"filename":26221,"highlights":26222,"language":282,"meta":9,"style":9},"\u003CBaseCard>\n \u003Ctemplate #header>\n Título\n \u003C/template>\n\u003C/BaseCard>\n","Correcto.vue",[317,339],[26,26224,26225,26233,26239,26244,26250],{"__ignoreMap":9},[286,26226,26227,26229,26231],{"class":288,"line":289},[286,26228,293],{"class":292},[286,26230,25998],{"class":296},[286,26232,314],{"class":292},[286,26234,26236],{"class":26235,"line":317},[288,9405],[286,26237,26238],{"class":292}," \u003Ctemplate #header>\n",[286,26240,26241],{"class":288,"line":333},[286,26242,26243],{"class":292}," Título\n",[286,26245,26247],{"class":26246,"line":339},[288,9405],[286,26248,26249],{"class":292}," \u003C/template>\n",[286,26251,26252,26254,26256],{"class":288,"line":354},[286,26253,793],{"class":292},[286,26255,25998],{"class":296},[286,26257,314],{"class":292},[202,26259,26261],{"id":26260},"_2-no-destructurar-las-props-de-un-scoped-slot","2) No destructurar las props de un scoped slot",[31,26263,26264,26265,26268],{},"Si el hijo expone ",[26,26266,26267],{},":item=\"row\"",", el padre debe capturar ese objeto correctamente:",[277,26270,26274],{"className":279,"code":26271,"filename":26272,"highlights":26273,"language":282,"meta":9,"style":9},"\u003CDataTable :rows=\"users\">\n \u003Ctemplate #row=\"{ item }\">\n \u003Cstrong>{{ item.name }}\u003C/strong>\n \u003C/template>\n\u003C/DataTable>\n","DataTable.vue",[289,317],[26,26275,26276,26300,26306,26311,26315],{"__ignoreMap":9},[286,26277,26279,26281,26284,26286,26289,26291,26293,26296,26298],{"class":26278,"line":289},[288,9405],[286,26280,293],{"class":292},[286,26282,26283],{"class":296},"DataTable",[286,26285,6251],{"class":292},[286,26287,26288],{"class":300},"rows",[286,26290,307],{"class":292},[286,26292,874],{"class":310},[286,26294,26295],{"class":292},"users",[286,26297,874],{"class":310},[286,26299,314],{"class":292},[286,26301,26303],{"class":26302,"line":317},[288,9405],[286,26304,26305],{"class":292}," \u003Ctemplate #row=\"{ item }\">\n",[286,26307,26308],{"class":288,"line":333},[286,26309,26310],{"class":292}," \u003Cstrong>{{ item.name }}\u003C/strong>\n",[286,26312,26313],{"class":288,"line":339},[286,26314,26249],{"class":292},[286,26316,26317,26319,26321],{"class":288,"line":354},[286,26318,793],{"class":292},[286,26320,26283],{"class":296},[286,26322,314],{"class":292},[31,26324,26325],{},"Si no se destructura correctamente, perderás acceso explícito a las props del slot.",[202,26327,26329],{"id":26328},"_3-convertir-los-slots-en-prop-drilling-visual","3) Convertir los slots en “prop drilling visual”",[31,26331,26332],{},"Cuando todo pasa por slots y casi nada por props o eventos bien definidos, la API del componente se vuelve confusa.",[31,26334,25791],{},[48,26336,26337,26343,26349],{},[51,26338,26339,26342],{},[82,26340,26341],{},"Props"," → configuración.",[51,26344,26345,26348],{},[82,26346,26347],{},"Slots"," → estructura/contenido.",[51,26350,26351,26354],{},[82,26352,26353],{},"Emits"," → eventos.",[3118,26356,26357],{},[31,26358,26359],{},"Separar responsabilidades mantiene la API clara y predecible.",[202,26361,26363],{"id":26362},"_4-no-definir-fallback-en-el-hijo","4) No definir fallback en el hijo",[31,26365,26366],{},"Si el padre no provee contenido para un slot, puede quedar un espacio vacío inesperado.",[31,26368,26369],{},"Siempre que tenga sentido, define contenido por defecto:",[277,26371,26373],{"className":279,"code":26372,"filename":25920,"language":282,"meta":9,"style":9},"\u003Cslot>\n Fallback por defecto\n\u003C/slot>\n",[26,26374,26375,26383,26388],{"__ignoreMap":9},[286,26376,26377,26379,26381],{"class":288,"line":289},[286,26378,293],{"class":292},[286,26380,25954],{"class":296},[286,26382,314],{"class":292},[286,26384,26385],{"class":288,"line":317},[286,26386,26387],{"class":292}," Fallback por defecto\n",[286,26389,26390,26392,26394],{"class":288,"line":333},[286,26391,793],{"class":292},[286,26393,25954],{"class":296},[286,26395,314],{"class":292},[40,26397,1953],{"id":1952},[202,26399,26401],{"id":26400},"_1-slot-por-defecto-con-fallback","1) Slot por defecto con fallback",[277,26403,26406],{"className":279,"code":26404,"filename":25920,"highlights":26405,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003Carticle class=\"card\">\n \u003Cslot>\n \u003Cp>Contenido por defecto de la tarjeta.\u003C/p>\n \u003C/slot>\n \u003C/article>\n\u003C/template>\n",[333,354],[26,26407,26408,26416,26430,26439,26452,26461,26469],{"__ignoreMap":9},[286,26409,26410,26412,26414],{"class":288,"line":289},[286,26411,293],{"class":292},[286,26413,810],{"class":296},[286,26415,314],{"class":292},[286,26417,26418,26420,26422,26424,26426,26428],{"class":288,"line":317},[286,26419,818],{"class":292},[286,26421,821],{"class":296},[286,26423,824],{"class":300},[286,26425,307],{"class":292},[286,26427,25944],{"class":310},[286,26429,314],{"class":292},[286,26431,26433,26435,26437],{"class":26432,"line":333},[288,9405],[286,26434,837],{"class":292},[286,26436,25954],{"class":296},[286,26438,314],{"class":292},[286,26440,26441,26443,26445,26448,26450],{"class":288,"line":339},[286,26442,887],{"class":292},[286,26444,31],{"class":296},[286,26446,26447],{"class":292},">Contenido por defecto de la tarjeta.\u003C/",[286,26449,31],{"class":296},[286,26451,314],{"class":292},[286,26453,26455,26457,26459],{"class":26454,"line":354},[288,9405],[286,26456,930],{"class":292},[286,26458,25954],{"class":296},[286,26460,314],{"class":292},[286,26462,26463,26465,26467],{"class":288,"line":368},[286,26464,962],{"class":292},[286,26466,821],{"class":296},[286,26468,314],{"class":292},[286,26470,26471,26473,26475],{"class":288,"line":379},[286,26472,793],{"class":292},[286,26474,810],{"class":296},[286,26476,314],{"class":292},[202,26478,26480],{"id":26479},"_2-slots-nombrados-para-estructurar-un-layout","2) Slots nombrados para estructurar un layout",[277,26482,26486],{"className":279,"code":26483,"filename":26484,"highlights":26485,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003Csection class=\"layout\">\n \u003Cheader>\n \u003Cslot name=\"header\" />\n \u003C/header>\n\n \u003Cmain>\n \u003Cslot />\n \u003C/main>\n\n \u003Cfooter>\n \u003Cslot name=\"footer\" />\n \u003C/footer>\n \u003C/section>\n\u003C/template>\n","BaseLayout.vue",[339,389,444],[26,26487,26488,26496,26511,26519,26538,26546,26550,26559,26570,26578,26582,26591,26609,26617,26625],{"__ignoreMap":9},[286,26489,26490,26492,26494],{"class":288,"line":289},[286,26491,293],{"class":292},[286,26493,810],{"class":296},[286,26495,314],{"class":292},[286,26497,26498,26500,26502,26504,26506,26509],{"class":288,"line":317},[286,26499,818],{"class":292},[286,26501,4128],{"class":296},[286,26503,824],{"class":300},[286,26505,307],{"class":292},[286,26507,26508],{"class":310},"\"layout\"",[286,26510,314],{"class":292},[286,26512,26513,26515,26517],{"class":288,"line":333},[286,26514,837],{"class":292},[286,26516,4145],{"class":296},[286,26518,314],{"class":292},[286,26520,26522,26524,26526,26529,26531,26534,26536],{"class":26521,"line":339},[288,9405],[286,26523,887],{"class":292},[286,26525,25954],{"class":296},[286,26527,26528],{"class":300}," name",[286,26530,307],{"class":292},[286,26532,26533],{"class":310},"\"header\"",[286,26535,25958],{"class":25957},[286,26537,314],{"class":292},[286,26539,26540,26542,26544],{"class":288,"line":354},[286,26541,930],{"class":292},[286,26543,4145],{"class":296},[286,26545,314],{"class":292},[286,26547,26548],{"class":288,"line":368},[286,26549,336],{"emptyLinePlaceholder":6},[286,26551,26552,26554,26557],{"class":288,"line":379},[286,26553,837],{"class":292},[286,26555,26556],{"class":296},"main",[286,26558,314],{"class":292},[286,26560,26562,26564,26566,26568],{"class":26561,"line":389},[288,9405],[286,26563,887],{"class":292},[286,26565,25954],{"class":296},[286,26567,25958],{"class":25957},[286,26569,314],{"class":292},[286,26571,26572,26574,26576],{"class":288,"line":399},[286,26573,930],{"class":292},[286,26575,26556],{"class":296},[286,26577,314],{"class":292},[286,26579,26580],{"class":288,"line":405},[286,26581,336],{"emptyLinePlaceholder":6},[286,26583,26584,26586,26589],{"class":288,"line":410},[286,26585,837],{"class":292},[286,26587,26588],{"class":296},"footer",[286,26590,314],{"class":292},[286,26592,26594,26596,26598,26600,26602,26605,26607],{"class":26593,"line":444},[288,9405],[286,26595,887],{"class":292},[286,26597,25954],{"class":296},[286,26599,26528],{"class":300},[286,26601,307],{"class":292},[286,26603,26604],{"class":310},"\"footer\"",[286,26606,25958],{"class":25957},[286,26608,314],{"class":292},[286,26610,26611,26613,26615],{"class":288,"line":464},[286,26612,930],{"class":292},[286,26614,26588],{"class":296},[286,26616,314],{"class":292},[286,26618,26619,26621,26623],{"class":288,"line":469},[286,26620,962],{"class":292},[286,26622,4128],{"class":296},[286,26624,314],{"class":292},[286,26626,26627,26629,26631],{"class":288,"line":484},[286,26628,793],{"class":292},[286,26630,810],{"class":296},[286,26632,314],{"class":292},[202,26634,26636],{"id":26635},"_3-scoped-slot-para-personalizar-filas-de-una-tabla","3) Scoped slot para personalizar filas de una tabla",[277,26638,26641],{"className":279,"code":26639,"filename":26272,"highlights":26640,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003Ctable>\n \u003Ctbody>\n \u003Ctr v-for=\"row in rows\" :key=\"row.id\">\n \u003Ctd>\n \u003Cslot name=\"row\" :item=\"row\">\n {{ row.name }}\n \u003C/slot>\n \u003C/td>\n \u003C/tr>\n \u003C/tbody>\n \u003C/table>\n\u003C/template>\n",[368,389],[26,26642,26643,26651,26659,26667,26689,26698,26722,26727,26737,26746,26754,26762,26770],{"__ignoreMap":9},[286,26644,26645,26647,26649],{"class":288,"line":289},[286,26646,293],{"class":292},[286,26648,810],{"class":296},[286,26650,314],{"class":292},[286,26652,26653,26655,26657],{"class":288,"line":317},[286,26654,818],{"class":292},[286,26656,5399],{"class":296},[286,26658,314],{"class":292},[286,26660,26661,26663,26665],{"class":288,"line":333},[286,26662,837],{"class":292},[286,26664,5421],{"class":296},[286,26666,314],{"class":292},[286,26668,26669,26671,26673,26675,26677,26680,26682,26684,26687],{"class":288,"line":339},[286,26670,887],{"class":292},[286,26672,5405],{"class":296},[286,26674,12792],{"class":300},[286,26676,307],{"class":292},[286,26678,26679],{"class":310},"\"row in rows\"",[286,26681,4324],{"class":300},[286,26683,307],{"class":292},[286,26685,26686],{"class":310},"\"row.id\"",[286,26688,314],{"class":292},[286,26690,26691,26694,26696],{"class":288,"line":354},[286,26692,26693],{"class":292}," \u003C",[286,26695,5426],{"class":296},[286,26697,314],{"class":292},[286,26699,26701,26704,26706,26708,26710,26713,26716,26718,26720],{"class":26700,"line":368},[288,9405],[286,26702,26703],{"class":292}," \u003C",[286,26705,25954],{"class":296},[286,26707,26528],{"class":300},[286,26709,307],{"class":292},[286,26711,26712],{"class":310},"\"row\"",[286,26714,26715],{"class":300}," :item",[286,26717,307],{"class":292},[286,26719,26712],{"class":310},[286,26721,314],{"class":292},[286,26723,26724],{"class":288,"line":379},[286,26725,26726],{"class":292}," {{ row.name }}\n",[286,26728,26730,26733,26735],{"class":26729,"line":389},[288,9405],[286,26731,26732],{"class":292}," \u003C/",[286,26734,25954],{"class":296},[286,26736,314],{"class":292},[286,26738,26739,26742,26744],{"class":288,"line":399},[286,26740,26741],{"class":292}," \u003C/",[286,26743,5426],{"class":296},[286,26745,314],{"class":292},[286,26747,26748,26750,26752],{"class":288,"line":405},[286,26749,4182],{"class":292},[286,26751,5405],{"class":296},[286,26753,314],{"class":292},[286,26755,26756,26758,26760],{"class":288,"line":410},[286,26757,930],{"class":292},[286,26759,5421],{"class":296},[286,26761,314],{"class":292},[286,26763,26764,26766,26768],{"class":288,"line":444},[286,26765,962],{"class":292},[286,26767,5399],{"class":296},[286,26769,314],{"class":292},[286,26771,26772,26774,26776],{"class":288,"line":464},[286,26773,793],{"class":292},[286,26775,810],{"class":296},[286,26777,314],{"class":292},[202,26779,26781,26782,26784],{"id":26780},"_4-v-slot-con-argumento-dinámico","4) ",[26,26783,25876],{}," con argumento dinámico",[31,26786,26787],{},"Vue permite argumentos dinámicos usando la misma sintaxis que otras directivas dinámicas:",[277,26789,26793],{"className":279,"code":26790,"filename":26791,"highlights":26792,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003CWidgetShell>\n \u003Ctemplate v-slot:[zonaActiva]>\n \u003Cp>Este bloque entra en una zona dinámica.\u003C/p>\n \u003C/template>\n \u003C/WidgetShell>\n\u003C/template>\n","Padre.vue",[333],[26,26794,26795,26803,26812,26824,26837,26845,26853],{"__ignoreMap":9},[286,26796,26797,26799,26801],{"class":288,"line":289},[286,26798,293],{"class":292},[286,26800,810],{"class":296},[286,26802,314],{"class":292},[286,26804,26805,26807,26810],{"class":288,"line":317},[286,26806,818],{"class":292},[286,26808,26809],{"class":296},"WidgetShell",[286,26811,314],{"class":292},[286,26813,26815,26817,26819,26821],{"class":26814,"line":333},[288,9405],[286,26816,837],{"class":292},[286,26818,810],{"class":296},[286,26820,26198],{"class":300},[286,26822,26823],{"class":292},":[zonaActiva]>\n",[286,26825,26826,26828,26830,26833,26835],{"class":288,"line":339},[286,26827,887],{"class":292},[286,26829,31],{"class":296},[286,26831,26832],{"class":292},">Este bloque entra en una zona dinámica.\u003C/",[286,26834,31],{"class":296},[286,26836,314],{"class":292},[286,26838,26839,26841,26843],{"class":288,"line":354},[286,26840,930],{"class":292},[286,26842,810],{"class":296},[286,26844,314],{"class":292},[286,26846,26847,26849,26851],{"class":288,"line":368},[286,26848,962],{"class":292},[286,26850,26809],{"class":296},[286,26852,314],{"class":292},[286,26854,26855,26857,26859],{"class":288,"line":379},[286,26856,793],{"class":292},[286,26858,810],{"class":296},[286,26860,314],{"class":292},[3118,26862,26863],{},[31,26864,26865],{},"Úsalo con moderación. Si existen muchas zonas dinámicas, probablemente la API del componente necesite simplificarse.",[21,26867,26869],{"id":26868},"ejemplo-con-composition-api","Ejemplo con Composition API",[31,26871,26872],{},"El hijo expone una tabla base y el padre decide cómo renderizar la celda de acciones.",[277,26874,26876],{"className":279,"code":26875,"filename":26272,"language":282,"meta":9,"style":9},"\u003Cscript setup>\ndefineProps({\n rows: {\n type: Array,\n required: true,\n },\n});\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ctable class=\"min-w-full border-collapse\">\n \u003Cthead>\n \u003Ctr>\n \u003Cth class=\"text-left\">Nombre\u003C/th>\n \u003Cth class=\"text-left\">Rol\u003C/th>\n \u003Cth class=\"text-left\">Acciones\u003C/th>\n \u003C/tr>\n \u003C/thead>\n \u003Ctbody>\n \u003Ctr v-for=\"user in rows\" :key=\"user.id\">\n \u003Ctd>{{ user.name }}\u003C/td>\n \u003Ctd>{{ user.role }}\u003C/td>\n \u003Ctd>\n \u003Cslot name=\"actions\" :user=\"user\">\n \u003Cbutton type=\"button\">Ver perfil\u003C/button>\n \u003C/slot>\n \u003C/td>\n \u003C/tr>\n \u003C/tbody>\n \u003C/table>\n\u003C/template>\n",[26,26877,26878,26888,26895,26900,26905,26914,26918,26922,26930,26934,26942,26957,26965,26973,26993,27012,27031,27039,27047,27055,27076,27088,27101,27109,27131,27151,27159,27167,27175,27183,27191],{"__ignoreMap":9},[286,26879,26880,26882,26884,26886],{"class":288,"line":289},[286,26881,293],{"class":292},[286,26883,297],{"class":296},[286,26885,301],{"class":300},[286,26887,314],{"class":292},[286,26889,26890,26893],{"class":288,"line":317},[286,26891,26892],{"class":300},"defineProps",[286,26894,1074],{"class":292},[286,26896,26897],{"class":288,"line":333},[286,26898,26899],{"class":292}," rows: {\n",[286,26901,26902],{"class":288,"line":339},[286,26903,26904],{"class":292}," type: Array,\n",[286,26906,26907,26910,26912],{"class":288,"line":354},[286,26908,26909],{"class":292}," required: ",[286,26911,2156],{"class":364},[286,26913,1085],{"class":292},[286,26915,26916],{"class":288,"line":368},[286,26917,1139],{"class":292},[286,26919,26920],{"class":288,"line":379},[286,26921,21461],{"class":292},[286,26923,26924,26926,26928],{"class":288,"line":389},[286,26925,793],{"class":292},[286,26927,297],{"class":296},[286,26929,314],{"class":292},[286,26931,26932],{"class":288,"line":399},[286,26933,336],{"emptyLinePlaceholder":6},[286,26935,26936,26938,26940],{"class":288,"line":405},[286,26937,293],{"class":292},[286,26939,810],{"class":296},[286,26941,314],{"class":292},[286,26943,26944,26946,26948,26950,26952,26955],{"class":288,"line":410},[286,26945,818],{"class":292},[286,26947,5399],{"class":296},[286,26949,824],{"class":300},[286,26951,307],{"class":292},[286,26953,26954],{"class":310},"\"min-w-full border-collapse\"",[286,26956,314],{"class":292},[286,26958,26959,26961,26963],{"class":288,"line":444},[286,26960,837],{"class":292},[286,26962,5402],{"class":296},[286,26964,314],{"class":292},[286,26966,26967,26969,26971],{"class":288,"line":464},[286,26968,887],{"class":292},[286,26970,5405],{"class":296},[286,26972,314],{"class":292},[286,26974,26975,26977,26979,26981,26983,26986,26989,26991],{"class":288,"line":469},[286,26976,26693],{"class":292},[286,26978,5408],{"class":296},[286,26980,824],{"class":300},[286,26982,307],{"class":292},[286,26984,26985],{"class":310},"\"text-left\"",[286,26987,26988],{"class":292},">Nombre\u003C/",[286,26990,5408],{"class":296},[286,26992,314],{"class":292},[286,26994,26995,26997,26999,27001,27003,27005,27008,27010],{"class":288,"line":484},[286,26996,26693],{"class":292},[286,26998,5408],{"class":296},[286,27000,824],{"class":300},[286,27002,307],{"class":292},[286,27004,26985],{"class":310},[286,27006,27007],{"class":292},">Rol\u003C/",[286,27009,5408],{"class":296},[286,27011,314],{"class":292},[286,27013,27014,27016,27018,27020,27022,27024,27027,27029],{"class":288,"line":508},[286,27015,26693],{"class":292},[286,27017,5408],{"class":296},[286,27019,824],{"class":300},[286,27021,307],{"class":292},[286,27023,26985],{"class":310},[286,27025,27026],{"class":292},">Acciones\u003C/",[286,27028,5408],{"class":296},[286,27030,314],{"class":292},[286,27032,27033,27035,27037],{"class":288,"line":513},[286,27034,4182],{"class":292},[286,27036,5405],{"class":296},[286,27038,314],{"class":292},[286,27040,27041,27043,27045],{"class":288,"line":528},[286,27042,930],{"class":292},[286,27044,5402],{"class":296},[286,27046,314],{"class":292},[286,27048,27049,27051,27053],{"class":288,"line":547},[286,27050,837],{"class":292},[286,27052,5421],{"class":296},[286,27054,314],{"class":292},[286,27056,27057,27059,27061,27063,27065,27068,27070,27072,27074],{"class":288,"line":553},[286,27058,887],{"class":292},[286,27060,5405],{"class":296},[286,27062,12792],{"class":300},[286,27064,307],{"class":292},[286,27066,27067],{"class":310},"\"user in rows\"",[286,27069,4324],{"class":300},[286,27071,307],{"class":292},[286,27073,12804],{"class":310},[286,27075,314],{"class":292},[286,27077,27078,27080,27082,27084,27086],{"class":288,"line":558},[286,27079,26693],{"class":292},[286,27081,5426],{"class":296},[286,27083,22773],{"class":292},[286,27085,5426],{"class":296},[286,27087,314],{"class":292},[286,27089,27090,27092,27094,27097,27099],{"class":288,"line":586},[286,27091,26693],{"class":292},[286,27093,5426],{"class":296},[286,27095,27096],{"class":292},">{{ user.role }}\u003C/",[286,27098,5426],{"class":296},[286,27100,314],{"class":292},[286,27102,27103,27105,27107],{"class":288,"line":591},[286,27104,26693],{"class":292},[286,27106,5426],{"class":296},[286,27108,314],{"class":292},[286,27110,27111,27113,27115,27117,27119,27122,27125,27127,27129],{"class":288,"line":596},[286,27112,26703],{"class":292},[286,27114,25954],{"class":296},[286,27116,26528],{"class":300},[286,27118,307],{"class":292},[286,27120,27121],{"class":310},"\"actions\"",[286,27123,27124],{"class":300}," :user",[286,27126,307],{"class":292},[286,27128,21525],{"class":310},[286,27130,314],{"class":292},[286,27132,27133,27136,27138,27140,27142,27144,27147,27149],{"class":288,"line":614},[286,27134,27135],{"class":292}," \u003C",[286,27137,4274],{"class":296},[286,27139,4277],{"class":300},[286,27141,307],{"class":292},[286,27143,4282],{"class":310},[286,27145,27146],{"class":292},">Ver perfil\u003C/",[286,27148,4274],{"class":296},[286,27150,314],{"class":292},[286,27152,27153,27155,27157],{"class":288,"line":622},[286,27154,26732],{"class":292},[286,27156,25954],{"class":296},[286,27158,314],{"class":292},[286,27160,27161,27163,27165],{"class":288,"line":633},[286,27162,26741],{"class":292},[286,27164,5426],{"class":296},[286,27166,314],{"class":292},[286,27168,27169,27171,27173],{"class":288,"line":645},[286,27170,4182],{"class":292},[286,27172,5405],{"class":296},[286,27174,314],{"class":292},[286,27176,27177,27179,27181],{"class":288,"line":654},[286,27178,930],{"class":292},[286,27180,5421],{"class":296},[286,27182,314],{"class":292},[286,27184,27185,27187,27189],{"class":288,"line":676},[286,27186,962],{"class":292},[286,27188,5399],{"class":296},[286,27190,314],{"class":292},[286,27192,27193,27195,27197],{"class":288,"line":681},[286,27194,793],{"class":292},[286,27196,810],{"class":296},[286,27198,314],{"class":292},[277,27200,27203],{"className":279,"code":27201,"filename":27202,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\nimport DataTable from \"./DataTable.vue\";\n\nconst users = ref([\n { id: 1, name: \"Ana\", role: \"Admin\", active: true },\n { id: 2, name: \"Luis\", role: \"Editor\", active: false },\n]);\n\nfunction toggleStatus(user) {\n user.active = !user.active;\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDataTable :rows=\"users\">\n \u003Ctemplate #actions=\"{ user }\">\n \u003Cbutton type=\"button\" @click=\"toggleStatus(user)\">\n {{ user.active ? \"Desactivar\" : \"Activar\" }}\n \u003C/button>\n \u003C/template>\n \u003C/DataTable>\n\u003C/template>\n","UsersView.vue",[26,27204,27205,27215,27227,27241,27245,27257,27280,27301,27305,27309,27323,27335,27339,27347,27351,27359,27375,27398,27419,27424,27432,27440,27448],{"__ignoreMap":9},[286,27206,27207,27209,27211,27213],{"class":288,"line":289},[286,27208,293],{"class":292},[286,27210,297],{"class":296},[286,27212,301],{"class":300},[286,27214,314],{"class":292},[286,27216,27217,27219,27221,27223,27225],{"class":288,"line":317},[286,27218,321],{"class":320},[286,27220,11013],{"class":292},[286,27222,327],{"class":320},[286,27224,18155],{"class":310},[286,27226,18158],{"class":292},[286,27228,27229,27231,27234,27236,27239],{"class":288,"line":333},[286,27230,321],{"class":320},[286,27232,27233],{"class":292}," DataTable ",[286,27235,327],{"class":320},[286,27237,27238],{"class":310}," \"./DataTable.vue\"",[286,27240,18158],{"class":292},[286,27242,27243],{"class":288,"line":339},[286,27244,336],{"emptyLinePlaceholder":6},[286,27246,27247,27249,27251,27253,27255],{"class":288,"line":354},[286,27248,413],{"class":320},[286,27250,11028],{"class":364},[286,27252,348],{"class":320},[286,27254,421],{"class":300},[286,27256,2111],{"class":292},[286,27258,27259,27261,27263,27265,27267,27270,27273,27276,27278],{"class":288,"line":368},[286,27260,2116],{"class":292},[286,27262,2079],{"class":364},[286,27264,22627],{"class":292},[286,27266,17591],{"class":310},[286,27268,27269],{"class":292},", role: ",[286,27271,27272],{"class":310},"\"Admin\"",[286,27274,27275],{"class":292},", active: ",[286,27277,2156],{"class":364},[286,27279,2139],{"class":292},[286,27281,27282,27284,27286,27288,27290,27292,27295,27297,27299],{"class":288,"line":379},[286,27283,2116],{"class":292},[286,27285,2146],{"class":364},[286,27287,22627],{"class":292},[286,27289,22653],{"class":310},[286,27291,27269],{"class":292},[286,27293,27294],{"class":310},"\"Editor\"",[286,27296,27275],{"class":292},[286,27298,2130],{"class":364},[286,27300,2139],{"class":292},[286,27302,27303],{"class":288,"line":389},[286,27304,22691],{"class":292},[286,27306,27307],{"class":288,"line":399},[286,27308,336],{"emptyLinePlaceholder":6},[286,27310,27311,27313,27316,27318,27321],{"class":288,"line":405},[286,27312,2467],{"class":320},[286,27314,27315],{"class":300}," toggleStatus",[286,27317,456],{"class":292},[286,27319,27320],{"class":357},"user",[286,27322,2483],{"class":292},[286,27324,27325,27328,27330,27332],{"class":288,"line":410},[286,27326,27327],{"class":292}," user.active ",[286,27329,307],{"class":320},[286,27331,2295],{"class":320},[286,27333,27334],{"class":292},"user.active;\n",[286,27336,27337],{"class":288,"line":444},[286,27338,402],{"class":292},[286,27340,27341,27343,27345],{"class":288,"line":464},[286,27342,793],{"class":292},[286,27344,297],{"class":296},[286,27346,314],{"class":292},[286,27348,27349],{"class":288,"line":469},[286,27350,336],{"emptyLinePlaceholder":6},[286,27352,27353,27355,27357],{"class":288,"line":484},[286,27354,293],{"class":292},[286,27356,810],{"class":296},[286,27358,314],{"class":292},[286,27360,27361,27363,27365,27368,27370,27373],{"class":288,"line":508},[286,27362,818],{"class":292},[286,27364,26283],{"class":296},[286,27366,27367],{"class":300}," :rows",[286,27369,307],{"class":292},[286,27371,27372],{"class":310},"\"users\"",[286,27374,314],{"class":292},[286,27376,27377,27379,27381,27384,27387,27389,27391,27394,27396],{"class":288,"line":513},[286,27378,837],{"class":292},[286,27380,810],{"class":296},[286,27382,27383],{"class":292}," #",[286,27385,27386],{"class":300},"actions",[286,27388,307],{"class":292},[286,27390,874],{"class":310},[286,27392,27393],{"class":292},"{ user }",[286,27395,874],{"class":310},[286,27397,314],{"class":292},[286,27399,27400,27402,27404,27406,27408,27410,27412,27414,27417],{"class":288,"line":528},[286,27401,887],{"class":292},[286,27403,4274],{"class":296},[286,27405,4277],{"class":300},[286,27407,307],{"class":292},[286,27409,4282],{"class":310},[286,27411,4285],{"class":300},[286,27413,307],{"class":292},[286,27415,27416],{"class":310},"\"toggleStatus(user)\"",[286,27418,314],{"class":292},[286,27420,27421],{"class":288,"line":547},[286,27422,27423],{"class":292}," {{ user.active ? \"Desactivar\" : \"Activar\" }}\n",[286,27425,27426,27428,27430],{"class":288,"line":553},[286,27427,4182],{"class":292},[286,27429,4274],{"class":296},[286,27431,314],{"class":292},[286,27433,27434,27436,27438],{"class":288,"line":558},[286,27435,930],{"class":292},[286,27437,810],{"class":296},[286,27439,314],{"class":292},[286,27441,27442,27444,27446],{"class":288,"line":586},[286,27443,962],{"class":292},[286,27445,26283],{"class":296},[286,27447,314],{"class":292},[286,27449,27450,27452,27454],{"class":288,"line":591},[286,27451,793],{"class":292},[286,27453,810],{"class":296},[286,27455,314],{"class":292},[21,27457,27459],{"id":27458},"ejemplo-con-options-api","Ejemplo con Options API",[31,27461,27462],{},"El mismo comportamiento, ahora utilizando Options API para mantener equivalencia conceptual.",[277,27464,27466],{"className":279,"code":27465,"filename":26272,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n props: {\n rows: {\n type: Array,\n required: true,\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ctable class=\"min-w-full border-collapse\">\n \u003Cthead>\n \u003Ctr>\n \u003Cth class=\"text-left\">Nombre\u003C/th>\n \u003Cth class=\"text-left\">Rol\u003C/th>\n \u003Cth class=\"text-left\">Acciones\u003C/th>\n \u003C/tr>\n \u003C/thead>\n \u003Ctbody>\n \u003Ctr v-for=\"user in rows\" :key=\"user.id\">\n \u003Ctd>{{ user.name }}\u003C/td>\n \u003Ctd>{{ user.role }}\u003C/td>\n \u003Ctd>\n \u003Cslot name=\"actions\" :user=\"user\">\n \u003Cbutton type=\"button\">Ver perfil\u003C/button>\n \u003C/slot>\n \u003C/td>\n \u003C/tr>\n \u003C/tbody>\n \u003C/table>\n\u003C/template>\n",[26,27467,27468,27476,27484,27489,27494,27499,27508,27512,27516,27520,27528,27532,27540,27554,27562,27570,27588,27606,27624,27632,27640,27648,27668,27680,27692,27700,27720,27738,27746,27754,27762,27770,27778],{"__ignoreMap":9},[286,27469,27470,27472,27474],{"class":288,"line":289},[286,27471,293],{"class":292},[286,27473,297],{"class":296},[286,27475,314],{"class":292},[286,27477,27478,27480,27482],{"class":288,"line":317},[286,27479,1065],{"class":320},[286,27481,1068],{"class":320},[286,27483,351],{"class":292},[286,27485,27486],{"class":288,"line":333},[286,27487,27488],{"class":292}," props: {\n",[286,27490,27491],{"class":288,"line":339},[286,27492,27493],{"class":292}," rows: {\n",[286,27495,27496],{"class":288,"line":354},[286,27497,27498],{"class":292}," type: Array,\n",[286,27500,27501,27504,27506],{"class":288,"line":368},[286,27502,27503],{"class":292}," required: ",[286,27505,2156],{"class":364},[286,27507,1085],{"class":292},[286,27509,27510],{"class":288,"line":379},[286,27511,7023],{"class":292},[286,27513,27514],{"class":288,"line":389},[286,27515,1139],{"class":292},[286,27517,27518],{"class":288,"line":399},[286,27519,18262],{"class":292},[286,27521,27522,27524,27526],{"class":288,"line":405},[286,27523,793],{"class":292},[286,27525,297],{"class":296},[286,27527,314],{"class":292},[286,27529,27530],{"class":288,"line":410},[286,27531,336],{"emptyLinePlaceholder":6},[286,27533,27534,27536,27538],{"class":288,"line":444},[286,27535,293],{"class":292},[286,27537,810],{"class":296},[286,27539,314],{"class":292},[286,27541,27542,27544,27546,27548,27550,27552],{"class":288,"line":464},[286,27543,818],{"class":292},[286,27545,5399],{"class":296},[286,27547,824],{"class":300},[286,27549,307],{"class":292},[286,27551,26954],{"class":310},[286,27553,314],{"class":292},[286,27555,27556,27558,27560],{"class":288,"line":469},[286,27557,837],{"class":292},[286,27559,5402],{"class":296},[286,27561,314],{"class":292},[286,27563,27564,27566,27568],{"class":288,"line":484},[286,27565,887],{"class":292},[286,27567,5405],{"class":296},[286,27569,314],{"class":292},[286,27571,27572,27574,27576,27578,27580,27582,27584,27586],{"class":288,"line":508},[286,27573,26693],{"class":292},[286,27575,5408],{"class":296},[286,27577,824],{"class":300},[286,27579,307],{"class":292},[286,27581,26985],{"class":310},[286,27583,26988],{"class":292},[286,27585,5408],{"class":296},[286,27587,314],{"class":292},[286,27589,27590,27592,27594,27596,27598,27600,27602,27604],{"class":288,"line":513},[286,27591,26693],{"class":292},[286,27593,5408],{"class":296},[286,27595,824],{"class":300},[286,27597,307],{"class":292},[286,27599,26985],{"class":310},[286,27601,27007],{"class":292},[286,27603,5408],{"class":296},[286,27605,314],{"class":292},[286,27607,27608,27610,27612,27614,27616,27618,27620,27622],{"class":288,"line":528},[286,27609,26693],{"class":292},[286,27611,5408],{"class":296},[286,27613,824],{"class":300},[286,27615,307],{"class":292},[286,27617,26985],{"class":310},[286,27619,27026],{"class":292},[286,27621,5408],{"class":296},[286,27623,314],{"class":292},[286,27625,27626,27628,27630],{"class":288,"line":547},[286,27627,4182],{"class":292},[286,27629,5405],{"class":296},[286,27631,314],{"class":292},[286,27633,27634,27636,27638],{"class":288,"line":553},[286,27635,930],{"class":292},[286,27637,5402],{"class":296},[286,27639,314],{"class":292},[286,27641,27642,27644,27646],{"class":288,"line":558},[286,27643,837],{"class":292},[286,27645,5421],{"class":296},[286,27647,314],{"class":292},[286,27649,27650,27652,27654,27656,27658,27660,27662,27664,27666],{"class":288,"line":586},[286,27651,887],{"class":292},[286,27653,5405],{"class":296},[286,27655,12792],{"class":300},[286,27657,307],{"class":292},[286,27659,27067],{"class":310},[286,27661,4324],{"class":300},[286,27663,307],{"class":292},[286,27665,12804],{"class":310},[286,27667,314],{"class":292},[286,27669,27670,27672,27674,27676,27678],{"class":288,"line":591},[286,27671,26693],{"class":292},[286,27673,5426],{"class":296},[286,27675,22773],{"class":292},[286,27677,5426],{"class":296},[286,27679,314],{"class":292},[286,27681,27682,27684,27686,27688,27690],{"class":288,"line":596},[286,27683,26693],{"class":292},[286,27685,5426],{"class":296},[286,27687,27096],{"class":292},[286,27689,5426],{"class":296},[286,27691,314],{"class":292},[286,27693,27694,27696,27698],{"class":288,"line":614},[286,27695,26693],{"class":292},[286,27697,5426],{"class":296},[286,27699,314],{"class":292},[286,27701,27702,27704,27706,27708,27710,27712,27714,27716,27718],{"class":288,"line":622},[286,27703,26703],{"class":292},[286,27705,25954],{"class":296},[286,27707,26528],{"class":300},[286,27709,307],{"class":292},[286,27711,27121],{"class":310},[286,27713,27124],{"class":300},[286,27715,307],{"class":292},[286,27717,21525],{"class":310},[286,27719,314],{"class":292},[286,27721,27722,27724,27726,27728,27730,27732,27734,27736],{"class":288,"line":633},[286,27723,27135],{"class":292},[286,27725,4274],{"class":296},[286,27727,4277],{"class":300},[286,27729,307],{"class":292},[286,27731,4282],{"class":310},[286,27733,27146],{"class":292},[286,27735,4274],{"class":296},[286,27737,314],{"class":292},[286,27739,27740,27742,27744],{"class":288,"line":645},[286,27741,26732],{"class":292},[286,27743,25954],{"class":296},[286,27745,314],{"class":292},[286,27747,27748,27750,27752],{"class":288,"line":654},[286,27749,26741],{"class":292},[286,27751,5426],{"class":296},[286,27753,314],{"class":292},[286,27755,27756,27758,27760],{"class":288,"line":676},[286,27757,4182],{"class":292},[286,27759,5405],{"class":296},[286,27761,314],{"class":292},[286,27763,27764,27766,27768],{"class":288,"line":681},[286,27765,930],{"class":292},[286,27767,5421],{"class":296},[286,27769,314],{"class":292},[286,27771,27772,27774,27776],{"class":288,"line":687},[286,27773,962],{"class":292},[286,27775,5399],{"class":296},[286,27777,314],{"class":292},[286,27779,27780,27782,27784],{"class":288,"line":692},[286,27781,793],{"class":292},[286,27783,810],{"class":296},[286,27785,314],{"class":292},[277,27787,27789],{"className":279,"code":27788,"filename":27202,"language":282,"meta":9,"style":9},"\u003Cscript>\nimport DataTable from \"./DataTable.vue\";\n\nexport default {\n components: { DataTable },\n data() {\n return {\n users: [\n { id: 1, name: \"Ana\", role: \"Admin\", active: true },\n { id: 2, name: \"Luis\", role: \"Editor\", active: false },\n ],\n };\n },\n methods: {\n toggleStatus(user) {\n user.active = !user.active;\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDataTable :rows=\"users\">\n \u003Ctemplate #actions=\"{ user }\">\n \u003Cbutton type=\"button\" @click=\"toggleStatus(user)\">\n {{ user.active ? \"Desactivar\" : \"Activar\" }}\n \u003C/button>\n \u003C/template>\n \u003C/DataTable>\n\u003C/template>\n",[26,27790,27791,27799,27811,27815,27823,27828,27834,27840,27844,27864,27884,27888,27892,27896,27900,27911,27922,27926,27930,27934,27942,27946,27954,27968,27988,28008,28012,28020,28028,28036],{"__ignoreMap":9},[286,27792,27793,27795,27797],{"class":288,"line":289},[286,27794,293],{"class":292},[286,27796,297],{"class":296},[286,27798,314],{"class":292},[286,27800,27801,27803,27805,27807,27809],{"class":288,"line":317},[286,27802,321],{"class":320},[286,27804,27233],{"class":292},[286,27806,327],{"class":320},[286,27808,27238],{"class":310},[286,27810,18158],{"class":292},[286,27812,27813],{"class":288,"line":333},[286,27814,336],{"emptyLinePlaceholder":6},[286,27816,27817,27819,27821],{"class":288,"line":339},[286,27818,1065],{"class":320},[286,27820,1068],{"class":320},[286,27822,351],{"class":292},[286,27824,27825],{"class":288,"line":354},[286,27826,27827],{"class":292}," components: { DataTable },\n",[286,27829,27830,27832],{"class":288,"line":368},[286,27831,1094],{"class":300},[286,27833,481],{"class":292},[286,27835,27836,27838],{"class":288,"line":379},[286,27837,1101],{"class":320},[286,27839,351],{"class":292},[286,27841,27842],{"class":288,"line":389},[286,27843,22901],{"class":292},[286,27845,27846,27848,27850,27852,27854,27856,27858,27860,27862],{"class":288,"line":399},[286,27847,2671],{"class":292},[286,27849,2079],{"class":364},[286,27851,22627],{"class":292},[286,27853,17591],{"class":310},[286,27855,27269],{"class":292},[286,27857,27272],{"class":310},[286,27859,27275],{"class":292},[286,27861,2156],{"class":364},[286,27863,2139],{"class":292},[286,27865,27866,27868,27870,27872,27874,27876,27878,27880,27882],{"class":288,"line":405},[286,27867,2671],{"class":292},[286,27869,2146],{"class":364},[286,27871,22627],{"class":292},[286,27873,22653],{"class":310},[286,27875,27269],{"class":292},[286,27877,27294],{"class":310},[286,27879,27275],{"class":292},[286,27881,2130],{"class":364},[286,27883,2139],{"class":292},[286,27885,27886],{"class":288,"line":410},[286,27887,10181],{"class":292},[286,27889,27890],{"class":288,"line":444},[286,27891,18485],{"class":292},[286,27893,27894],{"class":288,"line":464},[286,27895,1139],{"class":292},[286,27897,27898],{"class":288,"line":469},[286,27899,1148],{"class":292},[286,27901,27902,27905,27907,27909],{"class":288,"line":484},[286,27903,27904],{"class":300}," toggleStatus",[286,27906,456],{"class":292},[286,27908,27320],{"class":357},[286,27910,2483],{"class":292},[286,27912,27913,27916,27918,27920],{"class":288,"line":508},[286,27914,27915],{"class":292}," user.active ",[286,27917,307],{"class":320},[286,27919,2295],{"class":320},[286,27921,27334],{"class":292},[286,27923,27924],{"class":288,"line":513},[286,27925,7023],{"class":292},[286,27927,27928],{"class":288,"line":528},[286,27929,1139],{"class":292},[286,27931,27932],{"class":288,"line":547},[286,27933,18262],{"class":292},[286,27935,27936,27938,27940],{"class":288,"line":553},[286,27937,793],{"class":292},[286,27939,297],{"class":296},[286,27941,314],{"class":292},[286,27943,27944],{"class":288,"line":558},[286,27945,336],{"emptyLinePlaceholder":6},[286,27947,27948,27950,27952],{"class":288,"line":586},[286,27949,293],{"class":292},[286,27951,810],{"class":296},[286,27953,314],{"class":292},[286,27955,27956,27958,27960,27962,27964,27966],{"class":288,"line":591},[286,27957,818],{"class":292},[286,27959,26283],{"class":296},[286,27961,27367],{"class":300},[286,27963,307],{"class":292},[286,27965,27372],{"class":310},[286,27967,314],{"class":292},[286,27969,27970,27972,27974,27976,27978,27980,27982,27984,27986],{"class":288,"line":596},[286,27971,837],{"class":292},[286,27973,810],{"class":296},[286,27975,27383],{"class":292},[286,27977,27386],{"class":300},[286,27979,307],{"class":292},[286,27981,874],{"class":310},[286,27983,27393],{"class":292},[286,27985,874],{"class":310},[286,27987,314],{"class":292},[286,27989,27990,27992,27994,27996,27998,28000,28002,28004,28006],{"class":288,"line":614},[286,27991,887],{"class":292},[286,27993,4274],{"class":296},[286,27995,4277],{"class":300},[286,27997,307],{"class":292},[286,27999,4282],{"class":310},[286,28001,4285],{"class":300},[286,28003,307],{"class":292},[286,28005,27416],{"class":310},[286,28007,314],{"class":292},[286,28009,28010],{"class":288,"line":622},[286,28011,27423],{"class":292},[286,28013,28014,28016,28018],{"class":288,"line":633},[286,28015,4182],{"class":292},[286,28017,4274],{"class":296},[286,28019,314],{"class":292},[286,28021,28022,28024,28026],{"class":288,"line":645},[286,28023,930],{"class":292},[286,28025,810],{"class":296},[286,28027,314],{"class":292},[286,28029,28030,28032,28034],{"class":288,"line":654},[286,28031,962],{"class":292},[286,28033,26283],{"class":296},[286,28035,314],{"class":292},[286,28037,28038,28040,28042],{"class":288,"line":676},[286,28039,793],{"class":292},[286,28041,810],{"class":296},[286,28043,314],{"class":292},[40,28045,1604],{"id":1603},[48,28047,28048,28053,28056,28063,28066,28069],{},[51,28049,28050,28052],{},[26,28051,25876],{}," transforma componentes rígidos en piezas reutilizables y expresivas.",[51,28054,28055],{},"Usa el slot por defecto para el contenido principal.",[51,28057,28058,28059,235,28061,1815],{},"Usa slots nombrados para estructura (",[26,28060,4145],{},[26,28062,26588],{},[51,28064,28065],{},"Usa scoped slots cuando el hijo deba compartir datos y el padre controlar el render.",[51,28067,28068],{},"Define fallback cuando tenga sentido para evitar huecos vacíos.",[51,28070,28071],{},"Mantén la API clara: props para configuración, slots para contenido y emits para eventos.",[1614,28073,28074],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}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);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":9,"searchDepth":317,"depth":317,"links":28076},[28077,28078,28079,28080,28081,28088,28095],{"id":20631,"depth":317,"text":20632},{"id":24659,"depth":317,"text":24660},{"id":138,"depth":317,"text":139},{"id":165,"depth":317,"text":166},{"id":199,"depth":317,"text":200,"children":28082},[28083,28085,28086,28087],{"id":26160,"depth":333,"text":28084},"1) Usar v-slot en un elemento que no es componente o \u003Ctemplate>",{"id":26260,"depth":333,"text":26261},{"id":26328,"depth":333,"text":26329},{"id":26362,"depth":333,"text":26363},{"id":1952,"depth":317,"text":1953,"children":28089},[28090,28091,28092,28093],{"id":26400,"depth":333,"text":26401},{"id":26479,"depth":333,"text":26480},{"id":26635,"depth":333,"text":26636},{"id":26780,"depth":333,"text":28094},"4) v-slot con argumento dinámico",{"id":1603,"depth":317,"text":1604},"https://res.cloudinary.com/denj4fg7f/image/upload/v1771508914/directives-vue-v-slot-guide_wr2iyy.png","Portada del artículo Directivas en Vue: v-slot","2026-02-19","Aprende a dominar v-slot en Vue 3: slots por defecto, nombrados y con props (scoped slots), con ejemplos claros en Composition API y Options API.",{"script":28101},[28102],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":28103},[28104],{"headline":28105,"author":28106,"datePublished":28107,"@type":1647},"Directivas en Vue: v-slot con ejemplos claros y prácticos",{"name":1644,"@type":1645},"2026-02-19T08:00:00-05:00",{"updatedAt":28107,"coverCaption":28109,"author":1644,"keywords":28110},"Usa v-slot para construir componentes más flexibles y reutilizables.",[1652,25876,28111,26125,28112,281,979],"slots","componentes reutilizables","/blog/directives-vue-v-slot-guide.es",[28115],{"headline":28105,"author":28116,"datePublished":28107,"@type":1647},{"name":1644,"@type":1645},{"title":25868,"description":28099},"blog/directives-vue-v-slot-guide.es",[28120,28121,28123,28124],{"tag":20595,"color":20596},{"tag":26347,"color":28122},"#8E44AD",{"tag":1675,"color":1676},{"tag":1678,"color":1679},"cKASG35D1sU2CI29oLKyyZGU4f14DyJd0bjZXfP3iac",{"id":28127,"title":28128,"body":28129,"cover":30930,"coverAlt":30931,"date":30932,"description":30933,"draft":12,"extension":1635,"head":30934,"locale":1648,"meta":30942,"navigation":6,"path":30946,"schemaOrg":30947,"seo":30950,"series":20589,"seriesDescription":20590,"seriesOrder":368,"seriesTitle":20591,"slug":1663,"stem":30951,"tags":30952,"__hash__":30959},"blog/blog/directives-vue-v-model-guide.es.md","Directivas en Vue: v-model",{"type":18,"value":28130,"toc":30905},[28131,28136,28141,28143,28149,28154,28172,28174,28179,28183,28202,28224,28228,28231,28254,28257,28274,28284,28286,28291,28293,28317,28319,28323,28340,28342,28346,28348,28411,28420,28425,28432,28434,28464,28471,28474,28499,28503,28506,28528,28532,28538,28540,28544,28672,28802,28809,28953,29089,29093,29220,29350,29354,29356,29365,29508,30101,30103,30110,30292,30861,30863,30868,30871,30873,30903],[21,28132,20612,28134],{"id":28133},"directivas-en-vue-v-model",[26,28135,17978],{},[31,28137,28138,28140],{},[26,28139,17978],{}," reduce fricción en formularios porque sincroniza la UI y el estado con una sola declaración. Bien utilizado, hace que tus componentes sean más legibles y consistentes; mal aplicado, puede ocultar flujos de datos confusos y bugs sutiles.",[40,28142,20632],{"id":20631},[31,28144,28145,28146,28148],{},"En interfaces reales, gran parte de la experiencia depende de formularios y filtros.\n",[26,28147,17978],{}," te permite declarar la sincronización entre vista y estado sin manipular el DOM manualmente, manteniendo el código más predecible y fácil de mantener.",[31,28150,12003,28151,28153],{},[26,28152,17978],{}," puedes:",[48,28155,28156,28166,28169],{},[51,28157,28158,28159,28162,28163,114],{},"Evitar boilerplate repetitivo de ",[26,28160,28161],{},":value"," + ",[26,28164,28165],{},"@input",[51,28167,28168],{},"Mantener alineado lo que ve el usuario con el estado reactivo.",[51,28170,28171],{},"Estandarizar la API de componentes de formulario reutilizables.",[40,28173,71],{"id":70},[31,28175,20536,28176,28178],{},[26,28177,17978],{}," es azúcar sintáctica para enlazar un valor y escuchar su actualización.",[202,28180,28182],{"id":28181},"en-elementos-nativos","En elementos nativos",[48,28184,28185,28191],{},[51,28186,28187,28190],{},[26,28188,28189],{},"v-model=\"email\""," equivale a enlazar el valor y escuchar el evento correspondiente.",[51,28192,28193,28194,235,28196,235,28199,1815],{},"Vue adapta automáticamente la prop y el evento según el tipo de control (",[26,28195,18048],{},[26,28197,28198],{},"change",[26,28200,28201],{},"checkbox",[31,28203,28204,28205,28208,28209,28162,28211,28213,28214,28217,28218,28221,28222,114],{},"Por ejemplo, en un ",[26,28206,28207],{},"\u003Cinput type=\"text\">",", se traduce a ",[26,28210,28161],{},[26,28212,28165],{},".\nEn un ",[26,28215,28216],{},"\u003Cinput type=\"checkbox\">",", enlaza ",[26,28219,28220],{},"checked"," y escucha ",[26,28223,28198],{},[202,28225,28227],{"id":28226},"en-componentes","En componentes",[31,28229,28230],{},"En Vue 3:",[48,28232,28233,28239,28245],{},[51,28234,28235,28236,114],{},"Por defecto usa la prop ",[26,28237,28238],{},"modelValue",[51,28240,28241,28242,114],{},"Espera el evento ",[26,28243,28244],{},"update:modelValue",[51,28246,28247,28248,235,28251,114],{},"Puedes usar argumentos para modelos adicionales: ",[26,28249,28250],{},"v-model:title",[26,28252,28253],{},"v-model:filters",[31,28255,28256],{},"También soporta modificadores como:",[48,28258,28259,28264,28269],{},[51,28260,28261],{},[26,28262,28263],{},".trim",[51,28265,28266],{},[26,28267,28268],{},".number",[51,28270,28271],{},[26,28272,28273],{},".lazy",[31,28275,28276,28277,28280,28281,28283],{},"Desde Vue 3.3+, puedes usar ",[26,28278,28279],{},"defineModel()"," en ",[26,28282,19257],{}," para simplificar la definición del contrato del modelo en componentes.",[40,28285,139],{"id":138},[31,28287,20784,28288,28290],{},[26,28289,17978],{}," cuando el objetivo principal sea sincronizar datos de entrada con el estado de la aplicación.",[31,28292,3312],{},[48,28294,28295,28298,28301,28314],{},[51,28296,28297],{},"Formularios de registro, login o perfil.",[51,28299,28300],{},"Filtros de búsqueda en tiempo real.",[51,28302,28303,28304,235,28307,235,28310,28313],{},"Componentes de UI reutilizables (",[26,28305,28306],{},"TextInput",[26,28308,28309],{},"Toggle",[26,28311,28312],{},"Select",") con contrato consistente.",[51,28315,28316],{},"Configuraciones rápidas de interfaz (switches, sliders, preferencias).",[40,28318,166],{"id":165},[31,28320,7671,28321,7676],{},[26,28322,17978],{},[48,28324,28325,28331,28334,28337],{},[51,28326,28327,28328,28330],{},"El dato es de solo lectura o derivado (",[26,28329,1739],{}," sin setter).",[51,28332,28333],{},"Necesitas trazabilidad estricta de cada cambio por reglas de dominio complejas.",[51,28335,28336],{},"El procesamiento por pulsación es costoso y requiere un pipeline explícito (debounce, throttle, validaciones pesadas).",[51,28338,28339],{},"Quieres mantener un flujo explícito de eventos de negocio, no solo de UI.",[40,28341,200],{"id":199},[202,28343,28345],{"id":28344},"_1-mutar-props-directamente-en-el-hijo","1) Mutar props directamente en el hijo",[31,28347,24899],{},[277,28349,28352],{"className":279,"code":28350,"filename":28351,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{ modelValue: string }>()\nprops.modelValue = \"nuevo valor\"\n\u003C/script>\n","Evitar",[26,28353,28354,28370,28393,28403],{"__ignoreMap":9},[286,28355,28356,28358,28360,28362,28364,28366,28368],{"class":288,"line":289},[286,28357,293],{"class":292},[286,28359,297],{"class":296},[286,28361,301],{"class":300},[286,28363,304],{"class":300},[286,28365,307],{"class":292},[286,28367,311],{"class":310},[286,28369,314],{"class":292},[286,28371,28372,28374,28377,28379,28382,28384,28386,28388,28390],{"class":288,"line":317},[286,28373,413],{"class":320},[286,28375,28376],{"class":364}," props",[286,28378,348],{"class":320},[286,28380,28381],{"class":300}," defineProps",[286,28383,21375],{"class":292},[286,28385,28238],{"class":357},[286,28387,361],{"class":320},[286,28389,21383],{"class":364},[286,28391,28392],{"class":292}," }>()\n",[286,28394,28395,28398,28400],{"class":288,"line":333},[286,28396,28397],{"class":292},"props.modelValue ",[286,28399,307],{"class":320},[286,28401,28402],{"class":310}," \"nuevo valor\"\n",[286,28404,28405,28407,28409],{"class":288,"line":339},[286,28406,793],{"class":292},[286,28408,297],{"class":296},[286,28410,314],{"class":292},[31,28412,28413,28414,28416,28417,114],{},"Correcto: emite ",[26,28415,28244],{}," o usa ",[26,28418,28419],{},"defineModel",[3118,28421,28422],{},[31,28423,28424],{},"Las props son de solo lectura. Mutarlas rompe el flujo unidireccional de datos.",[202,28426,28428,28429,28431],{"id":28427},"_2-enlazar-v-model-a-expresiones-no-escribibles","2) Enlazar ",[26,28430,17978],{}," a expresiones no escribibles",[31,28433,24899],{},[277,28435,28437],{"className":279,"code":28436,"filename":28351,"language":282,"meta":9,"style":9},"\u003Cinput v-model=\"user.name.toUpperCase()\" />\n",[26,28438,28439],{"__ignoreMap":9},[286,28440,28441,28443,28445,28447,28449,28451,28454,28457,28460,28462],{"class":288,"line":289},[286,28442,293],{"class":292},[286,28444,18048],{"class":296},[286,28446,23758],{"class":300},[286,28448,307],{"class":292},[286,28450,874],{"class":310},[286,28452,28453],{"class":292},"user.name.",[286,28455,28456],{"class":300},"toUpperCase",[286,28458,28459],{"class":292},"()",[286,28461,874],{"class":310},[286,28463,4332],{"class":292},[3118,28465,28466],{},[31,28467,28468,28470],{},[26,28469,17978],{}," requiere una referencia escribible. Una expresión derivada no tiene setter.",[31,28472,28473],{},"Correcto:",[277,28475,28478],{"className":279,"code":28476,"filename":28477,"language":282,"meta":9,"style":9},"\u003Cinput v-model=\"user.name\" />\n","Recomendado",[26,28479,28480],{"__ignoreMap":9},[286,28481,28482,28484,28486,28488,28490,28492,28495,28497],{"class":288,"line":289},[286,28483,293],{"class":292},[286,28485,18048],{"class":296},[286,28487,23758],{"class":300},[286,28489,307],{"class":292},[286,28491,874],{"class":310},[286,28493,28494],{"class":292},"user.name",[286,28496,874],{"class":310},[286,28498,4332],{"class":292},[202,28500,28502],{"id":28501},"_3-no-usar-modificadores-donde-sí-aportan-valor","3) No usar modificadores donde sí aportan valor",[31,28504,28505],{},"Ejemplo:",[48,28507,28508,28513,28523],{},[51,28509,15945,28510,28512],{},[26,28511,28263],{},", guardas espacios innecesarios.",[51,28514,15945,28515,28517,28518,28520,28521,114],{},[26,28516,28268],{},", recibes ",[26,28519,5760],{}," cuando esperabas ",[26,28522,7978],{},[51,28524,15945,28525,28527],{},[26,28526,28273],{},", actualizas en cada pulsación cuando solo necesitabas al perder el foco.",[202,28529,28531],{"id":28530},"_4-meter-demasiada-lógica-en-el-setter-del-modelo","4) Meter demasiada lógica en el setter del modelo",[31,28533,28534,28535,28537],{},"Mantén el flujo de ",[26,28536,17978],{}," simple y mueve reglas complejas a funciones o composables.\nEl modelo debe sincronizar estado; la lógica de negocio no debería vivir en el setter.",[21,28539,1953],{"id":1952},[40,28541,28543],{"id":28542},"_1-input-de-texto-con-saneamiento-básico","1) Input de texto con saneamiento básico",[277,28545,28548],{"className":279,"code":28546,"filename":281,"highlights":28547,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst fullName = ref(\"\");\n\u003C/script>\n\n\u003Ctemplate>\n \u003Clabel>\n Nombre completo\n \u003Cinput v-model.trim=\"fullName\" type=\"text\" />\n \u003C/label>\n\u003C/template>\n",[405],[26,28549,28550,28566,28578,28582,28599,28607,28611,28619,28627,28632,28656,28664],{"__ignoreMap":9},[286,28551,28552,28554,28556,28558,28560,28562,28564],{"class":288,"line":289},[286,28553,293],{"class":292},[286,28555,297],{"class":296},[286,28557,301],{"class":300},[286,28559,304],{"class":300},[286,28561,307],{"class":292},[286,28563,311],{"class":310},[286,28565,314],{"class":292},[286,28567,28568,28570,28572,28574,28576],{"class":288,"line":317},[286,28569,321],{"class":320},[286,28571,11013],{"class":292},[286,28573,327],{"class":320},[286,28575,18155],{"class":310},[286,28577,18158],{"class":292},[286,28579,28580],{"class":288,"line":333},[286,28581,336],{"emptyLinePlaceholder":6},[286,28583,28584,28586,28589,28591,28593,28595,28597],{"class":288,"line":339},[286,28585,413],{"class":320},[286,28587,28588],{"class":364}," fullName",[286,28590,348],{"class":320},[286,28592,421],{"class":300},[286,28594,456],{"class":292},[286,28596,25323],{"class":310},[286,28598,18284],{"class":292},[286,28600,28601,28603,28605],{"class":288,"line":354},[286,28602,793],{"class":292},[286,28604,297],{"class":296},[286,28606,314],{"class":292},[286,28608,28609],{"class":288,"line":368},[286,28610,336],{"emptyLinePlaceholder":6},[286,28612,28613,28615,28617],{"class":288,"line":379},[286,28614,293],{"class":292},[286,28616,810],{"class":296},[286,28618,314],{"class":292},[286,28620,28621,28623,28625],{"class":288,"line":389},[286,28622,818],{"class":292},[286,28624,3882],{"class":296},[286,28626,314],{"class":292},[286,28628,28629],{"class":288,"line":399},[286,28630,28631],{"class":292}," Nombre completo\n",[286,28633,28635,28637,28639,28642,28644,28647,28649,28651,28654],{"class":28634,"line":405},[288,9405],[286,28636,837],{"class":292},[286,28638,18048],{"class":296},[286,28640,28641],{"class":300}," v-model.trim",[286,28643,307],{"class":292},[286,28645,28646],{"class":310},"\"fullName\"",[286,28648,4277],{"class":300},[286,28650,307],{"class":292},[286,28652,28653],{"class":310},"\"text\"",[286,28655,4332],{"class":292},[286,28657,28658,28660,28662],{"class":288,"line":410},[286,28659,962],{"class":292},[286,28661,3882],{"class":296},[286,28663,314],{"class":292},[286,28665,28666,28668,28670],{"class":288,"line":444},[286,28667,793],{"class":292},[286,28669,810],{"class":296},[286,28671,314],{"class":292},[277,28673,28676],{"className":279,"code":28674,"filename":979,"highlights":28675,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n fullName: \"\",\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Clabel>\n Nombre completo\n \u003Cinput v-model.trim=\"fullName\" type=\"text\" />\n \u003C/label>\n\u003C/template>\n",[469],[26,28677,28678,28692,28700,28706,28712,28721,28725,28729,28733,28741,28745,28753,28761,28765,28786,28794],{"__ignoreMap":9},[286,28679,28680,28682,28684,28686,28688,28690],{"class":288,"line":289},[286,28681,293],{"class":292},[286,28683,297],{"class":296},[286,28685,304],{"class":300},[286,28687,307],{"class":292},[286,28689,311],{"class":310},[286,28691,314],{"class":292},[286,28693,28694,28696,28698],{"class":288,"line":317},[286,28695,1065],{"class":320},[286,28697,1068],{"class":320},[286,28699,351],{"class":292},[286,28701,28702,28704],{"class":288,"line":333},[286,28703,1094],{"class":300},[286,28705,481],{"class":292},[286,28707,28708,28710],{"class":288,"line":339},[286,28709,1101],{"class":320},[286,28711,351],{"class":292},[286,28713,28714,28717,28719],{"class":288,"line":354},[286,28715,28716],{"class":292}," fullName: ",[286,28718,25323],{"class":310},[286,28720,1085],{"class":292},[286,28722,28723],{"class":288,"line":368},[286,28724,18485],{"class":292},[286,28726,28727],{"class":288,"line":379},[286,28728,1139],{"class":292},[286,28730,28731],{"class":288,"line":389},[286,28732,18262],{"class":292},[286,28734,28735,28737,28739],{"class":288,"line":399},[286,28736,793],{"class":292},[286,28738,297],{"class":296},[286,28740,314],{"class":292},[286,28742,28743],{"class":288,"line":405},[286,28744,336],{"emptyLinePlaceholder":6},[286,28746,28747,28749,28751],{"class":288,"line":410},[286,28748,293],{"class":292},[286,28750,810],{"class":296},[286,28752,314],{"class":292},[286,28754,28755,28757,28759],{"class":288,"line":444},[286,28756,818],{"class":292},[286,28758,3882],{"class":296},[286,28760,314],{"class":292},[286,28762,28763],{"class":288,"line":464},[286,28764,28631],{"class":292},[286,28766,28768,28770,28772,28774,28776,28778,28780,28782,28784],{"class":28767,"line":469},[288,9405],[286,28769,837],{"class":292},[286,28771,18048],{"class":296},[286,28773,28641],{"class":300},[286,28775,307],{"class":292},[286,28777,28646],{"class":310},[286,28779,4277],{"class":300},[286,28781,307],{"class":292},[286,28783,28653],{"class":310},[286,28785,4332],{"class":292},[286,28787,28788,28790,28792],{"class":288,"line":484},[286,28789,962],{"class":292},[286,28791,3882],{"class":296},[286,28793,314],{"class":292},[286,28795,28796,28798,28800],{"class":288,"line":508},[286,28797,793],{"class":292},[286,28799,810],{"class":296},[286,28801,314],{"class":292},[40,28803,28805,28806],{"id":28804},"_2-input-numérico-con-v-modelnumber","2) Input numérico con ",[26,28807,28808],{},"v-model.number",[277,28810,28813],{"className":279,"code":28811,"filename":281,"highlights":28812,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst age = ref\u003Cnumber | null>(null);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Clabel>\n Edad\n \u003Cinput v-model.number=\"age\" type=\"number\" min=\"0\" />\n \u003C/label>\n\u003C/template>\n",[405],[26,28814,28815,28831,28843,28847,28872,28880,28884,28892,28900,28905,28937,28945],{"__ignoreMap":9},[286,28816,28817,28819,28821,28823,28825,28827,28829],{"class":288,"line":289},[286,28818,293],{"class":292},[286,28820,297],{"class":296},[286,28822,301],{"class":300},[286,28824,304],{"class":300},[286,28826,307],{"class":292},[286,28828,311],{"class":310},[286,28830,314],{"class":292},[286,28832,28833,28835,28837,28839,28841],{"class":288,"line":317},[286,28834,321],{"class":320},[286,28836,11013],{"class":292},[286,28838,327],{"class":320},[286,28840,18155],{"class":310},[286,28842,18158],{"class":292},[286,28844,28845],{"class":288,"line":333},[286,28846,336],{"emptyLinePlaceholder":6},[286,28848,28849,28851,28854,28856,28858,28860,28862,28864,28866,28868,28870],{"class":288,"line":339},[286,28850,413],{"class":320},[286,28852,28853],{"class":364}," age",[286,28855,348],{"class":320},[286,28857,421],{"class":300},[286,28859,293],{"class":292},[286,28861,7978],{"class":364},[286,28863,429],{"class":320},[286,28865,432],{"class":364},[286,28867,435],{"class":292},[286,28869,438],{"class":364},[286,28871,18284],{"class":292},[286,28873,28874,28876,28878],{"class":288,"line":354},[286,28875,793],{"class":292},[286,28877,297],{"class":296},[286,28879,314],{"class":292},[286,28881,28882],{"class":288,"line":368},[286,28883,336],{"emptyLinePlaceholder":6},[286,28885,28886,28888,28890],{"class":288,"line":379},[286,28887,293],{"class":292},[286,28889,810],{"class":296},[286,28891,314],{"class":292},[286,28893,28894,28896,28898],{"class":288,"line":389},[286,28895,818],{"class":292},[286,28897,3882],{"class":296},[286,28899,314],{"class":292},[286,28901,28902],{"class":288,"line":399},[286,28903,28904],{"class":292}," Edad\n",[286,28906,28908,28910,28912,28915,28917,28920,28922,28924,28927,28930,28932,28935],{"class":28907,"line":405},[288,9405],[286,28909,837],{"class":292},[286,28911,18048],{"class":296},[286,28913,28914],{"class":300}," v-model.number",[286,28916,307],{"class":292},[286,28918,28919],{"class":310},"\"age\"",[286,28921,4277],{"class":300},[286,28923,307],{"class":292},[286,28925,28926],{"class":310},"\"number\"",[286,28928,28929],{"class":300}," min",[286,28931,307],{"class":292},[286,28933,28934],{"class":310},"\"0\"",[286,28936,4332],{"class":292},[286,28938,28939,28941,28943],{"class":288,"line":410},[286,28940,962],{"class":292},[286,28942,3882],{"class":296},[286,28944,314],{"class":292},[286,28946,28947,28949,28951],{"class":288,"line":444},[286,28948,793],{"class":292},[286,28950,810],{"class":296},[286,28952,314],{"class":292},[277,28954,28957],{"className":279,"code":28955,"filename":979,"highlights":28956,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n age: null,\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Clabel>\n Edad\n \u003Cinput v-model.number=\"age\" type=\"number\" min=\"0\" />\n \u003C/label>\n\u003C/template>\n",[469],[26,28958,28959,28973,28981,28987,28993,29002,29006,29010,29014,29022,29026,29034,29042,29046,29073,29081],{"__ignoreMap":9},[286,28960,28961,28963,28965,28967,28969,28971],{"class":288,"line":289},[286,28962,293],{"class":292},[286,28964,297],{"class":296},[286,28966,304],{"class":300},[286,28968,307],{"class":292},[286,28970,311],{"class":310},[286,28972,314],{"class":292},[286,28974,28975,28977,28979],{"class":288,"line":317},[286,28976,1065],{"class":320},[286,28978,1068],{"class":320},[286,28980,351],{"class":292},[286,28982,28983,28985],{"class":288,"line":333},[286,28984,1094],{"class":300},[286,28986,481],{"class":292},[286,28988,28989,28991],{"class":288,"line":339},[286,28990,1101],{"class":320},[286,28992,351],{"class":292},[286,28994,28995,28998,29000],{"class":288,"line":354},[286,28996,28997],{"class":292}," age: ",[286,28999,438],{"class":364},[286,29001,1085],{"class":292},[286,29003,29004],{"class":288,"line":368},[286,29005,18485],{"class":292},[286,29007,29008],{"class":288,"line":379},[286,29009,1139],{"class":292},[286,29011,29012],{"class":288,"line":389},[286,29013,18262],{"class":292},[286,29015,29016,29018,29020],{"class":288,"line":399},[286,29017,793],{"class":292},[286,29019,297],{"class":296},[286,29021,314],{"class":292},[286,29023,29024],{"class":288,"line":405},[286,29025,336],{"emptyLinePlaceholder":6},[286,29027,29028,29030,29032],{"class":288,"line":410},[286,29029,293],{"class":292},[286,29031,810],{"class":296},[286,29033,314],{"class":292},[286,29035,29036,29038,29040],{"class":288,"line":444},[286,29037,818],{"class":292},[286,29039,3882],{"class":296},[286,29041,314],{"class":292},[286,29043,29044],{"class":288,"line":464},[286,29045,28904],{"class":292},[286,29047,29049,29051,29053,29055,29057,29059,29061,29063,29065,29067,29069,29071],{"class":29048,"line":469},[288,9405],[286,29050,837],{"class":292},[286,29052,18048],{"class":296},[286,29054,28914],{"class":300},[286,29056,307],{"class":292},[286,29058,28919],{"class":310},[286,29060,4277],{"class":300},[286,29062,307],{"class":292},[286,29064,28926],{"class":310},[286,29066,28929],{"class":300},[286,29068,307],{"class":292},[286,29070,28934],{"class":310},[286,29072,4332],{"class":292},[286,29074,29075,29077,29079],{"class":288,"line":484},[286,29076,962],{"class":292},[286,29078,3882],{"class":296},[286,29080,314],{"class":292},[286,29082,29083,29085,29087],{"class":288,"line":508},[286,29084,793],{"class":292},[286,29086,810],{"class":296},[286,29088,314],{"class":292},[40,29090,29092],{"id":29091},"_3-checkbox-para-estado-booleano","3) Checkbox para estado booleano",[277,29094,29097],{"className":279,"code":29095,"filename":281,"highlights":29096,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst acceptedTerms = ref(false);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Clabel>\n \u003Cinput v-model=\"acceptedTerms\" type=\"checkbox\" />\n Acepto términos y condiciones\n \u003C/label>\n\u003C/template>\n",[399],[26,29098,29099,29115,29127,29131,29148,29156,29160,29168,29176,29199,29204,29212],{"__ignoreMap":9},[286,29100,29101,29103,29105,29107,29109,29111,29113],{"class":288,"line":289},[286,29102,293],{"class":292},[286,29104,297],{"class":296},[286,29106,301],{"class":300},[286,29108,304],{"class":300},[286,29110,307],{"class":292},[286,29112,311],{"class":310},[286,29114,314],{"class":292},[286,29116,29117,29119,29121,29123,29125],{"class":288,"line":317},[286,29118,321],{"class":320},[286,29120,11013],{"class":292},[286,29122,327],{"class":320},[286,29124,18155],{"class":310},[286,29126,18158],{"class":292},[286,29128,29129],{"class":288,"line":333},[286,29130,336],{"emptyLinePlaceholder":6},[286,29132,29133,29135,29138,29140,29142,29144,29146],{"class":288,"line":339},[286,29134,413],{"class":320},[286,29136,29137],{"class":364}," acceptedTerms",[286,29139,348],{"class":320},[286,29141,421],{"class":300},[286,29143,456],{"class":292},[286,29145,2130],{"class":364},[286,29147,18284],{"class":292},[286,29149,29150,29152,29154],{"class":288,"line":354},[286,29151,793],{"class":292},[286,29153,297],{"class":296},[286,29155,314],{"class":292},[286,29157,29158],{"class":288,"line":368},[286,29159,336],{"emptyLinePlaceholder":6},[286,29161,29162,29164,29166],{"class":288,"line":379},[286,29163,293],{"class":292},[286,29165,810],{"class":296},[286,29167,314],{"class":292},[286,29169,29170,29172,29174],{"class":288,"line":389},[286,29171,818],{"class":292},[286,29173,3882],{"class":296},[286,29175,314],{"class":292},[286,29177,29179,29181,29183,29185,29187,29190,29192,29194,29197],{"class":29178,"line":399},[288,9405],[286,29180,837],{"class":292},[286,29182,18048],{"class":296},[286,29184,23758],{"class":300},[286,29186,307],{"class":292},[286,29188,29189],{"class":310},"\"acceptedTerms\"",[286,29191,4277],{"class":300},[286,29193,307],{"class":292},[286,29195,29196],{"class":310},"\"checkbox\"",[286,29198,4332],{"class":292},[286,29200,29201],{"class":288,"line":405},[286,29202,29203],{"class":292}," Acepto términos y condiciones\n",[286,29205,29206,29208,29210],{"class":288,"line":410},[286,29207,962],{"class":292},[286,29209,3882],{"class":296},[286,29211,314],{"class":292},[286,29213,29214,29216,29218],{"class":288,"line":444},[286,29215,793],{"class":292},[286,29217,810],{"class":296},[286,29219,314],{"class":292},[277,29221,29224],{"className":279,"code":29222,"filename":979,"highlights":29223,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n acceptedTerms: false,\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Clabel>\n \u003Cinput v-model=\"acceptedTerms\" type=\"checkbox\" />\n Acepto términos y condiciones\n \u003C/label>\n\u003C/template>\n",[464],[26,29225,29226,29240,29248,29254,29260,29269,29273,29277,29281,29289,29293,29301,29309,29330,29334,29342],{"__ignoreMap":9},[286,29227,29228,29230,29232,29234,29236,29238],{"class":288,"line":289},[286,29229,293],{"class":292},[286,29231,297],{"class":296},[286,29233,304],{"class":300},[286,29235,307],{"class":292},[286,29237,311],{"class":310},[286,29239,314],{"class":292},[286,29241,29242,29244,29246],{"class":288,"line":317},[286,29243,1065],{"class":320},[286,29245,1068],{"class":320},[286,29247,351],{"class":292},[286,29249,29250,29252],{"class":288,"line":333},[286,29251,1094],{"class":300},[286,29253,481],{"class":292},[286,29255,29256,29258],{"class":288,"line":339},[286,29257,1101],{"class":320},[286,29259,351],{"class":292},[286,29261,29262,29265,29267],{"class":288,"line":354},[286,29263,29264],{"class":292}," acceptedTerms: ",[286,29266,2130],{"class":364},[286,29268,1085],{"class":292},[286,29270,29271],{"class":288,"line":368},[286,29272,18485],{"class":292},[286,29274,29275],{"class":288,"line":379},[286,29276,1139],{"class":292},[286,29278,29279],{"class":288,"line":389},[286,29280,18262],{"class":292},[286,29282,29283,29285,29287],{"class":288,"line":399},[286,29284,793],{"class":292},[286,29286,297],{"class":296},[286,29288,314],{"class":292},[286,29290,29291],{"class":288,"line":405},[286,29292,336],{"emptyLinePlaceholder":6},[286,29294,29295,29297,29299],{"class":288,"line":410},[286,29296,293],{"class":292},[286,29298,810],{"class":296},[286,29300,314],{"class":292},[286,29302,29303,29305,29307],{"class":288,"line":444},[286,29304,818],{"class":292},[286,29306,3882],{"class":296},[286,29308,314],{"class":292},[286,29310,29312,29314,29316,29318,29320,29322,29324,29326,29328],{"class":29311,"line":464},[288,9405],[286,29313,837],{"class":292},[286,29315,18048],{"class":296},[286,29317,23758],{"class":300},[286,29319,307],{"class":292},[286,29321,29189],{"class":310},[286,29323,4277],{"class":300},[286,29325,307],{"class":292},[286,29327,29196],{"class":310},[286,29329,4332],{"class":292},[286,29331,29332],{"class":288,"line":469},[286,29333,29203],{"class":292},[286,29335,29336,29338,29340],{"class":288,"line":484},[286,29337,962],{"class":292},[286,29339,3882],{"class":296},[286,29341,314],{"class":292},[286,29343,29344,29346,29348],{"class":288,"line":508},[286,29345,793],{"class":292},[286,29347,810],{"class":296},[286,29349,314],{"class":292},[40,29351,29353],{"id":29352},"_4-ejemplos-completos","4) Ejemplos completos",[202,29355,26869],{"id":26868},[31,29357,29358,29361,29362,29364],{},[26,29359,29360],{},"SearchInput"," reutilizable con ",[26,29363,28419],{}," + pantalla de filtros:",[277,29366,29370],{"className":279,"code":29367,"filename":29368,"highlights":29369,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nconst model = defineModel\u003Cstring>({ default: \"\" });\n\u003C/script>\n\n\u003Ctemplate>\n \u003Clabel class=\"field\">\n Buscar\n \u003Cinput\n v-model.trim=\"model\"\n type=\"text\"\n placeholder=\"Escribe para filtrar...\"\n />\n \u003C/label>\n\u003C/template>\n","SearchInput.vue",[399],[26,29371,29372,29388,29412,29420,29424,29432,29447,29452,29458,29469,29478,29487,29492,29500],{"__ignoreMap":9},[286,29373,29374,29376,29378,29380,29382,29384,29386],{"class":288,"line":289},[286,29375,293],{"class":292},[286,29377,297],{"class":296},[286,29379,301],{"class":300},[286,29381,304],{"class":300},[286,29383,307],{"class":292},[286,29385,311],{"class":310},[286,29387,314],{"class":292},[286,29389,29390,29392,29395,29397,29400,29402,29404,29407,29409],{"class":288,"line":317},[286,29391,413],{"class":320},[286,29393,29394],{"class":364}," model",[286,29396,348],{"class":320},[286,29398,29399],{"class":300}," defineModel",[286,29401,293],{"class":292},[286,29403,5760],{"class":364},[286,29405,29406],{"class":292},">({ default: ",[286,29408,25323],{"class":310},[286,29410,29411],{"class":292}," });\n",[286,29413,29414,29416,29418],{"class":288,"line":333},[286,29415,793],{"class":292},[286,29417,297],{"class":296},[286,29419,314],{"class":292},[286,29421,29422],{"class":288,"line":339},[286,29423,336],{"emptyLinePlaceholder":6},[286,29425,29426,29428,29430],{"class":288,"line":354},[286,29427,293],{"class":292},[286,29429,810],{"class":296},[286,29431,314],{"class":292},[286,29433,29434,29436,29438,29440,29442,29445],{"class":288,"line":368},[286,29435,818],{"class":292},[286,29437,3882],{"class":296},[286,29439,824],{"class":300},[286,29441,307],{"class":292},[286,29443,29444],{"class":310},"\"field\"",[286,29446,314],{"class":292},[286,29448,29449],{"class":288,"line":379},[286,29450,29451],{"class":292}," Buscar\n",[286,29453,29454,29456],{"class":288,"line":389},[286,29455,837],{"class":292},[286,29457,11556],{"class":296},[286,29459,29461,29464,29466],{"class":29460,"line":399},[288,9405],[286,29462,29463],{"class":300}," v-model.trim",[286,29465,307],{"class":292},[286,29467,29468],{"class":310},"\"model\"\n",[286,29470,29471,29473,29475],{"class":288,"line":405},[286,29472,11570],{"class":300},[286,29474,307],{"class":292},[286,29476,29477],{"class":310},"\"text\"\n",[286,29479,29480,29482,29484],{"class":288,"line":410},[286,29481,11580],{"class":300},[286,29483,307],{"class":292},[286,29485,29486],{"class":310},"\"Escribe para filtrar...\"\n",[286,29488,29489],{"class":288,"line":444},[286,29490,29491],{"class":292}," />\n",[286,29493,29494,29496,29498],{"class":288,"line":464},[286,29495,962],{"class":292},[286,29497,3882],{"class":296},[286,29499,314],{"class":292},[286,29501,29502,29504,29506],{"class":288,"line":469},[286,29503,793],{"class":292},[286,29505,810],{"class":296},[286,29507,314],{"class":292},[277,29509,29512],{"className":279,"code":29510,"filename":29511,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport SearchInput from \"./SearchInput.vue\";\n\nconst query = ref(\"\");\nconst minPrice = ref\u003Cnumber | null>(null);\nconst onlyInStock = ref(false);\n\nconst products = ref([\n { id: 1, name: \"Teclado mecánico\", price: 89, stock: true },\n { id: 2, name: \"Mouse ergonómico\", price: 45, stock: false },\n { id: 3, name: 'Monitor 27\"', price: 299, stock: true },\n]);\n\nconst filteredProducts = computed(() =>\n products.value.filter((p) => {\n const matchesQuery =\n p.name.toLowerCase().includes(query.value.toLowerCase());\n const matchesPrice =\n minPrice.value == null || p.price >= minPrice.value;\n const matchesStock = !onlyInStock.value || p.stock;\n\n return matchesQuery && matchesPrice && matchesStock;\n })\n);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Csection>\n \u003Ch2>Filtros\u003C/h2>\n\n \u003CSearchInput v-model=\"query\" />\n\n \u003Clabel>\n Precio mínimo\n \u003Cinput v-model.number=\"minPrice\" type=\"number\" min=\"0\" />\n \u003C/label>\n\n \u003Clabel>\n \u003Cinput v-model=\"onlyInStock\" type=\"checkbox\" />\n Solo disponibles\n \u003C/label>\n\n \u003Cul>\n \u003Cli v-for=\"item in filteredProducts\" :key=\"item.id\">\n {{ item.name }} - ${{ item.price }}\n \u003Cspan v-if=\"!item.stock\">(sin stock)\u003C/span>\n \u003C/li>\n \u003C/ul>\n \u003C/section>\n\u003C/template>\n","ProductFilter.vue",[26,29513,29514,29530,29542,29556,29560,29577,29602,29619,29623,29636,29660,29682,29704,29708,29712,29727,29744,29754,29773,29782,29804,29823,29827,29844,29848,29852,29860,29864,29872,29880,29893,29897,29912,29916,29924,29929,29956,29964,29968,29976,29997,30002,30010,30014,30022,30044,30049,30069,30077,30085,30093],{"__ignoreMap":9},[286,29515,29516,29518,29520,29522,29524,29526,29528],{"class":288,"line":289},[286,29517,293],{"class":292},[286,29519,297],{"class":296},[286,29521,301],{"class":300},[286,29523,304],{"class":300},[286,29525,307],{"class":292},[286,29527,311],{"class":310},[286,29529,314],{"class":292},[286,29531,29532,29534,29536,29538,29540],{"class":288,"line":317},[286,29533,321],{"class":320},[286,29535,23391],{"class":292},[286,29537,327],{"class":320},[286,29539,18155],{"class":310},[286,29541,18158],{"class":292},[286,29543,29544,29546,29549,29551,29554],{"class":288,"line":333},[286,29545,321],{"class":320},[286,29547,29548],{"class":292}," SearchInput ",[286,29550,327],{"class":320},[286,29552,29553],{"class":310}," \"./SearchInput.vue\"",[286,29555,18158],{"class":292},[286,29557,29558],{"class":288,"line":339},[286,29559,336],{"emptyLinePlaceholder":6},[286,29561,29562,29564,29567,29569,29571,29573,29575],{"class":288,"line":354},[286,29563,413],{"class":320},[286,29565,29566],{"class":364}," query",[286,29568,348],{"class":320},[286,29570,421],{"class":300},[286,29572,456],{"class":292},[286,29574,25323],{"class":310},[286,29576,18284],{"class":292},[286,29578,29579,29581,29584,29586,29588,29590,29592,29594,29596,29598,29600],{"class":288,"line":368},[286,29580,413],{"class":320},[286,29582,29583],{"class":364}," minPrice",[286,29585,348],{"class":320},[286,29587,421],{"class":300},[286,29589,293],{"class":292},[286,29591,7978],{"class":364},[286,29593,429],{"class":320},[286,29595,432],{"class":364},[286,29597,435],{"class":292},[286,29599,438],{"class":364},[286,29601,18284],{"class":292},[286,29603,29604,29606,29609,29611,29613,29615,29617],{"class":288,"line":379},[286,29605,413],{"class":320},[286,29607,29608],{"class":364}," onlyInStock",[286,29610,348],{"class":320},[286,29612,421],{"class":300},[286,29614,456],{"class":292},[286,29616,2130],{"class":364},[286,29618,18284],{"class":292},[286,29620,29621],{"class":288,"line":389},[286,29622,336],{"emptyLinePlaceholder":6},[286,29624,29625,29627,29630,29632,29634],{"class":288,"line":399},[286,29626,413],{"class":320},[286,29628,29629],{"class":364}," products",[286,29631,348],{"class":320},[286,29633,421],{"class":300},[286,29635,2111],{"class":292},[286,29637,29638,29640,29642,29644,29647,29650,29653,29656,29658],{"class":288,"line":405},[286,29639,2116],{"class":292},[286,29641,2079],{"class":364},[286,29643,22627],{"class":292},[286,29645,29646],{"class":310},"\"Teclado mecánico\"",[286,29648,29649],{"class":292},", price: ",[286,29651,29652],{"class":364},"89",[286,29654,29655],{"class":292},", stock: ",[286,29657,2156],{"class":364},[286,29659,2139],{"class":292},[286,29661,29662,29664,29666,29668,29671,29673,29676,29678,29680],{"class":288,"line":410},[286,29663,2116],{"class":292},[286,29665,2146],{"class":364},[286,29667,22627],{"class":292},[286,29669,29670],{"class":310},"\"Mouse ergonómico\"",[286,29672,29649],{"class":292},[286,29674,29675],{"class":364},"45",[286,29677,29655],{"class":292},[286,29679,2130],{"class":364},[286,29681,2139],{"class":292},[286,29683,29684,29686,29688,29690,29693,29695,29698,29700,29702],{"class":288,"line":444},[286,29685,2116],{"class":292},[286,29687,2170],{"class":364},[286,29689,22627],{"class":292},[286,29691,29692],{"class":310},"'Monitor 27\"'",[286,29694,29649],{"class":292},[286,29696,29697],{"class":364},"299",[286,29699,29655],{"class":292},[286,29701,2156],{"class":364},[286,29703,2139],{"class":292},[286,29705,29706],{"class":288,"line":464},[286,29707,22691],{"class":292},[286,29709,29710],{"class":288,"line":469},[286,29711,336],{"emptyLinePlaceholder":6},[286,29713,29714,29716,29719,29721,29723,29725],{"class":288,"line":484},[286,29715,413],{"class":320},[286,29717,29718],{"class":364}," filteredProducts",[286,29720,348],{"class":320},[286,29722,2207],{"class":300},[286,29724,2210],{"class":292},[286,29726,3723],{"class":320},[286,29728,29729,29732,29734,29736,29738,29740,29742],{"class":288,"line":508},[286,29730,29731],{"class":292}," products.value.",[286,29733,2225],{"class":300},[286,29735,2341],{"class":292},[286,29737,31],{"class":357},[286,29739,2347],{"class":292},[286,29741,609],{"class":320},[286,29743,351],{"class":292},[286,29745,29746,29748,29751],{"class":288,"line":513},[286,29747,2240],{"class":320},[286,29749,29750],{"class":364}," matchesQuery",[286,29752,29753],{"class":320}," =\n",[286,29755,29756,29759,29761,29763,29765,29768,29770],{"class":288,"line":528},[286,29757,29758],{"class":292}," p.name.",[286,29760,2256],{"class":300},[286,29762,6041],{"class":292},[286,29764,2265],{"class":300},[286,29766,29767],{"class":292},"(query.value.",[286,29769,2256],{"class":300},[286,29771,29772],{"class":292},"());\n",[286,29774,29775,29777,29780],{"class":288,"line":547},[286,29776,2240],{"class":320},[286,29778,29779],{"class":364}," matchesPrice",[286,29781,29753],{"class":320},[286,29783,29784,29787,29790,29792,29795,29798,29801],{"class":288,"line":553},[286,29785,29786],{"class":292}," minPrice.value ",[286,29788,29789],{"class":320},"==",[286,29791,432],{"class":364},[286,29793,29794],{"class":320}," ||",[286,29796,29797],{"class":292}," p.price ",[286,29799,29800],{"class":320},">=",[286,29802,29803],{"class":292}," minPrice.value;\n",[286,29805,29806,29808,29811,29813,29815,29818,29820],{"class":288,"line":558},[286,29807,2240],{"class":320},[286,29809,29810],{"class":364}," matchesStock",[286,29812,348],{"class":320},[286,29814,2295],{"class":320},[286,29816,29817],{"class":292},"onlyInStock.value ",[286,29819,716],{"class":320},[286,29821,29822],{"class":292}," p.stock;\n",[286,29824,29825],{"class":288,"line":586},[286,29826,336],{"emptyLinePlaceholder":6},[286,29828,29829,29831,29834,29836,29839,29841],{"class":288,"line":591},[286,29830,1101],{"class":320},[286,29832,29833],{"class":292}," matchesQuery ",[286,29835,2317],{"class":320},[286,29837,29838],{"class":292}," matchesPrice ",[286,29840,2317],{"class":320},[286,29842,29843],{"class":292}," matchesStock;\n",[286,29845,29846],{"class":288,"line":596},[286,29847,2325],{"class":292},[286,29849,29850],{"class":288,"line":614},[286,29851,18284],{"class":292},[286,29853,29854,29856,29858],{"class":288,"line":622},[286,29855,793],{"class":292},[286,29857,297],{"class":296},[286,29859,314],{"class":292},[286,29861,29862],{"class":288,"line":633},[286,29863,336],{"emptyLinePlaceholder":6},[286,29865,29866,29868,29870],{"class":288,"line":645},[286,29867,293],{"class":292},[286,29869,810],{"class":296},[286,29871,314],{"class":292},[286,29873,29874,29876,29878],{"class":288,"line":654},[286,29875,818],{"class":292},[286,29877,4128],{"class":296},[286,29879,314],{"class":292},[286,29881,29882,29884,29886,29889,29891],{"class":288,"line":676},[286,29883,837],{"class":292},[286,29885,40],{"class":296},[286,29887,29888],{"class":292},">Filtros\u003C/",[286,29890,40],{"class":296},[286,29892,314],{"class":292},[286,29894,29895],{"class":288,"line":681},[286,29896,336],{"emptyLinePlaceholder":6},[286,29898,29899,29901,29903,29905,29907,29910],{"class":288,"line":687},[286,29900,837],{"class":292},[286,29902,29360],{"class":296},[286,29904,23758],{"class":300},[286,29906,307],{"class":292},[286,29908,29909],{"class":310},"\"query\"",[286,29911,4332],{"class":292},[286,29913,29914],{"class":288,"line":692},[286,29915,336],{"emptyLinePlaceholder":6},[286,29917,29918,29920,29922],{"class":288,"line":708},[286,29919,837],{"class":292},[286,29921,3882],{"class":296},[286,29923,314],{"class":292},[286,29925,29926],{"class":288,"line":725},[286,29927,29928],{"class":292}," Precio mínimo\n",[286,29930,29931,29933,29935,29937,29939,29942,29944,29946,29948,29950,29952,29954],{"class":288,"line":730},[286,29932,887],{"class":292},[286,29934,18048],{"class":296},[286,29936,28914],{"class":300},[286,29938,307],{"class":292},[286,29940,29941],{"class":310},"\"minPrice\"",[286,29943,4277],{"class":300},[286,29945,307],{"class":292},[286,29947,28926],{"class":310},[286,29949,28929],{"class":300},[286,29951,307],{"class":292},[286,29953,28934],{"class":310},[286,29955,4332],{"class":292},[286,29957,29958,29960,29962],{"class":288,"line":737},[286,29959,930],{"class":292},[286,29961,3882],{"class":296},[286,29963,314],{"class":292},[286,29965,29966],{"class":288,"line":746},[286,29967,336],{"emptyLinePlaceholder":6},[286,29969,29970,29972,29974],{"class":288,"line":755},[286,29971,837],{"class":292},[286,29973,3882],{"class":296},[286,29975,314],{"class":292},[286,29977,29978,29980,29982,29984,29986,29989,29991,29993,29995],{"class":288,"line":762},[286,29979,887],{"class":292},[286,29981,18048],{"class":296},[286,29983,23758],{"class":300},[286,29985,307],{"class":292},[286,29987,29988],{"class":310},"\"onlyInStock\"",[286,29990,4277],{"class":300},[286,29992,307],{"class":292},[286,29994,29196],{"class":310},[286,29996,4332],{"class":292},[286,29998,29999],{"class":288,"line":780},[286,30000,30001],{"class":292}," Solo disponibles\n",[286,30003,30004,30006,30008],{"class":288,"line":785},[286,30005,930],{"class":292},[286,30007,3882],{"class":296},[286,30009,314],{"class":292},[286,30011,30012],{"class":288,"line":790},[286,30013,336],{"emptyLinePlaceholder":6},[286,30015,30016,30018,30020],{"class":288,"line":800},[286,30017,837],{"class":292},[286,30019,48],{"class":296},[286,30021,314],{"class":292},[286,30023,30024,30026,30028,30030,30032,30035,30037,30039,30042],{"class":288,"line":805},[286,30025,887],{"class":292},[286,30027,51],{"class":296},[286,30029,12792],{"class":300},[286,30031,307],{"class":292},[286,30033,30034],{"class":310},"\"item in filteredProducts\"",[286,30036,4324],{"class":300},[286,30038,307],{"class":292},[286,30040,30041],{"class":310},"\"item.id\"",[286,30043,314],{"class":292},[286,30045,30046],{"class":288,"line":815},[286,30047,30048],{"class":292}," {{ item.name }} - ${{ item.price }}\n",[286,30050,30051,30053,30055,30057,30059,30062,30065,30067],{"class":288,"line":834},[286,30052,26693],{"class":292},[286,30054,286],{"class":296},[286,30056,842],{"class":300},[286,30058,307],{"class":292},[286,30060,30061],{"class":310},"\"!item.stock\"",[286,30063,30064],{"class":292},">(sin stock)\u003C/",[286,30066,286],{"class":296},[286,30068,314],{"class":292},[286,30070,30071,30073,30075],{"class":288,"line":857},[286,30072,4182],{"class":292},[286,30074,51],{"class":296},[286,30076,314],{"class":292},[286,30078,30079,30081,30083],{"class":288,"line":862},[286,30080,930],{"class":292},[286,30082,48],{"class":296},[286,30084,314],{"class":292},[286,30086,30087,30089,30091],{"class":288,"line":884},[286,30088,962],{"class":292},[286,30090,4128],{"class":296},[286,30092,314],{"class":292},[286,30094,30095,30097,30099],{"class":288,"line":899},[286,30096,793],{"class":292},[286,30098,810],{"class":296},[286,30100,314],{"class":292},[202,30102,27459],{"id":27458},[31,30104,30105,30106,1704,30108,361],{},"Mismo comportamiento usando ",[26,30107,28238],{},[26,30109,28244],{},[277,30111,30113],{"className":279,"code":30112,"filename":29368,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n name: \"SearchInput\",\n props: {\n modelValue: {\n type: String,\n default: \"\",\n },\n },\n emits: [\"update:modelValue\"],\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Clabel class=\"field\">\n Buscar\n \u003Cinput\n :value=\"modelValue\"\n type=\"text\"\n placeholder=\"Escribe para filtrar...\"\n @input=\"$emit('update:modelValue', $event.target.value.trim())\"\n />\n \u003C/label>\n\u003C/template>\n",[26,30114,30115,30129,30137,30146,30150,30155,30160,30169,30173,30177,30188,30192,30200,30204,30212,30226,30230,30236,30246,30254,30262,30272,30276,30284],{"__ignoreMap":9},[286,30116,30117,30119,30121,30123,30125,30127],{"class":288,"line":289},[286,30118,293],{"class":292},[286,30120,297],{"class":296},[286,30122,304],{"class":300},[286,30124,307],{"class":292},[286,30126,311],{"class":310},[286,30128,314],{"class":292},[286,30130,30131,30133,30135],{"class":288,"line":317},[286,30132,1065],{"class":320},[286,30134,1068],{"class":320},[286,30136,351],{"class":292},[286,30138,30139,30141,30144],{"class":288,"line":333},[286,30140,1079],{"class":292},[286,30142,30143],{"class":310},"\"SearchInput\"",[286,30145,1085],{"class":292},[286,30147,30148],{"class":288,"line":339},[286,30149,27488],{"class":292},[286,30151,30152],{"class":288,"line":354},[286,30153,30154],{"class":292}," modelValue: {\n",[286,30156,30157],{"class":288,"line":368},[286,30158,30159],{"class":292}," type: String,\n",[286,30161,30162,30165,30167],{"class":288,"line":379},[286,30163,30164],{"class":292}," default: ",[286,30166,25323],{"class":310},[286,30168,1085],{"class":292},[286,30170,30171],{"class":288,"line":389},[286,30172,7023],{"class":292},[286,30174,30175],{"class":288,"line":399},[286,30176,1139],{"class":292},[286,30178,30179,30182,30185],{"class":288,"line":405},[286,30180,30181],{"class":292}," emits: [",[286,30183,30184],{"class":310},"\"update:modelValue\"",[286,30186,30187],{"class":292},"],\n",[286,30189,30190],{"class":288,"line":410},[286,30191,18262],{"class":292},[286,30193,30194,30196,30198],{"class":288,"line":444},[286,30195,793],{"class":292},[286,30197,297],{"class":296},[286,30199,314],{"class":292},[286,30201,30202],{"class":288,"line":464},[286,30203,336],{"emptyLinePlaceholder":6},[286,30205,30206,30208,30210],{"class":288,"line":469},[286,30207,293],{"class":292},[286,30209,810],{"class":296},[286,30211,314],{"class":292},[286,30213,30214,30216,30218,30220,30222,30224],{"class":288,"line":484},[286,30215,818],{"class":292},[286,30217,3882],{"class":296},[286,30219,824],{"class":300},[286,30221,307],{"class":292},[286,30223,29444],{"class":310},[286,30225,314],{"class":292},[286,30227,30228],{"class":288,"line":508},[286,30229,29451],{"class":292},[286,30231,30232,30234],{"class":288,"line":513},[286,30233,837],{"class":292},[286,30235,11556],{"class":296},[286,30237,30238,30241,30243],{"class":288,"line":528},[286,30239,30240],{"class":300}," :value",[286,30242,307],{"class":292},[286,30244,30245],{"class":310},"\"modelValue\"\n",[286,30247,30248,30250,30252],{"class":288,"line":547},[286,30249,11570],{"class":300},[286,30251,307],{"class":292},[286,30253,29477],{"class":310},[286,30255,30256,30258,30260],{"class":288,"line":553},[286,30257,11580],{"class":300},[286,30259,307],{"class":292},[286,30261,29486],{"class":310},[286,30263,30264,30267,30269],{"class":288,"line":558},[286,30265,30266],{"class":300}," @input",[286,30268,307],{"class":292},[286,30270,30271],{"class":310},"\"$emit('update:modelValue', $event.target.value.trim())\"\n",[286,30273,30274],{"class":288,"line":586},[286,30275,29491],{"class":292},[286,30277,30278,30280,30282],{"class":288,"line":591},[286,30279,962],{"class":292},[286,30281,3882],{"class":296},[286,30283,314],{"class":292},[286,30285,30286,30288,30290],{"class":288,"line":596},[286,30287,793],{"class":292},[286,30289,810],{"class":296},[286,30291,314],{"class":292},[277,30293,30295],{"className":279,"code":30294,"filename":29511,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nimport SearchInput from \"./SearchInput.vue\";\n\nexport default {\n name: \"ProductFilter\",\n components: { SearchInput },\n data() {\n return {\n query: \"\",\n minPrice: null,\n onlyInStock: false,\n products: [\n { id: 1, name: \"Teclado mecánico\", price: 89, stock: true },\n { id: 2, name: \"Mouse ergonómico\", price: 45, stock: false },\n { id: 3, name: 'Monitor 27\"', price: 299, stock: true },\n ],\n };\n },\n computed: {\n filteredProducts() {\n return this.products.filter((p) => {\n const matchesQuery = p.name\n .toLowerCase()\n .includes(this.query.toLowerCase());\n const matchesPrice =\n this.minPrice == null || p.price >= Number(this.minPrice);\n const matchesStock = !this.onlyInStock || p.stock;\n\n return matchesQuery && matchesPrice && matchesStock;\n });\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Csection>\n \u003Ch2>Filtros\u003C/h2>\n\n \u003CSearchInput v-model=\"query\" />\n\n \u003Clabel>\n Precio mínimo\n \u003Cinput v-model.number=\"minPrice\" type=\"number\" min=\"0\" />\n \u003C/label>\n\n \u003Clabel>\n \u003Cinput v-model=\"onlyInStock\" type=\"checkbox\" />\n Solo disponibles\n \u003C/label>\n\n \u003Cul>\n \u003Cli v-for=\"item in filteredProducts\" :key=\"item.id\">\n {{ item.name }} - ${{ item.price }}\n \u003Cspan v-if=\"!item.stock\">(sin stock)\u003C/span>\n \u003C/li>\n \u003C/ul>\n \u003C/section>\n\u003C/template>\n",[26,30296,30297,30311,30323,30327,30335,30344,30349,30355,30361,30370,30379,30388,30393,30413,30433,30453,30457,30461,30465,30469,30476,30497,30508,30516,30533,30541,30569,30588,30592,30606,30611,30615,30619,30623,30631,30635,30643,30651,30663,30667,30681,30685,30693,30697,30723,30731,30735,30743,30763,30767,30775,30779,30787,30807,30811,30829,30837,30845,30853],{"__ignoreMap":9},[286,30298,30299,30301,30303,30305,30307,30309],{"class":288,"line":289},[286,30300,293],{"class":292},[286,30302,297],{"class":296},[286,30304,304],{"class":300},[286,30306,307],{"class":292},[286,30308,311],{"class":310},[286,30310,314],{"class":292},[286,30312,30313,30315,30317,30319,30321],{"class":288,"line":317},[286,30314,321],{"class":320},[286,30316,29548],{"class":292},[286,30318,327],{"class":320},[286,30320,29553],{"class":310},[286,30322,18158],{"class":292},[286,30324,30325],{"class":288,"line":333},[286,30326,336],{"emptyLinePlaceholder":6},[286,30328,30329,30331,30333],{"class":288,"line":339},[286,30330,1065],{"class":320},[286,30332,1068],{"class":320},[286,30334,351],{"class":292},[286,30336,30337,30339,30342],{"class":288,"line":354},[286,30338,1079],{"class":292},[286,30340,30341],{"class":310},"\"ProductFilter\"",[286,30343,1085],{"class":292},[286,30345,30346],{"class":288,"line":368},[286,30347,30348],{"class":292}," components: { SearchInput },\n",[286,30350,30351,30353],{"class":288,"line":379},[286,30352,1094],{"class":300},[286,30354,481],{"class":292},[286,30356,30357,30359],{"class":288,"line":389},[286,30358,1101],{"class":320},[286,30360,351],{"class":292},[286,30362,30363,30366,30368],{"class":288,"line":399},[286,30364,30365],{"class":292}," query: ",[286,30367,25323],{"class":310},[286,30369,1085],{"class":292},[286,30371,30372,30375,30377],{"class":288,"line":405},[286,30373,30374],{"class":292}," minPrice: ",[286,30376,438],{"class":364},[286,30378,1085],{"class":292},[286,30380,30381,30384,30386],{"class":288,"line":410},[286,30382,30383],{"class":292}," onlyInStock: ",[286,30385,2130],{"class":364},[286,30387,1085],{"class":292},[286,30389,30390],{"class":288,"line":444},[286,30391,30392],{"class":292}," products: [\n",[286,30394,30395,30397,30399,30401,30403,30405,30407,30409,30411],{"class":288,"line":464},[286,30396,2671],{"class":292},[286,30398,2079],{"class":364},[286,30400,22627],{"class":292},[286,30402,29646],{"class":310},[286,30404,29649],{"class":292},[286,30406,29652],{"class":364},[286,30408,29655],{"class":292},[286,30410,2156],{"class":364},[286,30412,2139],{"class":292},[286,30414,30415,30417,30419,30421,30423,30425,30427,30429,30431],{"class":288,"line":469},[286,30416,2671],{"class":292},[286,30418,2146],{"class":364},[286,30420,22627],{"class":292},[286,30422,29670],{"class":310},[286,30424,29649],{"class":292},[286,30426,29675],{"class":364},[286,30428,29655],{"class":292},[286,30430,2130],{"class":364},[286,30432,2139],{"class":292},[286,30434,30435,30437,30439,30441,30443,30445,30447,30449,30451],{"class":288,"line":484},[286,30436,2671],{"class":292},[286,30438,2170],{"class":364},[286,30440,22627],{"class":292},[286,30442,29692],{"class":310},[286,30444,29649],{"class":292},[286,30446,29697],{"class":364},[286,30448,29655],{"class":292},[286,30450,2156],{"class":364},[286,30452,2139],{"class":292},[286,30454,30455],{"class":288,"line":508},[286,30456,10181],{"class":292},[286,30458,30459],{"class":288,"line":513},[286,30460,18485],{"class":292},[286,30462,30463],{"class":288,"line":528},[286,30464,1139],{"class":292},[286,30466,30467],{"class":288,"line":547},[286,30468,2749],{"class":292},[286,30470,30471,30474],{"class":288,"line":553},[286,30472,30473],{"class":300}," filteredProducts",[286,30475,481],{"class":292},[286,30477,30478,30480,30482,30485,30487,30489,30491,30493,30495],{"class":288,"line":558},[286,30479,2761],{"class":320},[286,30481,1276],{"class":364},[286,30483,30484],{"class":292},".products.",[286,30486,2225],{"class":300},[286,30488,2341],{"class":292},[286,30490,31],{"class":357},[286,30492,2347],{"class":292},[286,30494,609],{"class":320},[286,30496,351],{"class":292},[286,30498,30499,30501,30503,30505],{"class":288,"line":586},[286,30500,2781],{"class":320},[286,30502,29750],{"class":364},[286,30504,348],{"class":320},[286,30506,30507],{"class":292}," p.name\n",[286,30509,30510,30512,30514],{"class":288,"line":591},[286,30511,2792],{"class":292},[286,30513,2256],{"class":300},[286,30515,630],{"class":292},[286,30517,30518,30520,30522,30524,30526,30529,30531],{"class":288,"line":596},[286,30519,2792],{"class":292},[286,30521,2265],{"class":300},[286,30523,456],{"class":292},[286,30525,1349],{"class":364},[286,30527,30528],{"class":292},".query.",[286,30530,2256],{"class":300},[286,30532,29772],{"class":292},[286,30534,30535,30537,30539],{"class":288,"line":614},[286,30536,2781],{"class":320},[286,30538,29779],{"class":364},[286,30540,29753],{"class":320},[286,30542,30543,30546,30549,30551,30553,30555,30557,30559,30562,30564,30566],{"class":288,"line":622},[286,30544,30545],{"class":364}," this",[286,30547,30548],{"class":292},".minPrice ",[286,30550,29789],{"class":320},[286,30552,432],{"class":364},[286,30554,29794],{"class":320},[286,30556,29797],{"class":292},[286,30558,29800],{"class":320},[286,30560,30561],{"class":300}," Number",[286,30563,456],{"class":292},[286,30565,1349],{"class":364},[286,30567,30568],{"class":292},".minPrice);\n",[286,30570,30571,30573,30575,30577,30579,30581,30584,30586],{"class":288,"line":633},[286,30572,2781],{"class":320},[286,30574,29810],{"class":364},[286,30576,348],{"class":320},[286,30578,2295],{"class":320},[286,30580,1349],{"class":364},[286,30582,30583],{"class":292},".onlyInStock ",[286,30585,716],{"class":320},[286,30587,29822],{"class":292},[286,30589,30590],{"class":288,"line":645},[286,30591,336],{"emptyLinePlaceholder":6},[286,30593,30594,30596,30598,30600,30602,30604],{"class":288,"line":654},[286,30595,2849],{"class":320},[286,30597,29833],{"class":292},[286,30599,2317],{"class":320},[286,30601,29838],{"class":292},[286,30603,2317],{"class":320},[286,30605,29843],{"class":292},[286,30607,30608],{"class":288,"line":676},[286,30609,30610],{"class":292}," });\n",[286,30612,30613],{"class":288,"line":681},[286,30614,7023],{"class":292},[286,30616,30617],{"class":288,"line":687},[286,30618,1139],{"class":292},[286,30620,30621],{"class":288,"line":692},[286,30622,18262],{"class":292},[286,30624,30625,30627,30629],{"class":288,"line":708},[286,30626,793],{"class":292},[286,30628,297],{"class":296},[286,30630,314],{"class":292},[286,30632,30633],{"class":288,"line":725},[286,30634,336],{"emptyLinePlaceholder":6},[286,30636,30637,30639,30641],{"class":288,"line":730},[286,30638,293],{"class":292},[286,30640,810],{"class":296},[286,30642,314],{"class":292},[286,30644,30645,30647,30649],{"class":288,"line":737},[286,30646,818],{"class":292},[286,30648,4128],{"class":296},[286,30650,314],{"class":292},[286,30652,30653,30655,30657,30659,30661],{"class":288,"line":746},[286,30654,837],{"class":292},[286,30656,40],{"class":296},[286,30658,29888],{"class":292},[286,30660,40],{"class":296},[286,30662,314],{"class":292},[286,30664,30665],{"class":288,"line":755},[286,30666,336],{"emptyLinePlaceholder":6},[286,30668,30669,30671,30673,30675,30677,30679],{"class":288,"line":762},[286,30670,837],{"class":292},[286,30672,29360],{"class":296},[286,30674,23758],{"class":300},[286,30676,307],{"class":292},[286,30678,29909],{"class":310},[286,30680,4332],{"class":292},[286,30682,30683],{"class":288,"line":780},[286,30684,336],{"emptyLinePlaceholder":6},[286,30686,30687,30689,30691],{"class":288,"line":785},[286,30688,837],{"class":292},[286,30690,3882],{"class":296},[286,30692,314],{"class":292},[286,30694,30695],{"class":288,"line":790},[286,30696,29928],{"class":292},[286,30698,30699,30701,30703,30705,30707,30709,30711,30713,30715,30717,30719,30721],{"class":288,"line":800},[286,30700,887],{"class":292},[286,30702,18048],{"class":296},[286,30704,28914],{"class":300},[286,30706,307],{"class":292},[286,30708,29941],{"class":310},[286,30710,4277],{"class":300},[286,30712,307],{"class":292},[286,30714,28926],{"class":310},[286,30716,28929],{"class":300},[286,30718,307],{"class":292},[286,30720,28934],{"class":310},[286,30722,4332],{"class":292},[286,30724,30725,30727,30729],{"class":288,"line":805},[286,30726,930],{"class":292},[286,30728,3882],{"class":296},[286,30730,314],{"class":292},[286,30732,30733],{"class":288,"line":815},[286,30734,336],{"emptyLinePlaceholder":6},[286,30736,30737,30739,30741],{"class":288,"line":834},[286,30738,837],{"class":292},[286,30740,3882],{"class":296},[286,30742,314],{"class":292},[286,30744,30745,30747,30749,30751,30753,30755,30757,30759,30761],{"class":288,"line":857},[286,30746,887],{"class":292},[286,30748,18048],{"class":296},[286,30750,23758],{"class":300},[286,30752,307],{"class":292},[286,30754,29988],{"class":310},[286,30756,4277],{"class":300},[286,30758,307],{"class":292},[286,30760,29196],{"class":310},[286,30762,4332],{"class":292},[286,30764,30765],{"class":288,"line":862},[286,30766,30001],{"class":292},[286,30768,30769,30771,30773],{"class":288,"line":884},[286,30770,930],{"class":292},[286,30772,3882],{"class":296},[286,30774,314],{"class":292},[286,30776,30777],{"class":288,"line":899},[286,30778,336],{"emptyLinePlaceholder":6},[286,30780,30781,30783,30785],{"class":288,"line":913},[286,30782,837],{"class":292},[286,30784,48],{"class":296},[286,30786,314],{"class":292},[286,30788,30789,30791,30793,30795,30797,30799,30801,30803,30805],{"class":288,"line":927},[286,30790,887],{"class":292},[286,30792,51],{"class":296},[286,30794,12792],{"class":300},[286,30796,307],{"class":292},[286,30798,30034],{"class":310},[286,30800,4324],{"class":300},[286,30802,307],{"class":292},[286,30804,30041],{"class":310},[286,30806,314],{"class":292},[286,30808,30809],{"class":288,"line":937},[286,30810,30048],{"class":292},[286,30812,30813,30815,30817,30819,30821,30823,30825,30827],{"class":288,"line":942},[286,30814,26693],{"class":292},[286,30816,286],{"class":296},[286,30818,842],{"class":300},[286,30820,307],{"class":292},[286,30822,30061],{"class":310},[286,30824,30064],{"class":292},[286,30826,286],{"class":296},[286,30828,314],{"class":292},[286,30830,30831,30833,30835],{"class":288,"line":959},[286,30832,4182],{"class":292},[286,30834,51],{"class":296},[286,30836,314],{"class":292},[286,30838,30839,30841,30843],{"class":288,"line":969},[286,30840,930],{"class":292},[286,30842,48],{"class":296},[286,30844,314],{"class":292},[286,30846,30847,30849,30851],{"class":288,"line":1481},[286,30848,962],{"class":292},[286,30850,4128],{"class":296},[286,30852,314],{"class":292},[286,30854,30855,30857,30859],{"class":288,"line":1486},[286,30856,793],{"class":292},[286,30858,810],{"class":296},[286,30860,314],{"class":292},[40,30862,1604],{"id":1603},[31,30864,30865,30867],{},[26,30866,17978],{}," es la forma idiomática en Vue 3 para sincronizar UI y estado en formularios y componentes.",[31,30869,30870],{},"Úsalo para reducir boilerplate y mantener consistencia, pero evita convertirlo en un atajo para lógica de negocio compleja.",[31,30872,21831],{},[48,30874,30875,30881,30890,30900],{},[51,30876,30877,30878,30880],{},"En inputs nativos, simplifica ",[26,30879,28161],{}," + eventos.",[51,30882,30883,30884,5252,30886,28416,30888,114],{},"En componentes, respeta ",[26,30885,28238],{},[26,30887,28244],{},[26,30889,28419],{},[51,30891,30892,30893,235,30895,235,30897,30899],{},"Aplica modificadores (",[26,30894,28263],{},[26,30896,28268],{},[26,30898,28273],{},") cuando mejoren la calidad de los datos o el rendimiento.",[51,30901,30902],{},"Mantén el flujo de datos claro y explícito cuando el dominio lo requiera.",[1614,30904,3125],{},{"title":9,"searchDepth":317,"depth":317,"links":30906},[30907,30908,30912,30913,30914,30921,30922,30924,30925,30929],{"id":20631,"depth":317,"text":20632},{"id":70,"depth":317,"text":71,"children":30909},[30910,30911],{"id":28181,"depth":333,"text":28182},{"id":28226,"depth":333,"text":28227},{"id":138,"depth":317,"text":139},{"id":165,"depth":317,"text":166},{"id":199,"depth":317,"text":200,"children":30915},[30916,30917,30919,30920],{"id":28344,"depth":333,"text":28345},{"id":28427,"depth":333,"text":30918},"2) Enlazar v-model a expresiones no escribibles",{"id":28501,"depth":333,"text":28502},{"id":28530,"depth":333,"text":28531},{"id":28542,"depth":317,"text":28543},{"id":28804,"depth":317,"text":30923},"2) Input numérico con v-model.number",{"id":29091,"depth":317,"text":29092},{"id":29352,"depth":317,"text":29353,"children":30926},[30927,30928],{"id":26868,"depth":333,"text":26869},{"id":27458,"depth":333,"text":27459},{"id":1603,"depth":317,"text":1604},"https://res.cloudinary.com/denj4fg7f/image/upload/v1771265788/directives-vue-v-model-guide_ticgya.png","Imagen temporal para portada del artículo sobre v-model en Vue","2026-02-16","Aprende a usar v-model en Vue 3 para formularios y componentes personalizados, con Composition API y Options API, casos reales, errores comunes y buenas practicas.",{"script":30935},[30936],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":30937},[30938],{"headline":30939,"author":30940,"datePublished":30941,"@type":1647},"Directiva v-model en Vue: guía completa para formularios y componentes",{"name":1644,"@type":1645},"2026-02-16T13:30:00-05:00",{"updatedAt":30941,"coverCaption":17766,"author":1644,"keywords":30943},[1652,17978,30944,30945,281,979],"formularios","two-way binding","/blog/directives-vue-v-model-guide.es",[30948],{"headline":30939,"author":30949,"datePublished":30941,"@type":1647},{"name":1644,"@type":1645},{"title":28128,"description":30933},"blog/directives-vue-v-model-guide.es",[30953,30954,30957,30958],{"tag":20595,"color":20596},{"tag":30955,"color":30956},"Formularios","#E67E22",{"tag":3174,"color":3175},{"tag":9081,"color":9082},"AgIU1gU24ojbR94ulA9qthmIdF_QyUDb-9NFjzZ8Bck",{"id":30961,"title":30962,"body":30963,"cover":33962,"coverAlt":33963,"date":33964,"description":33965,"draft":12,"extension":1635,"head":33966,"locale":1648,"meta":33974,"navigation":6,"path":33978,"schemaOrg":33979,"seo":33982,"series":20589,"seriesDescription":20590,"seriesOrder":354,"seriesTitle":20591,"slug":1663,"stem":33983,"tags":33984,"__hash__":33990},"blog/blog/directives-vue-v-on-guide.es.md","Directivas en Vue: v-on",{"type":18,"value":30964,"toc":33939},[30965,30970,30978,30980,30988,30999,31006,31008,31011,31046,31049,31079,31084,31139,31141,31146,31148,31179,31181,31186,31199,31204,31206,31210,31212,31245,31252,31281,31288,31290,31317,31319,31349,31356,31360,31363,31428,31431,31462,31465,31472,31474,31503,31505,31533,31539,31541,31545,31648,31757,31763,31971,32184,32188,32329,32477,32481,32604,32736,32738,32741,32760,33368,33900,33902,33907,33910,33936],[21,30966,20612,30968],{"id":30967},"directivas-en-vue-v-on",[26,30969,17984],{},[31,30971,30972,30974,30975,30977],{},[26,30973,17984],{}," conecta eventos del DOM o de componentes con funciones de tu app.\nCuando el usuario hace clic, escribe o pulsa una tecla, ",[26,30976,17984],{}," dispara la lógica que definiste.",[40,30979,20632],{"id":20631},[31,30981,15945,30982,30984,30985,30987],{},[26,30983,17984],{},", una interfaz no responde a la interacción del usuario.\nCon ",[26,30986,17984],{},", puedes:",[48,30989,30990,30993,30996],{},[51,30991,30992],{},"Capturar acciones del usuario sin manipular el DOM manualmente.",[51,30994,30995],{},"Mantener la interacción declarativa y legible en el template.",[51,30997,30998],{},"Separar estado, renderizado y comportamiento de forma consistente con Vue.",[3118,31000,31001],{},[31,31002,31003,31005],{},[26,31004,17984],{}," es la base de botones, formularios, atajos de teclado y comunicación entre componentes vía eventos.",[40,31007,24660],{"id":24659},[31,31009,31010],{},"La forma larga:",[277,31012,31014],{"className":279,"code":31013,"filename":9346,"language":282,"meta":9,"style":9},"\u003Cbutton v-on:click=\"increment\">Sumar\u003C/button>\n",[26,31015,31016],{"__ignoreMap":9},[286,31017,31018,31020,31022,31025,31027,31030,31032,31034,31037,31039,31042,31044],{"class":288,"line":289},[286,31019,293],{"class":292},[286,31021,4274],{"class":296},[286,31023,31024],{"class":300}," v-on",[286,31026,361],{"class":292},[286,31028,31029],{"class":300},"click",[286,31031,307],{"class":292},[286,31033,874],{"class":310},[286,31035,31036],{"class":292},"increment",[286,31038,874],{"class":310},[286,31040,31041],{"class":292},">Sumar\u003C/",[286,31043,4274],{"class":296},[286,31045,314],{"class":292},[31,31047,31048],{},"La forma corta recomendada:",[277,31050,31052],{"className":279,"code":31051,"filename":9346,"language":282,"meta":9,"style":9},"\u003Cbutton @click=\"increment\">Sumar\u003C/button>\n",[26,31053,31054],{"__ignoreMap":9},[286,31055,31056,31058,31060,31063,31065,31067,31069,31071,31073,31075,31077],{"class":288,"line":289},[286,31057,293],{"class":292},[286,31059,4274],{"class":296},[286,31061,31062],{"class":292}," @",[286,31064,31029],{"class":300},[286,31066,307],{"class":292},[286,31068,874],{"class":310},[286,31070,31036],{"class":292},[286,31072,874],{"class":310},[286,31074,31041],{"class":292},[286,31076,4274],{"class":296},[286,31078,314],{"class":292},[31,31080,31081,31083],{},[26,31082,17984],{}," admite:",[48,31085,31086,31099,31108,31123],{},[51,31087,31088,31089,235,31091,235,31093,235,31096,1902],{},"Eventos nativos (",[26,31090,31029],{},[26,31092,18048],{},[26,31094,31095],{},"submit",[26,31097,31098],{},"keydown",[51,31100,31101,31102,235,31105,1902],{},"Eventos emitidos por componentes (",[26,31103,31104],{},"@save",[26,31106,31107],{},"@close",[51,31109,31110,31111,235,31114,235,31117,235,31120,1902],{},"Modificadores de evento (",[26,31112,31113],{},".prevent",[26,31115,31116],{},".stop",[26,31118,31119],{},".once",[26,31121,31122],{},".self",[51,31124,31125,31126,235,31129,31132,31133,235,31136,1815],{},"Modificadores de teclado (",[26,31127,31128],{},".enter",[26,31130,31131],{},".esc",", combinaciones con ",[26,31134,31135],{},"ctrl",[26,31137,31138],{},"shift",[40,31140,139],{"id":138},[31,31142,20784,31143,31145],{},[26,31144,17984],{}," cuando necesites reaccionar a acciones del usuario o a eventos de componentes.",[31,31147,3312],{},[48,31149,31150,31156,31162,31168,31173],{},[51,31151,31152,31153,1902],{},"Botones de acción (",[26,31154,31155],{},"@click=\"createTask\"",[51,31157,31158,31159,1902],{},"Formularios (",[26,31160,31161],{},"@submit.prevent=\"submitForm\"",[51,31163,31164,31165,1902],{},"Inputs en tiempo real (",[26,31166,31167],{},"@input=\"handleSearch\"",[51,31169,17815,31170,1902],{},[26,31171,31172],{},"@keydown.ctrl.enter=\"publish\"",[51,31174,31175,31176,1902],{},"Eventos personalizados desde componentes hijos (",[26,31177,31178],{},"@save=\"persistTask\"",[40,31180,166],{"id":165},[31,31182,7671,31183,31185],{},[26,31184,17984],{}," en estos casos:",[48,31187,31188,31191,31196],{},[51,31189,31190],{},"Cuando no hay interacción real y el contenido es completamente estático.",[51,31192,31193,31194,114],{},"Cuando colocas demasiada lógica inline en el template; es mejor moverla a funciones o ",[26,31195,1739],{},[51,31197,31198],{},"Cuando intentas “resolver” seguridad con eventos del frontend: la validación real debe ocurrir en backend.",[3118,31200,31201],{},[31,31202,31203],{},"También evita encadenar muchos modificadores sin una intención clara, porque dificulta el mantenimiento.",[40,31205,200],{"id":199},[202,31207,31209],{"id":31208},"_1-ejecutar-la-función-en-vez-de-referenciarla","1) Ejecutar la función en vez de referenciarla",[31,31211,24899],{},[277,31213,31215],{"className":279,"code":31214,"filename":28351,"language":282,"meta":9,"style":9},"\u003Cbutton @click=\"saveTask()\">Guardar\u003C/button>\n",[26,31216,31217],{"__ignoreMap":9},[286,31218,31219,31221,31223,31225,31227,31229,31231,31234,31236,31238,31241,31243],{"class":288,"line":289},[286,31220,293],{"class":292},[286,31222,4274],{"class":296},[286,31224,31062],{"class":292},[286,31226,31029],{"class":300},[286,31228,307],{"class":292},[286,31230,874],{"class":310},[286,31232,31233],{"class":300},"saveTask",[286,31235,28459],{"class":292},[286,31237,874],{"class":310},[286,31239,31240],{"class":292},">Guardar\u003C/",[286,31242,4274],{"class":296},[286,31244,314],{"class":292},[31,31246,31247,31248,31251],{},"Esto ",[82,31249,31250],{},"es válido",", pero si no necesitas argumentos, suele ser más limpio:",[277,31253,31255],{"className":279,"code":31254,"filename":28477,"language":282,"meta":9,"style":9},"\u003Cbutton @click=\"saveTask\">Guardar\u003C/button>\n",[26,31256,31257],{"__ignoreMap":9},[286,31258,31259,31261,31263,31265,31267,31269,31271,31273,31275,31277,31279],{"class":288,"line":289},[286,31260,293],{"class":292},[286,31262,4274],{"class":296},[286,31264,31062],{"class":292},[286,31266,31029],{"class":300},[286,31268,307],{"class":292},[286,31270,874],{"class":310},[286,31272,31233],{"class":292},[286,31274,874],{"class":310},[286,31276,31240],{"class":292},[286,31278,4274],{"class":296},[286,31280,314],{"class":292},[202,31282,31284,31285,31287],{"id":31283},"_2-olvidar-prevent-en-formularios","2) Olvidar ",[26,31286,31113],{}," en formularios",[31,31289,24899],{},[277,31291,31293],{"className":279,"code":31292,"filename":28351,"language":282,"meta":9,"style":9},"\u003Cform @submit=\"submitForm\">\n",[26,31294,31295],{"__ignoreMap":9},[286,31296,31297,31299,31302,31304,31306,31308,31310,31313,31315],{"class":288,"line":289},[286,31298,293],{"class":292},[286,31300,31301],{"class":296},"form",[286,31303,31062],{"class":292},[286,31305,31095],{"class":300},[286,31307,307],{"class":292},[286,31309,874],{"class":310},[286,31311,31312],{"class":292},"submitForm",[286,31314,874],{"class":310},[286,31316,314],{"class":292},[31,31318,28473],{},[277,31320,31322],{"className":279,"code":31321,"filename":28477,"language":282,"meta":9,"style":9},"\u003Cform @submit.prevent=\"submitForm\">\n",[26,31323,31324],{"__ignoreMap":9},[286,31325,31326,31328,31330,31332,31334,31336,31339,31341,31343,31345,31347],{"class":288,"line":289},[286,31327,293],{"class":292},[286,31329,31301],{"class":296},[286,31331,31062],{"class":292},[286,31333,31095],{"class":300},[286,31335,114],{"class":292},[286,31337,31338],{"class":300},"prevent",[286,31340,307],{"class":292},[286,31342,874],{"class":310},[286,31344,31312],{"class":292},[286,31346,874],{"class":310},[286,31348,314],{"class":292},[3118,31350,31351],{},[31,31352,15945,31353,31355],{},[26,31354,31113],{},", el navegador recarga la página por defecto.",[202,31357,31359],{"id":31358},"_3-poner-demasiada-lógica-dentro-del-template","3) Poner demasiada lógica dentro del template",[31,31361,31362],{},"Evitar:",[277,31364,31366],{"className":279,"code":31365,"filename":28351,"language":282,"meta":9,"style":9},"\u003Cbutton @click=\"isAdmin && canEdit && !isLocked ? publishNow() : showWarning()\">\n Publicar\n\u003C/button>\n",[26,31367,31368,31415,31420],{"__ignoreMap":9},[286,31369,31370,31372,31374,31376,31378,31380,31382,31385,31387,31390,31392,31394,31397,31399,31402,31404,31406,31409,31411,31413],{"class":288,"line":289},[286,31371,293],{"class":292},[286,31373,4274],{"class":296},[286,31375,31062],{"class":292},[286,31377,31029],{"class":300},[286,31379,307],{"class":292},[286,31381,874],{"class":310},[286,31383,31384],{"class":292},"isAdmin ",[286,31386,2317],{"class":320},[286,31388,31389],{"class":292}," canEdit ",[286,31391,2317],{"class":320},[286,31393,2295],{"class":320},[286,31395,31396],{"class":292},"isLocked ",[286,31398,2292],{"class":320},[286,31400,31401],{"class":300}," publishNow",[286,31403,8136],{"class":292},[286,31405,361],{"class":320},[286,31407,31408],{"class":300}," showWarning",[286,31410,28459],{"class":292},[286,31412,874],{"class":310},[286,31414,314],{"class":292},[286,31416,31417],{"class":288,"line":317},[286,31418,31419],{"class":292}," Publicar\n",[286,31421,31422,31424,31426],{"class":288,"line":333},[286,31423,793],{"class":292},[286,31425,4274],{"class":296},[286,31427,314],{"class":292},[31,31429,31430],{},"Mejor:",[277,31432,31434],{"className":279,"code":31433,"filename":28477,"language":282,"meta":9,"style":9},"\u003Cbutton @click=\"handlePublishClick\">Publicar\u003C/button>\n",[26,31435,31436],{"__ignoreMap":9},[286,31437,31438,31440,31442,31444,31446,31448,31450,31453,31455,31458,31460],{"class":288,"line":289},[286,31439,293],{"class":292},[286,31441,4274],{"class":296},[286,31443,31062],{"class":292},[286,31445,31029],{"class":300},[286,31447,307],{"class":292},[286,31449,874],{"class":310},[286,31451,31452],{"class":292},"handlePublishClick",[286,31454,874],{"class":310},[286,31456,31457],{"class":292},">Publicar\u003C/",[286,31459,4274],{"class":296},[286,31461,314],{"class":292},[31,31463,31464],{},"Y mover la decisión a una función clara en el script.",[202,31466,31468,31469,31471],{"id":31467},"_4-usar-event-sin-declararlo","4) Usar ",[26,31470,2344],{}," sin declararlo",[31,31473,24899],{},[277,31475,31477],{"className":279,"code":31476,"filename":28351,"language":282,"meta":9,"style":9},"\u003Cinput @input=\"onInput(event)\" />\n",[26,31478,31479],{"__ignoreMap":9},[286,31480,31481,31483,31485,31487,31489,31491,31493,31496,31499,31501],{"class":288,"line":289},[286,31482,293],{"class":292},[286,31484,18048],{"class":296},[286,31486,31062],{"class":292},[286,31488,18048],{"class":300},[286,31490,307],{"class":292},[286,31492,874],{"class":310},[286,31494,31495],{"class":300},"onInput",[286,31497,31498],{"class":292},"(event)",[286,31500,874],{"class":310},[286,31502,4332],{"class":292},[31,31504,28473],{},[277,31506,31508],{"className":279,"code":31507,"filename":28477,"language":282,"meta":9,"style":9},"\u003Cinput @input=\"onInput($event)\" />\n",[26,31509,31510],{"__ignoreMap":9},[286,31511,31512,31514,31516,31518,31520,31522,31524,31526,31529,31531],{"class":288,"line":289},[286,31513,293],{"class":292},[286,31515,18048],{"class":296},[286,31517,31062],{"class":292},[286,31519,18048],{"class":300},[286,31521,307],{"class":292},[286,31523,874],{"class":310},[286,31525,31495],{"class":300},[286,31527,31528],{"class":292},"($event)",[286,31530,874],{"class":310},[286,31532,4332],{"class":292},[31,31534,31535,31536,31538],{},"O mejor aún, tipar el evento y leer ",[26,31537,1790],{}," de forma segura en TypeScript.",[40,31540,1953],{"id":1952},[202,31542,31544],{"id":31543},"_1-click-simple-para-actualizar-estado","1) Click simple para actualizar estado",[277,31546,31549],{"className":279,"code":31547,"filename":281,"highlights":31548,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst count = ref(0);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"count++\">Clicks: {{ count }}\u003C/button>\n\u003C/template>\n",[339,389],[26,31550,31551,31567,31579,31583,31600,31608,31612,31620,31640],{"__ignoreMap":9},[286,31552,31553,31555,31557,31559,31561,31563,31565],{"class":288,"line":289},[286,31554,293],{"class":292},[286,31556,297],{"class":296},[286,31558,301],{"class":300},[286,31560,304],{"class":300},[286,31562,307],{"class":292},[286,31564,311],{"class":310},[286,31566,314],{"class":292},[286,31568,31569,31571,31573,31575,31577],{"class":288,"line":317},[286,31570,321],{"class":320},[286,31572,11013],{"class":292},[286,31574,327],{"class":320},[286,31576,18155],{"class":310},[286,31578,18158],{"class":292},[286,31580,31581],{"class":288,"line":333},[286,31582,336],{"emptyLinePlaceholder":6},[286,31584,31586,31588,31590,31592,31594,31596,31598],{"class":31585,"line":339},[288,9405],[286,31587,413],{"class":320},[286,31589,9387],{"class":364},[286,31591,348],{"class":320},[286,31593,421],{"class":300},[286,31595,456],{"class":292},[286,31597,3549],{"class":364},[286,31599,18284],{"class":292},[286,31601,31602,31604,31606],{"class":288,"line":354},[286,31603,793],{"class":292},[286,31605,297],{"class":296},[286,31607,314],{"class":292},[286,31609,31610],{"class":288,"line":368},[286,31611,336],{"emptyLinePlaceholder":6},[286,31613,31614,31616,31618],{"class":288,"line":379},[286,31615,293],{"class":292},[286,31617,810],{"class":296},[286,31619,314],{"class":292},[286,31621,31623,31625,31627,31629,31631,31633,31636,31638],{"class":31622,"line":389},[288,9405],[286,31624,818],{"class":292},[286,31626,4274],{"class":296},[286,31628,4285],{"class":300},[286,31630,307],{"class":292},[286,31632,12471],{"class":310},[286,31634,31635],{"class":292},">Clicks: {{ count }}\u003C/",[286,31637,4274],{"class":296},[286,31639,314],{"class":292},[286,31641,31642,31644,31646],{"class":288,"line":399},[286,31643,793],{"class":292},[286,31645,810],{"class":296},[286,31647,314],{"class":292},[277,31649,31652],{"className":279,"code":31650,"filename":979,"highlights":31651,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n count: 0,\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"count++\">Clicks: {{ count }}\u003C/button>\n\u003C/template>\n",[354,444],[26,31653,31654,31668,31676,31682,31688,31698,31702,31706,31710,31718,31722,31730,31749],{"__ignoreMap":9},[286,31655,31656,31658,31660,31662,31664,31666],{"class":288,"line":289},[286,31657,293],{"class":292},[286,31659,297],{"class":296},[286,31661,304],{"class":300},[286,31663,307],{"class":292},[286,31665,311],{"class":310},[286,31667,314],{"class":292},[286,31669,31670,31672,31674],{"class":288,"line":317},[286,31671,1065],{"class":320},[286,31673,1068],{"class":320},[286,31675,351],{"class":292},[286,31677,31678,31680],{"class":288,"line":333},[286,31679,1094],{"class":300},[286,31681,481],{"class":292},[286,31683,31684,31686],{"class":288,"line":339},[286,31685,1101],{"class":320},[286,31687,351],{"class":292},[286,31689,31691,31694,31696],{"class":31690,"line":354},[288,9405],[286,31692,31693],{"class":292}," count: ",[286,31695,3549],{"class":364},[286,31697,1085],{"class":292},[286,31699,31700],{"class":288,"line":368},[286,31701,18485],{"class":292},[286,31703,31704],{"class":288,"line":379},[286,31705,1139],{"class":292},[286,31707,31708],{"class":288,"line":389},[286,31709,18262],{"class":292},[286,31711,31712,31714,31716],{"class":288,"line":399},[286,31713,793],{"class":292},[286,31715,297],{"class":296},[286,31717,314],{"class":292},[286,31719,31720],{"class":288,"line":405},[286,31721,336],{"emptyLinePlaceholder":6},[286,31723,31724,31726,31728],{"class":288,"line":410},[286,31725,293],{"class":292},[286,31727,810],{"class":296},[286,31729,314],{"class":292},[286,31731,31733,31735,31737,31739,31741,31743,31745,31747],{"class":31732,"line":444},[288,9405],[286,31734,818],{"class":292},[286,31736,4274],{"class":296},[286,31738,4285],{"class":300},[286,31740,307],{"class":292},[286,31742,12471],{"class":310},[286,31744,31635],{"class":292},[286,31746,4274],{"class":296},[286,31748,314],{"class":292},[286,31750,31751,31753,31755],{"class":288,"line":464},[286,31752,793],{"class":292},[286,31754,810],{"class":296},[286,31756,314],{"class":292},[202,31758,31760,31761],{"id":31759},"_2-submit-de-formulario-con-prevent","2) Submit de formulario con ",[26,31762,31113],{},[277,31764,31767],{"className":279,"code":31765,"filename":281,"highlights":31766,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst email = ref(\"\");\n\nfunction submitForm() {\n if (!email.value.trim()) return;\n console.log(\"Enviar:\", email.value);\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform @submit.prevent=\"submitForm\">\n \u003Cinput v-model=\"email\" type=\"email\" placeholder=\"tu@email.com\" />\n \u003Cbutton type=\"submit\">Enviar\u003C/button>\n \u003C/form>\n\u003C/template>\n",[464],[26,31768,31769,31785,31797,31801,31818,31822,31831,31851,31865,31869,31877,31881,31889,31906,31935,31955,31963],{"__ignoreMap":9},[286,31770,31771,31773,31775,31777,31779,31781,31783],{"class":288,"line":289},[286,31772,293],{"class":292},[286,31774,297],{"class":296},[286,31776,301],{"class":300},[286,31778,304],{"class":300},[286,31780,307],{"class":292},[286,31782,311],{"class":310},[286,31784,314],{"class":292},[286,31786,31787,31789,31791,31793,31795],{"class":288,"line":317},[286,31788,321],{"class":320},[286,31790,11013],{"class":292},[286,31792,327],{"class":320},[286,31794,18155],{"class":310},[286,31796,18158],{"class":292},[286,31798,31799],{"class":288,"line":333},[286,31800,336],{"emptyLinePlaceholder":6},[286,31802,31803,31805,31808,31810,31812,31814,31816],{"class":288,"line":339},[286,31804,413],{"class":320},[286,31806,31807],{"class":364}," email",[286,31809,348],{"class":320},[286,31811,421],{"class":300},[286,31813,456],{"class":292},[286,31815,25323],{"class":310},[286,31817,18284],{"class":292},[286,31819,31820],{"class":288,"line":354},[286,31821,336],{"emptyLinePlaceholder":6},[286,31823,31824,31826,31829],{"class":288,"line":368},[286,31825,2467],{"class":320},[286,31827,31828],{"class":300}," submitForm",[286,31830,481],{"class":292},[286,31832,31833,31835,31837,31839,31842,31845,31847,31849],{"class":288,"line":379},[286,31834,516],{"class":320},[286,31836,519],{"class":292},[286,31838,522],{"class":320},[286,31840,31841],{"class":292},"email.value.",[286,31843,31844],{"class":300},"trim",[286,31846,577],{"class":292},[286,31848,18353],{"class":320},[286,31850,18158],{"class":292},[286,31852,31853,31855,31857,31859,31862],{"class":288,"line":389},[286,31854,2356],{"class":292},[286,31856,2359],{"class":300},[286,31858,456],{"class":292},[286,31860,31861],{"class":310},"\"Enviar:\"",[286,31863,31864],{"class":292},", email.value);\n",[286,31866,31867],{"class":288,"line":399},[286,31868,402],{"class":292},[286,31870,31871,31873,31875],{"class":288,"line":405},[286,31872,793],{"class":292},[286,31874,297],{"class":296},[286,31876,314],{"class":292},[286,31878,31879],{"class":288,"line":410},[286,31880,336],{"emptyLinePlaceholder":6},[286,31882,31883,31885,31887],{"class":288,"line":444},[286,31884,293],{"class":292},[286,31886,810],{"class":296},[286,31888,314],{"class":292},[286,31890,31892,31894,31896,31899,31901,31904],{"class":31891,"line":464},[288,9405],[286,31893,818],{"class":292},[286,31895,31301],{"class":296},[286,31897,31898],{"class":300}," @submit.prevent",[286,31900,307],{"class":292},[286,31902,31903],{"class":310},"\"submitForm\"",[286,31905,314],{"class":292},[286,31907,31908,31910,31912,31914,31916,31919,31921,31923,31925,31928,31930,31933],{"class":288,"line":469},[286,31909,837],{"class":292},[286,31911,18048],{"class":296},[286,31913,23758],{"class":300},[286,31915,307],{"class":292},[286,31917,31918],{"class":310},"\"email\"",[286,31920,4277],{"class":300},[286,31922,307],{"class":292},[286,31924,31918],{"class":310},[286,31926,31927],{"class":300}," placeholder",[286,31929,307],{"class":292},[286,31931,31932],{"class":310},"\"tu@email.com\"",[286,31934,4332],{"class":292},[286,31936,31937,31939,31941,31943,31945,31948,31951,31953],{"class":288,"line":484},[286,31938,837],{"class":292},[286,31940,4274],{"class":296},[286,31942,4277],{"class":300},[286,31944,307],{"class":292},[286,31946,31947],{"class":310},"\"submit\"",[286,31949,31950],{"class":292},">Enviar\u003C/",[286,31952,4274],{"class":296},[286,31954,314],{"class":292},[286,31956,31957,31959,31961],{"class":288,"line":508},[286,31958,962],{"class":292},[286,31960,31301],{"class":296},[286,31962,314],{"class":292},[286,31964,31965,31967,31969],{"class":288,"line":513},[286,31966,793],{"class":292},[286,31968,810],{"class":296},[286,31970,314],{"class":292},[277,31972,31975],{"className":279,"code":31973,"filename":979,"highlights":31974,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n email: \"\",\n };\n },\n methods: {\n submitForm() {\n if (!this.email.trim()) return;\n console.log(\"Enviar:\", this.email);\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform @submit.prevent=\"submitForm\">\n \u003Cinput v-model=\"email\" type=\"email\" placeholder=\"tu@email.com\" />\n \u003Cbutton type=\"submit\">Enviar\u003C/button>\n \u003C/form>\n\u003C/template>\n",[528],[26,31976,31977,31991,31999,32005,32011,32020,32024,32028,32032,32039,32060,32077,32081,32085,32089,32097,32101,32109,32124,32150,32168,32176],{"__ignoreMap":9},[286,31978,31979,31981,31983,31985,31987,31989],{"class":288,"line":289},[286,31980,293],{"class":292},[286,31982,297],{"class":296},[286,31984,304],{"class":300},[286,31986,307],{"class":292},[286,31988,311],{"class":310},[286,31990,314],{"class":292},[286,31992,31993,31995,31997],{"class":288,"line":317},[286,31994,1065],{"class":320},[286,31996,1068],{"class":320},[286,31998,351],{"class":292},[286,32000,32001,32003],{"class":288,"line":333},[286,32002,1094],{"class":300},[286,32004,481],{"class":292},[286,32006,32007,32009],{"class":288,"line":339},[286,32008,1101],{"class":320},[286,32010,351],{"class":292},[286,32012,32013,32016,32018],{"class":288,"line":354},[286,32014,32015],{"class":292}," email: ",[286,32017,25323],{"class":310},[286,32019,1085],{"class":292},[286,32021,32022],{"class":288,"line":368},[286,32023,18485],{"class":292},[286,32025,32026],{"class":288,"line":379},[286,32027,1139],{"class":292},[286,32029,32030],{"class":288,"line":389},[286,32031,1148],{"class":292},[286,32033,32034,32037],{"class":288,"line":399},[286,32035,32036],{"class":300}," submitForm",[286,32038,481],{"class":292},[286,32040,32041,32043,32045,32047,32049,32052,32054,32056,32058],{"class":288,"line":405},[286,32042,1185],{"class":320},[286,32044,519],{"class":292},[286,32046,522],{"class":320},[286,32048,1349],{"class":364},[286,32050,32051],{"class":292},".email.",[286,32053,31844],{"class":300},[286,32055,577],{"class":292},[286,32057,18353],{"class":320},[286,32059,18158],{"class":292},[286,32061,32062,32064,32066,32068,32070,32072,32074],{"class":288,"line":410},[286,32063,14536],{"class":292},[286,32065,2359],{"class":300},[286,32067,456],{"class":292},[286,32069,31861],{"class":310},[286,32071,235],{"class":292},[286,32073,1349],{"class":364},[286,32075,32076],{"class":292},".email);\n",[286,32078,32079],{"class":288,"line":444},[286,32080,7023],{"class":292},[286,32082,32083],{"class":288,"line":464},[286,32084,1139],{"class":292},[286,32086,32087],{"class":288,"line":469},[286,32088,18262],{"class":292},[286,32090,32091,32093,32095],{"class":288,"line":484},[286,32092,793],{"class":292},[286,32094,297],{"class":296},[286,32096,314],{"class":292},[286,32098,32099],{"class":288,"line":508},[286,32100,336],{"emptyLinePlaceholder":6},[286,32102,32103,32105,32107],{"class":288,"line":513},[286,32104,293],{"class":292},[286,32106,810],{"class":296},[286,32108,314],{"class":292},[286,32110,32112,32114,32116,32118,32120,32122],{"class":32111,"line":528},[288,9405],[286,32113,818],{"class":292},[286,32115,31301],{"class":296},[286,32117,31898],{"class":300},[286,32119,307],{"class":292},[286,32121,31903],{"class":310},[286,32123,314],{"class":292},[286,32125,32126,32128,32130,32132,32134,32136,32138,32140,32142,32144,32146,32148],{"class":288,"line":547},[286,32127,837],{"class":292},[286,32129,18048],{"class":296},[286,32131,23758],{"class":300},[286,32133,307],{"class":292},[286,32135,31918],{"class":310},[286,32137,4277],{"class":300},[286,32139,307],{"class":292},[286,32141,31918],{"class":310},[286,32143,31927],{"class":300},[286,32145,307],{"class":292},[286,32147,31932],{"class":310},[286,32149,4332],{"class":292},[286,32151,32152,32154,32156,32158,32160,32162,32164,32166],{"class":288,"line":553},[286,32153,837],{"class":292},[286,32155,4274],{"class":296},[286,32157,4277],{"class":300},[286,32159,307],{"class":292},[286,32161,31947],{"class":310},[286,32163,31950],{"class":292},[286,32165,4274],{"class":296},[286,32167,314],{"class":292},[286,32169,32170,32172,32174],{"class":288,"line":558},[286,32171,962],{"class":292},[286,32173,31301],{"class":296},[286,32175,314],{"class":292},[286,32177,32178,32180,32182],{"class":288,"line":586},[286,32179,793],{"class":292},[286,32181,810],{"class":296},[286,32183,314],{"class":292},[202,32185,32187],{"id":32186},"_3-atajo-de-teclado-con-modificadores","3) Atajo de teclado con modificadores",[277,32189,32192],{"className":279,"code":32190,"filename":281,"highlights":32191,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\n\nconst note = ref(\"\");\n\nfunction saveDraft() {\n console.log(\"Borrador guardado:\", note.value);\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ctextarea v-model=\"note\" @keydown.ctrl.enter.prevent=\"saveDraft\" />\n\u003C/template>\n",[444],[26,32193,32194,32210,32222,32226,32243,32247,32256,32270,32274,32282,32286,32294,32321],{"__ignoreMap":9},[286,32195,32196,32198,32200,32202,32204,32206,32208],{"class":288,"line":289},[286,32197,293],{"class":292},[286,32199,297],{"class":296},[286,32201,301],{"class":300},[286,32203,304],{"class":300},[286,32205,307],{"class":292},[286,32207,311],{"class":310},[286,32209,314],{"class":292},[286,32211,32212,32214,32216,32218,32220],{"class":288,"line":317},[286,32213,321],{"class":320},[286,32215,11013],{"class":292},[286,32217,327],{"class":320},[286,32219,18155],{"class":310},[286,32221,18158],{"class":292},[286,32223,32224],{"class":288,"line":333},[286,32225,336],{"emptyLinePlaceholder":6},[286,32227,32228,32230,32233,32235,32237,32239,32241],{"class":288,"line":339},[286,32229,413],{"class":320},[286,32231,32232],{"class":364}," note",[286,32234,348],{"class":320},[286,32236,421],{"class":300},[286,32238,456],{"class":292},[286,32240,25323],{"class":310},[286,32242,18284],{"class":292},[286,32244,32245],{"class":288,"line":354},[286,32246,336],{"emptyLinePlaceholder":6},[286,32248,32249,32251,32254],{"class":288,"line":368},[286,32250,2467],{"class":320},[286,32252,32253],{"class":300}," saveDraft",[286,32255,481],{"class":292},[286,32257,32258,32260,32262,32264,32267],{"class":288,"line":379},[286,32259,2356],{"class":292},[286,32261,2359],{"class":300},[286,32263,456],{"class":292},[286,32265,32266],{"class":310},"\"Borrador guardado:\"",[286,32268,32269],{"class":292},", note.value);\n",[286,32271,32272],{"class":288,"line":389},[286,32273,402],{"class":292},[286,32275,32276,32278,32280],{"class":288,"line":399},[286,32277,793],{"class":292},[286,32279,297],{"class":296},[286,32281,314],{"class":292},[286,32283,32284],{"class":288,"line":405},[286,32285,336],{"emptyLinePlaceholder":6},[286,32287,32288,32290,32292],{"class":288,"line":410},[286,32289,293],{"class":292},[286,32291,810],{"class":296},[286,32293,314],{"class":292},[286,32295,32297,32299,32302,32304,32306,32309,32312,32314,32317,32319],{"class":32296,"line":444},[288,9405],[286,32298,818],{"class":292},[286,32300,32301],{"class":296},"textarea",[286,32303,23758],{"class":300},[286,32305,307],{"class":292},[286,32307,32308],{"class":310},"\"note\"",[286,32310,32311],{"class":300}," @keydown.ctrl.enter.prevent",[286,32313,307],{"class":292},[286,32315,32316],{"class":310},"\"saveDraft\"",[286,32318,25958],{"class":25957},[286,32320,314],{"class":292},[286,32322,32323,32325,32327],{"class":288,"line":464},[286,32324,793],{"class":292},[286,32326,810],{"class":296},[286,32328,314],{"class":292},[277,32330,32333],{"className":279,"code":32331,"filename":979,"highlights":32332,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n note: \"\",\n };\n },\n methods: {\n saveDraft() {\n console.log(\"Borrador guardado:\", this.note);\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ctextarea v-model=\"note\" @keydown.ctrl.enter.prevent=\"saveDraft\" />\n\u003C/template>\n",[513],[26,32334,32335,32349,32357,32363,32369,32378,32382,32386,32390,32397,32414,32418,32422,32426,32434,32438,32446,32469],{"__ignoreMap":9},[286,32336,32337,32339,32341,32343,32345,32347],{"class":288,"line":289},[286,32338,293],{"class":292},[286,32340,297],{"class":296},[286,32342,304],{"class":300},[286,32344,307],{"class":292},[286,32346,311],{"class":310},[286,32348,314],{"class":292},[286,32350,32351,32353,32355],{"class":288,"line":317},[286,32352,1065],{"class":320},[286,32354,1068],{"class":320},[286,32356,351],{"class":292},[286,32358,32359,32361],{"class":288,"line":333},[286,32360,1094],{"class":300},[286,32362,481],{"class":292},[286,32364,32365,32367],{"class":288,"line":339},[286,32366,1101],{"class":320},[286,32368,351],{"class":292},[286,32370,32371,32374,32376],{"class":288,"line":354},[286,32372,32373],{"class":292}," note: ",[286,32375,25323],{"class":310},[286,32377,1085],{"class":292},[286,32379,32380],{"class":288,"line":368},[286,32381,18485],{"class":292},[286,32383,32384],{"class":288,"line":379},[286,32385,1139],{"class":292},[286,32387,32388],{"class":288,"line":389},[286,32389,1148],{"class":292},[286,32391,32392,32395],{"class":288,"line":399},[286,32393,32394],{"class":300}," saveDraft",[286,32396,481],{"class":292},[286,32398,32399,32401,32403,32405,32407,32409,32411],{"class":288,"line":405},[286,32400,14536],{"class":292},[286,32402,2359],{"class":300},[286,32404,456],{"class":292},[286,32406,32266],{"class":310},[286,32408,235],{"class":292},[286,32410,1349],{"class":364},[286,32412,32413],{"class":292},".note);\n",[286,32415,32416],{"class":288,"line":410},[286,32417,7023],{"class":292},[286,32419,32420],{"class":288,"line":444},[286,32421,1139],{"class":292},[286,32423,32424],{"class":288,"line":464},[286,32425,18262],{"class":292},[286,32427,32428,32430,32432],{"class":288,"line":469},[286,32429,793],{"class":292},[286,32431,297],{"class":296},[286,32433,314],{"class":292},[286,32435,32436],{"class":288,"line":484},[286,32437,336],{"emptyLinePlaceholder":6},[286,32439,32440,32442,32444],{"class":288,"line":508},[286,32441,293],{"class":292},[286,32443,810],{"class":296},[286,32445,314],{"class":292},[286,32447,32449,32451,32453,32455,32457,32459,32461,32463,32465,32467],{"class":32448,"line":513},[288,9405],[286,32450,818],{"class":292},[286,32452,32301],{"class":296},[286,32454,23758],{"class":300},[286,32456,307],{"class":292},[286,32458,32308],{"class":310},[286,32460,32311],{"class":300},[286,32462,307],{"class":292},[286,32464,32316],{"class":310},[286,32466,25958],{"class":25957},[286,32468,314],{"class":292},[286,32470,32471,32473,32475],{"class":288,"line":528},[286,32472,793],{"class":292},[286,32474,810],{"class":296},[286,32476,314],{"class":292},[202,32478,32480],{"id":32479},"_4-evento-personalizado-desde-un-componente-hijo","4) Evento personalizado desde un componente hijo",[277,32482,32485],{"className":279,"code":32483,"filename":281,"highlights":32484,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport TaskForm from \"./TaskForm.vue\";\n\nfunction handleSave(taskTitle: string) {\n console.log(\"Nueva tarea:\", taskTitle);\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTaskForm @save=\"handleSave\" />\n\u003C/template>\n",[339,405],[26,32486,32487,32503,32517,32521,32540,32554,32558,32566,32570,32578,32596],{"__ignoreMap":9},[286,32488,32489,32491,32493,32495,32497,32499,32501],{"class":288,"line":289},[286,32490,293],{"class":292},[286,32492,297],{"class":296},[286,32494,301],{"class":300},[286,32496,304],{"class":300},[286,32498,307],{"class":292},[286,32500,311],{"class":310},[286,32502,314],{"class":292},[286,32504,32505,32507,32510,32512,32515],{"class":288,"line":317},[286,32506,321],{"class":320},[286,32508,32509],{"class":292}," TaskForm ",[286,32511,327],{"class":320},[286,32513,32514],{"class":310}," \"./TaskForm.vue\"",[286,32516,18158],{"class":292},[286,32518,32519],{"class":288,"line":333},[286,32520,336],{"emptyLinePlaceholder":6},[286,32522,32524,32526,32529,32531,32534,32536,32538],{"class":32523,"line":339},[288,9405],[286,32525,2467],{"class":320},[286,32527,32528],{"class":300}," handleSave",[286,32530,456],{"class":292},[286,32532,32533],{"class":357},"taskTitle",[286,32535,361],{"class":320},[286,32537,21383],{"class":364},[286,32539,2483],{"class":292},[286,32541,32542,32544,32546,32548,32551],{"class":288,"line":354},[286,32543,2356],{"class":292},[286,32545,2359],{"class":300},[286,32547,456],{"class":292},[286,32549,32550],{"class":310},"\"Nueva tarea:\"",[286,32552,32553],{"class":292},", taskTitle);\n",[286,32555,32556],{"class":288,"line":368},[286,32557,402],{"class":292},[286,32559,32560,32562,32564],{"class":288,"line":379},[286,32561,793],{"class":292},[286,32563,297],{"class":296},[286,32565,314],{"class":292},[286,32567,32568],{"class":288,"line":389},[286,32569,336],{"emptyLinePlaceholder":6},[286,32571,32572,32574,32576],{"class":288,"line":399},[286,32573,293],{"class":292},[286,32575,810],{"class":296},[286,32577,314],{"class":292},[286,32579,32581,32583,32586,32589,32591,32594],{"class":32580,"line":405},[288,9405],[286,32582,818],{"class":292},[286,32584,32585],{"class":296},"TaskForm",[286,32587,32588],{"class":300}," @save",[286,32590,307],{"class":292},[286,32592,32593],{"class":310},"\"handleSave\"",[286,32595,4332],{"class":292},[286,32597,32598,32600,32602],{"class":288,"line":410},[286,32599,793],{"class":292},[286,32601,810],{"class":296},[286,32603,314],{"class":292},[277,32605,32608],{"className":279,"code":32606,"filename":979,"highlights":32607,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nimport TaskForm from \"./TaskForm.vue\";\n\nexport default {\n components: { TaskForm },\n methods: {\n handleSave(taskTitle) {\n console.log(\"Nueva tarea:\", taskTitle);\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003CTaskForm @save=\"handleSave\" />\n\u003C/template>\n",[368,469],[26,32609,32610,32624,32636,32640,32648,32653,32658,32669,32681,32685,32689,32693,32701,32705,32714,32728],{"__ignoreMap":9},[286,32611,32612,32614,32616,32618,32620,32622],{"class":288,"line":289},[286,32613,293],{"class":292},[286,32615,297],{"class":296},[286,32617,304],{"class":300},[286,32619,307],{"class":292},[286,32621,311],{"class":310},[286,32623,314],{"class":292},[286,32625,32626,32628,32630,32632,32634],{"class":288,"line":317},[286,32627,321],{"class":320},[286,32629,32509],{"class":292},[286,32631,327],{"class":320},[286,32633,32514],{"class":310},[286,32635,18158],{"class":292},[286,32637,32638],{"class":288,"line":333},[286,32639,336],{"emptyLinePlaceholder":6},[286,32641,32642,32644,32646],{"class":288,"line":339},[286,32643,1065],{"class":320},[286,32645,1068],{"class":320},[286,32647,351],{"class":292},[286,32649,32650],{"class":288,"line":354},[286,32651,32652],{"class":292}," components: { TaskForm },\n",[286,32654,32656],{"class":32655,"line":368},[288,9405],[286,32657,1148],{"class":292},[286,32659,32660,32663,32665,32667],{"class":288,"line":379},[286,32661,32662],{"class":300}," handleSave",[286,32664,456],{"class":292},[286,32666,32533],{"class":357},[286,32668,2483],{"class":292},[286,32670,32671,32673,32675,32677,32679],{"class":288,"line":389},[286,32672,14536],{"class":292},[286,32674,2359],{"class":300},[286,32676,456],{"class":292},[286,32678,32550],{"class":310},[286,32680,32553],{"class":292},[286,32682,32683],{"class":288,"line":399},[286,32684,7023],{"class":292},[286,32686,32687],{"class":288,"line":405},[286,32688,1139],{"class":292},[286,32690,32691],{"class":288,"line":410},[286,32692,18262],{"class":292},[286,32694,32695,32697,32699],{"class":288,"line":444},[286,32696,793],{"class":292},[286,32698,297],{"class":296},[286,32700,314],{"class":292},[286,32702,32703],{"class":288,"line":464},[286,32704,336],{"emptyLinePlaceholder":6},[286,32706,32708,32710,32712],{"class":32707,"line":469},[288,9405],[286,32709,293],{"class":292},[286,32711,810],{"class":296},[286,32713,314],{"class":292},[286,32715,32716,32718,32720,32722,32724,32726],{"class":288,"line":484},[286,32717,818],{"class":292},[286,32719,32585],{"class":296},[286,32721,32588],{"class":300},[286,32723,307],{"class":292},[286,32725,32593],{"class":310},[286,32727,4332],{"class":292},[286,32729,32730,32732,32734],{"class":288,"line":508},[286,32731,793],{"class":292},[286,32733,810],{"class":296},[286,32735,314],{"class":292},[40,32737,1983],{"id":1982},[31,32739,32740],{},"Componente de lista de tareas con:",[48,32742,32743,32749,32754],{},[51,32744,32745,32748],{},[26,32746,32747],{},"@submit.prevent"," para crear tareas.",[51,32750,32751,32753],{},[26,32752,24791],{}," para marcar como completada.",[51,32755,32756,32759],{},[26,32757,32758],{},"@keydown.enter"," para envío rápido.",[277,32761,32763],{"className":279,"code":32762,"filename":281,"language":282,"meta":9,"style":9},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\n\ntype Task = {\n id: number;\n title: string;\n done: boolean;\n};\n\nconst draft = ref(\"\");\nconst tasks = ref\u003CTask[]>([]);\n\nconst remaining = computed(() => tasks.value.filter((task) => !task.done).length);\n\nfunction addTask() {\n const title = draft.value.trim();\n if (!title) return;\n\n tasks.value.push({\n id: Date.now(),\n title,\n done: false,\n });\n draft.value = \"\";\n}\n\nfunction toggleTask(id: number) {\n const task = tasks.value.find((item) => item.id === id);\n if (!task) return;\n task.done = !task.done;\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Csection>\n \u003Ch2>Tareas\u003C/h2>\n \u003Cp>Pendientes: {{ remaining }}\u003C/p>\n\n \u003Cform @submit.prevent=\"addTask\">\n \u003Cinput\n v-model=\"draft\"\n type=\"text\"\n placeholder=\"Escribe una tarea y pulsa Enter\"\n @keydown.enter.prevent=\"addTask\"\n />\n \u003Cbutton type=\"submit\">Agregar\u003C/button>\n \u003C/form>\n\n \u003Cul>\n \u003Cli v-for=\"task in tasks\" :key=\"task.id\">\n \u003Cbutton @click=\"toggleTask(task.id)\">\n {{ task.done ? \"Reabrir\" : \"Completar\" }}\n \u003C/button>\n \u003Cspan :style=\"{ textDecoration: task.done ? 'line-through' : 'none' }\">\n {{ task.title }}\n \u003C/span>\n \u003C/li>\n \u003C/ul>\n \u003C/section>\n\u003C/template>\n",[26,32764,32765,32781,32793,32797,32807,32817,32827,32837,32841,32845,32862,32879,32883,32919,32923,32932,32948,32963,32967,32976,32984,32989,32998,33003,33015,33019,33023,33039,33066,33080,33091,33095,33103,33107,33115,33123,33136,33149,33153,33168,33174,33184,33193,33203,33213,33218,33237,33245,33249,33257,33279,33294,33299,33307,33323,33328,33336,33344,33352,33360],{"__ignoreMap":9},[286,32766,32767,32769,32771,32773,32775,32777,32779],{"class":288,"line":289},[286,32768,293],{"class":292},[286,32770,297],{"class":296},[286,32772,301],{"class":300},[286,32774,304],{"class":300},[286,32776,307],{"class":292},[286,32778,311],{"class":310},[286,32780,314],{"class":292},[286,32782,32783,32785,32787,32789,32791],{"class":288,"line":317},[286,32784,321],{"class":320},[286,32786,23391],{"class":292},[286,32788,327],{"class":320},[286,32790,18155],{"class":310},[286,32792,18158],{"class":292},[286,32794,32795],{"class":288,"line":333},[286,32796,336],{"emptyLinePlaceholder":6},[286,32798,32799,32801,32803,32805],{"class":288,"line":339},[286,32800,342],{"class":320},[286,32802,5637],{"class":300},[286,32804,348],{"class":320},[286,32806,351],{"class":292},[286,32808,32809,32811,32813,32815],{"class":288,"line":354},[286,32810,358],{"class":357},[286,32812,361],{"class":320},[286,32814,2480],{"class":364},[286,32816,18158],{"class":292},[286,32818,32819,32821,32823,32825],{"class":288,"line":368},[286,32820,5654],{"class":357},[286,32822,361],{"class":320},[286,32824,21383],{"class":364},[286,32826,18158],{"class":292},[286,32828,32829,32831,32833,32835],{"class":288,"line":379},[286,32830,5663],{"class":357},[286,32832,361],{"class":320},[286,32834,22560],{"class":364},[286,32836,18158],{"class":292},[286,32838,32839],{"class":288,"line":389},[286,32840,18262],{"class":292},[286,32842,32843],{"class":288,"line":399},[286,32844,336],{"emptyLinePlaceholder":6},[286,32846,32847,32849,32852,32854,32856,32858,32860],{"class":288,"line":405},[286,32848,413],{"class":320},[286,32850,32851],{"class":364}," draft",[286,32853,348],{"class":320},[286,32855,421],{"class":300},[286,32857,456],{"class":292},[286,32859,25323],{"class":310},[286,32861,18284],{"class":292},[286,32863,32864,32866,32868,32870,32872,32874,32876],{"class":288,"line":410},[286,32865,413],{"class":320},[286,32867,2104],{"class":364},[286,32869,348],{"class":320},[286,32871,421],{"class":300},[286,32873,293],{"class":292},[286,32875,5691],{"class":300},[286,32877,32878],{"class":292},"[]>([]);\n",[286,32880,32881],{"class":288,"line":444},[286,32882,336],{"emptyLinePlaceholder":6},[286,32884,32885,32887,32890,32892,32894,32896,32898,32900,32902,32904,32906,32908,32910,32912,32915,32917],{"class":288,"line":464},[286,32886,413],{"class":320},[286,32888,32889],{"class":364}," remaining",[286,32891,348],{"class":320},[286,32893,2207],{"class":300},[286,32895,2210],{"class":292},[286,32897,609],{"class":320},[286,32899,2222],{"class":292},[286,32901,2225],{"class":300},[286,32903,2341],{"class":292},[286,32905,2230],{"class":357},[286,32907,2347],{"class":292},[286,32909,609],{"class":320},[286,32911,2295],{"class":320},[286,32913,32914],{"class":292},"task.done).",[286,32916,9820],{"class":364},[286,32918,18284],{"class":292},[286,32920,32921],{"class":288,"line":469},[286,32922,336],{"emptyLinePlaceholder":6},[286,32924,32925,32927,32930],{"class":288,"line":484},[286,32926,2467],{"class":320},[286,32928,32929],{"class":300}," addTask",[286,32931,481],{"class":292},[286,32933,32934,32936,32939,32941,32944,32946],{"class":288,"line":508},[286,32935,487],{"class":320},[286,32937,32938],{"class":364}," title",[286,32940,348],{"class":320},[286,32942,32943],{"class":292}," draft.value.",[286,32945,31844],{"class":300},[286,32947,19429],{"class":292},[286,32949,32950,32952,32954,32956,32959,32961],{"class":288,"line":513},[286,32951,516],{"class":320},[286,32953,519],{"class":292},[286,32955,522],{"class":320},[286,32957,32958],{"class":292},"title) ",[286,32960,18353],{"class":320},[286,32962,18158],{"class":292},[286,32964,32965],{"class":288,"line":528},[286,32966,336],{"emptyLinePlaceholder":6},[286,32968,32969,32972,32974],{"class":288,"line":547},[286,32970,32971],{"class":292}," tasks.value.",[286,32973,9787],{"class":300},[286,32975,1074],{"class":292},[286,32977,32978,32980,32982],{"class":288,"line":553},[286,32979,9794],{"class":292},[286,32981,9797],{"class":300},[286,32983,9800],{"class":292},[286,32985,32986],{"class":288,"line":558},[286,32987,32988],{"class":292}," title,\n",[286,32990,32991,32994,32996],{"class":288,"line":586},[286,32992,32993],{"class":292}," done: ",[286,32995,2130],{"class":364},[286,32997,1085],{"class":292},[286,32999,33000],{"class":288,"line":591},[286,33001,33002],{"class":292}," });\n",[286,33004,33005,33008,33010,33013],{"class":288,"line":596},[286,33006,33007],{"class":292}," draft.value ",[286,33009,307],{"class":320},[286,33011,33012],{"class":310}," \"\"",[286,33014,18158],{"class":292},[286,33016,33017],{"class":288,"line":614},[286,33018,402],{"class":292},[286,33020,33021],{"class":288,"line":622},[286,33022,336],{"emptyLinePlaceholder":6},[286,33024,33025,33027,33029,33031,33033,33035,33037],{"class":288,"line":633},[286,33026,2467],{"class":320},[286,33028,2470],{"class":300},[286,33030,456],{"class":292},[286,33032,22049],{"class":357},[286,33034,361],{"class":320},[286,33036,2480],{"class":364},[286,33038,2483],{"class":292},[286,33040,33041,33043,33045,33047,33049,33051,33053,33055,33057,33059,33061,33063],{"class":288,"line":645},[286,33042,487],{"class":320},[286,33044,2490],{"class":364},[286,33046,348],{"class":320},[286,33048,2222],{"class":292},[286,33050,2497],{"class":300},[286,33052,2341],{"class":292},[286,33054,2502],{"class":357},[286,33056,2347],{"class":292},[286,33058,609],{"class":320},[286,33060,2507],{"class":292},[286,33062,2510],{"class":320},[286,33064,33065],{"class":292}," id);\n",[286,33067,33068,33070,33072,33074,33076,33078],{"class":288,"line":654},[286,33069,516],{"class":320},[286,33071,519],{"class":292},[286,33073,522],{"class":320},[286,33075,2528],{"class":292},[286,33077,18353],{"class":320},[286,33079,18158],{"class":292},[286,33081,33082,33084,33086,33088],{"class":288,"line":676},[286,33083,2539],{"class":292},[286,33085,307],{"class":320},[286,33087,2295],{"class":320},[286,33089,33090],{"class":292},"task.done;\n",[286,33092,33093],{"class":288,"line":681},[286,33094,402],{"class":292},[286,33096,33097,33099,33101],{"class":288,"line":687},[286,33098,793],{"class":292},[286,33100,297],{"class":296},[286,33102,314],{"class":292},[286,33104,33105],{"class":288,"line":692},[286,33106,336],{"emptyLinePlaceholder":6},[286,33108,33109,33111,33113],{"class":288,"line":708},[286,33110,293],{"class":292},[286,33112,810],{"class":296},[286,33114,314],{"class":292},[286,33116,33117,33119,33121],{"class":288,"line":725},[286,33118,818],{"class":292},[286,33120,4128],{"class":296},[286,33122,314],{"class":292},[286,33124,33125,33127,33129,33132,33134],{"class":288,"line":730},[286,33126,837],{"class":292},[286,33128,40],{"class":296},[286,33130,33131],{"class":292},">Tareas\u003C/",[286,33133,40],{"class":296},[286,33135,314],{"class":292},[286,33137,33138,33140,33142,33145,33147],{"class":288,"line":737},[286,33139,837],{"class":292},[286,33141,31],{"class":296},[286,33143,33144],{"class":292},">Pendientes: {{ remaining }}\u003C/",[286,33146,31],{"class":296},[286,33148,314],{"class":292},[286,33150,33151],{"class":288,"line":746},[286,33152,336],{"emptyLinePlaceholder":6},[286,33154,33155,33157,33159,33161,33163,33166],{"class":288,"line":755},[286,33156,837],{"class":292},[286,33158,31301],{"class":296},[286,33160,31898],{"class":300},[286,33162,307],{"class":292},[286,33164,33165],{"class":310},"\"addTask\"",[286,33167,314],{"class":292},[286,33169,33170,33172],{"class":288,"line":762},[286,33171,887],{"class":292},[286,33173,11556],{"class":296},[286,33175,33176,33179,33181],{"class":288,"line":780},[286,33177,33178],{"class":300}," v-model",[286,33180,307],{"class":292},[286,33182,33183],{"class":310},"\"draft\"\n",[286,33185,33186,33189,33191],{"class":288,"line":785},[286,33187,33188],{"class":300}," type",[286,33190,307],{"class":292},[286,33192,29477],{"class":310},[286,33194,33195,33198,33200],{"class":288,"line":790},[286,33196,33197],{"class":300}," placeholder",[286,33199,307],{"class":292},[286,33201,33202],{"class":310},"\"Escribe una tarea y pulsa Enter\"\n",[286,33204,33205,33208,33210],{"class":288,"line":800},[286,33206,33207],{"class":300}," @keydown.enter.prevent",[286,33209,307],{"class":292},[286,33211,33212],{"class":310},"\"addTask\"\n",[286,33214,33215],{"class":288,"line":805},[286,33216,33217],{"class":292}," />\n",[286,33219,33220,33222,33224,33226,33228,33230,33233,33235],{"class":288,"line":815},[286,33221,887],{"class":292},[286,33223,4274],{"class":296},[286,33225,4277],{"class":300},[286,33227,307],{"class":292},[286,33229,31947],{"class":310},[286,33231,33232],{"class":292},">Agregar\u003C/",[286,33234,4274],{"class":296},[286,33236,314],{"class":292},[286,33238,33239,33241,33243],{"class":288,"line":834},[286,33240,930],{"class":292},[286,33242,31301],{"class":296},[286,33244,314],{"class":292},[286,33246,33247],{"class":288,"line":857},[286,33248,336],{"emptyLinePlaceholder":6},[286,33250,33251,33253,33255],{"class":288,"line":862},[286,33252,837],{"class":292},[286,33254,48],{"class":296},[286,33256,314],{"class":292},[286,33258,33259,33261,33263,33265,33267,33270,33272,33274,33277],{"class":288,"line":884},[286,33260,887],{"class":292},[286,33262,51],{"class":296},[286,33264,12792],{"class":300},[286,33266,307],{"class":292},[286,33268,33269],{"class":310},"\"task in tasks\"",[286,33271,4324],{"class":300},[286,33273,307],{"class":292},[286,33275,33276],{"class":310},"\"task.id\"",[286,33278,314],{"class":292},[286,33280,33281,33283,33285,33287,33289,33292],{"class":288,"line":899},[286,33282,26693],{"class":292},[286,33284,4274],{"class":296},[286,33286,4285],{"class":300},[286,33288,307],{"class":292},[286,33290,33291],{"class":310},"\"toggleTask(task.id)\"",[286,33293,314],{"class":292},[286,33295,33296],{"class":288,"line":913},[286,33297,33298],{"class":292}," {{ task.done ? \"Reabrir\" : \"Completar\" }}\n",[286,33300,33301,33303,33305],{"class":288,"line":927},[286,33302,26741],{"class":292},[286,33304,4274],{"class":296},[286,33306,314],{"class":292},[286,33308,33309,33311,33313,33316,33318,33321],{"class":288,"line":937},[286,33310,26693],{"class":292},[286,33312,286],{"class":296},[286,33314,33315],{"class":300}," :style",[286,33317,307],{"class":292},[286,33319,33320],{"class":310},"\"{ textDecoration: task.done ? 'line-through' : 'none' }\"",[286,33322,314],{"class":292},[286,33324,33325],{"class":288,"line":942},[286,33326,33327],{"class":292}," {{ task.title }}\n",[286,33329,33330,33332,33334],{"class":288,"line":959},[286,33331,26741],{"class":292},[286,33333,286],{"class":296},[286,33335,314],{"class":292},[286,33337,33338,33340,33342],{"class":288,"line":969},[286,33339,4182],{"class":292},[286,33341,51],{"class":296},[286,33343,314],{"class":292},[286,33345,33346,33348,33350],{"class":288,"line":1481},[286,33347,930],{"class":292},[286,33349,48],{"class":296},[286,33351,314],{"class":292},[286,33353,33354,33356,33358],{"class":288,"line":1486},[286,33355,962],{"class":292},[286,33357,4128],{"class":296},[286,33359,314],{"class":292},[286,33361,33362,33364,33366],{"class":288,"line":1505},[286,33363,793],{"class":292},[286,33365,810],{"class":296},[286,33367,314],{"class":292},[277,33369,33371],{"className":279,"code":33370,"filename":979,"language":282,"meta":9,"style":9},"\u003Cscript lang=\"ts\">\nexport default {\n data() {\n return {\n draft: \"\",\n tasks: [],\n };\n },\n computed: {\n remaining() {\n return this.tasks.filter((task) => !task.done).length;\n },\n },\n methods: {\n addTask() {\n const title = this.draft.trim();\n if (!title) return;\n\n this.tasks.push({\n id: Date.now(),\n title,\n done: false,\n });\n this.draft = \"\";\n },\n toggleTask(id) {\n const task = this.tasks.find((item) => item.id === id);\n if (!task) return;\n task.done = !task.done;\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Csection>\n \u003Ch2>Tareas\u003C/h2>\n \u003Cp>Pendientes: {{ remaining }}\u003C/p>\n\n \u003Cform @submit.prevent=\"addTask\">\n \u003Cinput\n v-model=\"draft\"\n type=\"text\"\n placeholder=\"Escribe una tarea y pulsa Enter\"\n @keydown.enter.prevent=\"addTask\"\n />\n \u003Cbutton type=\"submit\">Agregar\u003C/button>\n \u003C/form>\n\n \u003Cul>\n \u003Cli v-for=\"task in tasks\" :key=\"task.id\">\n \u003Cbutton @click=\"toggleTask(task.id)\">\n {{ task.done ? \"Reabrir\" : \"Completar\" }}\n \u003C/button>\n \u003Cspan :style=\"{ textDecoration: task.done ? 'line-through' : 'none' }\">\n {{ task.title }}\n \u003C/span>\n \u003C/li>\n \u003C/ul>\n \u003C/section>\n\u003C/template>\n",[26,33372,33373,33387,33395,33401,33407,33416,33420,33424,33428,33432,33439,33465,33469,33473,33477,33484,33501,33515,33519,33529,33537,33542,33551,33555,33568,33572,33582,33610,33624,33634,33638,33642,33646,33654,33658,33666,33674,33686,33698,33702,33716,33722,33730,33738,33746,33754,33758,33776,33784,33788,33796,33816,33830,33834,33842,33856,33860,33868,33876,33884,33892],{"__ignoreMap":9},[286,33374,33375,33377,33379,33381,33383,33385],{"class":288,"line":289},[286,33376,293],{"class":292},[286,33378,297],{"class":296},[286,33380,304],{"class":300},[286,33382,307],{"class":292},[286,33384,311],{"class":310},[286,33386,314],{"class":292},[286,33388,33389,33391,33393],{"class":288,"line":317},[286,33390,1065],{"class":320},[286,33392,1068],{"class":320},[286,33394,351],{"class":292},[286,33396,33397,33399],{"class":288,"line":333},[286,33398,1094],{"class":300},[286,33400,481],{"class":292},[286,33402,33403,33405],{"class":288,"line":339},[286,33404,1101],{"class":320},[286,33406,351],{"class":292},[286,33408,33409,33412,33414],{"class":288,"line":354},[286,33410,33411],{"class":292}," draft: ",[286,33413,25323],{"class":310},[286,33415,1085],{"class":292},[286,33417,33418],{"class":288,"line":368},[286,33419,6613],{"class":292},[286,33421,33422],{"class":288,"line":379},[286,33423,18485],{"class":292},[286,33425,33426],{"class":288,"line":389},[286,33427,1139],{"class":292},[286,33429,33430],{"class":288,"line":399},[286,33431,2749],{"class":292},[286,33433,33434,33437],{"class":288,"line":405},[286,33435,33436],{"class":300}," remaining",[286,33438,481],{"class":292},[286,33440,33441,33443,33445,33447,33449,33451,33453,33455,33457,33459,33461,33463],{"class":288,"line":410},[286,33442,2761],{"class":320},[286,33444,1276],{"class":364},[286,33446,2766],{"class":292},[286,33448,2225],{"class":300},[286,33450,2341],{"class":292},[286,33452,2230],{"class":357},[286,33454,2347],{"class":292},[286,33456,609],{"class":320},[286,33458,2295],{"class":320},[286,33460,32914],{"class":292},[286,33462,9820],{"class":364},[286,33464,18158],{"class":292},[286,33466,33467],{"class":288,"line":444},[286,33468,7023],{"class":292},[286,33470,33471],{"class":288,"line":464},[286,33472,1139],{"class":292},[286,33474,33475],{"class":288,"line":469},[286,33476,1148],{"class":292},[286,33478,33479,33482],{"class":288,"line":484},[286,33480,33481],{"class":300}," addTask",[286,33483,481],{"class":292},[286,33485,33486,33488,33490,33492,33494,33497,33499],{"class":288,"line":508},[286,33487,1162],{"class":320},[286,33489,32938],{"class":364},[286,33491,348],{"class":320},[286,33493,1276],{"class":364},[286,33495,33496],{"class":292},".draft.",[286,33498,31844],{"class":300},[286,33500,19429],{"class":292},[286,33502,33503,33505,33507,33509,33511,33513],{"class":288,"line":513},[286,33504,1185],{"class":320},[286,33506,519],{"class":292},[286,33508,522],{"class":320},[286,33510,32958],{"class":292},[286,33512,18353],{"class":320},[286,33514,18158],{"class":292},[286,33516,33517],{"class":288,"line":528},[286,33518,336],{"emptyLinePlaceholder":6},[286,33520,33521,33523,33525,33527],{"class":288,"line":547},[286,33522,1220],{"class":364},[286,33524,2766],{"class":292},[286,33526,9787],{"class":300},[286,33528,1074],{"class":292},[286,33530,33531,33533,33535],{"class":288,"line":553},[286,33532,10227],{"class":292},[286,33534,9797],{"class":300},[286,33536,9800],{"class":292},[286,33538,33539],{"class":288,"line":558},[286,33540,33541],{"class":292}," title,\n",[286,33543,33544,33547,33549],{"class":288,"line":586},[286,33545,33546],{"class":292}," done: ",[286,33548,2130],{"class":364},[286,33550,1085],{"class":292},[286,33552,33553],{"class":288,"line":591},[286,33554,30610],{"class":292},[286,33556,33557,33559,33562,33564,33566],{"class":288,"line":596},[286,33558,1220],{"class":364},[286,33560,33561],{"class":292},".draft ",[286,33563,307],{"class":320},[286,33565,33012],{"class":310},[286,33567,18158],{"class":292},[286,33569,33570],{"class":288,"line":614},[286,33571,7023],{"class":292},[286,33573,33574,33576,33578,33580],{"class":288,"line":622},[286,33575,2994],{"class":300},[286,33577,456],{"class":292},[286,33579,22049],{"class":357},[286,33581,2483],{"class":292},[286,33583,33584,33586,33588,33590,33592,33594,33596,33598,33600,33602,33604,33606,33608],{"class":288,"line":633},[286,33585,1162],{"class":320},[286,33587,2490],{"class":364},[286,33589,348],{"class":320},[286,33591,1276],{"class":364},[286,33593,2766],{"class":292},[286,33595,2497],{"class":300},[286,33597,2341],{"class":292},[286,33599,2502],{"class":357},[286,33601,2347],{"class":292},[286,33603,609],{"class":320},[286,33605,2507],{"class":292},[286,33607,2510],{"class":320},[286,33609,33065],{"class":292},[286,33611,33612,33614,33616,33618,33620,33622],{"class":288,"line":645},[286,33613,1185],{"class":320},[286,33615,519],{"class":292},[286,33617,522],{"class":320},[286,33619,2528],{"class":292},[286,33621,18353],{"class":320},[286,33623,18158],{"class":292},[286,33625,33626,33628,33630,33632],{"class":288,"line":654},[286,33627,3051],{"class":292},[286,33629,307],{"class":320},[286,33631,2295],{"class":320},[286,33633,33090],{"class":292},[286,33635,33636],{"class":288,"line":676},[286,33637,7023],{"class":292},[286,33639,33640],{"class":288,"line":681},[286,33641,1139],{"class":292},[286,33643,33644],{"class":288,"line":687},[286,33645,18262],{"class":292},[286,33647,33648,33650,33652],{"class":288,"line":692},[286,33649,793],{"class":292},[286,33651,297],{"class":296},[286,33653,314],{"class":292},[286,33655,33656],{"class":288,"line":708},[286,33657,336],{"emptyLinePlaceholder":6},[286,33659,33660,33662,33664],{"class":288,"line":725},[286,33661,293],{"class":292},[286,33663,810],{"class":296},[286,33665,314],{"class":292},[286,33667,33668,33670,33672],{"class":288,"line":730},[286,33669,818],{"class":292},[286,33671,4128],{"class":296},[286,33673,314],{"class":292},[286,33675,33676,33678,33680,33682,33684],{"class":288,"line":737},[286,33677,837],{"class":292},[286,33679,40],{"class":296},[286,33681,33131],{"class":292},[286,33683,40],{"class":296},[286,33685,314],{"class":292},[286,33687,33688,33690,33692,33694,33696],{"class":288,"line":746},[286,33689,837],{"class":292},[286,33691,31],{"class":296},[286,33693,33144],{"class":292},[286,33695,31],{"class":296},[286,33697,314],{"class":292},[286,33699,33700],{"class":288,"line":755},[286,33701,336],{"emptyLinePlaceholder":6},[286,33703,33704,33706,33708,33710,33712,33714],{"class":288,"line":762},[286,33705,837],{"class":292},[286,33707,31301],{"class":296},[286,33709,31898],{"class":300},[286,33711,307],{"class":292},[286,33713,33165],{"class":310},[286,33715,314],{"class":292},[286,33717,33718,33720],{"class":288,"line":780},[286,33719,887],{"class":292},[286,33721,11556],{"class":296},[286,33723,33724,33726,33728],{"class":288,"line":785},[286,33725,33178],{"class":300},[286,33727,307],{"class":292},[286,33729,33183],{"class":310},[286,33731,33732,33734,33736],{"class":288,"line":790},[286,33733,33188],{"class":300},[286,33735,307],{"class":292},[286,33737,29477],{"class":310},[286,33739,33740,33742,33744],{"class":288,"line":800},[286,33741,33197],{"class":300},[286,33743,307],{"class":292},[286,33745,33202],{"class":310},[286,33747,33748,33750,33752],{"class":288,"line":805},[286,33749,33207],{"class":300},[286,33751,307],{"class":292},[286,33753,33212],{"class":310},[286,33755,33756],{"class":288,"line":815},[286,33757,33217],{"class":292},[286,33759,33760,33762,33764,33766,33768,33770,33772,33774],{"class":288,"line":834},[286,33761,887],{"class":292},[286,33763,4274],{"class":296},[286,33765,4277],{"class":300},[286,33767,307],{"class":292},[286,33769,31947],{"class":310},[286,33771,33232],{"class":292},[286,33773,4274],{"class":296},[286,33775,314],{"class":292},[286,33777,33778,33780,33782],{"class":288,"line":857},[286,33779,930],{"class":292},[286,33781,31301],{"class":296},[286,33783,314],{"class":292},[286,33785,33786],{"class":288,"line":862},[286,33787,336],{"emptyLinePlaceholder":6},[286,33789,33790,33792,33794],{"class":288,"line":884},[286,33791,837],{"class":292},[286,33793,48],{"class":296},[286,33795,314],{"class":292},[286,33797,33798,33800,33802,33804,33806,33808,33810,33812,33814],{"class":288,"line":899},[286,33799,887],{"class":292},[286,33801,51],{"class":296},[286,33803,12792],{"class":300},[286,33805,307],{"class":292},[286,33807,33269],{"class":310},[286,33809,4324],{"class":300},[286,33811,307],{"class":292},[286,33813,33276],{"class":310},[286,33815,314],{"class":292},[286,33817,33818,33820,33822,33824,33826,33828],{"class":288,"line":913},[286,33819,26693],{"class":292},[286,33821,4274],{"class":296},[286,33823,4285],{"class":300},[286,33825,307],{"class":292},[286,33827,33291],{"class":310},[286,33829,314],{"class":292},[286,33831,33832],{"class":288,"line":927},[286,33833,33298],{"class":292},[286,33835,33836,33838,33840],{"class":288,"line":937},[286,33837,26741],{"class":292},[286,33839,4274],{"class":296},[286,33841,314],{"class":292},[286,33843,33844,33846,33848,33850,33852,33854],{"class":288,"line":942},[286,33845,26693],{"class":292},[286,33847,286],{"class":296},[286,33849,33315],{"class":300},[286,33851,307],{"class":292},[286,33853,33320],{"class":310},[286,33855,314],{"class":292},[286,33857,33858],{"class":288,"line":959},[286,33859,33327],{"class":292},[286,33861,33862,33864,33866],{"class":288,"line":969},[286,33863,26741],{"class":292},[286,33865,286],{"class":296},[286,33867,314],{"class":292},[286,33869,33870,33872,33874],{"class":288,"line":1481},[286,33871,4182],{"class":292},[286,33873,51],{"class":296},[286,33875,314],{"class":292},[286,33877,33878,33880,33882],{"class":288,"line":1486},[286,33879,930],{"class":292},[286,33881,48],{"class":296},[286,33883,314],{"class":292},[286,33885,33886,33888,33890],{"class":288,"line":1505},[286,33887,962],{"class":292},[286,33889,4128],{"class":296},[286,33891,314],{"class":292},[286,33893,33894,33896,33898],{"class":288,"line":1518},[286,33895,793],{"class":292},[286,33897,810],{"class":296},[286,33899,314],{"class":292},[40,33901,1604],{"id":1603},[31,33903,33904,33906],{},[26,33905,17984],{}," es la directiva que convierte plantillas estáticas en interfaces interactivas.\nSi la usas con handlers claros y modificadores correctos, reduces bugs y mejoras legibilidad.",[31,33908,33909],{},"Puntos clave para recordar:",[48,33911,33912,33920,33923,33933],{},[51,33913,20784,33914,33917,33918,114],{},[26,33915,33916],{},"@"," como shorthand de ",[26,33919,17984],{},[51,33921,33922],{},"Prefiere funciones del script sobre expresiones complejas inline.",[51,33924,33925,33926,235,33928,235,33930,33932],{},"Aprovecha modificadores (",[26,33927,31113],{},[26,33929,31116],{},[26,33931,31119],{},") cuando sean necesarios.",[51,33934,33935],{},"Mantén consistencia entre Composition API y Options API para facilitar mantenimiento.",[1614,33937,33938],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":9,"searchDepth":317,"depth":317,"links":33940},[33941,33942,33943,33944,33945,33953,33960,33961],{"id":20631,"depth":317,"text":20632},{"id":24659,"depth":317,"text":24660},{"id":138,"depth":317,"text":139},{"id":165,"depth":317,"text":166},{"id":199,"depth":317,"text":200,"children":33946},[33947,33948,33950,33951],{"id":31208,"depth":333,"text":31209},{"id":31283,"depth":333,"text":33949},"2) Olvidar .prevent en formularios",{"id":31358,"depth":333,"text":31359},{"id":31467,"depth":333,"text":33952},"4) Usar event sin declararlo",{"id":1952,"depth":317,"text":1953,"children":33954},[33955,33956,33958,33959],{"id":31543,"depth":333,"text":31544},{"id":31759,"depth":333,"text":33957},"2) Submit de formulario con .prevent",{"id":32186,"depth":333,"text":32187},{"id":32479,"depth":333,"text":32480},{"id":1982,"depth":317,"text":1983},{"id":1603,"depth":317,"text":1604},"https://res.cloudinary.com/denj4fg7f/image/upload/v1771022043/directives-vue-v-on-guide_hwtqel.png","Imagen temporal para portada del articulo sobre v-on en Vue","2026-02-13","Aprende a usar v-on en Vue con eventos del DOM, modificadores, atajos de teclado y buenas practicas para mantener componentes claros y mantenibles.",{"script":33967},[33968],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":33969},[33970],{"headline":33971,"author":33972,"datePublished":33973,"@type":1647},"Directiva v-on en Vue: guia practica para manejar eventos",{"name":1644,"@type":1645},"2026-02-13T10:30:00-05:00",{"updatedAt":33973,"coverCaption":17766,"author":1644,"keywords":33975},[1652,17984,33976,33977,281,979],"eventos","event modifiers","/blog/directives-vue-v-on-guide.es",[33980],{"headline":33971,"author":33981,"datePublished":33973,"@type":1647},{"name":1644,"@type":1645},{"title":30962,"description":33965},"blog/directives-vue-v-on-guide.es",[33985,33986,33989],{"tag":20595,"color":20596},{"tag":33987,"color":33988},"Eventos","#2D98DA",{"tag":9081,"color":9082},"YWhmpR3FSyV0lOvzaHd-sKKK0-1vhXyd08KqQJW7u4w",{"id":33992,"title":33993,"body":33994,"cover":36950,"coverAlt":36951,"date":36952,"description":36953,"draft":12,"extension":1635,"head":36954,"locale":1648,"meta":36962,"navigation":6,"path":36967,"schemaOrg":36968,"seo":36971,"series":20589,"seriesDescription":20590,"seriesOrder":339,"seriesTitle":20591,"slug":1663,"stem":36972,"tags":36973,"__hash__":36978},"blog/blog/directives-vue-v-bind-guide.es.md","Directivas en Vue: v-bind",{"type":18,"value":33995,"toc":36919},[33996,34001,34006,34011,34013,34018,34032,34037,34039,34042,34077,34080,34109,34114,34159,34161,34166,34184,34186,34188,34204,34206,34213,34215,34250,34252,34300,34307,34317,34319,34386,34391,34395,34400,34426,34436,34443,34448,34450,34456,34572,34687,34693,34801,34912,34920,35073,35216,35223,35350,35471,35477,35480,35600,35713,35721,35866,36016,36023,36027,36033,36454,36874,36876,36881,36884,36910,36916],[21,33997,20612,33999],{"id":33998},"directivas-en-vue-v-bind",[26,34000,17981],{},[31,34002,34003,34005],{},[26,34004,17981],{}," conecta atributos o props del template con datos reactivos.\nSi el estado cambia, el atributo también cambia.",[31,34007,24600,34008,34010],{},[26,34009,17981],{}," es una de las piezas más importantes porque te permite pasar de HTML estático a UI dinámica sin manipular el DOM manualmente.",[40,34012,20632],{"id":20631},[31,34014,15945,34015,34017],{},[26,34016,17981],{},", terminarías escribiendo lógica imperativa para:",[48,34019,34020,34023,34026,34029],{},[51,34021,34022],{},"Activar/desactivar botones.",[51,34024,34025],{},"Cambiar clases según estado.",[51,34027,34028],{},"Renderizar enlaces o imágenes dinámicas,",[51,34030,34031],{},"Pasar datos de un componente padre a uno hijo.",[31,34033,12003,34034,34036],{},[26,34035,17981],{},", todo eso se vuelve declarativo.\nDescribes la relación entre estado y UI, y Vue se encarga del resto.",[40,34038,24660],{"id":24659},[31,34040,34041],{},"La forma base es:",[277,34043,34045],{"className":279,"code":34044,"filename":9346,"language":282,"meta":9,"style":9},"\u003Ca v-bind:href=\"url\">Ir al sitio\u003C/a>\n",[26,34046,34047],{"__ignoreMap":9},[286,34048,34049,34051,34053,34056,34058,34061,34063,34065,34068,34070,34073,34075],{"class":288,"line":289},[286,34050,293],{"class":292},[286,34052,13185],{"class":296},[286,34054,34055],{"class":300}," v-bind",[286,34057,361],{"class":292},[286,34059,34060],{"class":300},"href",[286,34062,307],{"class":292},[286,34064,874],{"class":310},[286,34066,34067],{"class":292},"url",[286,34069,874],{"class":310},[286,34071,34072],{"class":292},">Ir al sitio\u003C/",[286,34074,13185],{"class":296},[286,34076,314],{"class":292},[31,34078,34079],{},"Shorthand recomendado:",[277,34081,34083],{"className":279,"code":34082,"filename":9346,"language":282,"meta":9,"style":9},"\u003Ca :href=\"url\">Ir al sitio\u003C/a>\n",[26,34084,34085],{"__ignoreMap":9},[286,34086,34087,34089,34091,34093,34095,34097,34099,34101,34103,34105,34107],{"class":288,"line":289},[286,34088,293],{"class":292},[286,34090,13185],{"class":296},[286,34092,6251],{"class":292},[286,34094,34060],{"class":300},[286,34096,307],{"class":292},[286,34098,874],{"class":310},[286,34100,34067],{"class":292},[286,34102,874],{"class":310},[286,34104,34072],{"class":292},[286,34106,13185],{"class":296},[286,34108,314],{"class":292},[31,34110,34111,34113],{},[26,34112,17981],{}," funciona con:",[48,34115,34116,34132,34138,34147,34153],{},[51,34117,34118,34119,235,34121,235,34124,235,34127,235,34129,34131],{},"Atributos HTML (",[26,34120,34060],{},[26,34122,34123],{},"src",[26,34125,34126],{},"disabled",[26,34128,22049],{},[26,34130,23422],{},"),",[51,34133,34134,34135,34131],{},"Props de componentes (",[26,34136,34137],{},":user=\"currentUser\"",[51,34139,34140,34141,1704,34144,34146],{},"Bindings especiales para ",[26,34142,34143],{},"class",[26,34145,1614],{},",",[51,34148,34149,34150,34131],{},"Argumentos dinámicos (",[26,34151,34152],{},":[attrName]=\"value\"",[51,34154,34155,34156,1902],{},"Spread-like bindings (",[26,34157,34158],{},"v-bind=\"attrsObject\"",[40,34160,139],{"id":138},[31,34162,20784,34163,34165],{},[26,34164,17981],{}," cuando necesites:",[48,34167,34168,34171,34178,34181],{},[51,34169,34170],{},"Valores dinámicos en atributos.",[51,34172,34173,34174,5252,34176,1902],{},"Cambiar presentación según estado (",[26,34175,34143],{},[26,34177,1614],{},[51,34179,34180],{},"Pasar datos reactivos a componentes hijos.",[51,34182,34183],{},"Construir componentes reutilizables con props configurables.",[40,34185,166],{"id":165},[31,34187,172],{},[48,34189,34190,34193,34198],{},[51,34191,34192],{},"El valor es fijo y nunca cambia (puedes dejar HTML estático).",[51,34194,34195,34196,1902],{},"Metes lógica compleja directamente en el template (mejor mover a ",[26,34197,1739],{},[51,34199,34200,34201,34203],{},"Usas ",[26,34202,17981],{}," como sustituto de validación o seguridad (eso no lo resuelve el template).",[40,34205,200],{"id":199},[202,34207,34209,34210,34212],{"id":34208},"_1-olvidar-que-v-bind-evalúa-javascript","1) Olvidar que ",[26,34211,17981],{}," evalúa JavaScript",[31,34214,24899],{},[277,34216,34219],{"className":279,"code":34217,"filename":34218,"language":282,"meta":9,"style":9},"\u003Cimg :src=\"/images/avatar.png\" />\n","Incorrecto",[26,34220,34221],{"__ignoreMap":9},[286,34222,34223,34225,34228,34230,34232,34234,34236,34238,34241,34243,34246,34248],{"class":288,"line":289},[286,34224,293],{"class":292},[286,34226,34227],{"class":296},"img",[286,34229,6251],{"class":292},[286,34231,34123],{"class":300},[286,34233,307],{"class":292},[286,34235,874],{"class":310},[286,34237,15958],{"class":320},[286,34239,34240],{"class":292},"images",[286,34242,15958],{"class":320},[286,34244,34245],{"class":292},"avatar.png",[286,34247,874],{"class":310},[286,34249,4332],{"class":292},[31,34251,28473],{},[277,34253,34256],{"className":279,"code":34254,"filename":34255,"language":282,"meta":9,"style":9},"\u003Cimg src=\"/images/avatar.png\" />\n\u003C!-- o -->\n\u003Cimg :src=\"avatarUrl\" />\n","Correcto",[26,34257,34258,34274,34279],{"__ignoreMap":9},[286,34259,34260,34262,34264,34267,34269,34272],{"class":288,"line":289},[286,34261,293],{"class":292},[286,34263,34227],{"class":296},[286,34265,34266],{"class":300}," src",[286,34268,307],{"class":292},[286,34270,34271],{"class":310},"\"/images/avatar.png\"",[286,34273,4332],{"class":292},[286,34275,34276],{"class":288,"line":317},[286,34277,34278],{"class":12748},"\u003C!-- o -->\n",[286,34280,34281,34283,34285,34287,34289,34291,34293,34296,34298],{"class":288,"line":333},[286,34282,293],{"class":292},[286,34284,34227],{"class":296},[286,34286,6251],{"class":292},[286,34288,34123],{"class":300},[286,34290,307],{"class":292},[286,34292,874],{"class":310},[286,34294,34295],{"class":292},"avatarUrl",[286,34297,874],{"class":310},[286,34299,4332],{"class":292},[31,34301,34302,34303,34306],{},"Si usas ",[26,34304,34305],{},":src",", Vue espera una expresión JS válida.",[202,34308,34310,34311,128,34314],{"id":34309},"_2-poner-demasiada-lógica-inline-en-class-o-style","2) Poner demasiada lógica inline en ",[26,34312,34313],{},":class",[26,34315,34316],{},":style",[31,34318,24899],{},[277,34320,34322],{"className":279,"code":34321,"filename":28351,"language":282,"meta":9,"style":9},"\u003Cbutton :class=\"isAdmin && isActive && !isLocked ? 'btn btn-primary' : isLocked ? 'btn btn-muted' : 'btn'\">\n Guardar\n\u003C/button>\n",[26,34323,34324,34373,34378],{"__ignoreMap":9},[286,34325,34326,34328,34330,34332,34334,34336,34338,34340,34342,34345,34347,34349,34351,34353,34356,34358,34361,34363,34366,34368,34371],{"class":288,"line":289},[286,34327,293],{"class":292},[286,34329,4274],{"class":296},[286,34331,6251],{"class":292},[286,34333,34143],{"class":300},[286,34335,307],{"class":292},[286,34337,874],{"class":310},[286,34339,31384],{"class":292},[286,34341,2317],{"class":320},[286,34343,34344],{"class":292}," isActive ",[286,34346,2317],{"class":320},[286,34348,2295],{"class":320},[286,34350,31396],{"class":292},[286,34352,2292],{"class":320},[286,34354,34355],{"class":310}," 'btn btn-primary'",[286,34357,6251],{"class":320},[286,34359,34360],{"class":292}," isLocked ",[286,34362,2292],{"class":320},[286,34364,34365],{"class":310}," 'btn btn-muted'",[286,34367,6251],{"class":320},[286,34369,34370],{"class":310}," 'btn'\"",[286,34372,314],{"class":292},[286,34374,34375],{"class":288,"line":317},[286,34376,34377],{"class":292}," Guardar\n",[286,34379,34380,34382,34384],{"class":288,"line":333},[286,34381,793],{"class":292},[286,34383,4274],{"class":296},[286,34385,314],{"class":292},[31,34387,34388,34389,114],{},"Mejor: extraer a ",[26,34390,1739],{},[202,34392,34394],{"id":34393},"_3-confundir-atributo-html-con-prop-de-componente","3) Confundir atributo HTML con prop de componente",[31,34396,34397,34399],{},[26,34398,17981],{}," sirve para ambos, pero en componentes debes pasar la prop exacta definida por el hijo:",[277,34401,34404],{"className":279,"code":34402,"filename":34403,"language":282,"meta":9,"style":9},"\u003CUserCard :user=\"user\" />\n","Padre",[26,34405,34406],{"__ignoreMap":9},[286,34407,34408,34410,34412,34414,34416,34418,34420,34422,34424],{"class":288,"line":289},[286,34409,293],{"class":292},[286,34411,22615],{"class":296},[286,34413,6251],{"class":292},[286,34415,27320],{"class":300},[286,34417,307],{"class":292},[286,34419,874],{"class":310},[286,34421,27320],{"class":292},[286,34423,874],{"class":310},[286,34425,4332],{"class":292},[31,34427,34428,34429,34432,34433,34435],{},"Si el hijo espera ",[26,34430,34431],{},"profile"," y tú pasas ",[26,34434,27320],{},", no llegará la data correcta.",[202,34437,34439,34440,34442],{"id":34438},"_4-creer-que-v-bind-protege-datos","4) Creer que ",[26,34441,17981],{}," \"protege\" datos",[31,34444,34445,34447],{},[26,34446,17981],{}," solo refleja estado en la UI.\nNo reemplaza validación del backend ni reglas de autorización.",[40,34449,1953],{"id":1952},[202,34451,34453,34454,29],{"id":34452},"_1-básico-enlace-dinámico-href","1) Básico: enlace dinámico (",[26,34455,34060],{},[277,34457,34460],{"className":279,"code":34458,"filename":281,"highlights":34459,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst docsUrl = ref(\"https://vuejs.org/\");\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ca :href=\"docsUrl\" target=\"_blank\" rel=\"noopener\">Documentación Vue\u003C/a>\n\u003C/template>\n",[339,389],[26,34461,34462,34472,34484,34488,34507,34515,34519,34527,34564],{"__ignoreMap":9},[286,34463,34464,34466,34468,34470],{"class":288,"line":289},[286,34465,293],{"class":292},[286,34467,297],{"class":296},[286,34469,301],{"class":300},[286,34471,314],{"class":292},[286,34473,34474,34476,34478,34480,34482],{"class":288,"line":317},[286,34475,321],{"class":320},[286,34477,11013],{"class":292},[286,34479,327],{"class":320},[286,34481,18155],{"class":310},[286,34483,18158],{"class":292},[286,34485,34486],{"class":288,"line":333},[286,34487,336],{"emptyLinePlaceholder":6},[286,34489,34491,34493,34496,34498,34500,34502,34505],{"class":34490,"line":339},[288,9405],[286,34492,413],{"class":320},[286,34494,34495],{"class":364}," docsUrl",[286,34497,348],{"class":320},[286,34499,421],{"class":300},[286,34501,456],{"class":292},[286,34503,34504],{"class":310},"\"https://vuejs.org/\"",[286,34506,18284],{"class":292},[286,34508,34509,34511,34513],{"class":288,"line":354},[286,34510,793],{"class":292},[286,34512,297],{"class":296},[286,34514,314],{"class":292},[286,34516,34517],{"class":288,"line":368},[286,34518,336],{"emptyLinePlaceholder":6},[286,34520,34521,34523,34525],{"class":288,"line":379},[286,34522,293],{"class":292},[286,34524,810],{"class":296},[286,34526,314],{"class":292},[286,34528,34530,34532,34534,34537,34539,34542,34544,34546,34549,34552,34554,34557,34560,34562],{"class":34529,"line":389},[288,9405],[286,34531,818],{"class":292},[286,34533,13185],{"class":296},[286,34535,34536],{"class":300}," :href",[286,34538,307],{"class":292},[286,34540,34541],{"class":310},"\"docsUrl\"",[286,34543,18408],{"class":300},[286,34545,307],{"class":292},[286,34547,34548],{"class":310},"\"_blank\"",[286,34550,34551],{"class":300}," rel",[286,34553,307],{"class":292},[286,34555,34556],{"class":310},"\"noopener\"",[286,34558,34559],{"class":292},">Documentación Vue\u003C/",[286,34561,13185],{"class":296},[286,34563,314],{"class":292},[286,34565,34566,34568,34570],{"class":288,"line":399},[286,34567,793],{"class":292},[286,34569,810],{"class":296},[286,34571,314],{"class":292},[277,34573,34576],{"className":279,"code":34574,"filename":979,"highlights":34575,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n docsUrl: \"https://vuejs.org/\",\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ca :href=\"docsUrl\" target=\"_blank\" rel=\"noopener\">Documentación Vue\u003C/a>\n\u003C/template>\n",[354,444],[26,34577,34578,34586,34594,34600,34606,34616,34620,34624,34628,34636,34640,34648,34679],{"__ignoreMap":9},[286,34579,34580,34582,34584],{"class":288,"line":289},[286,34581,293],{"class":292},[286,34583,297],{"class":296},[286,34585,314],{"class":292},[286,34587,34588,34590,34592],{"class":288,"line":317},[286,34589,1065],{"class":320},[286,34591,1068],{"class":320},[286,34593,351],{"class":292},[286,34595,34596,34598],{"class":288,"line":333},[286,34597,1094],{"class":300},[286,34599,481],{"class":292},[286,34601,34602,34604],{"class":288,"line":339},[286,34603,1101],{"class":320},[286,34605,351],{"class":292},[286,34607,34609,34612,34614],{"class":34608,"line":354},[288,9405],[286,34610,34611],{"class":292}," docsUrl: ",[286,34613,34504],{"class":310},[286,34615,1085],{"class":292},[286,34617,34618],{"class":288,"line":368},[286,34619,18485],{"class":292},[286,34621,34622],{"class":288,"line":379},[286,34623,1139],{"class":292},[286,34625,34626],{"class":288,"line":389},[286,34627,18262],{"class":292},[286,34629,34630,34632,34634],{"class":288,"line":399},[286,34631,793],{"class":292},[286,34633,297],{"class":296},[286,34635,314],{"class":292},[286,34637,34638],{"class":288,"line":405},[286,34639,336],{"emptyLinePlaceholder":6},[286,34641,34642,34644,34646],{"class":288,"line":410},[286,34643,293],{"class":292},[286,34645,810],{"class":296},[286,34647,314],{"class":292},[286,34649,34651,34653,34655,34657,34659,34661,34663,34665,34667,34669,34671,34673,34675,34677],{"class":34650,"line":444},[288,9405],[286,34652,818],{"class":292},[286,34654,13185],{"class":296},[286,34656,34536],{"class":300},[286,34658,307],{"class":292},[286,34660,34541],{"class":310},[286,34662,18408],{"class":300},[286,34664,307],{"class":292},[286,34666,34548],{"class":310},[286,34668,34551],{"class":300},[286,34670,307],{"class":292},[286,34672,34556],{"class":310},[286,34674,34559],{"class":292},[286,34676,13185],{"class":296},[286,34678,314],{"class":292},[286,34680,34681,34683,34685],{"class":288,"line":464},[286,34682,793],{"class":292},[286,34684,810],{"class":296},[286,34686,314],{"class":292},[202,34688,34690,34691,29],{"id":34689},"_2-atributo-booleano-dinámico-disabled","2) Atributo booleano dinámico (",[26,34692,34126],{},[277,34694,34697],{"className":279,"code":34695,"filename":281,"highlights":34696,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isSaving = ref(false);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton :disabled=\"isSaving\">\n {{ isSaving ? \"Guardando...\" : \"Guardar cambios\" }}\n \u003C/button>\n\u003C/template>\n",[339,389],[26,34698,34699,34709,34721,34725,34743,34751,34755,34763,34780,34785,34793],{"__ignoreMap":9},[286,34700,34701,34703,34705,34707],{"class":288,"line":289},[286,34702,293],{"class":292},[286,34704,297],{"class":296},[286,34706,301],{"class":300},[286,34708,314],{"class":292},[286,34710,34711,34713,34715,34717,34719],{"class":288,"line":317},[286,34712,321],{"class":320},[286,34714,11013],{"class":292},[286,34716,327],{"class":320},[286,34718,18155],{"class":310},[286,34720,18158],{"class":292},[286,34722,34723],{"class":288,"line":333},[286,34724,336],{"emptyLinePlaceholder":6},[286,34726,34728,34730,34733,34735,34737,34739,34741],{"class":34727,"line":339},[288,9405],[286,34729,413],{"class":320},[286,34731,34732],{"class":364}," isSaving",[286,34734,348],{"class":320},[286,34736,421],{"class":300},[286,34738,456],{"class":292},[286,34740,2130],{"class":364},[286,34742,18284],{"class":292},[286,34744,34745,34747,34749],{"class":288,"line":354},[286,34746,793],{"class":292},[286,34748,297],{"class":296},[286,34750,314],{"class":292},[286,34752,34753],{"class":288,"line":368},[286,34754,336],{"emptyLinePlaceholder":6},[286,34756,34757,34759,34761],{"class":288,"line":379},[286,34758,293],{"class":292},[286,34760,810],{"class":296},[286,34762,314],{"class":292},[286,34764,34766,34768,34770,34773,34775,34778],{"class":34765,"line":389},[288,9405],[286,34767,818],{"class":292},[286,34769,4274],{"class":296},[286,34771,34772],{"class":300}," :disabled",[286,34774,307],{"class":292},[286,34776,34777],{"class":310},"\"isSaving\"",[286,34779,314],{"class":292},[286,34781,34782],{"class":288,"line":399},[286,34783,34784],{"class":292}," {{ isSaving ? \"Guardando...\" : \"Guardar cambios\" }}\n",[286,34786,34787,34789,34791],{"class":288,"line":405},[286,34788,962],{"class":292},[286,34790,4274],{"class":296},[286,34792,314],{"class":292},[286,34794,34795,34797,34799],{"class":288,"line":410},[286,34796,793],{"class":292},[286,34798,810],{"class":296},[286,34800,314],{"class":292},[277,34802,34805],{"className":279,"code":34803,"filename":979,"highlights":34804,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n isSaving: false,\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton :disabled=\"isSaving\">\n {{ isSaving ? \"Guardando...\" : \"Guardar cambios\" }}\n \u003C/button>\n\u003C/template>\n",[354,444],[26,34806,34807,34815,34823,34829,34835,34845,34849,34853,34857,34865,34869,34877,34892,34896,34904],{"__ignoreMap":9},[286,34808,34809,34811,34813],{"class":288,"line":289},[286,34810,293],{"class":292},[286,34812,297],{"class":296},[286,34814,314],{"class":292},[286,34816,34817,34819,34821],{"class":288,"line":317},[286,34818,1065],{"class":320},[286,34820,1068],{"class":320},[286,34822,351],{"class":292},[286,34824,34825,34827],{"class":288,"line":333},[286,34826,1094],{"class":300},[286,34828,481],{"class":292},[286,34830,34831,34833],{"class":288,"line":339},[286,34832,1101],{"class":320},[286,34834,351],{"class":292},[286,34836,34838,34841,34843],{"class":34837,"line":354},[288,9405],[286,34839,34840],{"class":292}," isSaving: ",[286,34842,2130],{"class":364},[286,34844,1085],{"class":292},[286,34846,34847],{"class":288,"line":368},[286,34848,18485],{"class":292},[286,34850,34851],{"class":288,"line":379},[286,34852,1139],{"class":292},[286,34854,34855],{"class":288,"line":389},[286,34856,18262],{"class":292},[286,34858,34859,34861,34863],{"class":288,"line":399},[286,34860,793],{"class":292},[286,34862,297],{"class":296},[286,34864,314],{"class":292},[286,34866,34867],{"class":288,"line":405},[286,34868,336],{"emptyLinePlaceholder":6},[286,34870,34871,34873,34875],{"class":288,"line":410},[286,34872,293],{"class":292},[286,34874,810],{"class":296},[286,34876,314],{"class":292},[286,34878,34880,34882,34884,34886,34888,34890],{"class":34879,"line":444},[288,9405],[286,34881,818],{"class":292},[286,34883,4274],{"class":296},[286,34885,34772],{"class":300},[286,34887,307],{"class":292},[286,34889,34777],{"class":310},[286,34891,314],{"class":292},[286,34893,34894],{"class":288,"line":464},[286,34895,34784],{"class":292},[286,34897,34898,34900,34902],{"class":288,"line":469},[286,34899,962],{"class":292},[286,34901,4274],{"class":296},[286,34903,314],{"class":292},[286,34905,34906,34908,34910],{"class":288,"line":484},[286,34907,793],{"class":292},[286,34909,810],{"class":296},[286,34911,314],{"class":292},[202,34913,34915,34916,34919],{"id":34914},"_3-v-bindclass-con-objeto-patrón-recomendado","3) ",[26,34917,34918],{},"v-bind:class"," con objeto (patrón recomendado)",[277,34921,34924],{"className":279,"code":34922,"filename":281,"highlights":34923,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isActive = ref(true);\nconst hasError = ref(false);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp\n :class=\"{\n 'text-success': isActive,\n 'text-danger': hasError,\n 'text-muted': !isActive && !hasError,\n }\"\n >\n Estado del sistema\n \u003C/p>\n\u003C/template>\n",[339,405,410,444,464,469],[26,34925,34926,34936,34948,34952,34970,34986,34994,34998,35006,35013,35024,35030,35036,35042,35048,35052,35057,35065],{"__ignoreMap":9},[286,34927,34928,34930,34932,34934],{"class":288,"line":289},[286,34929,293],{"class":292},[286,34931,297],{"class":296},[286,34933,301],{"class":300},[286,34935,314],{"class":292},[286,34937,34938,34940,34942,34944,34946],{"class":288,"line":317},[286,34939,321],{"class":320},[286,34941,11013],{"class":292},[286,34943,327],{"class":320},[286,34945,18155],{"class":310},[286,34947,18158],{"class":292},[286,34949,34950],{"class":288,"line":333},[286,34951,336],{"emptyLinePlaceholder":6},[286,34953,34955,34957,34960,34962,34964,34966,34968],{"class":34954,"line":339},[288,9405],[286,34956,413],{"class":320},[286,34958,34959],{"class":364}," isActive",[286,34961,348],{"class":320},[286,34963,421],{"class":300},[286,34965,456],{"class":292},[286,34967,2156],{"class":364},[286,34969,18284],{"class":292},[286,34971,34972,34974,34976,34978,34980,34982,34984],{"class":288,"line":354},[286,34973,413],{"class":320},[286,34975,3490],{"class":364},[286,34977,348],{"class":320},[286,34979,421],{"class":300},[286,34981,456],{"class":292},[286,34983,2130],{"class":364},[286,34985,18284],{"class":292},[286,34987,34988,34990,34992],{"class":288,"line":368},[286,34989,793],{"class":292},[286,34991,297],{"class":296},[286,34993,314],{"class":292},[286,34995,34996],{"class":288,"line":379},[286,34997,336],{"emptyLinePlaceholder":6},[286,34999,35000,35002,35004],{"class":288,"line":389},[286,35001,293],{"class":292},[286,35003,810],{"class":296},[286,35005,314],{"class":292},[286,35007,35008,35010],{"class":288,"line":399},[286,35009,818],{"class":292},[286,35011,35012],{"class":296},"p\n",[286,35014,35016,35019,35021],{"class":35015,"line":405},[288,9405],[286,35017,35018],{"class":300}," :class",[286,35020,307],{"class":292},[286,35022,35023],{"class":310},"\"{\n",[286,35025,35027],{"class":35026,"line":410},[288,9405],[286,35028,35029],{"class":310}," 'text-success': isActive,\n",[286,35031,35033],{"class":35032,"line":444},[288,9405],[286,35034,35035],{"class":310}," 'text-danger': hasError,\n",[286,35037,35039],{"class":35038,"line":464},[288,9405],[286,35040,35041],{"class":310}," 'text-muted': !isActive && !hasError,\n",[286,35043,35045],{"class":35044,"line":469},[288,9405],[286,35046,35047],{"class":310}," }\"\n",[286,35049,35050],{"class":288,"line":484},[286,35051,22764],{"class":292},[286,35053,35054],{"class":288,"line":508},[286,35055,35056],{"class":292}," Estado del sistema\n",[286,35058,35059,35061,35063],{"class":288,"line":513},[286,35060,962],{"class":292},[286,35062,31],{"class":296},[286,35064,314],{"class":292},[286,35066,35067,35069,35071],{"class":288,"line":528},[286,35068,793],{"class":292},[286,35070,810],{"class":296},[286,35072,314],{"class":292},[277,35074,35077],{"className":279,"code":35075,"filename":979,"highlights":35076,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n isActive: true,\n hasError: false,\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp\n :class=\"{\n 'text-success': isActive,\n 'text-danger': hasError,\n 'text-muted': !isActive && !hasError,\n }\"\n >\n Estado del sistema\n \u003C/p>\n\u003C/template>\n",[354,464,469,484,508,513],[26,35078,35079,35087,35095,35101,35107,35117,35125,35129,35133,35137,35145,35149,35157,35164,35173,35178,35183,35188,35192,35196,35200,35208],{"__ignoreMap":9},[286,35080,35081,35083,35085],{"class":288,"line":289},[286,35082,293],{"class":292},[286,35084,297],{"class":296},[286,35086,314],{"class":292},[286,35088,35089,35091,35093],{"class":288,"line":317},[286,35090,1065],{"class":320},[286,35092,1068],{"class":320},[286,35094,351],{"class":292},[286,35096,35097,35099],{"class":288,"line":333},[286,35098,1094],{"class":300},[286,35100,481],{"class":292},[286,35102,35103,35105],{"class":288,"line":339},[286,35104,1101],{"class":320},[286,35106,351],{"class":292},[286,35108,35110,35113,35115],{"class":35109,"line":354},[288,9405],[286,35111,35112],{"class":292}," isActive: ",[286,35114,2156],{"class":364},[286,35116,1085],{"class":292},[286,35118,35119,35121,35123],{"class":288,"line":368},[286,35120,4670],{"class":292},[286,35122,2130],{"class":364},[286,35124,1085],{"class":292},[286,35126,35127],{"class":288,"line":379},[286,35128,18485],{"class":292},[286,35130,35131],{"class":288,"line":389},[286,35132,1139],{"class":292},[286,35134,35135],{"class":288,"line":399},[286,35136,18262],{"class":292},[286,35138,35139,35141,35143],{"class":288,"line":405},[286,35140,793],{"class":292},[286,35142,297],{"class":296},[286,35144,314],{"class":292},[286,35146,35147],{"class":288,"line":410},[286,35148,336],{"emptyLinePlaceholder":6},[286,35150,35151,35153,35155],{"class":288,"line":444},[286,35152,293],{"class":292},[286,35154,810],{"class":296},[286,35156,314],{"class":292},[286,35158,35160,35162],{"class":35159,"line":464},[288,9405],[286,35161,818],{"class":292},[286,35163,35012],{"class":296},[286,35165,35167,35169,35171],{"class":35166,"line":469},[288,9405],[286,35168,35018],{"class":300},[286,35170,307],{"class":292},[286,35172,35023],{"class":310},[286,35174,35176],{"class":35175,"line":484},[288,9405],[286,35177,35029],{"class":310},[286,35179,35181],{"class":35180,"line":508},[288,9405],[286,35182,35035],{"class":310},[286,35184,35186],{"class":35185,"line":513},[288,9405],[286,35187,35041],{"class":310},[286,35189,35190],{"class":288,"line":528},[286,35191,35047],{"class":310},[286,35193,35194],{"class":288,"line":547},[286,35195,22764],{"class":292},[286,35197,35198],{"class":288,"line":553},[286,35199,35056],{"class":292},[286,35201,35202,35204,35206],{"class":288,"line":558},[286,35203,962],{"class":292},[286,35205,31],{"class":296},[286,35207,314],{"class":292},[286,35209,35210,35212,35214],{"class":288,"line":586},[286,35211,793],{"class":292},[286,35213,810],{"class":296},[286,35215,314],{"class":292},[202,35217,26781,35219,35222],{"id":35218},"_4-v-bindstyle-dinámico-con-objeto",[26,35220,35221],{},"v-bind:style"," dinámico con objeto",[277,35224,35227],{"className":279,"code":35225,"filename":281,"highlights":35226,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst fontSize = ref(16);\nconst textColor = ref(\"#1D5BA1\");\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp :style=\"{ fontSize: `${fontSize}px`, color: textColor }\">\n Texto con estilo reactivo\n \u003C/p>\n\u003C/template>\n",[339,354,399],[26,35228,35229,35239,35251,35255,35274,35293,35301,35305,35313,35329,35334,35342],{"__ignoreMap":9},[286,35230,35231,35233,35235,35237],{"class":288,"line":289},[286,35232,293],{"class":292},[286,35234,297],{"class":296},[286,35236,301],{"class":300},[286,35238,314],{"class":292},[286,35240,35241,35243,35245,35247,35249],{"class":288,"line":317},[286,35242,321],{"class":320},[286,35244,11013],{"class":292},[286,35246,327],{"class":320},[286,35248,18155],{"class":310},[286,35250,18158],{"class":292},[286,35252,35253],{"class":288,"line":333},[286,35254,336],{"emptyLinePlaceholder":6},[286,35256,35258,35260,35263,35265,35267,35269,35272],{"class":35257,"line":339},[288,9405],[286,35259,413],{"class":320},[286,35261,35262],{"class":364}," fontSize",[286,35264,348],{"class":320},[286,35266,421],{"class":300},[286,35268,456],{"class":292},[286,35270,35271],{"class":364},"16",[286,35273,18284],{"class":292},[286,35275,35277,35279,35282,35284,35286,35288,35291],{"class":35276,"line":354},[288,9405],[286,35278,413],{"class":320},[286,35280,35281],{"class":364}," textColor",[286,35283,348],{"class":320},[286,35285,421],{"class":300},[286,35287,456],{"class":292},[286,35289,35290],{"class":310},"\"#1D5BA1\"",[286,35292,18284],{"class":292},[286,35294,35295,35297,35299],{"class":288,"line":368},[286,35296,793],{"class":292},[286,35298,297],{"class":296},[286,35300,314],{"class":292},[286,35302,35303],{"class":288,"line":379},[286,35304,336],{"emptyLinePlaceholder":6},[286,35306,35307,35309,35311],{"class":288,"line":389},[286,35308,293],{"class":292},[286,35310,810],{"class":296},[286,35312,314],{"class":292},[286,35314,35316,35318,35320,35322,35324,35327],{"class":35315,"line":399},[288,9405],[286,35317,818],{"class":292},[286,35319,31],{"class":296},[286,35321,33315],{"class":300},[286,35323,307],{"class":292},[286,35325,35326],{"class":310},"\"{ fontSize: `${fontSize}px`, color: textColor }\"",[286,35328,314],{"class":292},[286,35330,35331],{"class":288,"line":405},[286,35332,35333],{"class":292}," Texto con estilo reactivo\n",[286,35335,35336,35338,35340],{"class":288,"line":410},[286,35337,962],{"class":292},[286,35339,31],{"class":296},[286,35341,314],{"class":292},[286,35343,35344,35346,35348],{"class":288,"line":444},[286,35345,793],{"class":292},[286,35347,810],{"class":296},[286,35349,314],{"class":292},[277,35351,35354],{"className":279,"code":35352,"filename":979,"highlights":35353,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n fontSize: 16,\n textColor: \"#1D5BA1\",\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp :style=\"{ fontSize: `${fontSize}px`, color: textColor }\">\n Texto con estilo reactivo\n \u003C/p>\n\u003C/template>\n",[354,368,464],[26,35355,35356,35364,35372,35378,35384,35394,35404,35408,35412,35416,35424,35428,35436,35451,35455,35463],{"__ignoreMap":9},[286,35357,35358,35360,35362],{"class":288,"line":289},[286,35359,293],{"class":292},[286,35361,297],{"class":296},[286,35363,314],{"class":292},[286,35365,35366,35368,35370],{"class":288,"line":317},[286,35367,1065],{"class":320},[286,35369,1068],{"class":320},[286,35371,351],{"class":292},[286,35373,35374,35376],{"class":288,"line":333},[286,35375,1094],{"class":300},[286,35377,481],{"class":292},[286,35379,35380,35382],{"class":288,"line":339},[286,35381,1101],{"class":320},[286,35383,351],{"class":292},[286,35385,35387,35390,35392],{"class":35386,"line":354},[288,9405],[286,35388,35389],{"class":292}," fontSize: ",[286,35391,35271],{"class":364},[286,35393,1085],{"class":292},[286,35395,35397,35400,35402],{"class":35396,"line":368},[288,9405],[286,35398,35399],{"class":292}," textColor: ",[286,35401,35290],{"class":310},[286,35403,1085],{"class":292},[286,35405,35406],{"class":288,"line":379},[286,35407,18485],{"class":292},[286,35409,35410],{"class":288,"line":389},[286,35411,1139],{"class":292},[286,35413,35414],{"class":288,"line":399},[286,35415,18262],{"class":292},[286,35417,35418,35420,35422],{"class":288,"line":405},[286,35419,793],{"class":292},[286,35421,297],{"class":296},[286,35423,314],{"class":292},[286,35425,35426],{"class":288,"line":410},[286,35427,336],{"emptyLinePlaceholder":6},[286,35429,35430,35432,35434],{"class":288,"line":444},[286,35431,293],{"class":292},[286,35433,810],{"class":296},[286,35435,314],{"class":292},[286,35437,35439,35441,35443,35445,35447,35449],{"class":35438,"line":464},[288,9405],[286,35440,818],{"class":292},[286,35442,31],{"class":296},[286,35444,33315],{"class":300},[286,35446,307],{"class":292},[286,35448,35326],{"class":310},[286,35450,314],{"class":292},[286,35452,35453],{"class":288,"line":469},[286,35454,35333],{"class":292},[286,35456,35457,35459,35461],{"class":288,"line":484},[286,35458,962],{"class":292},[286,35460,31],{"class":296},[286,35462,314],{"class":292},[286,35464,35465,35467,35469],{"class":288,"line":508},[286,35466,793],{"class":292},[286,35468,810],{"class":296},[286,35470,314],{"class":292},[202,35472,35474,35475],{"id":35473},"_5-argumento-dinámico-attrnamevalue","5) Argumento dinámico: ",[26,35476,34152],{},[31,35478,35479],{},"Útil cuando el nombre del atributo también depende del estado.",[277,35481,35484],{"className":279,"code":35482,"filename":281,"highlights":35483,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst attrName = ref(\"title\");\nconst attrValue = ref(\"Tooltip dinámico\");\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton :[attrName]=\"attrValue\">Hover me\u003C/button>\n\u003C/template>\n",[339,354,399],[26,35485,35486,35496,35508,35512,35531,35550,35558,35562,35570,35592],{"__ignoreMap":9},[286,35487,35488,35490,35492,35494],{"class":288,"line":289},[286,35489,293],{"class":292},[286,35491,297],{"class":296},[286,35493,301],{"class":300},[286,35495,314],{"class":292},[286,35497,35498,35500,35502,35504,35506],{"class":288,"line":317},[286,35499,321],{"class":320},[286,35501,11013],{"class":292},[286,35503,327],{"class":320},[286,35505,18155],{"class":310},[286,35507,18158],{"class":292},[286,35509,35510],{"class":288,"line":333},[286,35511,336],{"emptyLinePlaceholder":6},[286,35513,35515,35517,35520,35522,35524,35526,35529],{"class":35514,"line":339},[288,9405],[286,35516,413],{"class":320},[286,35518,35519],{"class":364}," attrName",[286,35521,348],{"class":320},[286,35523,421],{"class":300},[286,35525,456],{"class":292},[286,35527,35528],{"class":310},"\"title\"",[286,35530,18284],{"class":292},[286,35532,35534,35536,35539,35541,35543,35545,35548],{"class":35533,"line":354},[288,9405],[286,35535,413],{"class":320},[286,35537,35538],{"class":364}," attrValue",[286,35540,348],{"class":320},[286,35542,421],{"class":300},[286,35544,456],{"class":292},[286,35546,35547],{"class":310},"\"Tooltip dinámico\"",[286,35549,18284],{"class":292},[286,35551,35552,35554,35556],{"class":288,"line":368},[286,35553,793],{"class":292},[286,35555,297],{"class":296},[286,35557,314],{"class":292},[286,35559,35560],{"class":288,"line":379},[286,35561,336],{"emptyLinePlaceholder":6},[286,35563,35564,35566,35568],{"class":288,"line":389},[286,35565,293],{"class":292},[286,35567,810],{"class":296},[286,35569,314],{"class":292},[286,35571,35573,35575,35577,35580,35582,35585,35588,35590],{"class":35572,"line":399},[288,9405],[286,35574,818],{"class":292},[286,35576,4274],{"class":296},[286,35578,35579],{"class":300}," :[attrName]",[286,35581,307],{"class":292},[286,35583,35584],{"class":310},"\"attrValue\"",[286,35586,35587],{"class":292},">Hover me\u003C/",[286,35589,4274],{"class":296},[286,35591,314],{"class":292},[286,35593,35594,35596,35598],{"class":288,"line":405},[286,35595,793],{"class":292},[286,35597,810],{"class":296},[286,35599,314],{"class":292},[277,35601,35604],{"className":279,"code":35602,"filename":979,"highlights":35603,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n attrName: \"title\",\n attrValue: \"Tooltip dinámico\",\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton :[attrName]=\"attrValue\">Hover me\u003C/button>\n\u003C/template>\n",[354,368,464],[26,35605,35606,35614,35622,35628,35634,35644,35654,35658,35662,35666,35674,35678,35686,35705],{"__ignoreMap":9},[286,35607,35608,35610,35612],{"class":288,"line":289},[286,35609,293],{"class":292},[286,35611,297],{"class":296},[286,35613,314],{"class":292},[286,35615,35616,35618,35620],{"class":288,"line":317},[286,35617,1065],{"class":320},[286,35619,1068],{"class":320},[286,35621,351],{"class":292},[286,35623,35624,35626],{"class":288,"line":333},[286,35625,1094],{"class":300},[286,35627,481],{"class":292},[286,35629,35630,35632],{"class":288,"line":339},[286,35631,1101],{"class":320},[286,35633,351],{"class":292},[286,35635,35637,35640,35642],{"class":35636,"line":354},[288,9405],[286,35638,35639],{"class":292}," attrName: ",[286,35641,35528],{"class":310},[286,35643,1085],{"class":292},[286,35645,35647,35650,35652],{"class":35646,"line":368},[288,9405],[286,35648,35649],{"class":292}," attrValue: ",[286,35651,35547],{"class":310},[286,35653,1085],{"class":292},[286,35655,35656],{"class":288,"line":379},[286,35657,18485],{"class":292},[286,35659,35660],{"class":288,"line":389},[286,35661,1139],{"class":292},[286,35663,35664],{"class":288,"line":399},[286,35665,18262],{"class":292},[286,35667,35668,35670,35672],{"class":288,"line":405},[286,35669,793],{"class":292},[286,35671,297],{"class":296},[286,35673,314],{"class":292},[286,35675,35676],{"class":288,"line":410},[286,35677,336],{"emptyLinePlaceholder":6},[286,35679,35680,35682,35684],{"class":288,"line":444},[286,35681,293],{"class":292},[286,35683,810],{"class":296},[286,35685,314],{"class":292},[286,35687,35689,35691,35693,35695,35697,35699,35701,35703],{"class":35688,"line":464},[288,9405],[286,35690,818],{"class":292},[286,35692,4274],{"class":296},[286,35694,35579],{"class":300},[286,35696,307],{"class":292},[286,35698,35584],{"class":310},[286,35700,35587],{"class":292},[286,35702,4274],{"class":296},[286,35704,314],{"class":292},[286,35706,35707,35709,35711],{"class":288,"line":469},[286,35708,793],{"class":292},[286,35710,810],{"class":296},[286,35712,314],{"class":292},[202,35714,35716,35717,35720],{"id":35715},"_6-v-bindobj-para-pasar-múltiples-atributos-o-props","6) ",[26,35718,35719],{},"v-bind=\"obj\""," para pasar múltiples atributos o props",[277,35722,35725],{"className":279,"code":35723,"filename":281,"highlights":35724,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst inputAttrs = ref({\n id: \"email\",\n type: \"email\",\n placeholder: \"tu@email.com\",\n autocomplete: \"email\",\n required: true,\n});\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cinput v-bind=\"inputAttrs\" />\n\u003C/template>\n",[339,354,368,379,389,399,405,469],[26,35726,35727,35737,35749,35753,35767,35777,35787,35797,35807,35817,35822,35830,35834,35842,35858],{"__ignoreMap":9},[286,35728,35729,35731,35733,35735],{"class":288,"line":289},[286,35730,293],{"class":292},[286,35732,297],{"class":296},[286,35734,301],{"class":300},[286,35736,314],{"class":292},[286,35738,35739,35741,35743,35745,35747],{"class":288,"line":317},[286,35740,321],{"class":320},[286,35742,11013],{"class":292},[286,35744,327],{"class":320},[286,35746,18155],{"class":310},[286,35748,18158],{"class":292},[286,35750,35751],{"class":288,"line":333},[286,35752,336],{"emptyLinePlaceholder":6},[286,35754,35756,35758,35761,35763,35765],{"class":35755,"line":339},[288,9405],[286,35757,413],{"class":320},[286,35759,35760],{"class":364}," inputAttrs",[286,35762,348],{"class":320},[286,35764,421],{"class":300},[286,35766,1074],{"class":292},[286,35768,35770,35773,35775],{"class":35769,"line":354},[288,9405],[286,35771,35772],{"class":292}," id: ",[286,35774,31918],{"class":310},[286,35776,1085],{"class":292},[286,35778,35780,35783,35785],{"class":35779,"line":368},[288,9405],[286,35781,35782],{"class":292}," type: ",[286,35784,31918],{"class":310},[286,35786,1085],{"class":292},[286,35788,35790,35793,35795],{"class":35789,"line":379},[288,9405],[286,35791,35792],{"class":292}," placeholder: ",[286,35794,31932],{"class":310},[286,35796,1085],{"class":292},[286,35798,35800,35803,35805],{"class":35799,"line":389},[288,9405],[286,35801,35802],{"class":292}," autocomplete: ",[286,35804,31918],{"class":310},[286,35806,1085],{"class":292},[286,35808,35810,35813,35815],{"class":35809,"line":399},[288,9405],[286,35811,35812],{"class":292}," required: ",[286,35814,2156],{"class":364},[286,35816,1085],{"class":292},[286,35818,35820],{"class":35819,"line":405},[288,9405],[286,35821,21461],{"class":292},[286,35823,35824,35826,35828],{"class":288,"line":410},[286,35825,793],{"class":292},[286,35827,297],{"class":296},[286,35829,314],{"class":292},[286,35831,35832],{"class":288,"line":444},[286,35833,336],{"emptyLinePlaceholder":6},[286,35835,35836,35838,35840],{"class":288,"line":464},[286,35837,293],{"class":292},[286,35839,810],{"class":296},[286,35841,314],{"class":292},[286,35843,35845,35847,35849,35851,35853,35856],{"class":35844,"line":469},[288,9405],[286,35846,818],{"class":292},[286,35848,18048],{"class":296},[286,35850,34055],{"class":300},[286,35852,307],{"class":292},[286,35854,35855],{"class":310},"\"inputAttrs\"",[286,35857,4332],{"class":292},[286,35859,35860,35862,35864],{"class":288,"line":484},[286,35861,793],{"class":292},[286,35863,810],{"class":296},[286,35865,314],{"class":292},[277,35867,35870],{"className":279,"code":35868,"filename":979,"highlights":35869,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n inputAttrs: {\n id: \"email\",\n type: \"email\",\n placeholder: \"tu@email.com\",\n autocomplete: \"email\",\n required: true,\n },\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cinput v-bind=\"inputAttrs\" />\n\u003C/template>\n",[354,368,379,389,399,405,410,528],[26,35871,35872,35880,35888,35894,35900,35906,35916,35926,35936,35946,35956,35961,35965,35969,35973,35981,35985,35993,36008],{"__ignoreMap":9},[286,35873,35874,35876,35878],{"class":288,"line":289},[286,35875,293],{"class":292},[286,35877,297],{"class":296},[286,35879,314],{"class":292},[286,35881,35882,35884,35886],{"class":288,"line":317},[286,35883,1065],{"class":320},[286,35885,1068],{"class":320},[286,35887,351],{"class":292},[286,35889,35890,35892],{"class":288,"line":333},[286,35891,1094],{"class":300},[286,35893,481],{"class":292},[286,35895,35896,35898],{"class":288,"line":339},[286,35897,1101],{"class":320},[286,35899,351],{"class":292},[286,35901,35903],{"class":35902,"line":354},[288,9405],[286,35904,35905],{"class":292}," inputAttrs: {\n",[286,35907,35909,35912,35914],{"class":35908,"line":368},[288,9405],[286,35910,35911],{"class":292}," id: ",[286,35913,31918],{"class":310},[286,35915,1085],{"class":292},[286,35917,35919,35922,35924],{"class":35918,"line":379},[288,9405],[286,35920,35921],{"class":292}," type: ",[286,35923,31918],{"class":310},[286,35925,1085],{"class":292},[286,35927,35929,35932,35934],{"class":35928,"line":389},[288,9405],[286,35930,35931],{"class":292}," placeholder: ",[286,35933,31932],{"class":310},[286,35935,1085],{"class":292},[286,35937,35939,35942,35944],{"class":35938,"line":399},[288,9405],[286,35940,35941],{"class":292}," autocomplete: ",[286,35943,31918],{"class":310},[286,35945,1085],{"class":292},[286,35947,35949,35952,35954],{"class":35948,"line":405},[288,9405],[286,35950,35951],{"class":292}," required: ",[286,35953,2156],{"class":364},[286,35955,1085],{"class":292},[286,35957,35959],{"class":35958,"line":410},[288,9405],[286,35960,2636],{"class":292},[286,35962,35963],{"class":288,"line":444},[286,35964,18485],{"class":292},[286,35966,35967],{"class":288,"line":464},[286,35968,1139],{"class":292},[286,35970,35971],{"class":288,"line":469},[286,35972,18262],{"class":292},[286,35974,35975,35977,35979],{"class":288,"line":484},[286,35976,793],{"class":292},[286,35978,297],{"class":296},[286,35980,314],{"class":292},[286,35982,35983],{"class":288,"line":508},[286,35984,336],{"emptyLinePlaceholder":6},[286,35986,35987,35989,35991],{"class":288,"line":513},[286,35988,293],{"class":292},[286,35990,810],{"class":296},[286,35992,314],{"class":292},[286,35994,35996,35998,36000,36002,36004,36006],{"class":35995,"line":528},[288,9405],[286,35997,818],{"class":292},[286,35999,18048],{"class":296},[286,36001,34055],{"class":300},[286,36003,307],{"class":292},[286,36005,35855],{"class":310},[286,36007,4332],{"class":292},[286,36009,36010,36012,36014],{"class":288,"line":547},[286,36011,793],{"class":292},[286,36013,810],{"class":296},[286,36015,314],{"class":292},[3118,36017,36018],{},[31,36019,36020,36022],{},[26,36021,35719],{}," también es común para forwarding de props en componentes base.",[40,36024,36026],{"id":36025},"ejemplo-integrado","Ejemplo integrado",[31,36028,36029,36030,36032],{},"Formulario simple con ",[26,36031,17981],{}," para atributos, clases y estado.",[277,36034,36036],{"className":279,"code":36035,"filename":281,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { computed, ref } from \"vue\";\n\nconst email = ref(\"\");\nconst isSubmitting = ref(false);\nconst hasError = ref(false);\n\nconst inputAttrs = computed(() => ({\n type: \"email\",\n placeholder: \"Ingresa tu correo\",\n autocomplete: \"email\",\n required: true,\n}));\n\nconst buttonClass = computed(() => ({\n \"btn-primary\": !isSubmitting.value,\n \"btn-disabled\": isSubmitting.value,\n}));\n\nfunction submit() {\n hasError.value = email.value.trim() === \"\";\n if (hasError.value) return;\n isSubmitting.value = true;\n setTimeout(() => {\n isSubmitting.value = false;\n }, 1000);\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform @submit.prevent=\"submit\">\n \u003Cinput v-bind=\"inputAttrs\" v-model=\"email\" :class=\"{ 'input-error': hasError }\" />\n\n \u003Cbutton :disabled=\"isSubmitting\" :class=\"buttonClass\">\n {{ isSubmitting ? \"Enviando...\" : \"Enviar\" }}\n \u003C/button>\n\n \u003Cp :style=\"{ color: hasError ? '#E74C3C' : '#2ECC71' }\">\n {{ hasError ? \"El correo es obligatorio.\" : \"Listo para enviar.\" }}\n \u003C/p>\n \u003C/form>\n\u003C/template>\n",[26,36037,36038,36048,36060,36064,36080,36097,36113,36117,36134,36142,36151,36159,36167,36172,36176,36193,36205,36213,36217,36221,36230,36249,36260,36271,36282,36293,36301,36305,36313,36317,36325,36339,36367,36371,36393,36398,36406,36410,36425,36430,36438,36446],{"__ignoreMap":9},[286,36039,36040,36042,36044,36046],{"class":288,"line":289},[286,36041,293],{"class":292},[286,36043,297],{"class":296},[286,36045,301],{"class":300},[286,36047,314],{"class":292},[286,36049,36050,36052,36054,36056,36058],{"class":288,"line":317},[286,36051,321],{"class":320},[286,36053,23391],{"class":292},[286,36055,327],{"class":320},[286,36057,18155],{"class":310},[286,36059,18158],{"class":292},[286,36061,36062],{"class":288,"line":333},[286,36063,336],{"emptyLinePlaceholder":6},[286,36065,36066,36068,36070,36072,36074,36076,36078],{"class":288,"line":339},[286,36067,413],{"class":320},[286,36069,31807],{"class":364},[286,36071,348],{"class":320},[286,36073,421],{"class":300},[286,36075,456],{"class":292},[286,36077,25323],{"class":310},[286,36079,18284],{"class":292},[286,36081,36082,36084,36087,36089,36091,36093,36095],{"class":288,"line":354},[286,36083,413],{"class":320},[286,36085,36086],{"class":364}," isSubmitting",[286,36088,348],{"class":320},[286,36090,421],{"class":300},[286,36092,456],{"class":292},[286,36094,2130],{"class":364},[286,36096,18284],{"class":292},[286,36098,36099,36101,36103,36105,36107,36109,36111],{"class":288,"line":368},[286,36100,413],{"class":320},[286,36102,3490],{"class":364},[286,36104,348],{"class":320},[286,36106,421],{"class":300},[286,36108,456],{"class":292},[286,36110,2130],{"class":364},[286,36112,18284],{"class":292},[286,36114,36115],{"class":288,"line":379},[286,36116,336],{"emptyLinePlaceholder":6},[286,36118,36119,36121,36123,36125,36127,36129,36131],{"class":288,"line":389},[286,36120,413],{"class":320},[286,36122,35760],{"class":364},[286,36124,348],{"class":320},[286,36126,2207],{"class":300},[286,36128,2210],{"class":292},[286,36130,609],{"class":320},[286,36132,36133],{"class":292}," ({\n",[286,36135,36136,36138,36140],{"class":288,"line":399},[286,36137,35782],{"class":292},[286,36139,31918],{"class":310},[286,36141,1085],{"class":292},[286,36143,36144,36146,36149],{"class":288,"line":405},[286,36145,35792],{"class":292},[286,36147,36148],{"class":310},"\"Ingresa tu correo\"",[286,36150,1085],{"class":292},[286,36152,36153,36155,36157],{"class":288,"line":410},[286,36154,35802],{"class":292},[286,36156,31918],{"class":310},[286,36158,1085],{"class":292},[286,36160,36161,36163,36165],{"class":288,"line":444},[286,36162,35812],{"class":292},[286,36164,2156],{"class":364},[286,36166,1085],{"class":292},[286,36168,36169],{"class":288,"line":464},[286,36170,36171],{"class":292},"}));\n",[286,36173,36174],{"class":288,"line":469},[286,36175,336],{"emptyLinePlaceholder":6},[286,36177,36178,36180,36183,36185,36187,36189,36191],{"class":288,"line":484},[286,36179,413],{"class":320},[286,36181,36182],{"class":364}," buttonClass",[286,36184,348],{"class":320},[286,36186,2207],{"class":300},[286,36188,2210],{"class":292},[286,36190,609],{"class":320},[286,36192,36133],{"class":292},[286,36194,36195,36198,36200,36202],{"class":288,"line":508},[286,36196,36197],{"class":310}," \"btn-primary\"",[286,36199,20706],{"class":292},[286,36201,522],{"class":320},[286,36203,36204],{"class":292},"isSubmitting.value,\n",[286,36206,36207,36210],{"class":288,"line":513},[286,36208,36209],{"class":310}," \"btn-disabled\"",[286,36211,36212],{"class":292},": isSubmitting.value,\n",[286,36214,36215],{"class":288,"line":528},[286,36216,36171],{"class":292},[286,36218,36219],{"class":288,"line":547},[286,36220,336],{"emptyLinePlaceholder":6},[286,36222,36223,36225,36228],{"class":288,"line":553},[286,36224,2467],{"class":320},[286,36226,36227],{"class":300}," submit",[286,36229,481],{"class":292},[286,36231,36232,36234,36236,36239,36241,36243,36245,36247],{"class":288,"line":558},[286,36233,3952],{"class":292},[286,36235,307],{"class":320},[286,36237,36238],{"class":292}," email.value.",[286,36240,31844],{"class":300},[286,36242,8136],{"class":292},[286,36244,2510],{"class":320},[286,36246,33012],{"class":310},[286,36248,18158],{"class":292},[286,36250,36251,36253,36256,36258],{"class":288,"line":586},[286,36252,516],{"class":320},[286,36254,36255],{"class":292}," (hasError.value) ",[286,36257,18353],{"class":320},[286,36259,18158],{"class":292},[286,36261,36262,36265,36267,36269],{"class":288,"line":591},[286,36263,36264],{"class":292}," isSubmitting.value ",[286,36266,307],{"class":320},[286,36268,20440],{"class":364},[286,36270,18158],{"class":292},[286,36272,36273,36276,36278,36280],{"class":288,"line":596},[286,36274,36275],{"class":300}," setTimeout",[286,36277,2210],{"class":292},[286,36279,609],{"class":320},[286,36281,351],{"class":292},[286,36283,36284,36287,36289,36291],{"class":288,"line":614},[286,36285,36286],{"class":292}," isSubmitting.value ",[286,36288,307],{"class":320},[286,36290,19373],{"class":364},[286,36292,18158],{"class":292},[286,36294,36295,36297,36299],{"class":288,"line":622},[286,36296,6127],{"class":292},[286,36298,11255],{"class":364},[286,36300,18284],{"class":292},[286,36302,36303],{"class":288,"line":633},[286,36304,402],{"class":292},[286,36306,36307,36309,36311],{"class":288,"line":645},[286,36308,793],{"class":292},[286,36310,297],{"class":296},[286,36312,314],{"class":292},[286,36314,36315],{"class":288,"line":654},[286,36316,336],{"emptyLinePlaceholder":6},[286,36318,36319,36321,36323],{"class":288,"line":676},[286,36320,293],{"class":292},[286,36322,810],{"class":296},[286,36324,314],{"class":292},[286,36326,36327,36329,36331,36333,36335,36337],{"class":288,"line":681},[286,36328,818],{"class":292},[286,36330,31301],{"class":296},[286,36332,31898],{"class":300},[286,36334,307],{"class":292},[286,36336,31947],{"class":310},[286,36338,314],{"class":292},[286,36340,36341,36343,36345,36347,36349,36351,36353,36355,36357,36360,36362,36365],{"class":288,"line":687},[286,36342,837],{"class":292},[286,36344,18048],{"class":296},[286,36346,34055],{"class":300},[286,36348,307],{"class":292},[286,36350,35855],{"class":310},[286,36352,23758],{"class":300},[286,36354,307],{"class":292},[286,36356,31918],{"class":310},[286,36358,36359],{"class":300}," :class",[286,36361,307],{"class":292},[286,36363,36364],{"class":310},"\"{ 'input-error': hasError }\"",[286,36366,4332],{"class":292},[286,36368,36369],{"class":288,"line":692},[286,36370,336],{"emptyLinePlaceholder":6},[286,36372,36373,36375,36377,36379,36381,36384,36386,36388,36391],{"class":288,"line":708},[286,36374,837],{"class":292},[286,36376,4274],{"class":296},[286,36378,34772],{"class":300},[286,36380,307],{"class":292},[286,36382,36383],{"class":310},"\"isSubmitting\"",[286,36385,36359],{"class":300},[286,36387,307],{"class":292},[286,36389,36390],{"class":310},"\"buttonClass\"",[286,36392,314],{"class":292},[286,36394,36395],{"class":288,"line":725},[286,36396,36397],{"class":292}," {{ isSubmitting ? \"Enviando...\" : \"Enviar\" }}\n",[286,36399,36400,36402,36404],{"class":288,"line":730},[286,36401,930],{"class":292},[286,36403,4274],{"class":296},[286,36405,314],{"class":292},[286,36407,36408],{"class":288,"line":737},[286,36409,336],{"emptyLinePlaceholder":6},[286,36411,36412,36414,36416,36418,36420,36423],{"class":288,"line":746},[286,36413,837],{"class":292},[286,36415,31],{"class":296},[286,36417,33315],{"class":300},[286,36419,307],{"class":292},[286,36421,36422],{"class":310},"\"{ color: hasError ? '#E74C3C' : '#2ECC71' }\"",[286,36424,314],{"class":292},[286,36426,36427],{"class":288,"line":755},[286,36428,36429],{"class":292}," {{ hasError ? \"El correo es obligatorio.\" : \"Listo para enviar.\" }}\n",[286,36431,36432,36434,36436],{"class":288,"line":762},[286,36433,930],{"class":292},[286,36435,31],{"class":296},[286,36437,314],{"class":292},[286,36439,36440,36442,36444],{"class":288,"line":780},[286,36441,962],{"class":292},[286,36443,31301],{"class":296},[286,36445,314],{"class":292},[286,36447,36448,36450,36452],{"class":288,"line":785},[286,36449,793],{"class":292},[286,36451,810],{"class":296},[286,36453,314],{"class":292},[277,36455,36457],{"className":279,"code":36456,"filename":979,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n email: \"\",\n isSubmitting: false,\n hasError: false,\n };\n },\n computed: {\n inputAttrs() {\n return {\n type: \"email\",\n placeholder: \"Ingresa tu correo\",\n autocomplete: \"email\",\n required: true,\n };\n },\n buttonClass() {\n return {\n \"btn-primary\": !this.isSubmitting,\n \"btn-disabled\": this.isSubmitting,\n };\n },\n },\n methods: {\n submit() {\n this.hasError = this.email.trim() === \"\";\n if (this.hasError) return;\n this.isSubmitting = true;\n setTimeout(() => {\n this.isSubmitting = false;\n }, 1000);\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cform @submit.prevent=\"submit\">\n \u003Cinput v-bind=\"inputAttrs\" v-model=\"email\" :class=\"{ 'input-error': hasError }\" />\n\n \u003Cbutton :disabled=\"isSubmitting\" :class=\"buttonClass\">\n {{ isSubmitting ? \"Enviando...\" : \"Enviar\" }}\n \u003C/button>\n\n \u003Cp :style=\"{ color: hasError ? '#E74C3C' : '#2ECC71' }\">\n {{ hasError ? \"El correo es obligatorio.\" : \"Listo para enviar.\" }}\n \u003C/p>\n \u003C/form>\n\u003C/template>\n",[26,36458,36459,36467,36475,36481,36487,36495,36504,36512,36516,36520,36524,36531,36537,36545,36553,36561,36569,36574,36578,36585,36591,36605,36616,36620,36624,36628,36632,36639,36661,36676,36689,36700,36712,36720,36724,36728,36732,36740,36744,36752,36766,36792,36796,36816,36820,36828,36832,36846,36850,36858,36866],{"__ignoreMap":9},[286,36460,36461,36463,36465],{"class":288,"line":289},[286,36462,293],{"class":292},[286,36464,297],{"class":296},[286,36466,314],{"class":292},[286,36468,36469,36471,36473],{"class":288,"line":317},[286,36470,1065],{"class":320},[286,36472,1068],{"class":320},[286,36474,351],{"class":292},[286,36476,36477,36479],{"class":288,"line":333},[286,36478,1094],{"class":300},[286,36480,481],{"class":292},[286,36482,36483,36485],{"class":288,"line":339},[286,36484,1101],{"class":320},[286,36486,351],{"class":292},[286,36488,36489,36491,36493],{"class":288,"line":354},[286,36490,32015],{"class":292},[286,36492,25323],{"class":310},[286,36494,1085],{"class":292},[286,36496,36497,36500,36502],{"class":288,"line":368},[286,36498,36499],{"class":292}," isSubmitting: ",[286,36501,2130],{"class":364},[286,36503,1085],{"class":292},[286,36505,36506,36508,36510],{"class":288,"line":379},[286,36507,4670],{"class":292},[286,36509,2130],{"class":364},[286,36511,1085],{"class":292},[286,36513,36514],{"class":288,"line":389},[286,36515,18485],{"class":292},[286,36517,36518],{"class":288,"line":399},[286,36519,1139],{"class":292},[286,36521,36522],{"class":288,"line":405},[286,36523,2749],{"class":292},[286,36525,36526,36529],{"class":288,"line":410},[286,36527,36528],{"class":300}," inputAttrs",[286,36530,481],{"class":292},[286,36532,36533,36535],{"class":288,"line":444},[286,36534,2761],{"class":320},[286,36536,351],{"class":292},[286,36538,36539,36541,36543],{"class":288,"line":464},[286,36540,35921],{"class":292},[286,36542,31918],{"class":310},[286,36544,1085],{"class":292},[286,36546,36547,36549,36551],{"class":288,"line":469},[286,36548,35931],{"class":292},[286,36550,36148],{"class":310},[286,36552,1085],{"class":292},[286,36554,36555,36557,36559],{"class":288,"line":484},[286,36556,35941],{"class":292},[286,36558,31918],{"class":310},[286,36560,1085],{"class":292},[286,36562,36563,36565,36567],{"class":288,"line":508},[286,36564,35951],{"class":292},[286,36566,2156],{"class":364},[286,36568,1085],{"class":292},[286,36570,36571],{"class":288,"line":513},[286,36572,36573],{"class":292}," };\n",[286,36575,36576],{"class":288,"line":528},[286,36577,7023],{"class":292},[286,36579,36580,36583],{"class":288,"line":547},[286,36581,36582],{"class":300}," buttonClass",[286,36584,481],{"class":292},[286,36586,36587,36589],{"class":288,"line":553},[286,36588,2761],{"class":320},[286,36590,351],{"class":292},[286,36592,36593,36596,36598,36600,36602],{"class":288,"line":558},[286,36594,36595],{"class":310}," \"btn-primary\"",[286,36597,20706],{"class":292},[286,36599,522],{"class":320},[286,36601,1349],{"class":364},[286,36603,36604],{"class":292},".isSubmitting,\n",[286,36606,36607,36610,36612,36614],{"class":288,"line":586},[286,36608,36609],{"class":310}," \"btn-disabled\"",[286,36611,20706],{"class":292},[286,36613,1349],{"class":364},[286,36615,36604],{"class":292},[286,36617,36618],{"class":288,"line":591},[286,36619,36573],{"class":292},[286,36621,36622],{"class":288,"line":596},[286,36623,7023],{"class":292},[286,36625,36626],{"class":288,"line":614},[286,36627,1139],{"class":292},[286,36629,36630],{"class":288,"line":622},[286,36631,1148],{"class":292},[286,36633,36634,36637],{"class":288,"line":633},[286,36635,36636],{"class":300}," submit",[286,36638,481],{"class":292},[286,36640,36641,36643,36645,36647,36649,36651,36653,36655,36657,36659],{"class":288,"line":645},[286,36642,1220],{"class":364},[286,36644,4734],{"class":292},[286,36646,307],{"class":320},[286,36648,1276],{"class":364},[286,36650,32051],{"class":292},[286,36652,31844],{"class":300},[286,36654,8136],{"class":292},[286,36656,2510],{"class":320},[286,36658,33012],{"class":310},[286,36660,18158],{"class":292},[286,36662,36663,36665,36667,36669,36672,36674],{"class":288,"line":654},[286,36664,1185],{"class":320},[286,36666,519],{"class":292},[286,36668,1349],{"class":364},[286,36670,36671],{"class":292},".hasError) ",[286,36673,18353],{"class":320},[286,36675,18158],{"class":292},[286,36677,36678,36680,36683,36685,36687],{"class":288,"line":676},[286,36679,1220],{"class":364},[286,36681,36682],{"class":292},".isSubmitting ",[286,36684,307],{"class":320},[286,36686,20440],{"class":364},[286,36688,18158],{"class":292},[286,36690,36691,36694,36696,36698],{"class":288,"line":681},[286,36692,36693],{"class":300}," setTimeout",[286,36695,2210],{"class":292},[286,36697,609],{"class":320},[286,36699,351],{"class":292},[286,36701,36702,36704,36706,36708,36710],{"class":288,"line":687},[286,36703,8826],{"class":364},[286,36705,36682],{"class":292},[286,36707,307],{"class":320},[286,36709,19373],{"class":364},[286,36711,18158],{"class":292},[286,36713,36714,36716,36718],{"class":288,"line":692},[286,36715,7091],{"class":292},[286,36717,11255],{"class":364},[286,36719,18284],{"class":292},[286,36721,36722],{"class":288,"line":708},[286,36723,7023],{"class":292},[286,36725,36726],{"class":288,"line":725},[286,36727,1139],{"class":292},[286,36729,36730],{"class":288,"line":730},[286,36731,18262],{"class":292},[286,36733,36734,36736,36738],{"class":288,"line":737},[286,36735,793],{"class":292},[286,36737,297],{"class":296},[286,36739,314],{"class":292},[286,36741,36742],{"class":288,"line":746},[286,36743,336],{"emptyLinePlaceholder":6},[286,36745,36746,36748,36750],{"class":288,"line":755},[286,36747,293],{"class":292},[286,36749,810],{"class":296},[286,36751,314],{"class":292},[286,36753,36754,36756,36758,36760,36762,36764],{"class":288,"line":762},[286,36755,818],{"class":292},[286,36757,31301],{"class":296},[286,36759,31898],{"class":300},[286,36761,307],{"class":292},[286,36763,31947],{"class":310},[286,36765,314],{"class":292},[286,36767,36768,36770,36772,36774,36776,36778,36780,36782,36784,36786,36788,36790],{"class":288,"line":780},[286,36769,837],{"class":292},[286,36771,18048],{"class":296},[286,36773,34055],{"class":300},[286,36775,307],{"class":292},[286,36777,35855],{"class":310},[286,36779,23758],{"class":300},[286,36781,307],{"class":292},[286,36783,31918],{"class":310},[286,36785,36359],{"class":300},[286,36787,307],{"class":292},[286,36789,36364],{"class":310},[286,36791,4332],{"class":292},[286,36793,36794],{"class":288,"line":785},[286,36795,336],{"emptyLinePlaceholder":6},[286,36797,36798,36800,36802,36804,36806,36808,36810,36812,36814],{"class":288,"line":790},[286,36799,837],{"class":292},[286,36801,4274],{"class":296},[286,36803,34772],{"class":300},[286,36805,307],{"class":292},[286,36807,36383],{"class":310},[286,36809,36359],{"class":300},[286,36811,307],{"class":292},[286,36813,36390],{"class":310},[286,36815,314],{"class":292},[286,36817,36818],{"class":288,"line":800},[286,36819,36397],{"class":292},[286,36821,36822,36824,36826],{"class":288,"line":805},[286,36823,930],{"class":292},[286,36825,4274],{"class":296},[286,36827,314],{"class":292},[286,36829,36830],{"class":288,"line":815},[286,36831,336],{"emptyLinePlaceholder":6},[286,36833,36834,36836,36838,36840,36842,36844],{"class":288,"line":834},[286,36835,837],{"class":292},[286,36837,31],{"class":296},[286,36839,33315],{"class":300},[286,36841,307],{"class":292},[286,36843,36422],{"class":310},[286,36845,314],{"class":292},[286,36847,36848],{"class":288,"line":857},[286,36849,36429],{"class":292},[286,36851,36852,36854,36856],{"class":288,"line":862},[286,36853,930],{"class":292},[286,36855,31],{"class":296},[286,36857,314],{"class":292},[286,36859,36860,36862,36864],{"class":288,"line":884},[286,36861,962],{"class":292},[286,36863,31301],{"class":296},[286,36865,314],{"class":292},[286,36867,36868,36870,36872],{"class":288,"line":899},[286,36869,793],{"class":292},[286,36871,810],{"class":296},[286,36873,314],{"class":292},[40,36875,1604],{"id":1603},[31,36877,36878,36880],{},[26,36879,17981],{}," es la forma declarativa de conectar estado y atributos en Vue.\nDominarlo te permite construir interfaces dinámicas de manera limpia y mantenible.",[31,36882,36883],{},"Qué recordar:",[48,36885,36886,36893,36900,36905],{},[51,36887,36888,36890,36891,114],{},[26,36889,361],{}," es shorthand de ",[26,36892,17981],{},[51,36894,36895,36896,1704,36898,114],{},"Úsalo para atributos, props, ",[26,36897,34143],{},[26,36899,1614],{},[51,36901,36902,36903,114],{},"Evita lógica compleja inline: mueve reglas a ",[26,36904,1739],{},[51,36906,36907,36909],{},[26,36908,35719],{}," es ideal para agrupar atributos/props.",[31,36911,36912,36913,36915],{},"Si entiendes bien ",[26,36914,17981],{},", entiendes una parte central de cómo Vue traduce reactividad en UI real.",[1614,36917,36918],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":9,"searchDepth":317,"depth":317,"links":36920},[36921,36922,36923,36924,36925,36934,36948,36949],{"id":20631,"depth":317,"text":20632},{"id":24659,"depth":317,"text":24660},{"id":138,"depth":317,"text":139},{"id":165,"depth":317,"text":166},{"id":199,"depth":317,"text":200,"children":36926},[36927,36929,36931,36932],{"id":34208,"depth":333,"text":36928},"1) Olvidar que v-bind evalúa JavaScript",{"id":34309,"depth":333,"text":36930},"2) Poner demasiada lógica inline en :class o :style",{"id":34393,"depth":333,"text":34394},{"id":34438,"depth":333,"text":36933},"4) Creer que v-bind \"protege\" datos",{"id":1952,"depth":317,"text":1953,"children":36935},[36936,36938,36940,36942,36944,36946],{"id":34452,"depth":333,"text":36937},"1) Básico: enlace dinámico (href)",{"id":34689,"depth":333,"text":36939},"2) Atributo booleano dinámico (disabled)",{"id":34914,"depth":333,"text":36941},"3) v-bind:class con objeto (patrón recomendado)",{"id":35218,"depth":333,"text":36943},"4) v-bind:style dinámico con objeto",{"id":35473,"depth":333,"text":36945},"5) Argumento dinámico: :[attrName]=\"value\"",{"id":35715,"depth":333,"text":36947},"6) v-bind=\"obj\" para pasar múltiples atributos o props",{"id":36025,"depth":317,"text":36026},{"id":1603,"depth":317,"text":1604},"https://res.cloudinary.com/denj4fg7f/image/upload/v1770849828/directives-vue-v-bind-guide_gqrgyj.png","Imagen temporal para portada del artículo sobre v-bind en Vue","2026-02-11","Aprende a usar v-bind en Vue desde lo más básico hasta patrones avanzados: atributos dinámicos, class/style reactivos, props en componentes y errores comunes.",{"script":36955},[36956],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":36957},[36958],{"headline":36959,"author":36960,"datePublished":36961,"@type":1647},"Directiva v-bind en Vue: guía de básico a avanzado",{"name":1644,"@type":1645},"2026-02-11T18:00:00-05:00",{"updatedAt":36961,"coverCaption":17766,"author":1644,"keywords":36963},[1652,17981,36964,36965,36966,281,979],"atributos dinámicos","class binding","style binding","/blog/directives-vue-v-bind-guide.es",[36969],{"headline":36959,"author":36970,"datePublished":36961,"@type":1647},{"name":1644,"@type":1645},{"title":33993,"description":36953},"blog/directives-vue-v-bind-guide.es",[36974,36975,36976,36977],{"tag":20595,"color":20596},{"tag":21898,"color":21899},{"tag":3174,"color":3175},{"tag":9081,"color":9082},"7FeTPe6HFMnbuZRGNOIulmDkWQFSNvI3bgVet7-64c0",{"id":36980,"title":36981,"body":36982,"cover":40308,"coverAlt":40309,"date":40310,"description":40311,"draft":12,"extension":1635,"head":40312,"locale":1648,"meta":40320,"navigation":6,"path":40323,"schemaOrg":40324,"seo":40327,"series":20589,"seriesDescription":20590,"seriesOrder":333,"seriesTitle":20591,"slug":1663,"stem":40328,"tags":40329,"__hash__":40335},"blog/blog/directives-vue-v-for-guide.es.md","Directivas en Vue: v-for",{"type":18,"value":36983,"toc":40272},[36984,36991,36996,36999,37012,37015,37017,37020,37037,37043,37054,37060,37063,37074,37076,37082,37106,37110,37233,37358,37362,37365,37571,37778,37785,37791,37794,37912,38036,38040,38178,38319,38325,38518,38708,38712,38718,38726,39003,39267,39273,39422,39582,39586,39807,40026,40032,40040,40095,40098,40106,40115,40182,40190,40196,40199,40205,40211,40215,40241,40243,40248,40251,40266,40269],[21,36985,36987,36988,36990],{"id":36986},"directiva-v-for-en-vue-de-lo-básico-a-lo-avanzado","Directiva ",[26,36989,24887],{}," en Vue: de lo básico a lo avanzado",[31,36992,36993,36995],{},[26,36994,24887],{}," es la directiva de Vue para renderizar listas.\nParece simple, pero usarla bien marca una diferencia enorme en rendimiento, estabilidad visual y legibilidad del código.",[31,36997,36998],{},"La idea clave es esta:",[48,37000,37001,37006],{},[51,37002,37003,37005],{},[26,37004,24887],{}," describe cómo repetir estructura en el template.",[51,37007,37008,37011],{},[26,37009,37010],{},":key"," le dice a Vue cómo identificar cada nodo de forma estable.",[31,37013,37014],{},"Si dominas ese par, evitas la mayoría de bugs en listas dinámicas.",[40,37016,20632],{"id":20631},[31,37018,37019],{},"En aplicaciones reales siempre renderizas listas:",[48,37021,37022,37025,37028,37031,37034],{},[51,37023,37024],{},"Tareas",[51,37026,37027],{},"Productos",[51,37029,37030],{},"Comentarios",[51,37032,37033],{},"Notificaciones",[51,37035,37036],{},"Filas de tablas",[31,37038,37039,37040,37042],{},"Cuando la lista cambia (insertar, borrar, reordenar), Vue necesita saber qué item es cuál.\nSi la clave (",[26,37041,1796],{},") no es estable, aparecen errores como:",[48,37044,37045,37048,37051],{},[51,37046,37047],{},"Estados internos mezclados entre filas",[51,37049,37050],{},"Animaciones raras",[51,37052,37053],{},"Inputs que \"saltan\" de elemento",[40,37055,37057,37058],{"id":37056},"cuándo-usar-v-for","Cuándo usar ",[26,37059,24887],{},[31,37061,37062],{},"Úsalo cuando necesitas:",[48,37064,37065,37068,37071],{},[51,37066,37067],{},"Renderizar arrays u objetos reactivos",[51,37069,37070],{},"Repetir componentes con distintos datos",[51,37072,37073],{},"Mostrar estructuras anidadas (ej: categorías y productos)",[40,37075,166],{"id":165},[31,37077,37078,37079,37081],{},"Evita usar ",[26,37080,24887],{}," para:",[48,37083,37084,37087,37097],{},[51,37085,37086],{},"Hacer filtrado complejo directamente en el template",[51,37088,37089,37090,1704,37092,37094,37095],{},"Combinar ",[26,37091,7545],{},[26,37093,24887],{}," en el mismo nodo si puedes prefiltrar con ",[26,37096,1739],{},[51,37098,9299,37099,37102,37103,37105],{},[26,37100,37101],{},"index"," como ",[26,37104,1796],{}," en listas que cambian de orden",[40,37107,37109],{"id":37108},"sintaxis-base","Sintaxis base",[277,37111,37114],{"className":279,"code":37112,"filename":281,"highlights":37113,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst frameworks = ref(['Vue', 'React', 'Svelte'])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cli v-for=\"framework in frameworks\" :key=\"framework\">\n {{ framework }}\n \u003C/li>\n\u003C/template>\n",[389],[26,37115,37116,37126,37136,37140,37169,37177,37181,37189,37212,37217,37225],{"__ignoreMap":9},[286,37117,37118,37120,37122,37124],{"class":288,"line":289},[286,37119,293],{"class":292},[286,37121,297],{"class":296},[286,37123,301],{"class":300},[286,37125,314],{"class":292},[286,37127,37128,37130,37132,37134],{"class":288,"line":317},[286,37129,321],{"class":320},[286,37131,11013],{"class":292},[286,37133,327],{"class":320},[286,37135,330],{"class":310},[286,37137,37138],{"class":288,"line":333},[286,37139,336],{"emptyLinePlaceholder":6},[286,37141,37142,37144,37147,37149,37151,37154,37157,37159,37162,37164,37167],{"class":288,"line":339},[286,37143,413],{"class":320},[286,37145,37146],{"class":364}," frameworks",[286,37148,348],{"class":320},[286,37150,421],{"class":300},[286,37152,37153],{"class":292},"([",[286,37155,37156],{"class":310},"'Vue'",[286,37158,235],{"class":292},[286,37160,37161],{"class":310},"'React'",[286,37163,235],{"class":292},[286,37165,37166],{"class":310},"'Svelte'",[286,37168,2191],{"class":292},[286,37170,37171,37173,37175],{"class":288,"line":354},[286,37172,793],{"class":292},[286,37174,297],{"class":296},[286,37176,314],{"class":292},[286,37178,37179],{"class":288,"line":368},[286,37180,336],{"emptyLinePlaceholder":6},[286,37182,37183,37185,37187],{"class":288,"line":379},[286,37184,293],{"class":292},[286,37186,810],{"class":296},[286,37188,314],{"class":292},[286,37190,37192,37194,37196,37198,37200,37203,37205,37207,37210],{"class":37191,"line":389},[288,9405],[286,37193,818],{"class":292},[286,37195,51],{"class":296},[286,37197,12792],{"class":300},[286,37199,307],{"class":292},[286,37201,37202],{"class":310},"\"framework in frameworks\"",[286,37204,4324],{"class":300},[286,37206,307],{"class":292},[286,37208,37209],{"class":310},"\"framework\"",[286,37211,314],{"class":292},[286,37213,37214],{"class":288,"line":399},[286,37215,37216],{"class":292}," {{ framework }}\n",[286,37218,37219,37221,37223],{"class":288,"line":405},[286,37220,962],{"class":292},[286,37222,51],{"class":296},[286,37224,314],{"class":292},[286,37226,37227,37229,37231],{"class":288,"line":410},[286,37228,793],{"class":292},[286,37230,810],{"class":296},[286,37232,314],{"class":292},[277,37234,37237],{"className":279,"code":37235,"filename":979,"highlights":37236,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n frameworks: ['Vue', 'React', 'Svelte']\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cli v-for=\"framework in frameworks\" :key=\"framework\">\n {{ framework }}\n \u003C/li>\n\u003C/template>\n",[444],[26,37238,37239,37247,37255,37261,37267,37285,37289,37293,37297,37305,37309,37317,37338,37342,37350],{"__ignoreMap":9},[286,37240,37241,37243,37245],{"class":288,"line":289},[286,37242,293],{"class":292},[286,37244,297],{"class":296},[286,37246,314],{"class":292},[286,37248,37249,37251,37253],{"class":288,"line":317},[286,37250,1065],{"class":320},[286,37252,1068],{"class":320},[286,37254,351],{"class":292},[286,37256,37257,37259],{"class":288,"line":333},[286,37258,1094],{"class":300},[286,37260,481],{"class":292},[286,37262,37263,37265],{"class":288,"line":339},[286,37264,1101],{"class":320},[286,37266,351],{"class":292},[286,37268,37269,37272,37274,37276,37278,37280,37282],{"class":288,"line":354},[286,37270,37271],{"class":292}," frameworks: [",[286,37273,37156],{"class":310},[286,37275,235],{"class":292},[286,37277,37161],{"class":310},[286,37279,235],{"class":292},[286,37281,37166],{"class":310},[286,37283,37284],{"class":292},"]\n",[286,37286,37287],{"class":288,"line":368},[286,37288,1134],{"class":292},[286,37290,37291],{"class":288,"line":379},[286,37292,550],{"class":292},[286,37294,37295],{"class":288,"line":389},[286,37296,402],{"class":292},[286,37298,37299,37301,37303],{"class":288,"line":399},[286,37300,793],{"class":292},[286,37302,297],{"class":296},[286,37304,314],{"class":292},[286,37306,37307],{"class":288,"line":405},[286,37308,336],{"emptyLinePlaceholder":6},[286,37310,37311,37313,37315],{"class":288,"line":410},[286,37312,293],{"class":292},[286,37314,810],{"class":296},[286,37316,314],{"class":292},[286,37318,37320,37322,37324,37326,37328,37330,37332,37334,37336],{"class":37319,"line":444},[288,9405],[286,37321,818],{"class":292},[286,37323,51],{"class":296},[286,37325,12792],{"class":300},[286,37327,307],{"class":292},[286,37329,37202],{"class":310},[286,37331,4324],{"class":300},[286,37333,307],{"class":292},[286,37335,37209],{"class":310},[286,37337,314],{"class":292},[286,37339,37340],{"class":288,"line":464},[286,37341,37216],{"class":292},[286,37343,37344,37346,37348],{"class":288,"line":469},[286,37345,962],{"class":292},[286,37347,51],{"class":296},[286,37349,314],{"class":292},[286,37351,37352,37354,37356],{"class":288,"line":484},[286,37353,793],{"class":292},[286,37355,810],{"class":296},[286,37357,314],{"class":292},[40,37359,37361],{"id":37360},"ejemplo-básico-lista-de-tareas","Ejemplo básico: lista de tareas",[31,37363,37364],{},"Este es el patrón más común y correcto para empezar.",[277,37366,37369],{"className":279,"code":37367,"filename":281,"highlights":37368,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst todos = ref([\n { id: 1, text: 'Aprender v-for', done: true },\n { id: 2, text: 'Practicar key estable', done: false },\n { id: 3, text: 'Evitar index como key', done: false }\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cul>\n \u003Cli v-for=\"todo in todos\" :key=\"todo.id\">\n \u003Cspan :style=\"{ textDecoration: todo.done ? 'line-through' : 'none' }\">\n {{ todo.text }}\n \u003C/span>\n \u003C/li>\n \u003C/ul>\n\u003C/template>\n",[339,354,368,379,389,464],[26,37370,37371,37381,37391,37395,37409,37427,37445,37463,37468,37476,37480,37488,37496,37519,37534,37539,37547,37555,37563],{"__ignoreMap":9},[286,37372,37373,37375,37377,37379],{"class":288,"line":289},[286,37374,293],{"class":292},[286,37376,297],{"class":296},[286,37378,301],{"class":300},[286,37380,314],{"class":292},[286,37382,37383,37385,37387,37389],{"class":288,"line":317},[286,37384,321],{"class":320},[286,37386,11013],{"class":292},[286,37388,327],{"class":320},[286,37390,330],{"class":310},[286,37392,37393],{"class":288,"line":333},[286,37394,336],{"emptyLinePlaceholder":6},[286,37396,37398,37400,37403,37405,37407],{"class":37397,"line":339},[288,9405],[286,37399,413],{"class":320},[286,37401,37402],{"class":364}," todos",[286,37404,348],{"class":320},[286,37406,421],{"class":300},[286,37408,2111],{"class":292},[286,37410,37412,37414,37416,37418,37421,37423,37425],{"class":37411,"line":354},[288,9405],[286,37413,2116],{"class":292},[286,37415,2079],{"class":364},[286,37417,9697],{"class":292},[286,37419,37420],{"class":310},"'Aprender v-for'",[286,37422,2127],{"class":292},[286,37424,2156],{"class":364},[286,37426,2139],{"class":292},[286,37428,37430,37432,37434,37436,37439,37441,37443],{"class":37429,"line":368},[288,9405],[286,37431,2116],{"class":292},[286,37433,2146],{"class":364},[286,37435,9697],{"class":292},[286,37437,37438],{"class":310},"'Practicar key estable'",[286,37440,2127],{"class":292},[286,37442,2130],{"class":364},[286,37444,2139],{"class":292},[286,37446,37448,37450,37452,37454,37457,37459,37461],{"class":37447,"line":379},[288,9405],[286,37449,2116],{"class":292},[286,37451,2170],{"class":364},[286,37453,9697],{"class":292},[286,37455,37456],{"class":310},"'Evitar index como key'",[286,37458,2127],{"class":292},[286,37460,2130],{"class":364},[286,37462,2186],{"class":292},[286,37464,37466],{"class":37465,"line":389},[288,9405],[286,37467,2191],{"class":292},[286,37469,37470,37472,37474],{"class":288,"line":399},[286,37471,793],{"class":292},[286,37473,297],{"class":296},[286,37475,314],{"class":292},[286,37477,37478],{"class":288,"line":405},[286,37479,336],{"emptyLinePlaceholder":6},[286,37481,37482,37484,37486],{"class":288,"line":410},[286,37483,293],{"class":292},[286,37485,810],{"class":296},[286,37487,314],{"class":292},[286,37489,37490,37492,37494],{"class":288,"line":444},[286,37491,818],{"class":292},[286,37493,48],{"class":296},[286,37495,314],{"class":292},[286,37497,37499,37501,37503,37505,37507,37510,37512,37514,37517],{"class":37498,"line":464},[288,9405],[286,37500,837],{"class":292},[286,37502,51],{"class":296},[286,37504,12792],{"class":300},[286,37506,307],{"class":292},[286,37508,37509],{"class":310},"\"todo in todos\"",[286,37511,4324],{"class":300},[286,37513,307],{"class":292},[286,37515,37516],{"class":310},"\"todo.id\"",[286,37518,314],{"class":292},[286,37520,37521,37523,37525,37527,37529,37532],{"class":288,"line":469},[286,37522,887],{"class":292},[286,37524,286],{"class":296},[286,37526,33315],{"class":300},[286,37528,307],{"class":292},[286,37530,37531],{"class":310},"\"{ textDecoration: todo.done ? 'line-through' : 'none' }\"",[286,37533,314],{"class":292},[286,37535,37536],{"class":288,"line":484},[286,37537,37538],{"class":292}," {{ todo.text }}\n",[286,37540,37541,37543,37545],{"class":288,"line":508},[286,37542,4182],{"class":292},[286,37544,286],{"class":296},[286,37546,314],{"class":292},[286,37548,37549,37551,37553],{"class":288,"line":513},[286,37550,930],{"class":292},[286,37552,51],{"class":296},[286,37554,314],{"class":292},[286,37556,37557,37559,37561],{"class":288,"line":528},[286,37558,962],{"class":292},[286,37560,48],{"class":296},[286,37562,314],{"class":292},[286,37564,37565,37567,37569],{"class":288,"line":547},[286,37566,793],{"class":292},[286,37568,810],{"class":296},[286,37570,314],{"class":292},[277,37572,37575],{"className":279,"code":37573,"filename":979,"highlights":37574,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n todos: [\n { id: 1, text: 'Aprender v-for', done: true },\n { id: 2, text: 'Practicar key estable', done: false },\n { id: 3, text: 'Evitar index como key', done: false }\n ]\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cul>\n \u003Cli v-for=\"todo in todos\" :key=\"todo.id\">\n \u003Cspan :style=\"{ textDecoration: todo.done ? 'line-through' : 'none' }\">\n {{ todo.text }}\n \u003C/span>\n \u003C/li>\n \u003C/ul>\n\u003C/template>\n",[354,368,379,389,399,513],[26,37576,37577,37585,37593,37599,37605,37611,37628,37645,37662,37667,37671,37675,37679,37687,37691,37699,37707,37728,37742,37746,37754,37762,37770],{"__ignoreMap":9},[286,37578,37579,37581,37583],{"class":288,"line":289},[286,37580,293],{"class":292},[286,37582,297],{"class":296},[286,37584,314],{"class":292},[286,37586,37587,37589,37591],{"class":288,"line":317},[286,37588,1065],{"class":320},[286,37590,1068],{"class":320},[286,37592,351],{"class":292},[286,37594,37595,37597],{"class":288,"line":333},[286,37596,1094],{"class":300},[286,37598,481],{"class":292},[286,37600,37601,37603],{"class":288,"line":339},[286,37602,1101],{"class":320},[286,37604,351],{"class":292},[286,37606,37608],{"class":37607,"line":354},[288,9405],[286,37609,37610],{"class":292}," todos: [\n",[286,37612,37614,37616,37618,37620,37622,37624,37626],{"class":37613,"line":368},[288,9405],[286,37615,2671],{"class":292},[286,37617,2079],{"class":364},[286,37619,9697],{"class":292},[286,37621,37420],{"class":310},[286,37623,2127],{"class":292},[286,37625,2156],{"class":364},[286,37627,2139],{"class":292},[286,37629,37631,37633,37635,37637,37639,37641,37643],{"class":37630,"line":379},[288,9405],[286,37632,2671],{"class":292},[286,37634,2146],{"class":364},[286,37636,9697],{"class":292},[286,37638,37438],{"class":310},[286,37640,2127],{"class":292},[286,37642,2130],{"class":364},[286,37644,2139],{"class":292},[286,37646,37648,37650,37652,37654,37656,37658,37660],{"class":37647,"line":389},[288,9405],[286,37649,2671],{"class":292},[286,37651,2170],{"class":364},[286,37653,9697],{"class":292},[286,37655,37456],{"class":310},[286,37657,2127],{"class":292},[286,37659,2130],{"class":364},[286,37661,2186],{"class":292},[286,37663,37665],{"class":37664,"line":399},[288,9405],[286,37666,2732],{"class":292},[286,37668,37669],{"class":288,"line":405},[286,37670,1134],{"class":292},[286,37672,37673],{"class":288,"line":410},[286,37674,550],{"class":292},[286,37676,37677],{"class":288,"line":444},[286,37678,402],{"class":292},[286,37680,37681,37683,37685],{"class":288,"line":464},[286,37682,793],{"class":292},[286,37684,297],{"class":296},[286,37686,314],{"class":292},[286,37688,37689],{"class":288,"line":469},[286,37690,336],{"emptyLinePlaceholder":6},[286,37692,37693,37695,37697],{"class":288,"line":484},[286,37694,293],{"class":292},[286,37696,810],{"class":296},[286,37698,314],{"class":292},[286,37700,37701,37703,37705],{"class":288,"line":508},[286,37702,818],{"class":292},[286,37704,48],{"class":296},[286,37706,314],{"class":292},[286,37708,37710,37712,37714,37716,37718,37720,37722,37724,37726],{"class":37709,"line":513},[288,9405],[286,37711,837],{"class":292},[286,37713,51],{"class":296},[286,37715,12792],{"class":300},[286,37717,307],{"class":292},[286,37719,37509],{"class":310},[286,37721,4324],{"class":300},[286,37723,307],{"class":292},[286,37725,37516],{"class":310},[286,37727,314],{"class":292},[286,37729,37730,37732,37734,37736,37738,37740],{"class":288,"line":528},[286,37731,887],{"class":292},[286,37733,286],{"class":296},[286,37735,33315],{"class":300},[286,37737,307],{"class":292},[286,37739,37531],{"class":310},[286,37741,314],{"class":292},[286,37743,37744],{"class":288,"line":547},[286,37745,37538],{"class":292},[286,37747,37748,37750,37752],{"class":288,"line":553},[286,37749,4182],{"class":292},[286,37751,286],{"class":296},[286,37753,314],{"class":292},[286,37755,37756,37758,37760],{"class":288,"line":558},[286,37757,930],{"class":292},[286,37759,51],{"class":296},[286,37761,314],{"class":292},[286,37763,37764,37766,37768],{"class":288,"line":586},[286,37765,962],{"class":292},[286,37767,48],{"class":296},[286,37769,314],{"class":292},[286,37771,37772,37774,37776],{"class":288,"line":591},[286,37773,793],{"class":292},[286,37775,810],{"class":296},[286,37777,314],{"class":292},[40,37779,37781,37782],{"id":37780},"nivel-intermedio-índice-objetos-y-template-v-for","Nivel intermedio: índice, objetos y ",[26,37783,37784],{},"template v-for",[202,37786,37788,37789],{"id":37787},"_1-índice-en-v-for","1) Índice en ",[26,37790,24887],{},[31,37792,37793],{},"Puedes obtener índice cuando realmente lo necesitas:",[277,37795,37798],{"className":279,"code":37796,"filename":281,"highlights":37797,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst users = ref(['Ana', 'Luis', 'Marta'])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp v-for=\"(user, index) in users\" :key=\"user\">\n #{{ index + 1 }} - {{ user }}\n \u003C/p>\n\u003C/template>\n",[389],[26,37799,37800,37810,37820,37824,37849,37857,37861,37869,37891,37896,37904],{"__ignoreMap":9},[286,37801,37802,37804,37806,37808],{"class":288,"line":289},[286,37803,293],{"class":292},[286,37805,297],{"class":296},[286,37807,301],{"class":300},[286,37809,314],{"class":292},[286,37811,37812,37814,37816,37818],{"class":288,"line":317},[286,37813,321],{"class":320},[286,37815,11013],{"class":292},[286,37817,327],{"class":320},[286,37819,330],{"class":310},[286,37821,37822],{"class":288,"line":333},[286,37823,336],{"emptyLinePlaceholder":6},[286,37825,37826,37828,37830,37832,37834,37836,37838,37840,37842,37844,37847],{"class":288,"line":339},[286,37827,413],{"class":320},[286,37829,11028],{"class":364},[286,37831,348],{"class":320},[286,37833,421],{"class":300},[286,37835,37153],{"class":292},[286,37837,2136],{"class":310},[286,37839,235],{"class":292},[286,37841,2161],{"class":310},[286,37843,235],{"class":292},[286,37845,37846],{"class":310},"'Marta'",[286,37848,2191],{"class":292},[286,37850,37851,37853,37855],{"class":288,"line":354},[286,37852,793],{"class":292},[286,37854,297],{"class":296},[286,37856,314],{"class":292},[286,37858,37859],{"class":288,"line":368},[286,37860,336],{"emptyLinePlaceholder":6},[286,37862,37863,37865,37867],{"class":288,"line":379},[286,37864,293],{"class":292},[286,37866,810],{"class":296},[286,37868,314],{"class":292},[286,37870,37872,37874,37876,37878,37880,37883,37885,37887,37889],{"class":37871,"line":389},[288,9405],[286,37873,818],{"class":292},[286,37875,31],{"class":296},[286,37877,12792],{"class":300},[286,37879,307],{"class":292},[286,37881,37882],{"class":310},"\"(user, index) in users\"",[286,37884,4324],{"class":300},[286,37886,307],{"class":292},[286,37888,21525],{"class":310},[286,37890,314],{"class":292},[286,37892,37893],{"class":288,"line":399},[286,37894,37895],{"class":292}," #{{ index + 1 }} - {{ user }}\n",[286,37897,37898,37900,37902],{"class":288,"line":405},[286,37899,962],{"class":292},[286,37901,31],{"class":296},[286,37903,314],{"class":292},[286,37905,37906,37908,37910],{"class":288,"line":410},[286,37907,793],{"class":292},[286,37909,810],{"class":296},[286,37911,314],{"class":292},[277,37913,37916],{"className":279,"code":37914,"filename":979,"highlights":37915,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n users: ['Ana', 'Luis', 'Marta']\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp v-for=\"(user, index) in users\" :key=\"user\">\n #{{ index + 1 }} - {{ user }}\n \u003C/p>\n\u003C/template>\n",[444],[26,37917,37918,37926,37934,37940,37946,37963,37967,37971,37975,37983,37987,37995,38016,38020,38028],{"__ignoreMap":9},[286,37919,37920,37922,37924],{"class":288,"line":289},[286,37921,293],{"class":292},[286,37923,297],{"class":296},[286,37925,314],{"class":292},[286,37927,37928,37930,37932],{"class":288,"line":317},[286,37929,1065],{"class":320},[286,37931,1068],{"class":320},[286,37933,351],{"class":292},[286,37935,37936,37938],{"class":288,"line":333},[286,37937,1094],{"class":300},[286,37939,481],{"class":292},[286,37941,37942,37944],{"class":288,"line":339},[286,37943,1101],{"class":320},[286,37945,351],{"class":292},[286,37947,37948,37951,37953,37955,37957,37959,37961],{"class":288,"line":354},[286,37949,37950],{"class":292}," users: [",[286,37952,2136],{"class":310},[286,37954,235],{"class":292},[286,37956,2161],{"class":310},[286,37958,235],{"class":292},[286,37960,37846],{"class":310},[286,37962,37284],{"class":292},[286,37964,37965],{"class":288,"line":368},[286,37966,1134],{"class":292},[286,37968,37969],{"class":288,"line":379},[286,37970,550],{"class":292},[286,37972,37973],{"class":288,"line":389},[286,37974,402],{"class":292},[286,37976,37977,37979,37981],{"class":288,"line":399},[286,37978,793],{"class":292},[286,37980,297],{"class":296},[286,37982,314],{"class":292},[286,37984,37985],{"class":288,"line":405},[286,37986,336],{"emptyLinePlaceholder":6},[286,37988,37989,37991,37993],{"class":288,"line":410},[286,37990,293],{"class":292},[286,37992,810],{"class":296},[286,37994,314],{"class":292},[286,37996,37998,38000,38002,38004,38006,38008,38010,38012,38014],{"class":37997,"line":444},[288,9405],[286,37999,818],{"class":292},[286,38001,31],{"class":296},[286,38003,12792],{"class":300},[286,38005,307],{"class":292},[286,38007,37882],{"class":310},[286,38009,4324],{"class":300},[286,38011,307],{"class":292},[286,38013,21525],{"class":310},[286,38015,314],{"class":292},[286,38017,38018],{"class":288,"line":464},[286,38019,37895],{"class":292},[286,38021,38022,38024,38026],{"class":288,"line":469},[286,38023,962],{"class":292},[286,38025,31],{"class":296},[286,38027,314],{"class":292},[286,38029,38030,38032,38034],{"class":288,"line":484},[286,38031,793],{"class":292},[286,38033,810],{"class":296},[286,38035,314],{"class":292},[202,38037,38039],{"id":38038},"_2-iterar-un-objeto","2) Iterar un objeto",[277,38041,38044],{"className":279,"code":38042,"filename":281,"highlights":38043,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst profile = ref({\n name: 'Cristian',\n role: 'Frontend Dev',\n country: 'Colombia'\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cli v-for=\"(value, key) in profile\" :key=\"key\">\n {{ key }}: {{ value }}\n \u003C/li>\n\u003C/template>\n",[444],[26,38045,38046,38056,38066,38070,38083,38092,38102,38110,38114,38122,38126,38134,38157,38162,38170],{"__ignoreMap":9},[286,38047,38048,38050,38052,38054],{"class":288,"line":289},[286,38049,293],{"class":292},[286,38051,297],{"class":296},[286,38053,301],{"class":300},[286,38055,314],{"class":292},[286,38057,38058,38060,38062,38064],{"class":288,"line":317},[286,38059,321],{"class":320},[286,38061,11013],{"class":292},[286,38063,327],{"class":320},[286,38065,330],{"class":310},[286,38067,38068],{"class":288,"line":333},[286,38069,336],{"emptyLinePlaceholder":6},[286,38071,38072,38074,38077,38079,38081],{"class":288,"line":339},[286,38073,413],{"class":320},[286,38075,38076],{"class":364}," profile",[286,38078,348],{"class":320},[286,38080,421],{"class":300},[286,38082,1074],{"class":292},[286,38084,38085,38087,38090],{"class":288,"line":354},[286,38086,1079],{"class":292},[286,38088,38089],{"class":310},"'Cristian'",[286,38091,1085],{"class":292},[286,38093,38094,38097,38100],{"class":288,"line":368},[286,38095,38096],{"class":292}," role: ",[286,38098,38099],{"class":310},"'Frontend Dev'",[286,38101,1085],{"class":292},[286,38103,38104,38107],{"class":288,"line":379},[286,38105,38106],{"class":292}," country: ",[286,38108,38109],{"class":310},"'Colombia'\n",[286,38111,38112],{"class":288,"line":389},[286,38113,684],{"class":292},[286,38115,38116,38118,38120],{"class":288,"line":399},[286,38117,793],{"class":292},[286,38119,297],{"class":296},[286,38121,314],{"class":292},[286,38123,38124],{"class":288,"line":405},[286,38125,336],{"emptyLinePlaceholder":6},[286,38127,38128,38130,38132],{"class":288,"line":410},[286,38129,293],{"class":292},[286,38131,810],{"class":296},[286,38133,314],{"class":292},[286,38135,38137,38139,38141,38143,38145,38148,38150,38152,38155],{"class":38136,"line":444},[288,9405],[286,38138,818],{"class":292},[286,38140,51],{"class":296},[286,38142,12792],{"class":300},[286,38144,307],{"class":292},[286,38146,38147],{"class":310},"\"(value, key) in profile\"",[286,38149,4324],{"class":300},[286,38151,307],{"class":292},[286,38153,38154],{"class":310},"\"key\"",[286,38156,314],{"class":292},[286,38158,38159],{"class":288,"line":464},[286,38160,38161],{"class":292}," {{ key }}: {{ value }}\n",[286,38163,38164,38166,38168],{"class":288,"line":469},[286,38165,962],{"class":292},[286,38167,51],{"class":296},[286,38169,314],{"class":292},[286,38171,38172,38174,38176],{"class":288,"line":484},[286,38173,793],{"class":292},[286,38175,810],{"class":296},[286,38177,314],{"class":292},[277,38179,38182],{"className":279,"code":38180,"filename":979,"highlights":38181,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n profile: {\n name: 'Cristian',\n role: 'Frontend Dev',\n country: 'Colombia'\n }\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cli v-for=\"(value, key) in profile\" :key=\"key\">\n {{ key }}: {{ value }}\n \u003C/li>\n\u003C/template>\n",[508],[26,38183,38184,38192,38200,38206,38212,38217,38226,38235,38242,38246,38250,38254,38258,38266,38270,38278,38299,38303,38311],{"__ignoreMap":9},[286,38185,38186,38188,38190],{"class":288,"line":289},[286,38187,293],{"class":292},[286,38189,297],{"class":296},[286,38191,314],{"class":292},[286,38193,38194,38196,38198],{"class":288,"line":317},[286,38195,1065],{"class":320},[286,38197,1068],{"class":320},[286,38199,351],{"class":292},[286,38201,38202,38204],{"class":288,"line":333},[286,38203,1094],{"class":300},[286,38205,481],{"class":292},[286,38207,38208,38210],{"class":288,"line":339},[286,38209,1101],{"class":320},[286,38211,351],{"class":292},[286,38213,38214],{"class":288,"line":354},[286,38215,38216],{"class":292}," profile: {\n",[286,38218,38219,38222,38224],{"class":288,"line":368},[286,38220,38221],{"class":292}," name: ",[286,38223,38089],{"class":310},[286,38225,1085],{"class":292},[286,38227,38228,38231,38233],{"class":288,"line":379},[286,38229,38230],{"class":292}," role: ",[286,38232,38099],{"class":310},[286,38234,1085],{"class":292},[286,38236,38237,38240],{"class":288,"line":389},[286,38238,38239],{"class":292}," country: ",[286,38241,38109],{"class":310},[286,38243,38244],{"class":288,"line":399},[286,38245,1211],{"class":292},[286,38247,38248],{"class":288,"line":405},[286,38249,1134],{"class":292},[286,38251,38252],{"class":288,"line":410},[286,38253,550],{"class":292},[286,38255,38256],{"class":288,"line":444},[286,38257,402],{"class":292},[286,38259,38260,38262,38264],{"class":288,"line":464},[286,38261,793],{"class":292},[286,38263,297],{"class":296},[286,38265,314],{"class":292},[286,38267,38268],{"class":288,"line":469},[286,38269,336],{"emptyLinePlaceholder":6},[286,38271,38272,38274,38276],{"class":288,"line":484},[286,38273,293],{"class":292},[286,38275,810],{"class":296},[286,38277,314],{"class":292},[286,38279,38281,38283,38285,38287,38289,38291,38293,38295,38297],{"class":38280,"line":508},[288,9405],[286,38282,818],{"class":292},[286,38284,51],{"class":296},[286,38286,12792],{"class":300},[286,38288,307],{"class":292},[286,38290,38147],{"class":310},[286,38292,4324],{"class":300},[286,38294,307],{"class":292},[286,38296,38154],{"class":310},[286,38298,314],{"class":292},[286,38300,38301],{"class":288,"line":513},[286,38302,38161],{"class":292},[286,38304,38305,38307,38309],{"class":288,"line":528},[286,38306,962],{"class":292},[286,38308,51],{"class":296},[286,38310,314],{"class":292},[286,38312,38313,38315,38317],{"class":288,"line":547},[286,38314,793],{"class":292},[286,38316,810],{"class":296},[286,38318,314],{"class":292},[202,38320,38322,38323],{"id":38321},"_3-repetir-varios-nodos-con-template","3) Repetir varios nodos con ",[26,38324,810],{},[277,38326,38329],{"className":279,"code":38327,"filename":281,"highlights":38328,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst items = ref([\n { id: 1, title: 'Vue 3', description: 'Framework progresivo' },\n { id: 2, title: 'Pinia', description: 'Estado global moderno' }\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ctemplate v-for=\"item in items\" :key=\"item.id\">\n \u003Ch3>{{ item.title }}\u003C/h3>\n \u003Cp>{{ item.description }}\u003C/p>\n \u003Chr />\n \u003C/template>\n\u003C/template>\n",[410],[26,38330,38331,38341,38351,38355,38368,38387,38405,38409,38417,38421,38429,38467,38480,38493,38502,38510],{"__ignoreMap":9},[286,38332,38333,38335,38337,38339],{"class":288,"line":289},[286,38334,293],{"class":292},[286,38336,297],{"class":296},[286,38338,301],{"class":300},[286,38340,314],{"class":292},[286,38342,38343,38345,38347,38349],{"class":288,"line":317},[286,38344,321],{"class":320},[286,38346,11013],{"class":292},[286,38348,327],{"class":320},[286,38350,330],{"class":310},[286,38352,38353],{"class":288,"line":333},[286,38354,336],{"emptyLinePlaceholder":6},[286,38356,38357,38359,38362,38364,38366],{"class":288,"line":339},[286,38358,413],{"class":320},[286,38360,38361],{"class":364}," items",[286,38363,348],{"class":320},[286,38365,421],{"class":300},[286,38367,2111],{"class":292},[286,38369,38370,38372,38374,38376,38379,38382,38385],{"class":288,"line":354},[286,38371,2116],{"class":292},[286,38373,2079],{"class":364},[286,38375,2121],{"class":292},[286,38377,38378],{"class":310},"'Vue 3'",[286,38380,38381],{"class":292},", description: ",[286,38383,38384],{"class":310},"'Framework progresivo'",[286,38386,2139],{"class":292},[286,38388,38389,38391,38393,38395,38398,38400,38403],{"class":288,"line":368},[286,38390,2116],{"class":292},[286,38392,2146],{"class":364},[286,38394,2121],{"class":292},[286,38396,38397],{"class":310},"'Pinia'",[286,38399,38381],{"class":292},[286,38401,38402],{"class":310},"'Estado global moderno'",[286,38404,2186],{"class":292},[286,38406,38407],{"class":288,"line":379},[286,38408,2191],{"class":292},[286,38410,38411,38413,38415],{"class":288,"line":389},[286,38412,793],{"class":292},[286,38414,297],{"class":296},[286,38416,314],{"class":292},[286,38418,38419],{"class":288,"line":399},[286,38420,336],{"emptyLinePlaceholder":6},[286,38422,38423,38425,38427],{"class":288,"line":405},[286,38424,293],{"class":292},[286,38426,810],{"class":296},[286,38428,314],{"class":292},[286,38430,38432,38434,38436,38438,38440,38442,38445,38448,38450,38452,38454,38456,38458,38460,38463,38465],{"class":38431,"line":410},[288,9405],[286,38433,818],{"class":292},[286,38435,810],{"class":296},[286,38437,12792],{"class":320},[286,38439,307],{"class":292},[286,38441,874],{"class":310},[286,38443,38444],{"class":292},"item ",[286,38446,38447],{"class":320},"in",[286,38449,38361],{"class":292},[286,38451,874],{"class":310},[286,38453,6251],{"class":292},[286,38455,1796],{"class":300},[286,38457,307],{"class":292},[286,38459,874],{"class":310},[286,38461,38462],{"class":292},"item.id",[286,38464,874],{"class":310},[286,38466,314],{"class":292},[286,38468,38469,38471,38473,38476,38478],{"class":288,"line":444},[286,38470,837],{"class":292},[286,38472,202],{"class":296},[286,38474,38475],{"class":292},">{{ item.title }}\u003C/",[286,38477,202],{"class":296},[286,38479,314],{"class":292},[286,38481,38482,38484,38486,38489,38491],{"class":288,"line":464},[286,38483,837],{"class":292},[286,38485,31],{"class":296},[286,38487,38488],{"class":292},">{{ item.description }}\u003C/",[286,38490,31],{"class":296},[286,38492,314],{"class":292},[286,38494,38495,38497,38500],{"class":288,"line":469},[286,38496,837],{"class":292},[286,38498,38499],{"class":296},"hr",[286,38501,4332],{"class":292},[286,38503,38504,38506,38508],{"class":288,"line":484},[286,38505,962],{"class":292},[286,38507,810],{"class":296},[286,38509,314],{"class":292},[286,38511,38512,38514,38516],{"class":288,"line":508},[286,38513,793],{"class":292},[286,38515,810],{"class":296},[286,38517,314],{"class":292},[277,38519,38522],{"className":279,"code":38520,"filename":979,"highlights":38521,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n items: [\n { id: 1, title: 'Vue 3', description: 'Framework progresivo' },\n { id: 2, title: 'Pinia', description: 'Estado global moderno' }\n ]\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ctemplate v-for=\"item in items\" :key=\"item.id\">\n \u003Ch3>{{ item.title }}\u003C/h3>\n \u003Cp>{{ item.description }}\u003C/p>\n \u003Chr />\n \u003C/template>\n\u003C/template>\n",[484],[26,38523,38524,38532,38540,38546,38552,38557,38573,38589,38593,38597,38601,38605,38613,38617,38625,38660,38672,38684,38692,38700],{"__ignoreMap":9},[286,38525,38526,38528,38530],{"class":288,"line":289},[286,38527,293],{"class":292},[286,38529,297],{"class":296},[286,38531,314],{"class":292},[286,38533,38534,38536,38538],{"class":288,"line":317},[286,38535,1065],{"class":320},[286,38537,1068],{"class":320},[286,38539,351],{"class":292},[286,38541,38542,38544],{"class":288,"line":333},[286,38543,1094],{"class":300},[286,38545,481],{"class":292},[286,38547,38548,38550],{"class":288,"line":339},[286,38549,1101],{"class":320},[286,38551,351],{"class":292},[286,38553,38554],{"class":288,"line":354},[286,38555,38556],{"class":292}," items: [\n",[286,38558,38559,38561,38563,38565,38567,38569,38571],{"class":288,"line":368},[286,38560,2671],{"class":292},[286,38562,2079],{"class":364},[286,38564,2121],{"class":292},[286,38566,38378],{"class":310},[286,38568,38381],{"class":292},[286,38570,38384],{"class":310},[286,38572,2139],{"class":292},[286,38574,38575,38577,38579,38581,38583,38585,38587],{"class":288,"line":379},[286,38576,2671],{"class":292},[286,38578,2146],{"class":364},[286,38580,2121],{"class":292},[286,38582,38397],{"class":310},[286,38584,38381],{"class":292},[286,38586,38402],{"class":310},[286,38588,2186],{"class":292},[286,38590,38591],{"class":288,"line":389},[286,38592,2732],{"class":292},[286,38594,38595],{"class":288,"line":399},[286,38596,1134],{"class":292},[286,38598,38599],{"class":288,"line":405},[286,38600,550],{"class":292},[286,38602,38603],{"class":288,"line":410},[286,38604,402],{"class":292},[286,38606,38607,38609,38611],{"class":288,"line":444},[286,38608,793],{"class":292},[286,38610,297],{"class":296},[286,38612,314],{"class":292},[286,38614,38615],{"class":288,"line":464},[286,38616,336],{"emptyLinePlaceholder":6},[286,38618,38619,38621,38623],{"class":288,"line":469},[286,38620,293],{"class":292},[286,38622,810],{"class":296},[286,38624,314],{"class":292},[286,38626,38628,38630,38632,38634,38636,38638,38640,38642,38644,38646,38648,38650,38652,38654,38656,38658],{"class":38627,"line":484},[288,9405],[286,38629,818],{"class":292},[286,38631,810],{"class":296},[286,38633,12792],{"class":320},[286,38635,307],{"class":292},[286,38637,874],{"class":310},[286,38639,38444],{"class":292},[286,38641,38447],{"class":320},[286,38643,38361],{"class":292},[286,38645,874],{"class":310},[286,38647,6251],{"class":292},[286,38649,1796],{"class":300},[286,38651,307],{"class":292},[286,38653,874],{"class":310},[286,38655,38462],{"class":292},[286,38657,874],{"class":310},[286,38659,314],{"class":292},[286,38661,38662,38664,38666,38668,38670],{"class":288,"line":508},[286,38663,837],{"class":292},[286,38665,202],{"class":296},[286,38667,38475],{"class":292},[286,38669,202],{"class":296},[286,38671,314],{"class":292},[286,38673,38674,38676,38678,38680,38682],{"class":288,"line":513},[286,38675,837],{"class":292},[286,38677,31],{"class":296},[286,38679,38488],{"class":292},[286,38681,31],{"class":296},[286,38683,314],{"class":292},[286,38685,38686,38688,38690],{"class":288,"line":528},[286,38687,837],{"class":292},[286,38689,38499],{"class":296},[286,38691,4332],{"class":292},[286,38693,38694,38696,38698],{"class":288,"line":547},[286,38695,962],{"class":292},[286,38697,810],{"class":296},[286,38699,314],{"class":292},[286,38701,38702,38704,38706],{"class":288,"line":553},[286,38703,793],{"class":292},[286,38705,810],{"class":296},[286,38707,314],{"class":292},[40,38709,38711],{"id":38710},"nivel-avanzado-listas-derivadas-componentes-y-anidación","Nivel avanzado: listas derivadas, componentes y anidación",[202,38713,38715,38716],{"id":38714},"_1-prefiltrar-y-ordenar-con-computed","1) Prefiltrar y ordenar con ",[26,38717,1739],{},[31,38719,38720,38721,38723,38724,114],{},"No hagas lógica pesada dentro del ",[26,38722,24887],{},".\nDeriva la lista antes, con ",[26,38725,1739],{},[277,38727,38730],{"className":279,"code":38728,"filename":281,"highlights":38729,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\nconst products = ref([\n { id: 1, name: 'Laptop', price: 1200, stock: 5 },\n { id: 2, name: 'Mouse', price: 25, stock: 0 },\n { id: 3, name: 'Keyboard', price: 80, stock: 12 }\n])\n\nconst inStockSorted = computed(() => {\n return products.value\n .filter(product => product.stock > 0)\n .slice()\n .sort((a, b) => a.price - b.price)\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cli v-for=\"product in inStockSorted\" :key=\"product.id\">\n {{ product.name }} - ${{ product.price }}\n \u003C/li>\n\u003C/template>\n",[405,410,444,464,469,484,547],[26,38731,38732,38742,38752,38756,38768,38791,38813,38836,38840,38844,38862,38870,38894,38904,38934,38939,38947,38951,38959,38982,38987,38995],{"__ignoreMap":9},[286,38733,38734,38736,38738,38740],{"class":288,"line":289},[286,38735,293],{"class":292},[286,38737,297],{"class":296},[286,38739,301],{"class":300},[286,38741,314],{"class":292},[286,38743,38744,38746,38748,38750],{"class":288,"line":317},[286,38745,321],{"class":320},[286,38747,23391],{"class":292},[286,38749,327],{"class":320},[286,38751,330],{"class":310},[286,38753,38754],{"class":288,"line":333},[286,38755,336],{"emptyLinePlaceholder":6},[286,38757,38758,38760,38762,38764,38766],{"class":288,"line":339},[286,38759,413],{"class":320},[286,38761,29629],{"class":364},[286,38763,348],{"class":320},[286,38765,421],{"class":300},[286,38767,2111],{"class":292},[286,38769,38770,38772,38774,38776,38779,38781,38784,38786,38789],{"class":288,"line":354},[286,38771,2116],{"class":292},[286,38773,2079],{"class":364},[286,38775,22627],{"class":292},[286,38777,38778],{"class":310},"'Laptop'",[286,38780,29649],{"class":292},[286,38782,38783],{"class":364},"1200",[286,38785,29655],{"class":292},[286,38787,38788],{"class":364},"5",[286,38790,2139],{"class":292},[286,38792,38793,38795,38797,38799,38802,38804,38807,38809,38811],{"class":288,"line":368},[286,38794,2116],{"class":292},[286,38796,2146],{"class":364},[286,38798,22627],{"class":292},[286,38800,38801],{"class":310},"'Mouse'",[286,38803,29649],{"class":292},[286,38805,38806],{"class":364},"25",[286,38808,29655],{"class":292},[286,38810,3549],{"class":364},[286,38812,2139],{"class":292},[286,38814,38815,38817,38819,38821,38824,38826,38829,38831,38834],{"class":288,"line":379},[286,38816,2116],{"class":292},[286,38818,2170],{"class":364},[286,38820,22627],{"class":292},[286,38822,38823],{"class":310},"'Keyboard'",[286,38825,29649],{"class":292},[286,38827,38828],{"class":364},"80",[286,38830,29655],{"class":292},[286,38832,38833],{"class":364},"12",[286,38835,2186],{"class":292},[286,38837,38838],{"class":288,"line":389},[286,38839,2191],{"class":292},[286,38841,38842],{"class":288,"line":399},[286,38843,336],{"emptyLinePlaceholder":6},[286,38845,38847,38849,38852,38854,38856,38858,38860],{"class":38846,"line":405},[288,9405],[286,38848,413],{"class":320},[286,38850,38851],{"class":364}," inStockSorted",[286,38853,348],{"class":320},[286,38855,2207],{"class":300},[286,38857,2210],{"class":292},[286,38859,609],{"class":320},[286,38861,351],{"class":292},[286,38863,38865,38867],{"class":38864,"line":410},[288,9405],[286,38866,2219],{"class":320},[286,38868,38869],{"class":292}," products.value\n",[286,38871,38873,38876,38878,38880,38882,38884,38887,38889,38892],{"class":38872,"line":444},[288,9405],[286,38874,38875],{"class":292}," .",[286,38877,2225],{"class":300},[286,38879,456],{"class":292},[286,38881,877],{"class":357},[286,38883,2233],{"class":320},[286,38885,38886],{"class":292}," product.stock ",[286,38888,9928],{"class":320},[286,38890,38891],{"class":364}," 0",[286,38893,441],{"class":292},[286,38895,38897,38899,38902],{"class":38896,"line":464},[288,9405],[286,38898,38875],{"class":292},[286,38900,38901],{"class":300},"slice",[286,38903,630],{"class":292},[286,38905,38907,38909,38912,38914,38916,38918,38921,38923,38925,38928,38931],{"class":38906,"line":469},[288,9405],[286,38908,38875],{"class":292},[286,38910,38911],{"class":300},"sort",[286,38913,2341],{"class":292},[286,38915,13185],{"class":357},[286,38917,235],{"class":292},[286,38919,38920],{"class":357},"b",[286,38922,2347],{"class":292},[286,38924,609],{"class":320},[286,38926,38927],{"class":292}," a.price ",[286,38929,38930],{"class":320},"-",[286,38932,38933],{"class":292}," b.price)\n",[286,38935,38937],{"class":38936,"line":484},[288,9405],[286,38938,684],{"class":292},[286,38940,38941,38943,38945],{"class":288,"line":508},[286,38942,793],{"class":292},[286,38944,297],{"class":296},[286,38946,314],{"class":292},[286,38948,38949],{"class":288,"line":513},[286,38950,336],{"emptyLinePlaceholder":6},[286,38952,38953,38955,38957],{"class":288,"line":528},[286,38954,293],{"class":292},[286,38956,810],{"class":296},[286,38958,314],{"class":292},[286,38960,38962,38964,38966,38968,38970,38973,38975,38977,38980],{"class":38961,"line":547},[288,9405],[286,38963,818],{"class":292},[286,38965,51],{"class":296},[286,38967,12792],{"class":300},[286,38969,307],{"class":292},[286,38971,38972],{"class":310},"\"product in inStockSorted\"",[286,38974,4324],{"class":300},[286,38976,307],{"class":292},[286,38978,38979],{"class":310},"\"product.id\"",[286,38981,314],{"class":292},[286,38983,38984],{"class":288,"line":553},[286,38985,38986],{"class":292}," {{ product.name }} - ${{ product.price }}\n",[286,38988,38989,38991,38993],{"class":288,"line":558},[286,38990,962],{"class":292},[286,38992,51],{"class":296},[286,38994,314],{"class":292},[286,38996,38997,38999,39001],{"class":288,"line":586},[286,38998,793],{"class":292},[286,39000,810],{"class":296},[286,39002,314],{"class":292},[277,39004,39007],{"className":279,"code":39005,"filename":979,"highlights":39006,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n products: [\n { id: 1, name: 'Laptop', price: 1200, stock: 5 },\n { id: 2, name: 'Mouse', price: 25, stock: 0 },\n { id: 3, name: 'Keyboard', price: 80, stock: 12 }\n ]\n }\n },\n computed: {\n inStockSorted() {\n return this.products\n .filter(product => product.stock > 0)\n .slice()\n .sort((a, b) => a.price - b.price)\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cli v-for=\"product in inStockSorted\" :key=\"product.id\">\n {{ product.name }} - ${{ product.price }}\n \u003C/li>\n\u003C/template>\n",[444,464,469,484,508,513,528,547,596],[26,39008,39009,39017,39025,39031,39037,39041,39061,39081,39101,39105,39109,39113,39118,39126,39136,39158,39167,39192,39197,39202,39206,39214,39218,39226,39247,39251,39259],{"__ignoreMap":9},[286,39010,39011,39013,39015],{"class":288,"line":289},[286,39012,293],{"class":292},[286,39014,297],{"class":296},[286,39016,314],{"class":292},[286,39018,39019,39021,39023],{"class":288,"line":317},[286,39020,1065],{"class":320},[286,39022,1068],{"class":320},[286,39024,351],{"class":292},[286,39026,39027,39029],{"class":288,"line":333},[286,39028,1094],{"class":300},[286,39030,481],{"class":292},[286,39032,39033,39035],{"class":288,"line":339},[286,39034,1101],{"class":320},[286,39036,351],{"class":292},[286,39038,39039],{"class":288,"line":354},[286,39040,30392],{"class":292},[286,39042,39043,39045,39047,39049,39051,39053,39055,39057,39059],{"class":288,"line":368},[286,39044,2671],{"class":292},[286,39046,2079],{"class":364},[286,39048,22627],{"class":292},[286,39050,38778],{"class":310},[286,39052,29649],{"class":292},[286,39054,38783],{"class":364},[286,39056,29655],{"class":292},[286,39058,38788],{"class":364},[286,39060,2139],{"class":292},[286,39062,39063,39065,39067,39069,39071,39073,39075,39077,39079],{"class":288,"line":379},[286,39064,2671],{"class":292},[286,39066,2146],{"class":364},[286,39068,22627],{"class":292},[286,39070,38801],{"class":310},[286,39072,29649],{"class":292},[286,39074,38806],{"class":364},[286,39076,29655],{"class":292},[286,39078,3549],{"class":364},[286,39080,2139],{"class":292},[286,39082,39083,39085,39087,39089,39091,39093,39095,39097,39099],{"class":288,"line":389},[286,39084,2671],{"class":292},[286,39086,2170],{"class":364},[286,39088,22627],{"class":292},[286,39090,38823],{"class":310},[286,39092,29649],{"class":292},[286,39094,38828],{"class":364},[286,39096,29655],{"class":292},[286,39098,38833],{"class":364},[286,39100,2186],{"class":292},[286,39102,39103],{"class":288,"line":399},[286,39104,2732],{"class":292},[286,39106,39107],{"class":288,"line":405},[286,39108,1134],{"class":292},[286,39110,39111],{"class":288,"line":410},[286,39112,1139],{"class":292},[286,39114,39116],{"class":39115,"line":444},[288,9405],[286,39117,2749],{"class":292},[286,39119,39121,39124],{"class":39120,"line":464},[288,9405],[286,39122,39123],{"class":300}," inStockSorted",[286,39125,481],{"class":292},[286,39127,39129,39131,39133],{"class":39128,"line":469},[288,9405],[286,39130,2761],{"class":320},[286,39132,1276],{"class":364},[286,39134,39135],{"class":292},".products\n",[286,39137,39139,39142,39144,39146,39148,39150,39152,39154,39156],{"class":39138,"line":484},[288,9405],[286,39140,39141],{"class":292}," .",[286,39143,2225],{"class":300},[286,39145,456],{"class":292},[286,39147,877],{"class":357},[286,39149,2233],{"class":320},[286,39151,38886],{"class":292},[286,39153,9928],{"class":320},[286,39155,38891],{"class":364},[286,39157,441],{"class":292},[286,39159,39161,39163,39165],{"class":39160,"line":508},[288,9405],[286,39162,39141],{"class":292},[286,39164,38901],{"class":300},[286,39166,630],{"class":292},[286,39168,39170,39172,39174,39176,39178,39180,39182,39184,39186,39188,39190],{"class":39169,"line":513},[288,9405],[286,39171,39141],{"class":292},[286,39173,38911],{"class":300},[286,39175,2341],{"class":292},[286,39177,13185],{"class":357},[286,39179,235],{"class":292},[286,39181,38920],{"class":357},[286,39183,2347],{"class":292},[286,39185,609],{"class":320},[286,39187,38927],{"class":292},[286,39189,38930],{"class":320},[286,39191,38933],{"class":292},[286,39193,39195],{"class":39194,"line":528},[288,9405],[286,39196,1134],{"class":292},[286,39198,39200],{"class":39199,"line":547},[288,9405],[286,39201,550],{"class":292},[286,39203,39204],{"class":288,"line":553},[286,39205,402],{"class":292},[286,39207,39208,39210,39212],{"class":288,"line":558},[286,39209,793],{"class":292},[286,39211,297],{"class":296},[286,39213,314],{"class":292},[286,39215,39216],{"class":288,"line":586},[286,39217,336],{"emptyLinePlaceholder":6},[286,39219,39220,39222,39224],{"class":288,"line":591},[286,39221,293],{"class":292},[286,39223,810],{"class":296},[286,39225,314],{"class":292},[286,39227,39229,39231,39233,39235,39237,39239,39241,39243,39245],{"class":39228,"line":596},[288,9405],[286,39230,818],{"class":292},[286,39232,51],{"class":296},[286,39234,12792],{"class":300},[286,39236,307],{"class":292},[286,39238,38972],{"class":310},[286,39240,4324],{"class":300},[286,39242,307],{"class":292},[286,39244,38979],{"class":310},[286,39246,314],{"class":292},[286,39248,39249],{"class":288,"line":614},[286,39250,38986],{"class":292},[286,39252,39253,39255,39257],{"class":288,"line":622},[286,39254,962],{"class":292},[286,39256,51],{"class":296},[286,39258,314],{"class":292},[286,39260,39261,39263,39265],{"class":288,"line":633},[286,39262,793],{"class":292},[286,39264,810],{"class":296},[286,39266,314],{"class":292},[202,39268,39270,39271],{"id":39269},"_2-renderizar-componentes-con-v-for","2) Renderizar componentes con ",[26,39272,24887],{},[277,39274,39277],{"className":279,"code":39275,"filename":281,"highlights":39276,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport UserCard from '~/components/UserCard.vue'\n\nconst users = ref([\n { id: 'u1', name: 'Ana', role: 'Admin' },\n { id: 'u2', name: 'Luis', role: 'Editor' }\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUserCard v-for=\"user in users\" :key=\"user.id\" :user=\"user\" />\n\u003C/template>\n",[444],[26,39278,39279,39289,39299,39311,39315,39327,39345,39363,39367,39375,39379,39387,39414],{"__ignoreMap":9},[286,39280,39281,39283,39285,39287],{"class":288,"line":289},[286,39282,293],{"class":292},[286,39284,297],{"class":296},[286,39286,301],{"class":300},[286,39288,314],{"class":292},[286,39290,39291,39293,39295,39297],{"class":288,"line":317},[286,39292,321],{"class":320},[286,39294,11013],{"class":292},[286,39296,327],{"class":320},[286,39298,330],{"class":310},[286,39300,39301,39303,39306,39308],{"class":288,"line":333},[286,39302,321],{"class":320},[286,39304,39305],{"class":292}," UserCard ",[286,39307,327],{"class":320},[286,39309,39310],{"class":310}," '~/components/UserCard.vue'\n",[286,39312,39313],{"class":288,"line":339},[286,39314,336],{"emptyLinePlaceholder":6},[286,39316,39317,39319,39321,39323,39325],{"class":288,"line":354},[286,39318,413],{"class":320},[286,39320,11028],{"class":364},[286,39322,348],{"class":320},[286,39324,421],{"class":300},[286,39326,2111],{"class":292},[286,39328,39329,39331,39334,39336,39338,39340,39343],{"class":288,"line":368},[286,39330,2116],{"class":292},[286,39332,39333],{"class":310},"'u1'",[286,39335,22627],{"class":292},[286,39337,2136],{"class":310},[286,39339,27269],{"class":292},[286,39341,39342],{"class":310},"'Admin'",[286,39344,2139],{"class":292},[286,39346,39347,39349,39352,39354,39356,39358,39361],{"class":288,"line":379},[286,39348,2116],{"class":292},[286,39350,39351],{"class":310},"'u2'",[286,39353,22627],{"class":292},[286,39355,2161],{"class":310},[286,39357,27269],{"class":292},[286,39359,39360],{"class":310},"'Editor'",[286,39362,2186],{"class":292},[286,39364,39365],{"class":288,"line":389},[286,39366,2191],{"class":292},[286,39368,39369,39371,39373],{"class":288,"line":399},[286,39370,793],{"class":292},[286,39372,297],{"class":296},[286,39374,314],{"class":292},[286,39376,39377],{"class":288,"line":405},[286,39378,336],{"emptyLinePlaceholder":6},[286,39380,39381,39383,39385],{"class":288,"line":410},[286,39382,293],{"class":292},[286,39384,810],{"class":296},[286,39386,314],{"class":292},[286,39388,39390,39392,39394,39396,39398,39400,39402,39404,39406,39408,39410,39412],{"class":39389,"line":444},[288,9405],[286,39391,818],{"class":292},[286,39393,22615],{"class":296},[286,39395,12792],{"class":300},[286,39397,307],{"class":292},[286,39399,12797],{"class":310},[286,39401,4324],{"class":300},[286,39403,307],{"class":292},[286,39405,12804],{"class":310},[286,39407,27124],{"class":300},[286,39409,307],{"class":292},[286,39411,21525],{"class":310},[286,39413,4332],{"class":292},[286,39415,39416,39418,39420],{"class":288,"line":464},[286,39417,793],{"class":292},[286,39419,810],{"class":296},[286,39421,314],{"class":292},[277,39423,39426],{"className":279,"code":39424,"filename":979,"highlights":39425,"language":282,"meta":9,"style":9},"\u003Cscript>\nimport UserCard from '~/components/UserCard.vue'\n\nexport default {\n components: { UserCard },\n data() {\n return {\n users: [\n { id: 'u1', name: 'Ana', role: 'Admin' },\n { id: 'u2', name: 'Luis', role: 'Editor' }\n ]\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUserCard v-for=\"user in users\" :key=\"user.id\" :user=\"user\" />\n\u003C/template>\n",[528],[26,39427,39428,39436,39446,39450,39458,39463,39469,39475,39479,39495,39511,39515,39519,39523,39527,39535,39539,39547,39574],{"__ignoreMap":9},[286,39429,39430,39432,39434],{"class":288,"line":289},[286,39431,293],{"class":292},[286,39433,297],{"class":296},[286,39435,314],{"class":292},[286,39437,39438,39440,39442,39444],{"class":288,"line":317},[286,39439,321],{"class":320},[286,39441,39305],{"class":292},[286,39443,327],{"class":320},[286,39445,39310],{"class":310},[286,39447,39448],{"class":288,"line":333},[286,39449,336],{"emptyLinePlaceholder":6},[286,39451,39452,39454,39456],{"class":288,"line":339},[286,39453,1065],{"class":320},[286,39455,1068],{"class":320},[286,39457,351],{"class":292},[286,39459,39460],{"class":288,"line":354},[286,39461,39462],{"class":292}," components: { UserCard },\n",[286,39464,39465,39467],{"class":288,"line":368},[286,39466,1094],{"class":300},[286,39468,481],{"class":292},[286,39470,39471,39473],{"class":288,"line":379},[286,39472,1101],{"class":320},[286,39474,351],{"class":292},[286,39476,39477],{"class":288,"line":389},[286,39478,22901],{"class":292},[286,39480,39481,39483,39485,39487,39489,39491,39493],{"class":288,"line":399},[286,39482,2671],{"class":292},[286,39484,39333],{"class":310},[286,39486,22627],{"class":292},[286,39488,2136],{"class":310},[286,39490,27269],{"class":292},[286,39492,39342],{"class":310},[286,39494,2139],{"class":292},[286,39496,39497,39499,39501,39503,39505,39507,39509],{"class":288,"line":405},[286,39498,2671],{"class":292},[286,39500,39351],{"class":310},[286,39502,22627],{"class":292},[286,39504,2161],{"class":310},[286,39506,27269],{"class":292},[286,39508,39360],{"class":310},[286,39510,2186],{"class":292},[286,39512,39513],{"class":288,"line":410},[286,39514,2732],{"class":292},[286,39516,39517],{"class":288,"line":444},[286,39518,1134],{"class":292},[286,39520,39521],{"class":288,"line":464},[286,39522,550],{"class":292},[286,39524,39525],{"class":288,"line":469},[286,39526,402],{"class":292},[286,39528,39529,39531,39533],{"class":288,"line":484},[286,39530,793],{"class":292},[286,39532,297],{"class":296},[286,39534,314],{"class":292},[286,39536,39537],{"class":288,"line":508},[286,39538,336],{"emptyLinePlaceholder":6},[286,39540,39541,39543,39545],{"class":288,"line":513},[286,39542,293],{"class":292},[286,39544,810],{"class":296},[286,39546,314],{"class":292},[286,39548,39550,39552,39554,39556,39558,39560,39562,39564,39566,39568,39570,39572],{"class":39549,"line":528},[288,9405],[286,39551,818],{"class":292},[286,39553,22615],{"class":296},[286,39555,12792],{"class":300},[286,39557,307],{"class":292},[286,39559,12797],{"class":310},[286,39561,4324],{"class":300},[286,39563,307],{"class":292},[286,39565,12804],{"class":310},[286,39567,27124],{"class":300},[286,39569,307],{"class":292},[286,39571,21525],{"class":310},[286,39573,4332],{"class":292},[286,39575,39576,39578,39580],{"class":288,"line":547},[286,39577,793],{"class":292},[286,39579,810],{"class":296},[286,39581,314],{"class":292},[202,39583,39585],{"id":39584},"_3-listas-anidadas-categorías-y-productos","3) Listas anidadas (categorías y productos)",[277,39587,39590],{"className":279,"code":39588,"filename":281,"highlights":39589,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst categories = ref([\n {\n id: 'c1',\n name: 'Periféricos',\n products: [\n { id: 'p1', name: 'Mouse' },\n { id: 'p2', name: 'Teclado' }\n ]\n }\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Csection v-for=\"category in categories\" :key=\"category.id\">\n \u003Ch3>{{ category.name }}\u003C/h3>\n \u003Cli v-for=\"product in category.products\" :key=\"product.id\">\n {{ product.name }}\n \u003C/li>\n \u003C/section>\n\u003C/template>\n",[513,547],[26,39591,39592,39602,39612,39616,39629,39634,39644,39654,39659,39673,39687,39692,39696,39700,39708,39712,39720,39743,39756,39778,39783,39791,39799],{"__ignoreMap":9},[286,39593,39594,39596,39598,39600],{"class":288,"line":289},[286,39595,293],{"class":292},[286,39597,297],{"class":296},[286,39599,301],{"class":300},[286,39601,314],{"class":292},[286,39603,39604,39606,39608,39610],{"class":288,"line":317},[286,39605,321],{"class":320},[286,39607,11013],{"class":292},[286,39609,327],{"class":320},[286,39611,330],{"class":310},[286,39613,39614],{"class":288,"line":333},[286,39615,336],{"emptyLinePlaceholder":6},[286,39617,39618,39620,39623,39625,39627],{"class":288,"line":339},[286,39619,413],{"class":320},[286,39621,39622],{"class":364}," categories",[286,39624,348],{"class":320},[286,39626,421],{"class":300},[286,39628,2111],{"class":292},[286,39630,39631],{"class":288,"line":354},[286,39632,39633],{"class":292}," {\n",[286,39635,39636,39639,39642],{"class":288,"line":368},[286,39637,39638],{"class":292}," id: ",[286,39640,39641],{"class":310},"'c1'",[286,39643,1085],{"class":292},[286,39645,39646,39649,39652],{"class":288,"line":379},[286,39647,39648],{"class":292}," name: ",[286,39650,39651],{"class":310},"'Periféricos'",[286,39653,1085],{"class":292},[286,39655,39656],{"class":288,"line":389},[286,39657,39658],{"class":292}," products: [\n",[286,39660,39661,39664,39667,39669,39671],{"class":288,"line":399},[286,39662,39663],{"class":292}," { id: ",[286,39665,39666],{"class":310},"'p1'",[286,39668,22627],{"class":292},[286,39670,38801],{"class":310},[286,39672,2139],{"class":292},[286,39674,39675,39677,39680,39682,39685],{"class":288,"line":405},[286,39676,39663],{"class":292},[286,39678,39679],{"class":310},"'p2'",[286,39681,22627],{"class":292},[286,39683,39684],{"class":310},"'Teclado'",[286,39686,2186],{"class":292},[286,39688,39689],{"class":288,"line":410},[286,39690,39691],{"class":292}," ]\n",[286,39693,39694],{"class":288,"line":444},[286,39695,550],{"class":292},[286,39697,39698],{"class":288,"line":464},[286,39699,2191],{"class":292},[286,39701,39702,39704,39706],{"class":288,"line":469},[286,39703,793],{"class":292},[286,39705,297],{"class":296},[286,39707,314],{"class":292},[286,39709,39710],{"class":288,"line":484},[286,39711,336],{"emptyLinePlaceholder":6},[286,39713,39714,39716,39718],{"class":288,"line":508},[286,39715,293],{"class":292},[286,39717,810],{"class":296},[286,39719,314],{"class":292},[286,39721,39723,39725,39727,39729,39731,39734,39736,39738,39741],{"class":39722,"line":513},[288,9405],[286,39724,818],{"class":292},[286,39726,4128],{"class":296},[286,39728,12792],{"class":300},[286,39730,307],{"class":292},[286,39732,39733],{"class":310},"\"category in categories\"",[286,39735,4324],{"class":300},[286,39737,307],{"class":292},[286,39739,39740],{"class":310},"\"category.id\"",[286,39742,314],{"class":292},[286,39744,39745,39747,39749,39752,39754],{"class":288,"line":528},[286,39746,837],{"class":292},[286,39748,202],{"class":296},[286,39750,39751],{"class":292},">{{ category.name }}\u003C/",[286,39753,202],{"class":296},[286,39755,314],{"class":292},[286,39757,39759,39761,39763,39765,39767,39770,39772,39774,39776],{"class":39758,"line":547},[288,9405],[286,39760,837],{"class":292},[286,39762,51],{"class":296},[286,39764,12792],{"class":300},[286,39766,307],{"class":292},[286,39768,39769],{"class":310},"\"product in category.products\"",[286,39771,4324],{"class":300},[286,39773,307],{"class":292},[286,39775,38979],{"class":310},[286,39777,314],{"class":292},[286,39779,39780],{"class":288,"line":553},[286,39781,39782],{"class":292}," {{ product.name }}\n",[286,39784,39785,39787,39789],{"class":288,"line":558},[286,39786,930],{"class":292},[286,39788,51],{"class":296},[286,39790,314],{"class":292},[286,39792,39793,39795,39797],{"class":288,"line":586},[286,39794,962],{"class":292},[286,39796,4128],{"class":296},[286,39798,314],{"class":292},[286,39800,39801,39803,39805],{"class":288,"line":591},[286,39802,793],{"class":292},[286,39804,810],{"class":296},[286,39806,314],{"class":292},[277,39808,39811],{"className":279,"code":39809,"filename":979,"highlights":39810,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n categories: [\n {\n id: 'c1',\n name: 'Periféricos',\n products: [\n { id: 'p1', name: 'Mouse' },\n { id: 'p2', name: 'Teclado' }\n ]\n }\n ]\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Csection v-for=\"category in categories\" :key=\"category.id\">\n \u003Ch3>{{ category.name }}\u003C/h3>\n \u003Cli v-for=\"product in category.products\" :key=\"product.id\">\n {{ product.name }}\n \u003C/li>\n \u003C/section>\n\u003C/template>\n",[558,591],[26,39812,39813,39821,39829,39835,39841,39846,39851,39860,39869,39874,39887,39899,39904,39908,39912,39916,39920,39924,39932,39936,39944,39965,39977,39998,40002,40010,40018],{"__ignoreMap":9},[286,39814,39815,39817,39819],{"class":288,"line":289},[286,39816,293],{"class":292},[286,39818,297],{"class":296},[286,39820,314],{"class":292},[286,39822,39823,39825,39827],{"class":288,"line":317},[286,39824,1065],{"class":320},[286,39826,1068],{"class":320},[286,39828,351],{"class":292},[286,39830,39831,39833],{"class":288,"line":333},[286,39832,1094],{"class":300},[286,39834,481],{"class":292},[286,39836,39837,39839],{"class":288,"line":339},[286,39838,1101],{"class":320},[286,39840,351],{"class":292},[286,39842,39843],{"class":288,"line":354},[286,39844,39845],{"class":292}," categories: [\n",[286,39847,39848],{"class":288,"line":368},[286,39849,39850],{"class":292}," {\n",[286,39852,39853,39856,39858],{"class":288,"line":379},[286,39854,39855],{"class":292}," id: ",[286,39857,39641],{"class":310},[286,39859,1085],{"class":292},[286,39861,39862,39865,39867],{"class":288,"line":389},[286,39863,39864],{"class":292}," name: ",[286,39866,39651],{"class":310},[286,39868,1085],{"class":292},[286,39870,39871],{"class":288,"line":399},[286,39872,39873],{"class":292}," products: [\n",[286,39875,39876,39879,39881,39883,39885],{"class":288,"line":405},[286,39877,39878],{"class":292}," { id: ",[286,39880,39666],{"class":310},[286,39882,22627],{"class":292},[286,39884,38801],{"class":310},[286,39886,2139],{"class":292},[286,39888,39889,39891,39893,39895,39897],{"class":288,"line":410},[286,39890,39878],{"class":292},[286,39892,39679],{"class":310},[286,39894,22627],{"class":292},[286,39896,39684],{"class":310},[286,39898,2186],{"class":292},[286,39900,39901],{"class":288,"line":444},[286,39902,39903],{"class":292}," ]\n",[286,39905,39906],{"class":288,"line":464},[286,39907,8875],{"class":292},[286,39909,39910],{"class":288,"line":469},[286,39911,2732],{"class":292},[286,39913,39914],{"class":288,"line":484},[286,39915,1134],{"class":292},[286,39917,39918],{"class":288,"line":508},[286,39919,550],{"class":292},[286,39921,39922],{"class":288,"line":513},[286,39923,402],{"class":292},[286,39925,39926,39928,39930],{"class":288,"line":528},[286,39927,793],{"class":292},[286,39929,297],{"class":296},[286,39931,314],{"class":292},[286,39933,39934],{"class":288,"line":547},[286,39935,336],{"emptyLinePlaceholder":6},[286,39937,39938,39940,39942],{"class":288,"line":553},[286,39939,293],{"class":292},[286,39941,810],{"class":296},[286,39943,314],{"class":292},[286,39945,39947,39949,39951,39953,39955,39957,39959,39961,39963],{"class":39946,"line":558},[288,9405],[286,39948,818],{"class":292},[286,39950,4128],{"class":296},[286,39952,12792],{"class":300},[286,39954,307],{"class":292},[286,39956,39733],{"class":310},[286,39958,4324],{"class":300},[286,39960,307],{"class":292},[286,39962,39740],{"class":310},[286,39964,314],{"class":292},[286,39966,39967,39969,39971,39973,39975],{"class":288,"line":586},[286,39968,837],{"class":292},[286,39970,202],{"class":296},[286,39972,39751],{"class":292},[286,39974,202],{"class":296},[286,39976,314],{"class":292},[286,39978,39980,39982,39984,39986,39988,39990,39992,39994,39996],{"class":39979,"line":591},[288,9405],[286,39981,837],{"class":292},[286,39983,51],{"class":296},[286,39985,12792],{"class":300},[286,39987,307],{"class":292},[286,39989,39769],{"class":310},[286,39991,4324],{"class":300},[286,39993,307],{"class":292},[286,39995,38979],{"class":310},[286,39997,314],{"class":292},[286,39999,40000],{"class":288,"line":596},[286,40001,39782],{"class":292},[286,40003,40004,40006,40008],{"class":288,"line":614},[286,40005,930],{"class":292},[286,40007,51],{"class":296},[286,40009,314],{"class":292},[286,40011,40012,40014,40016],{"class":288,"line":622},[286,40013,962],{"class":292},[286,40015,4128],{"class":296},[286,40017,314],{"class":292},[286,40019,40020,40022,40024],{"class":288,"line":633},[286,40021,793],{"class":292},[286,40023,810],{"class":296},[286,40025,314],{"class":292},[40,40027,40029,40030],{"id":40028},"errores-comunes-con-v-for","Errores comunes con ",[26,40031,24887],{},[202,40033,20828,40035,37102,40037,40039],{"id":40034},"_1-usar-index-como-key-en-listas-mutables",[26,40036,37101],{},[26,40038,1796],{}," en listas mutables",[277,40041,40044],{"className":279,"code":40042,"filename":34218,"highlights":40043,"language":282,"meta":9,"style":9},"\u003Cli v-for=\"(item, index) in items\" :key=\"index\">\n {{ item.name }}\n\u003C/li>\n",[289],[26,40045,40046,40082,40087],{"__ignoreMap":9},[286,40047,40049,40051,40053,40055,40057,40059,40062,40064,40066,40068,40070,40072,40074,40076,40078,40080],{"class":40048,"line":289},[288,9405],[286,40050,293],{"class":292},[286,40052,51],{"class":296},[286,40054,12792],{"class":320},[286,40056,307],{"class":292},[286,40058,874],{"class":310},[286,40060,40061],{"class":292},"(item, index) ",[286,40063,38447],{"class":320},[286,40065,38361],{"class":292},[286,40067,874],{"class":310},[286,40069,6251],{"class":292},[286,40071,1796],{"class":300},[286,40073,307],{"class":292},[286,40075,874],{"class":310},[286,40077,37101],{"class":292},[286,40079,874],{"class":310},[286,40081,314],{"class":292},[286,40083,40084],{"class":288,"line":317},[286,40085,40086],{"class":292}," {{ item.name }}\n",[286,40088,40089,40091,40093],{"class":288,"line":333},[286,40090,793],{"class":292},[286,40092,51],{"class":296},[286,40094,314],{"class":292},[31,40096,40097],{},"Esto puede romper el estado de cada fila al reordenar o insertar elementos.",[3118,40099,40100],{},[31,40101,40102,40103,40105],{},"Usa una clave estable (",[26,40104,38462],{},") cuando exista.",[202,40107,40109,40110,1704,40112,40114],{"id":40108},"_2-mezclar-v-if-y-v-for-en-el-mismo-nodo","2) Mezclar ",[26,40111,7545],{},[26,40113,24887],{}," en el mismo nodo",[277,40116,40119],{"className":279,"code":40117,"filename":28351,"highlights":40118,"language":282,"meta":9,"style":9},"\u003Cli v-for=\"user in users\" v-if=\"user.active\" :key=\"user.id\">\n {{ user.name }}\n\u003C/li>\n",[289],[26,40120,40121,40169,40174],{"__ignoreMap":9},[286,40122,40124,40126,40128,40130,40132,40134,40137,40139,40141,40143,40145,40147,40149,40152,40154,40156,40158,40160,40162,40165,40167],{"class":40123,"line":289},[288,9405],[286,40125,293],{"class":292},[286,40127,51],{"class":296},[286,40129,12792],{"class":320},[286,40131,307],{"class":292},[286,40133,874],{"class":310},[286,40135,40136],{"class":292},"user ",[286,40138,38447],{"class":320},[286,40140,11028],{"class":292},[286,40142,874],{"class":310},[286,40144,842],{"class":320},[286,40146,307],{"class":292},[286,40148,874],{"class":310},[286,40150,40151],{"class":292},"user.active",[286,40153,874],{"class":310},[286,40155,6251],{"class":292},[286,40157,1796],{"class":300},[286,40159,307],{"class":292},[286,40161,874],{"class":310},[286,40163,40164],{"class":292},"user.id",[286,40166,874],{"class":310},[286,40168,314],{"class":292},[286,40170,40171],{"class":288,"line":317},[286,40172,40173],{"class":292}," {{ user.name }}\n",[286,40175,40176,40178,40180],{"class":288,"line":333},[286,40177,793],{"class":292},[286,40179,51],{"class":296},[286,40181,314],{"class":292},[3118,40183,40184],{},[31,40185,40186,40187,40189],{},"Crea una lista ",[26,40188,1739],{}," filtrada e itera esa lista.",[202,40191,40193,40194],{"id":40192},"_3-mutar-directamente-el-resultado-de-un-computed","3) Mutar directamente el resultado de un ",[26,40195,1739],{},[31,40197,40198],{},"Si derives una lista ordenada/filtrada, no la mutas directamente.\nLa fuente de verdad debe seguir siendo el estado original.",[202,40200,26781,40202,40204],{"id":40201},"_4-key-duplicadas",[26,40203,1796],{}," duplicadas",[31,40206,40207,40208,40210],{},"Si dos elementos comparten la misma ",[26,40209,1796],{},", Vue no puede hacer diff correctamente.\nResultado: renders inconsistentes y bugs visuales difíciles de depurar.",[40,40212,40214],{"id":40213},"buenas-prácticas-rápidas","Buenas prácticas rápidas",[48,40216,40217,40224,40229,40232,40238],{},[51,40218,20784,40219,40221,40222,114],{},[26,40220,22049],{}," estable para ",[26,40223,37010],{},[51,40225,40226,40227,114],{},"Prefiltra y ordena con ",[26,40228,1739],{},[51,40230,40231],{},"Evita lógica compleja en el template.",[51,40233,40234,40235,40237],{},"Mantén los bloques ",[26,40236,24887],{}," pequeños y legibles.",[51,40239,40240],{},"En listas grandes, considera paginación o virtualización.",[40,40242,17678],{"id":17677},[31,40244,40245,40247],{},[26,40246,24887],{}," no es solo \"pintar arrays\".\nEs una pieza central del renderizado declarativo en Vue.",[31,40249,40250],{},"Si aplicas estas reglas:",[48,40252,40253,40258,40263],{},[51,40254,40255,40257],{},[26,40256,1796],{}," estable",[51,40259,40260,40261],{},"Listas derivadas con ",[26,40262,1739],{},[51,40264,40265],{},"Estructura limpia del template",[31,40267,40268],{},"Vas a tener componentes más predecibles, más performantes y mucho más fáciles de mantener.",[1614,40270,40271],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":9,"searchDepth":317,"depth":317,"links":40273},[40274,40275,40277,40278,40279,40280,40288,40295,40306,40307],{"id":20631,"depth":317,"text":20632},{"id":37056,"depth":317,"text":40276},"Cuándo usar v-for",{"id":165,"depth":317,"text":166},{"id":37108,"depth":317,"text":37109},{"id":37360,"depth":317,"text":37361},{"id":37780,"depth":317,"text":40281,"children":40282},"Nivel intermedio: índice, objetos y template v-for",[40283,40285,40286],{"id":37787,"depth":333,"text":40284},"1) Índice en v-for",{"id":38038,"depth":333,"text":38039},{"id":38321,"depth":333,"text":40287},"3) Repetir varios nodos con template",{"id":38710,"depth":317,"text":38711,"children":40289},[40290,40292,40294],{"id":38714,"depth":333,"text":40291},"1) Prefiltrar y ordenar con computed",{"id":39269,"depth":333,"text":40293},"2) Renderizar componentes con v-for",{"id":39584,"depth":333,"text":39585},{"id":40028,"depth":317,"text":40296,"children":40297},"Errores comunes con v-for",[40298,40300,40302,40304],{"id":40034,"depth":333,"text":40299},"1) Usar index como key en listas mutables",{"id":40108,"depth":333,"text":40301},"2) Mezclar v-if y v-for en el mismo nodo",{"id":40192,"depth":333,"text":40303},"3) Mutar directamente el resultado de un computed",{"id":40201,"depth":333,"text":40305},"4) key duplicadas",{"id":40213,"depth":317,"text":40214},{"id":17677,"depth":317,"text":17678},"https://res.cloudinary.com/denj4fg7f/image/upload/v1770690176/directives-vue-v-for-guide_itbdds.png","Imagen temporal para portada del artículo sobre v-for en Vue","2026-02-10","Aprende a dominar v-for en Vue con ejemplos prácticos desde lo más básico hasta patrones avanzados, uso correcto de key, errores comunes y buenas prácticas en Composition API y Options API.",{"script":40313},[40314],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":40315},[40316],{"headline":40317,"author":40318,"datePublished":40319,"@type":1647},"Directiva v-for en Vue: guía completa de básico a avanzado",{"name":1644,"@type":1645},"2026-02-09T21:30:00-05:00",{"updatedAt":40319,"coverCaption":17766,"author":1644,"keywords":40321},[1652,24887,40322,1796,281,979,10652],"listas","/blog/directives-vue-v-for-guide.es",[40325],{"headline":40317,"author":40326,"datePublished":40319,"@type":1647},{"name":1644,"@type":1645},{"title":36981,"description":40311},"blog/directives-vue-v-for-guide.es",[40330,40331,40333,40334],{"tag":20595,"color":20596},{"tag":40332,"color":3175},"Listas",{"tag":21898,"color":21899},{"tag":9081,"color":9082},"XUaxKVi8KzZe0IYaQ4SYj_q5sPhfP5avdlXkrHvmKjc",{"id":40337,"title":40338,"body":40339,"cover":42178,"coverAlt":42179,"date":42180,"description":42181,"draft":12,"extension":1635,"head":42182,"locale":1648,"meta":42190,"navigation":6,"path":42195,"schemaOrg":42196,"seo":42199,"series":20589,"seriesDescription":20590,"seriesOrder":317,"seriesTitle":20591,"slug":1663,"stem":42200,"tags":42201,"__hash__":42208},"blog/blog/directives-vue-v-if-v-else-v-show-guide.es.md","Directivas en Vue: v-if, v-else y v-show",{"type":18,"value":40340,"toc":42152},[40341,40352,40366,40393,40403,40407,40411,40427,40432,40443,40454,40462,40473,40476,40491,40495,40502,40506,40514,40526,40530,40565,40573,40576,40814,41057,41077,41083,41091,41277,41465,41469,41476,41487,41496,41506,41516,41761,41994,41996,42005,42007,42058,42070,42076,42091,42098,42111,42113,42141,42149],[21,40342,40344,235,40346,1704,40349,40351],{"id":40343},"v-if-v-else-y-v-show-en-vue-cuándo-usar-cada-una",[26,40345,7545],{},[26,40347,40348],{},"v-else",[26,40350,7708],{}," en Vue: cuándo usar cada una",[31,40353,40354,40355,235,40357,1704,40359,40361,40362,40365],{},"Las directivas ",[26,40356,7545],{},[26,40358,40348],{},[26,40360,7708],{}," sirven para ",[82,40363,40364],{},"mostrar u ocultar contenido"," en función de una condición reactiva.\nLa diferencia clave —la que evita bugs sutiles y problemas de rendimiento— es esta:",[48,40367,40368,40380],{},[51,40369,40370,20706,40376,40379],{},[82,40371,40372,5252,40374],{},[26,40373,7545],{},[26,40375,40348],{},[3299,40377,40378],{},"crean o destruyen"," elementos del DOM.",[51,40381,40382,20706,40386,40389,40390,114],{},[82,40383,40384],{},[26,40385,7708],{},[3299,40387,40388],{},"no destruye nada","; solo alterna ",[26,40391,40392],{},"display: none",[31,40394,40395,40396,12501,40399,40402],{},"Si lo piensas como ",[82,40397,40398],{},"“¿Esto existe?”",[82,40400,40401],{},"“¿Esto se ve?”",", ya vas por buen camino.",[40,40404,40406],{"id":40405},"qué-hace-cada-una","Qué hace cada una",[202,40408,40409],{"id":7545},[26,40410,7545],{},[31,40412,40413,40414,40417,40418,40420,40421,40423,40424,114],{},"Renderiza el elemento ",[82,40415,40416],{},"solo si"," la condición es ",[26,40419,2156],{},".\nSi es ",[26,40422,2130],{},", el elemento ",[82,40425,40426],{},"no existe en el DOM",[31,40428,40429],{},[82,40430,40431],{},"Útil cuando:",[48,40433,40434,40437,40440],{},[51,40435,40436],{},"El contenido es pesado (componentes grandes, listas, gráficos)",[51,40438,40439],{},"No debería existir si no se cumple la condición (permisos de UI, flujos sensibles)",[51,40441,40442],{},"Se muestra pocas veces u ocasionalmente",[3118,40444,40445],{},[31,40446,40447,40449,40450,40453],{},[26,40448,7545],{}," tiene un costo mayor al alternar, porque implica ",[82,40451,40452],{},"montaje y desmontaje"," del árbol de componentes.",[202,40455,40457,1704,40459],{"id":40456},"v-else-y-v-else-if",[26,40458,40348],{},[26,40460,40461],{},"v-else-if",[31,40463,40464,40465,40468,40469,128,40471,114],{},"Se usan ",[82,40466,40467],{},"inmediatamente después"," de un ",[26,40470,7545],{},[26,40472,40461],{},[31,40474,40475],{},"Reglas importantes:",[48,40477,40478,40485],{},[51,40479,40480,40481,40484],{},"Deben estar ",[82,40482,40483],{},"adyacentes"," (sin nodos intermedios).",[51,40486,40487,40488,114],{},"Vue los interpreta como ",[82,40489,40490],{},"un único bloque condicional",[202,40492,40493],{"id":7708},[26,40494,7708],{},[31,40496,40497,40498,40501],{},"El elemento ",[82,40499,40500],{},"siempre se renderiza"," (existe en el DOM), pero se muestra u oculta con CSS.",[31,40503,40504],{},[82,40505,40431],{},[48,40507,40508,40511],{},[51,40509,40510],{},"La visibilidad cambia con frecuencia (toggles, menús, paneles)",[51,40512,40513],{},"Quieres evitar el costo de montar/desmontar",[3118,40515,40516],{},[31,40517,40518,10976,40520,40525],{},[26,40519,7708],{},[82,40521,40522,40523],{},"no funciona con ",[26,40524,26166],{},", porque no es un elemento real.\nEl contenido sigue en el DOM: foco, tab order y accesibilidad pueden verse afectados si no se gestiona bien.",[40,40527,40529],{"id":40528},"resumen-rápido-cuál-usar","Resumen rápido: cuál usar",[48,40531,40532,40543,40556],{},[51,40533,20784,40534,40538,40539,40542],{},[82,40535,40536],{},[26,40537,7545],{}," cuando el contenido ",[82,40540,40541],{},"no debe existir"," si la condición no se cumple.",[51,40544,20784,40545,40538,40549,40552,40553,114],{},[82,40546,40547],{},[26,40548,7708],{},[82,40550,40551],{},"solo debe ocultarse"," y el toggle será ",[82,40554,40555],{},"frecuente",[51,40557,20784,40558,40562,40563,114],{},[82,40559,40560],{},[26,40561,40348],{}," para el caso alternativo inmediato de un ",[26,40564,7545],{},[40,40566,40568,40569,28162,40571,29],{"id":40567},"ejemplo-1-login-v-if-v-else","Ejemplo 1: Login (",[26,40570,7545],{},[26,40572,40348],{},[31,40574,40575],{},"Cuando una persona está autenticada, muestras el panel; si no, un CTA para iniciar sesión.",[277,40577,40580],{"className":279,"code":40578,"filename":281,"highlights":40579,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isLoggedIn = ref(false);\n\nfunction toggleLogin() {\n isLoggedIn.value = !isLoggedIn.value;\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"toggleLogin\">\n {{ isLoggedIn ? \"Log out\" : \"Log in\" }}\n \u003C/button>\n\n \u003Csection v-if=\"isLoggedIn\">\n \u003Ch2>Welcome back\u003C/h2>\n \u003Cp>You have access to your dashboard.\u003C/p>\n \u003C/section>\n\n \u003Csection v-else>\n \u003Ch2>Please log in\u003C/h2>\n \u003Cp>You need an account to continue.\u003C/p>\n \u003C/section>\n\u003C/template>\n",[379,508,558],[26,40581,40582,40592,40604,40608,40625,40629,40638,40651,40655,40663,40667,40675,40690,40695,40703,40707,40723,40736,40749,40757,40761,40772,40785,40798,40806],{"__ignoreMap":9},[286,40583,40584,40586,40588,40590],{"class":288,"line":289},[286,40585,293],{"class":292},[286,40587,297],{"class":296},[286,40589,301],{"class":300},[286,40591,314],{"class":292},[286,40593,40594,40596,40598,40600,40602],{"class":288,"line":317},[286,40595,321],{"class":320},[286,40597,11013],{"class":292},[286,40599,327],{"class":320},[286,40601,18155],{"class":310},[286,40603,18158],{"class":292},[286,40605,40606],{"class":288,"line":333},[286,40607,336],{"emptyLinePlaceholder":6},[286,40609,40610,40612,40615,40617,40619,40621,40623],{"class":288,"line":339},[286,40611,413],{"class":320},[286,40613,40614],{"class":364}," isLoggedIn",[286,40616,348],{"class":320},[286,40618,421],{"class":300},[286,40620,456],{"class":292},[286,40622,2130],{"class":364},[286,40624,18284],{"class":292},[286,40626,40627],{"class":288,"line":354},[286,40628,336],{"emptyLinePlaceholder":6},[286,40630,40631,40633,40636],{"class":288,"line":368},[286,40632,2467],{"class":320},[286,40634,40635],{"class":300}," toggleLogin",[286,40637,481],{"class":292},[286,40639,40641,40644,40646,40648],{"class":40640,"line":379},[288,9405],[286,40642,40643],{"class":292}," isLoggedIn.value ",[286,40645,307],{"class":320},[286,40647,2295],{"class":320},[286,40649,40650],{"class":292},"isLoggedIn.value;\n",[286,40652,40653],{"class":288,"line":389},[286,40654,402],{"class":292},[286,40656,40657,40659,40661],{"class":288,"line":399},[286,40658,793],{"class":292},[286,40660,297],{"class":296},[286,40662,314],{"class":292},[286,40664,40665],{"class":288,"line":405},[286,40666,336],{"emptyLinePlaceholder":6},[286,40668,40669,40671,40673],{"class":288,"line":410},[286,40670,293],{"class":292},[286,40672,810],{"class":296},[286,40674,314],{"class":292},[286,40676,40677,40679,40681,40683,40685,40688],{"class":288,"line":444},[286,40678,818],{"class":292},[286,40680,4274],{"class":296},[286,40682,4285],{"class":300},[286,40684,307],{"class":292},[286,40686,40687],{"class":310},"\"toggleLogin\"",[286,40689,314],{"class":292},[286,40691,40692],{"class":288,"line":464},[286,40693,40694],{"class":292}," {{ isLoggedIn ? \"Log out\" : \"Log in\" }}\n",[286,40696,40697,40699,40701],{"class":288,"line":469},[286,40698,962],{"class":292},[286,40700,4274],{"class":296},[286,40702,314],{"class":292},[286,40704,40705],{"class":288,"line":484},[286,40706,336],{"emptyLinePlaceholder":6},[286,40708,40710,40712,40714,40716,40718,40721],{"class":40709,"line":508},[288,9405],[286,40711,818],{"class":292},[286,40713,4128],{"class":296},[286,40715,842],{"class":300},[286,40717,307],{"class":292},[286,40719,40720],{"class":310},"\"isLoggedIn\"",[286,40722,314],{"class":292},[286,40724,40725,40727,40729,40732,40734],{"class":288,"line":513},[286,40726,837],{"class":292},[286,40728,40],{"class":296},[286,40730,40731],{"class":292},">Welcome back\u003C/",[286,40733,40],{"class":296},[286,40735,314],{"class":292},[286,40737,40738,40740,40742,40745,40747],{"class":288,"line":528},[286,40739,837],{"class":292},[286,40741,31],{"class":296},[286,40743,40744],{"class":292},">You have access to your dashboard.\u003C/",[286,40746,31],{"class":296},[286,40748,314],{"class":292},[286,40750,40751,40753,40755],{"class":288,"line":547},[286,40752,962],{"class":292},[286,40754,4128],{"class":296},[286,40756,314],{"class":292},[286,40758,40759],{"class":288,"line":553},[286,40760,336],{"emptyLinePlaceholder":6},[286,40762,40764,40766,40768,40770],{"class":40763,"line":558},[288,9405],[286,40765,818],{"class":292},[286,40767,4128],{"class":296},[286,40769,949],{"class":300},[286,40771,314],{"class":292},[286,40773,40774,40776,40778,40781,40783],{"class":288,"line":586},[286,40775,837],{"class":292},[286,40777,40],{"class":296},[286,40779,40780],{"class":292},">Please log in\u003C/",[286,40782,40],{"class":296},[286,40784,314],{"class":292},[286,40786,40787,40789,40791,40794,40796],{"class":288,"line":591},[286,40788,837],{"class":292},[286,40790,31],{"class":296},[286,40792,40793],{"class":292},">You need an account to continue.\u003C/",[286,40795,31],{"class":296},[286,40797,314],{"class":292},[286,40799,40800,40802,40804],{"class":288,"line":596},[286,40801,962],{"class":292},[286,40803,4128],{"class":296},[286,40805,314],{"class":292},[286,40807,40808,40810,40812],{"class":288,"line":614},[286,40809,793],{"class":292},[286,40811,810],{"class":296},[286,40813,314],{"class":292},[277,40815,40818],{"className":279,"code":40816,"filename":979,"highlights":40817,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n isLoggedIn: false,\n };\n },\n methods: {\n toggleLogin() {\n this.isLoggedIn = !this.isLoggedIn;\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"toggleLogin\">\n {{ isLoggedIn ? \"Log out\" : \"Log in\" }}\n \u003C/button>\n\n \u003Csection v-if=\"isLoggedIn\">\n \u003Ch2>Welcome back\u003C/h2>\n \u003Cp>You have access to your dashboard.\u003C/p>\n \u003C/section>\n\n \u003Csection v-else>\n \u003Ch2>Please log in\u003C/h2>\n \u003Cp>You need an account to continue.\u003C/p>\n \u003C/section>\n\u003C/template>\n",[405,558,622],[26,40819,40820,40828,40836,40842,40848,40857,40861,40865,40869,40876,40893,40897,40901,40905,40913,40917,40925,40939,40943,40951,40955,40970,40982,40994,41002,41006,41017,41029,41041,41049],{"__ignoreMap":9},[286,40821,40822,40824,40826],{"class":288,"line":289},[286,40823,293],{"class":292},[286,40825,297],{"class":296},[286,40827,314],{"class":292},[286,40829,40830,40832,40834],{"class":288,"line":317},[286,40831,1065],{"class":320},[286,40833,1068],{"class":320},[286,40835,351],{"class":292},[286,40837,40838,40840],{"class":288,"line":333},[286,40839,1094],{"class":300},[286,40841,481],{"class":292},[286,40843,40844,40846],{"class":288,"line":339},[286,40845,1101],{"class":320},[286,40847,351],{"class":292},[286,40849,40850,40853,40855],{"class":288,"line":354},[286,40851,40852],{"class":292}," isLoggedIn: ",[286,40854,2130],{"class":364},[286,40856,1085],{"class":292},[286,40858,40859],{"class":288,"line":368},[286,40860,18485],{"class":292},[286,40862,40863],{"class":288,"line":379},[286,40864,1139],{"class":292},[286,40866,40867],{"class":288,"line":389},[286,40868,1148],{"class":292},[286,40870,40871,40874],{"class":288,"line":399},[286,40872,40873],{"class":300}," toggleLogin",[286,40875,481],{"class":292},[286,40877,40879,40881,40884,40886,40888,40890],{"class":40878,"line":405},[288,9405],[286,40880,1220],{"class":364},[286,40882,40883],{"class":292},".isLoggedIn ",[286,40885,307],{"class":320},[286,40887,2295],{"class":320},[286,40889,1349],{"class":364},[286,40891,40892],{"class":292},".isLoggedIn;\n",[286,40894,40895],{"class":288,"line":410},[286,40896,7023],{"class":292},[286,40898,40899],{"class":288,"line":444},[286,40900,1139],{"class":292},[286,40902,40903],{"class":288,"line":464},[286,40904,18262],{"class":292},[286,40906,40907,40909,40911],{"class":288,"line":469},[286,40908,793],{"class":292},[286,40910,297],{"class":296},[286,40912,314],{"class":292},[286,40914,40915],{"class":288,"line":484},[286,40916,336],{"emptyLinePlaceholder":6},[286,40918,40919,40921,40923],{"class":288,"line":508},[286,40920,293],{"class":292},[286,40922,810],{"class":296},[286,40924,314],{"class":292},[286,40926,40927,40929,40931,40933,40935,40937],{"class":288,"line":513},[286,40928,818],{"class":292},[286,40930,4274],{"class":296},[286,40932,4285],{"class":300},[286,40934,307],{"class":292},[286,40936,40687],{"class":310},[286,40938,314],{"class":292},[286,40940,40941],{"class":288,"line":528},[286,40942,40694],{"class":292},[286,40944,40945,40947,40949],{"class":288,"line":547},[286,40946,962],{"class":292},[286,40948,4274],{"class":296},[286,40950,314],{"class":292},[286,40952,40953],{"class":288,"line":553},[286,40954,336],{"emptyLinePlaceholder":6},[286,40956,40958,40960,40962,40964,40966,40968],{"class":40957,"line":558},[288,9405],[286,40959,818],{"class":292},[286,40961,4128],{"class":296},[286,40963,842],{"class":300},[286,40965,307],{"class":292},[286,40967,40720],{"class":310},[286,40969,314],{"class":292},[286,40971,40972,40974,40976,40978,40980],{"class":288,"line":586},[286,40973,837],{"class":292},[286,40975,40],{"class":296},[286,40977,40731],{"class":292},[286,40979,40],{"class":296},[286,40981,314],{"class":292},[286,40983,40984,40986,40988,40990,40992],{"class":288,"line":591},[286,40985,837],{"class":292},[286,40987,31],{"class":296},[286,40989,40744],{"class":292},[286,40991,31],{"class":296},[286,40993,314],{"class":292},[286,40995,40996,40998,41000],{"class":288,"line":596},[286,40997,962],{"class":292},[286,40999,4128],{"class":296},[286,41001,314],{"class":292},[286,41003,41004],{"class":288,"line":614},[286,41005,336],{"emptyLinePlaceholder":6},[286,41007,41009,41011,41013,41015],{"class":41008,"line":622},[288,9405],[286,41010,818],{"class":292},[286,41012,4128],{"class":296},[286,41014,949],{"class":300},[286,41016,314],{"class":292},[286,41018,41019,41021,41023,41025,41027],{"class":288,"line":633},[286,41020,837],{"class":292},[286,41022,40],{"class":296},[286,41024,40780],{"class":292},[286,41026,40],{"class":296},[286,41028,314],{"class":292},[286,41030,41031,41033,41035,41037,41039],{"class":288,"line":645},[286,41032,837],{"class":292},[286,41034,31],{"class":296},[286,41036,40793],{"class":292},[286,41038,31],{"class":296},[286,41040,314],{"class":292},[286,41042,41043,41045,41047],{"class":288,"line":654},[286,41044,962],{"class":292},[286,41046,4128],{"class":296},[286,41048,314],{"class":292},[286,41050,41051,41053,41055],{"class":288,"line":676},[286,41052,793],{"class":292},[286,41054,810],{"class":296},[286,41056,314],{"class":292},[3118,41058,41059],{},[31,41060,17886,41061,41064,41065,16981,41068,41070,41071,41074,41075,114],{},[26,41062,41063],{},"\u003Csection v-else>"," debe ir ",[82,41066,41067],{},"justo después",[26,41069,7545],{},".\nSi intercalas un comentario, un ",[26,41072,41073],{},"\u003Cdiv>"," u otro nodo, Vue deja de asociarlo como ",[26,41076,16673],{},[40,41078,41080,41081,29],{"id":41079},"ejemplo-2-tabs-o-panel-que-se-abre-y-cierra-v-show","Ejemplo 2: Tabs o panel que se abre y cierra (",[26,41082,7708],{},[31,41084,41085,41086,41090],{},"Un panel de filtros que el usuario abre y cierra constantemente. Aquí ",[82,41087,41088],{},[26,41089,7708],{}," es ideal.",[277,41092,41095],{"className":279,"code":41093,"filename":281,"highlights":41094,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst isOpen = ref(false);\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"isOpen = !isOpen\">\n {{ isOpen ? \"Hide filters\" : \"Show filters\" }}\n \u003C/button>\n\n \u003Caside v-show=\"isOpen\" class=\"filters\">\n \u003Ch3>Filters\u003C/h3>\n \u003Clabel>\n \u003Cinput type=\"checkbox\" />\n Only available items\n \u003C/label>\n \u003C/aside>\n\u003C/template>\n",[339,444],[26,41096,41097,41107,41119,41123,41140,41148,41152,41160,41174,41179,41187,41191,41213,41226,41234,41248,41253,41261,41269],{"__ignoreMap":9},[286,41098,41099,41101,41103,41105],{"class":288,"line":289},[286,41100,293],{"class":292},[286,41102,297],{"class":296},[286,41104,301],{"class":300},[286,41106,314],{"class":292},[286,41108,41109,41111,41113,41115,41117],{"class":288,"line":317},[286,41110,321],{"class":320},[286,41112,11013],{"class":292},[286,41114,327],{"class":320},[286,41116,18155],{"class":310},[286,41118,18158],{"class":292},[286,41120,41121],{"class":288,"line":333},[286,41122,336],{"emptyLinePlaceholder":6},[286,41124,41126,41128,41130,41132,41134,41136,41138],{"class":41125,"line":339},[288,9405],[286,41127,413],{"class":320},[286,41129,18273],{"class":364},[286,41131,348],{"class":320},[286,41133,421],{"class":300},[286,41135,456],{"class":292},[286,41137,2130],{"class":364},[286,41139,18284],{"class":292},[286,41141,41142,41144,41146],{"class":288,"line":354},[286,41143,793],{"class":292},[286,41145,297],{"class":296},[286,41147,314],{"class":292},[286,41149,41150],{"class":288,"line":368},[286,41151,336],{"emptyLinePlaceholder":6},[286,41153,41154,41156,41158],{"class":288,"line":379},[286,41155,293],{"class":292},[286,41157,810],{"class":296},[286,41159,314],{"class":292},[286,41161,41162,41164,41166,41168,41170,41172],{"class":288,"line":389},[286,41163,818],{"class":292},[286,41165,4274],{"class":296},[286,41167,4285],{"class":300},[286,41169,307],{"class":292},[286,41171,18707],{"class":310},[286,41173,314],{"class":292},[286,41175,41176],{"class":288,"line":399},[286,41177,41178],{"class":292}," {{ isOpen ? \"Hide filters\" : \"Show filters\" }}\n",[286,41180,41181,41183,41185],{"class":288,"line":405},[286,41182,962],{"class":292},[286,41184,4274],{"class":296},[286,41186,314],{"class":292},[286,41188,41189],{"class":288,"line":410},[286,41190,336],{"emptyLinePlaceholder":6},[286,41192,41194,41196,41198,41201,41203,41205,41207,41209,41211],{"class":41193,"line":444},[288,9405],[286,41195,818],{"class":292},[286,41197,21488],{"class":296},[286,41199,41200],{"class":300}," v-show",[286,41202,307],{"class":292},[286,41204,18731],{"class":310},[286,41206,824],{"class":300},[286,41208,307],{"class":292},[286,41210,6424],{"class":310},[286,41212,314],{"class":292},[286,41214,41215,41217,41219,41222,41224],{"class":288,"line":464},[286,41216,837],{"class":292},[286,41218,202],{"class":296},[286,41220,41221],{"class":292},">Filters\u003C/",[286,41223,202],{"class":296},[286,41225,314],{"class":292},[286,41227,41228,41230,41232],{"class":288,"line":469},[286,41229,837],{"class":292},[286,41231,3882],{"class":296},[286,41233,314],{"class":292},[286,41235,41236,41238,41240,41242,41244,41246],{"class":288,"line":484},[286,41237,887],{"class":292},[286,41239,18048],{"class":296},[286,41241,4277],{"class":300},[286,41243,307],{"class":292},[286,41245,29196],{"class":310},[286,41247,4332],{"class":292},[286,41249,41250],{"class":288,"line":508},[286,41251,41252],{"class":292}," Only available items\n",[286,41254,41255,41257,41259],{"class":288,"line":513},[286,41256,930],{"class":292},[286,41258,3882],{"class":296},[286,41260,314],{"class":292},[286,41262,41263,41265,41267],{"class":288,"line":528},[286,41264,962],{"class":292},[286,41266,21488],{"class":296},[286,41268,314],{"class":292},[286,41270,41271,41273,41275],{"class":288,"line":547},[286,41272,793],{"class":292},[286,41274,810],{"class":296},[286,41276,314],{"class":292},[277,41278,41281],{"className":279,"code":41279,"filename":979,"highlights":41280,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n isOpen: false,\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"isOpen = !isOpen\">\n {{ isOpen ? \"Hide filters\" : \"Show filters\" }}\n \u003C/button>\n\n \u003Caside v-show=\"isOpen\" class=\"filters\">\n \u003Ch3>Filters\u003C/h3>\n \u003Clabel>\n \u003Cinput type=\"checkbox\" />\n Only available items\n \u003C/label>\n \u003C/aside>\n\u003C/template>\n",[354,508],[26,41282,41283,41291,41299,41305,41311,41320,41324,41328,41332,41340,41344,41352,41366,41370,41378,41382,41403,41415,41423,41437,41441,41449,41457],{"__ignoreMap":9},[286,41284,41285,41287,41289],{"class":288,"line":289},[286,41286,293],{"class":292},[286,41288,297],{"class":296},[286,41290,314],{"class":292},[286,41292,41293,41295,41297],{"class":288,"line":317},[286,41294,1065],{"class":320},[286,41296,1068],{"class":320},[286,41298,351],{"class":292},[286,41300,41301,41303],{"class":288,"line":333},[286,41302,1094],{"class":300},[286,41304,481],{"class":292},[286,41306,41307,41309],{"class":288,"line":339},[286,41308,1101],{"class":320},[286,41310,351],{"class":292},[286,41312,41314,41316,41318],{"class":41313,"line":354},[288,9405],[286,41315,18838],{"class":292},[286,41317,2130],{"class":364},[286,41319,1085],{"class":292},[286,41321,41322],{"class":288,"line":368},[286,41323,18485],{"class":292},[286,41325,41326],{"class":288,"line":379},[286,41327,1139],{"class":292},[286,41329,41330],{"class":288,"line":389},[286,41331,18262],{"class":292},[286,41333,41334,41336,41338],{"class":288,"line":399},[286,41335,793],{"class":292},[286,41337,297],{"class":296},[286,41339,314],{"class":292},[286,41341,41342],{"class":288,"line":405},[286,41343,336],{"emptyLinePlaceholder":6},[286,41345,41346,41348,41350],{"class":288,"line":410},[286,41347,293],{"class":292},[286,41349,810],{"class":296},[286,41351,314],{"class":292},[286,41353,41354,41356,41358,41360,41362,41364],{"class":288,"line":444},[286,41355,818],{"class":292},[286,41357,4274],{"class":296},[286,41359,4285],{"class":300},[286,41361,307],{"class":292},[286,41363,18707],{"class":310},[286,41365,314],{"class":292},[286,41367,41368],{"class":288,"line":464},[286,41369,41178],{"class":292},[286,41371,41372,41374,41376],{"class":288,"line":469},[286,41373,962],{"class":292},[286,41375,4274],{"class":296},[286,41377,314],{"class":292},[286,41379,41380],{"class":288,"line":484},[286,41381,336],{"emptyLinePlaceholder":6},[286,41383,41385,41387,41389,41391,41393,41395,41397,41399,41401],{"class":41384,"line":508},[288,9405],[286,41386,818],{"class":292},[286,41388,21488],{"class":296},[286,41390,41200],{"class":300},[286,41392,307],{"class":292},[286,41394,18731],{"class":310},[286,41396,824],{"class":300},[286,41398,307],{"class":292},[286,41400,6424],{"class":310},[286,41402,314],{"class":292},[286,41404,41405,41407,41409,41411,41413],{"class":288,"line":513},[286,41406,837],{"class":292},[286,41408,202],{"class":296},[286,41410,41221],{"class":292},[286,41412,202],{"class":296},[286,41414,314],{"class":292},[286,41416,41417,41419,41421],{"class":288,"line":528},[286,41418,837],{"class":292},[286,41420,3882],{"class":296},[286,41422,314],{"class":292},[286,41424,41425,41427,41429,41431,41433,41435],{"class":288,"line":547},[286,41426,887],{"class":292},[286,41428,18048],{"class":296},[286,41430,4277],{"class":300},[286,41432,307],{"class":292},[286,41434,29196],{"class":310},[286,41436,4332],{"class":292},[286,41438,41439],{"class":288,"line":553},[286,41440,41252],{"class":292},[286,41442,41443,41445,41447],{"class":288,"line":558},[286,41444,930],{"class":292},[286,41446,3882],{"class":296},[286,41448,314],{"class":292},[286,41450,41451,41453,41455],{"class":288,"line":586},[286,41452,962],{"class":292},[286,41454,21488],{"class":296},[286,41456,314],{"class":292},[286,41458,41459,41461,41463],{"class":288,"line":591},[286,41460,793],{"class":292},[286,41462,810],{"class":296},[286,41464,314],{"class":292},[202,41466,41468],{"id":41467},"nota-de-ux-y-accesibilidad","Nota de UX y accesibilidad",[31,41470,41471,41472,41475],{},"Como el panel ",[82,41473,41474],{},"sigue existiendo",", sus elementos interactivos pueden:",[48,41477,41478,41481,41484],{},[51,41479,41480],{},"Conservar estado",[51,41482,41483],{},"Conservar foco (a veces deseable, a veces no)",[51,41485,41486],{},"Seguir siendo accesibles para lectores de pantalla si no se manejan roles/ARIA",[31,41488,41489,41490,41493,41494,114],{},"Si el contenido ",[82,41491,41492],{},"no debería existir"," en absoluto, usa ",[26,41495,7545],{},[40,41497,41499,41501,41502,41505],{"id":41498},"v-else-if-múltiples-estados-sin-anidar-if-innecesarios",[26,41500,40461],{},": múltiples estados (sin anidar ",[26,41503,41504],{},"if"," innecesarios)",[31,41507,41508,41509,235,41511,1704,41513,114],{},"Un patrón común: ",[3299,41510,3350],{},[3299,41512,3356],{},[3299,41514,41515],{},"success",[277,41517,41520],{"className":279,"code":41518,"filename":281,"highlights":41519,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from \"vue\";\n\nconst status = ref(\"idle\"); // \"idle\" | \"loading\" | \"error\" | \"success\"\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"status = 'loading'\">Simulate loading\u003C/button>\n \u003Cbutton @click=\"status = 'error'\">Simulate error\u003C/button>\n \u003Cbutton @click=\"status = 'success'\">Simulate success\u003C/button>\n \u003Cbutton @click=\"status = 'idle'\">Reset\u003C/button>\n\n \u003Cp v-if=\"status === 'loading'\">Loading...\u003C/p>\n \u003Cp v-else-if=\"status === 'error'\">Something went wrong.\u003C/p>\n \u003Cp v-else-if=\"status === 'success'\">Done!\u003C/p>\n \u003Cp v-else>Idle. Click a button.\u003C/p>\n\u003C/template>\n",[339,464,469,484,508],[26,41521,41522,41532,41544,41548,41570,41578,41582,41590,41610,41630,41650,41670,41674,41695,41716,41737,41753],{"__ignoreMap":9},[286,41523,41524,41526,41528,41530],{"class":288,"line":289},[286,41525,293],{"class":292},[286,41527,297],{"class":296},[286,41529,301],{"class":300},[286,41531,314],{"class":292},[286,41533,41534,41536,41538,41540,41542],{"class":288,"line":317},[286,41535,321],{"class":320},[286,41537,11013],{"class":292},[286,41539,327],{"class":320},[286,41541,18155],{"class":310},[286,41543,18158],{"class":292},[286,41545,41546],{"class":288,"line":333},[286,41547,336],{"emptyLinePlaceholder":6},[286,41549,41551,41553,41555,41557,41559,41561,41564,41567],{"class":41550,"line":339},[288,9405],[286,41552,413],{"class":320},[286,41554,5733],{"class":364},[286,41556,348],{"class":320},[286,41558,421],{"class":300},[286,41560,456],{"class":292},[286,41562,41563],{"class":310},"\"idle\"",[286,41565,41566],{"class":292},"); ",[286,41568,41569],{"class":12748},"// \"idle\" | \"loading\" | \"error\" | \"success\"\n",[286,41571,41572,41574,41576],{"class":288,"line":354},[286,41573,793],{"class":292},[286,41575,297],{"class":296},[286,41577,314],{"class":292},[286,41579,41580],{"class":288,"line":368},[286,41581,336],{"emptyLinePlaceholder":6},[286,41583,41584,41586,41588],{"class":288,"line":379},[286,41585,293],{"class":292},[286,41587,810],{"class":296},[286,41589,314],{"class":292},[286,41591,41592,41594,41596,41598,41600,41603,41606,41608],{"class":288,"line":389},[286,41593,818],{"class":292},[286,41595,4274],{"class":296},[286,41597,4285],{"class":300},[286,41599,307],{"class":292},[286,41601,41602],{"class":310},"\"status = 'loading'\"",[286,41604,41605],{"class":292},">Simulate loading\u003C/",[286,41607,4274],{"class":296},[286,41609,314],{"class":292},[286,41611,41612,41614,41616,41618,41620,41623,41626,41628],{"class":288,"line":399},[286,41613,818],{"class":292},[286,41615,4274],{"class":296},[286,41617,4285],{"class":300},[286,41619,307],{"class":292},[286,41621,41622],{"class":310},"\"status = 'error'\"",[286,41624,41625],{"class":292},">Simulate error\u003C/",[286,41627,4274],{"class":296},[286,41629,314],{"class":292},[286,41631,41632,41634,41636,41638,41640,41643,41646,41648],{"class":288,"line":405},[286,41633,818],{"class":292},[286,41635,4274],{"class":296},[286,41637,4285],{"class":300},[286,41639,307],{"class":292},[286,41641,41642],{"class":310},"\"status = 'success'\"",[286,41644,41645],{"class":292},">Simulate success\u003C/",[286,41647,4274],{"class":296},[286,41649,314],{"class":292},[286,41651,41652,41654,41656,41658,41660,41663,41666,41668],{"class":288,"line":410},[286,41653,818],{"class":292},[286,41655,4274],{"class":296},[286,41657,4285],{"class":300},[286,41659,307],{"class":292},[286,41661,41662],{"class":310},"\"status = 'idle'\"",[286,41664,41665],{"class":292},">Reset\u003C/",[286,41667,4274],{"class":296},[286,41669,314],{"class":292},[286,41671,41672],{"class":288,"line":444},[286,41673,336],{"emptyLinePlaceholder":6},[286,41675,41677,41679,41681,41683,41685,41688,41691,41693],{"class":41676,"line":464},[288,9405],[286,41678,818],{"class":292},[286,41680,31],{"class":296},[286,41682,842],{"class":300},[286,41684,307],{"class":292},[286,41686,41687],{"class":310},"\"status === 'loading'\"",[286,41689,41690],{"class":292},">Loading...\u003C/",[286,41692,31],{"class":296},[286,41694,314],{"class":292},[286,41696,41698,41700,41702,41704,41706,41709,41712,41714],{"class":41697,"line":469},[288,9405],[286,41699,818],{"class":292},[286,41701,31],{"class":296},[286,41703,869],{"class":300},[286,41705,307],{"class":292},[286,41707,41708],{"class":310},"\"status === 'error'\"",[286,41710,41711],{"class":292},">Something went wrong.\u003C/",[286,41713,31],{"class":296},[286,41715,314],{"class":292},[286,41717,41719,41721,41723,41725,41727,41730,41733,41735],{"class":41718,"line":484},[288,9405],[286,41720,818],{"class":292},[286,41722,31],{"class":296},[286,41724,869],{"class":300},[286,41726,307],{"class":292},[286,41728,41729],{"class":310},"\"status === 'success'\"",[286,41731,41732],{"class":292},">Done!\u003C/",[286,41734,31],{"class":296},[286,41736,314],{"class":292},[286,41738,41740,41742,41744,41746,41749,41751],{"class":41739,"line":508},[288,9405],[286,41741,818],{"class":292},[286,41743,31],{"class":296},[286,41745,949],{"class":300},[286,41747,41748],{"class":292},">Idle. Click a button.\u003C/",[286,41750,31],{"class":296},[286,41752,314],{"class":292},[286,41754,41755,41757,41759],{"class":288,"line":513},[286,41756,793],{"class":292},[286,41758,810],{"class":296},[286,41760,314],{"class":292},[277,41762,41765],{"className":279,"code":41763,"filename":979,"highlights":41764,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n status: \"idle\", // \"idle\" | \"loading\" | \"error\" | \"success\"\n };\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"status = 'loading'\">Simulate loading\u003C/button>\n \u003Cbutton @click=\"status = 'error'\">Simulate error\u003C/button>\n \u003Cbutton @click=\"status = 'success'\">Simulate success\u003C/button>\n \u003Cbutton @click=\"status = 'idle'\">Reset\u003C/button>\n\n \u003Cp v-if=\"status === 'loading'\">Loading...\u003C/p>\n \u003Cp v-else-if=\"status === 'error'\">Something went wrong.\u003C/p>\n \u003Cp v-else-if=\"status === 'success'\">Done!\u003C/p>\n \u003Cp v-else>Idle. Click a button.\u003C/p>\n\u003C/template>\n",[354,513,528,547,553],[26,41766,41767,41775,41783,41789,41795,41806,41810,41814,41818,41826,41830,41838,41856,41874,41892,41910,41914,41933,41952,41971,41986],{"__ignoreMap":9},[286,41768,41769,41771,41773],{"class":288,"line":289},[286,41770,293],{"class":292},[286,41772,297],{"class":296},[286,41774,314],{"class":292},[286,41776,41777,41779,41781],{"class":288,"line":317},[286,41778,1065],{"class":320},[286,41780,1068],{"class":320},[286,41782,351],{"class":292},[286,41784,41785,41787],{"class":288,"line":333},[286,41786,1094],{"class":300},[286,41788,481],{"class":292},[286,41790,41791,41793],{"class":288,"line":339},[286,41792,1101],{"class":320},[286,41794,351],{"class":292},[286,41796,41798,41800,41802,41804],{"class":41797,"line":354},[288,9405],[286,41799,6627],{"class":292},[286,41801,41563],{"class":310},[286,41803,235],{"class":292},[286,41805,41569],{"class":12748},[286,41807,41808],{"class":288,"line":368},[286,41809,18485],{"class":292},[286,41811,41812],{"class":288,"line":379},[286,41813,1139],{"class":292},[286,41815,41816],{"class":288,"line":389},[286,41817,18262],{"class":292},[286,41819,41820,41822,41824],{"class":288,"line":399},[286,41821,793],{"class":292},[286,41823,297],{"class":296},[286,41825,314],{"class":292},[286,41827,41828],{"class":288,"line":405},[286,41829,336],{"emptyLinePlaceholder":6},[286,41831,41832,41834,41836],{"class":288,"line":410},[286,41833,293],{"class":292},[286,41835,810],{"class":296},[286,41837,314],{"class":292},[286,41839,41840,41842,41844,41846,41848,41850,41852,41854],{"class":288,"line":444},[286,41841,818],{"class":292},[286,41843,4274],{"class":296},[286,41845,4285],{"class":300},[286,41847,307],{"class":292},[286,41849,41602],{"class":310},[286,41851,41605],{"class":292},[286,41853,4274],{"class":296},[286,41855,314],{"class":292},[286,41857,41858,41860,41862,41864,41866,41868,41870,41872],{"class":288,"line":464},[286,41859,818],{"class":292},[286,41861,4274],{"class":296},[286,41863,4285],{"class":300},[286,41865,307],{"class":292},[286,41867,41622],{"class":310},[286,41869,41625],{"class":292},[286,41871,4274],{"class":296},[286,41873,314],{"class":292},[286,41875,41876,41878,41880,41882,41884,41886,41888,41890],{"class":288,"line":469},[286,41877,818],{"class":292},[286,41879,4274],{"class":296},[286,41881,4285],{"class":300},[286,41883,307],{"class":292},[286,41885,41642],{"class":310},[286,41887,41645],{"class":292},[286,41889,4274],{"class":296},[286,41891,314],{"class":292},[286,41893,41894,41896,41898,41900,41902,41904,41906,41908],{"class":288,"line":484},[286,41895,818],{"class":292},[286,41897,4274],{"class":296},[286,41899,4285],{"class":300},[286,41901,307],{"class":292},[286,41903,41662],{"class":310},[286,41905,41665],{"class":292},[286,41907,4274],{"class":296},[286,41909,314],{"class":292},[286,41911,41912],{"class":288,"line":508},[286,41913,336],{"emptyLinePlaceholder":6},[286,41915,41917,41919,41921,41923,41925,41927,41929,41931],{"class":41916,"line":513},[288,9405],[286,41918,818],{"class":292},[286,41920,31],{"class":296},[286,41922,842],{"class":300},[286,41924,307],{"class":292},[286,41926,41687],{"class":310},[286,41928,41690],{"class":292},[286,41930,31],{"class":296},[286,41932,314],{"class":292},[286,41934,41936,41938,41940,41942,41944,41946,41948,41950],{"class":41935,"line":528},[288,9405],[286,41937,818],{"class":292},[286,41939,31],{"class":296},[286,41941,869],{"class":300},[286,41943,307],{"class":292},[286,41945,41708],{"class":310},[286,41947,41711],{"class":292},[286,41949,31],{"class":296},[286,41951,314],{"class":292},[286,41953,41955,41957,41959,41961,41963,41965,41967,41969],{"class":41954,"line":547},[288,9405],[286,41956,818],{"class":292},[286,41958,31],{"class":296},[286,41960,869],{"class":300},[286,41962,307],{"class":292},[286,41964,41729],{"class":310},[286,41966,41732],{"class":292},[286,41968,31],{"class":296},[286,41970,314],{"class":292},[286,41972,41974,41976,41978,41980,41982,41984],{"class":41973,"line":553},[288,9405],[286,41975,818],{"class":292},[286,41977,31],{"class":296},[286,41979,949],{"class":300},[286,41981,41748],{"class":292},[286,41983,31],{"class":296},[286,41985,314],{"class":292},[286,41987,41988,41990,41992],{"class":288,"line":558},[286,41989,793],{"class":292},[286,41991,810],{"class":296},[286,41993,314],{"class":292},[40,41995,200],{"id":199},[202,41997,41999,42000,42002,42003],{"id":41998},"_1-v-else-separado-del-v-if","1) ",[26,42001,40348],{}," separado del ",[26,42004,7545],{},[31,42006,24899],{},[277,42008,42011],{"className":279,"code":42009,"filename":9346,"highlights":42010,"language":282,"meta":9,"style":9},"\u003Cdiv v-if=\"ok\">Ok\u003C/div>\n\u003C!-- comentario o nodo -->\n\u003Cdiv v-else>No ok\u003C/div>\n",[317],[26,42012,42013,42037,42043],{"__ignoreMap":9},[286,42014,42015,42017,42019,42021,42023,42025,42028,42030,42033,42035],{"class":288,"line":289},[286,42016,293],{"class":292},[286,42018,4208],{"class":296},[286,42020,842],{"class":320},[286,42022,307],{"class":292},[286,42024,874],{"class":310},[286,42026,42027],{"class":292},"ok",[286,42029,874],{"class":310},[286,42031,42032],{"class":292},">Ok\u003C/",[286,42034,4208],{"class":296},[286,42036,314],{"class":292},[286,42038,42040],{"class":42039,"line":317},[288,9405],[286,42041,42042],{"class":12748},"\u003C!-- comentario o nodo -->\n",[286,42044,42045,42047,42049,42051,42054,42056],{"class":288,"line":333},[286,42046,293],{"class":292},[286,42048,4208],{"class":296},[286,42050,949],{"class":320},[286,42052,42053],{"class":292},">No ok\u003C/",[286,42055,4208],{"class":296},[286,42057,314],{"class":292},[3118,42059,42060],{},[31,42061,17886,42062,41064,42064,42067,42068,114],{},[26,42063,40348],{},[82,42065,42066],{},"inmediatamente"," después del ",[26,42069,7545],{},[202,42071,12610,42073,42075],{"id":42072},"_2-usar-v-show-para-contenido-que-no-debería-existir",[26,42074,7708],{}," para contenido que no debería existir",[31,42077,42078,42079,42081,42082,235,42085,42088,42089,114],{},"Si ocultas con ",[26,42080,7708],{}," algo como un ",[3299,42083,42084],{},"admin panel",[82,42086,42087],{},"sigue en el DOM",".\nNo es seguridad; es solo presentación. La seguridad va en el backend, pero en la UI al menos usa ",[26,42090,7545],{},[202,42092,42094,42095,42097],{"id":42093},"_3-pensar-que-v-if-es-gratis","3) Pensar que ",[26,42096,7545],{}," es “gratis”",[31,42099,42100,42101,42103,42104,42107,42108,42110],{},"Alternar ",[26,42102,7545],{}," muchas veces implica ",[82,42105,42106],{},"montajes y desmontajes repetidos",".\nSi el usuario va a abrir y cerrar algo constantemente, ",[26,42109,7708],{}," suele ser mejor opción.",[40,42112,17678],{"id":17677},[48,42114,42115,42126,42134],{},[51,42116,42117,42121,42122,42125],{},[82,42118,42119],{},[26,42120,7545],{},": controla la ",[82,42123,42124],{},"existencia real"," del elemento.",[51,42127,42128,42133],{},[82,42129,42130],{},[26,42131,42132],{},"v-else / v-else-if",": ramas alternativas del mismo bloque condicional.",[51,42135,42136,42140],{},[82,42137,42138],{},[26,42139,7708],{},": ocultar/mostrar rápido con CSS, sin destruir el DOM.",[3118,42142,42143],{},[31,42144,42145,42146],{},"Una UI se vuelve más clara cuando decides conscientemente:\n",[82,42147,42148],{},"¿Quiero que esto exista o solo que se vea?",[1614,42150,42151],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":9,"searchDepth":317,"depth":317,"links":42153},[42154,42160,42161,42163,42167,42169,42177],{"id":40405,"depth":317,"text":40406,"children":42155},[42156,42157,42159],{"id":7545,"depth":333,"text":7545},{"id":40456,"depth":333,"text":42158},"v-else y v-else-if",{"id":7708,"depth":333,"text":7708},{"id":40528,"depth":317,"text":40529},{"id":40567,"depth":317,"text":42162},"Ejemplo 1: Login (v-if + v-else)",{"id":41079,"depth":317,"text":42164,"children":42165},"Ejemplo 2: Tabs o panel que se abre y cierra (v-show)",[42166],{"id":41467,"depth":333,"text":41468},{"id":41498,"depth":317,"text":42168},"v-else-if: múltiples estados (sin anidar if innecesarios)",{"id":199,"depth":317,"text":200,"children":42170},[42171,42173,42175],{"id":41998,"depth":333,"text":42172},"1) v-else separado del v-if",{"id":42072,"depth":333,"text":42174},"2) Usar v-show para contenido que no debería existir",{"id":42093,"depth":333,"text":42176},"3) Pensar que v-if es “gratis”",{"id":17677,"depth":317,"text":17678},"https://res.cloudinary.com/denj4fg7f/image/upload/v1771265982/directives-vue-v-if-v-else-v-show-guide_qmtjik.png","Ilustración conceptual del renderizado condicional en Vue.js","2026-02-05","Aprende a usar v-if, v-else y v-show en Vue con ejemplos claros, buenas prácticas y notas clave para elegir correctamente entre renderizado condicional y visibilidad.",{"script":42183},[42184],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":42185},[42186],{"headline":42187,"author":42188,"datePublished":42189,"@type":1647},"v-if, v-else y v-show en Vue: cuándo usar cada uno",{"name":1644,"@type":1645},"2026-02-05T12:30:00-05:00",{"updatedAt":42189,"coverCaption":42191,"author":1644,"keywords":42192},"Renderizado condicional en Vue.js ilustrado por TODOvue",[1652,7545,40348,7708,42193,42194,281,979],"conditional rendering","directives","/blog/directives-vue-v-if-v-else-v-show-guide.es",[42197],{"headline":42187,"author":42198,"datePublished":42189,"@type":1647},{"name":1644,"@type":1645},{"title":40338,"description":42181},"blog/directives-vue-v-if-v-else-v-show-guide.es",[42202,42203,42206,42207],{"tag":20595,"color":20596},{"tag":42204,"color":42205},"Renderizado Condicional","#E056FD",{"tag":21898,"color":21899},{"tag":9081,"color":9082},"TkJqW4T4cLFojTQtYJ-K1AYGAxTaIfMdcflMpUaN50U",{"id":42210,"title":42211,"body":42212,"cover":45577,"coverAlt":42211,"date":45578,"description":45579,"draft":12,"extension":1635,"head":45580,"locale":1648,"meta":45587,"navigation":6,"path":45592,"schemaOrg":45593,"seo":45596,"series":20589,"seriesDescription":20590,"seriesOrder":289,"seriesTitle":20591,"slug":1663,"stem":45597,"tags":45598,"__hash__":45605},"blog/blog/vue-directives-overview.es.md","Directivas en Vue: Una Visión General",{"type":18,"value":42213,"toc":45558},[42214,42218,42233,42244,42246,42249,42301,42310,42319,42322,42333,42445,42560,42564,42573,42575,42583,42680,42780,42784,42787,42790,42801,42936,43077,43085,43089,43092,43097,43102,43203,43319,43323,43330,43333,43343,43454,43568,43576,43580,43583,43704,43845,43858,43862,43865,43960,44060,44063,44067,44070,44166,44267,44276,44280,44283,44429,44586,44592,44596,44603,44712,44825,44828,44832,44835,44965,45084,45091,45095,45098,45166,45240,45243,45247,45250,45318,45391,45394,45397,45400,45491,45525,45528,45530,45536,45539,45549,45556],[21,42215,42217],{"id":42216},"directivas-en-vue-3-guía-completa-para-entenderlas-bien","Directivas en Vue 3: guía completa para entenderlas bien",[31,42219,42220,42221,42224,42225,42228,42229,42232],{},"Las directivas en Vue son ",[82,42222,42223],{},"atributos especiales"," que permiten aplicar lógica reactiva directamente sobre el DOM.\nTodas comienzan con ",[26,42226,42227],{},"v-"," y existen para ",[82,42230,42231],{},"reducir código imperativo"," y hacer que el template sea más expresivo y declarativo.",[31,42234,42235,42236,42239,42240,42243],{},"Esta entrada es un ",[82,42237,42238],{},"mapa general",": no profundiza al extremo, pero te deja claro ",[82,42241,42242],{},"qué hace cada directiva, cuándo usarla y qué problema resuelve",".\nCada una tendrá luego su artículo dedicado.",[40,42245,13176],{"id":13175},[31,42247,42248],{},"Si quieres profundizar en cada directiva, aquí tienes la ruta completa de esta serie:",[48,42250,42251,42256,42261,42266,42271,42276,42281,42286,42291,42296],{},[51,42252,42253],{},[13185,42254,40338],{"href":42255},"/blog/directives-vue-v-if-v-else-v-show-guide.es/",[51,42257,42258],{},[13185,42259,36981],{"href":42260},"/blog/directives-vue-v-for-guide.es/",[51,42262,42263],{},[13185,42264,33993],{"href":42265},"/blog/directives-vue-v-bind-guide.es/",[51,42267,42268],{},[13185,42269,28128],{"href":42270},"/blog/directives-vue-v-model-guide.es/",[51,42272,42273],{},[13185,42274,30962],{"href":42275},"/blog/directives-vue-v-on-guide.es/",[51,42277,42278],{},[13185,42279,24586],{"href":42280},"/blog/directives-vue-v-text-v-html-guide.es/",[51,42282,42283],{},[13185,42284,25868],{"href":42285},"/blog/directives-vue-v-slot-guide.es/",[51,42287,42288],{},[13185,42289,21905],{"href":42290},"/blog/directives-vue-v-once-v-memo-v-pre-guide.es/",[51,42292,42293],{},[13185,42294,20606],{"href":42295},"/blog/directives-vue-v-cloak-guide.es/",[51,42297,42298],{},[13185,42299,17787],{"href":42300},"/blog/directives-vue-custom-directives-guide.es/",[40,42302,42304,235,42306,235,42308],{"id":42303},"v-if-v-else-if-v-else",[26,42305,7545],{},[26,42307,40461],{},[26,42309,40348],{},[31,42311,42312,42313,42316,42317,114],{},"Sirven para ",[82,42314,42315],{},"renderizar o eliminar elementos del DOM"," según una condición reactiva.\nSi la condición es falsa, el elemento ",[82,42318,40426],{},[31,42320,42321],{},"Úsala cuando:",[48,42323,42324,42327,42330],{},[51,42325,42326],{},"El contenido es pesado",[51,42328,42329],{},"No siempre debe existir",[51,42331,42332],{},"Depende de permisos o estados críticos",[277,42334,42337],{"className":279,"code":42335,"filename":281,"highlights":42336,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst isLogged = ref(true)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp v-if=\"isLogged\">Bienvenido\u003C/p>\n \u003Cp v-else>No has iniciado sesión\u003C/p>\n\u003C/template>\n",[389,399],[26,42338,42339,42349,42359,42363,42380,42388,42392,42400,42421,42437],{"__ignoreMap":9},[286,42340,42341,42343,42345,42347],{"class":288,"line":289},[286,42342,293],{"class":292},[286,42344,297],{"class":296},[286,42346,301],{"class":300},[286,42348,314],{"class":292},[286,42350,42351,42353,42355,42357],{"class":288,"line":317},[286,42352,321],{"class":320},[286,42354,11013],{"class":292},[286,42356,327],{"class":320},[286,42358,330],{"class":310},[286,42360,42361],{"class":288,"line":333},[286,42362,336],{"emptyLinePlaceholder":6},[286,42364,42365,42367,42370,42372,42374,42376,42378],{"class":288,"line":339},[286,42366,413],{"class":320},[286,42368,42369],{"class":364}," isLogged",[286,42371,348],{"class":320},[286,42373,421],{"class":300},[286,42375,456],{"class":292},[286,42377,2156],{"class":364},[286,42379,441],{"class":292},[286,42381,42382,42384,42386],{"class":288,"line":354},[286,42383,793],{"class":292},[286,42385,297],{"class":296},[286,42387,314],{"class":292},[286,42389,42390],{"class":288,"line":368},[286,42391,336],{"emptyLinePlaceholder":6},[286,42393,42394,42396,42398],{"class":288,"line":379},[286,42395,293],{"class":292},[286,42397,810],{"class":296},[286,42399,314],{"class":292},[286,42401,42403,42405,42407,42409,42411,42414,42417,42419],{"class":42402,"line":389},[288,9405],[286,42404,818],{"class":292},[286,42406,31],{"class":296},[286,42408,842],{"class":300},[286,42410,307],{"class":292},[286,42412,42413],{"class":310},"\"isLogged\"",[286,42415,42416],{"class":292},">Bienvenido\u003C/",[286,42418,31],{"class":296},[286,42420,314],{"class":292},[286,42422,42424,42426,42428,42430,42433,42435],{"class":42423,"line":399},[288,9405],[286,42425,818],{"class":292},[286,42427,31],{"class":296},[286,42429,949],{"class":300},[286,42431,42432],{"class":292},">No has iniciado sesión\u003C/",[286,42434,31],{"class":296},[286,42436,314],{"class":292},[286,42438,42439,42441,42443],{"class":288,"line":405},[286,42440,793],{"class":292},[286,42442,810],{"class":296},[286,42444,314],{"class":292},[277,42446,42449],{"className":279,"code":42447,"filename":979,"highlights":42448,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n isLogged: true\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp v-if=\"isLogged\">Bienvenido\u003C/p>\n \u003Cp v-else>No has iniciado sesión\u003C/p>\n\u003C/template>\n",[444,464],[26,42450,42451,42459,42467,42473,42479,42486,42490,42494,42498,42506,42510,42518,42537,42552],{"__ignoreMap":9},[286,42452,42453,42455,42457],{"class":288,"line":289},[286,42454,293],{"class":292},[286,42456,297],{"class":296},[286,42458,314],{"class":292},[286,42460,42461,42463,42465],{"class":288,"line":317},[286,42462,1065],{"class":320},[286,42464,1068],{"class":320},[286,42466,351],{"class":292},[286,42468,42469,42471],{"class":288,"line":333},[286,42470,1094],{"class":300},[286,42472,481],{"class":292},[286,42474,42475,42477],{"class":288,"line":339},[286,42476,1101],{"class":320},[286,42478,351],{"class":292},[286,42480,42481,42484],{"class":288,"line":354},[286,42482,42483],{"class":292}," isLogged: ",[286,42485,2089],{"class":364},[286,42487,42488],{"class":288,"line":368},[286,42489,1134],{"class":292},[286,42491,42492],{"class":288,"line":379},[286,42493,550],{"class":292},[286,42495,42496],{"class":288,"line":389},[286,42497,402],{"class":292},[286,42499,42500,42502,42504],{"class":288,"line":399},[286,42501,793],{"class":292},[286,42503,297],{"class":296},[286,42505,314],{"class":292},[286,42507,42508],{"class":288,"line":405},[286,42509,336],{"emptyLinePlaceholder":6},[286,42511,42512,42514,42516],{"class":288,"line":410},[286,42513,293],{"class":292},[286,42515,810],{"class":296},[286,42517,314],{"class":292},[286,42519,42521,42523,42525,42527,42529,42531,42533,42535],{"class":42520,"line":444},[288,9405],[286,42522,818],{"class":292},[286,42524,31],{"class":296},[286,42526,842],{"class":300},[286,42528,307],{"class":292},[286,42530,42413],{"class":310},[286,42532,42416],{"class":292},[286,42534,31],{"class":296},[286,42536,314],{"class":292},[286,42538,42540,42542,42544,42546,42548,42550],{"class":42539,"line":464},[288,9405],[286,42541,818],{"class":292},[286,42543,31],{"class":296},[286,42545,949],{"class":300},[286,42547,42432],{"class":292},[286,42549,31],{"class":296},[286,42551,314],{"class":292},[286,42553,42554,42556,42558],{"class":288,"line":469},[286,42555,793],{"class":292},[286,42557,810],{"class":296},[286,42559,314],{"class":292},[40,42561,42562],{"id":7708},[26,42563,7708],{},[31,42565,42566,42567,42569,42570,114],{},"Controla la visibilidad usando CSS (",[26,42568,40392],{},"), pero ",[82,42571,42572],{},"el elemento siempre existe en el DOM",[31,42574,42321],{},[48,42576,42577,42580],{},[51,42578,42579],{},"El elemento se muestra y oculta con frecuencia",[51,42581,42582],{},"No quieres pagar el costo de montar y desmontar el nodo",[277,42584,42587],{"className":279,"code":42585,"filename":281,"highlights":42586,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n \nconst isVisible = ref(true)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp v-show=\"isVisible\">Contenido visible\u003C/p>\n\u003C/template>\n",[389],[26,42588,42589,42599,42609,42614,42631,42639,42643,42651,42672],{"__ignoreMap":9},[286,42590,42591,42593,42595,42597],{"class":288,"line":289},[286,42592,293],{"class":292},[286,42594,297],{"class":296},[286,42596,301],{"class":300},[286,42598,314],{"class":292},[286,42600,42601,42603,42605,42607],{"class":288,"line":317},[286,42602,321],{"class":320},[286,42604,11013],{"class":292},[286,42606,327],{"class":320},[286,42608,330],{"class":310},[286,42610,42611],{"class":288,"line":333},[286,42612,42613],{"class":292}," \n",[286,42615,42616,42618,42621,42623,42625,42627,42629],{"class":288,"line":339},[286,42617,413],{"class":320},[286,42619,42620],{"class":364}," isVisible",[286,42622,348],{"class":320},[286,42624,421],{"class":300},[286,42626,456],{"class":292},[286,42628,2156],{"class":364},[286,42630,441],{"class":292},[286,42632,42633,42635,42637],{"class":288,"line":354},[286,42634,793],{"class":292},[286,42636,297],{"class":296},[286,42638,314],{"class":292},[286,42640,42641],{"class":288,"line":368},[286,42642,336],{"emptyLinePlaceholder":6},[286,42644,42645,42647,42649],{"class":288,"line":379},[286,42646,293],{"class":292},[286,42648,810],{"class":296},[286,42650,314],{"class":292},[286,42652,42654,42656,42658,42660,42662,42665,42668,42670],{"class":42653,"line":389},[288,9405],[286,42655,818],{"class":292},[286,42657,31],{"class":296},[286,42659,41200],{"class":300},[286,42661,307],{"class":292},[286,42663,42664],{"class":310},"\"isVisible\"",[286,42666,42667],{"class":292},">Contenido visible\u003C/",[286,42669,31],{"class":296},[286,42671,314],{"class":292},[286,42673,42674,42676,42678],{"class":288,"line":399},[286,42675,793],{"class":292},[286,42677,810],{"class":296},[286,42679,314],{"class":292},[277,42681,42684],{"className":279,"code":42682,"filename":979,"highlights":42683,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n isVisible: true\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp v-show=\"isVisible\">Contenido visible\u003C/p>\n\u003C/template>\n",[444],[26,42685,42686,42694,42702,42708,42714,42721,42725,42729,42733,42741,42745,42753,42772],{"__ignoreMap":9},[286,42687,42688,42690,42692],{"class":288,"line":289},[286,42689,293],{"class":292},[286,42691,297],{"class":296},[286,42693,314],{"class":292},[286,42695,42696,42698,42700],{"class":288,"line":317},[286,42697,1065],{"class":320},[286,42699,1068],{"class":320},[286,42701,351],{"class":292},[286,42703,42704,42706],{"class":288,"line":333},[286,42705,1094],{"class":300},[286,42707,481],{"class":292},[286,42709,42710,42712],{"class":288,"line":339},[286,42711,1101],{"class":320},[286,42713,351],{"class":292},[286,42715,42716,42719],{"class":288,"line":354},[286,42717,42718],{"class":292}," isVisible: ",[286,42720,2089],{"class":364},[286,42722,42723],{"class":288,"line":368},[286,42724,1134],{"class":292},[286,42726,42727],{"class":288,"line":379},[286,42728,550],{"class":292},[286,42730,42731],{"class":288,"line":389},[286,42732,402],{"class":292},[286,42734,42735,42737,42739],{"class":288,"line":399},[286,42736,793],{"class":292},[286,42738,297],{"class":296},[286,42740,314],{"class":292},[286,42742,42743],{"class":288,"line":405},[286,42744,336],{"emptyLinePlaceholder":6},[286,42746,42747,42749,42751],{"class":288,"line":410},[286,42748,293],{"class":292},[286,42750,810],{"class":296},[286,42752,314],{"class":292},[286,42754,42756,42758,42760,42762,42764,42766,42768,42770],{"class":42755,"line":444},[288,9405],[286,42757,818],{"class":292},[286,42759,31],{"class":296},[286,42761,41200],{"class":300},[286,42763,307],{"class":292},[286,42765,42664],{"class":310},[286,42767,42667],{"class":292},[286,42769,31],{"class":296},[286,42771,314],{"class":292},[286,42773,42774,42776,42778],{"class":288,"line":464},[286,42775,793],{"class":292},[286,42777,810],{"class":296},[286,42779,314],{"class":292},[40,42781,42782],{"id":24887},[26,42783,24887],{},[31,42785,42786],{},"Permite renderizar listas a partir de arreglos u objetos reactivos.",[31,42788,42789],{},"Clave mental:",[3118,42791,42792],{},[31,42793,42794,42796,42797,42800],{},[26,42795,24887],{}," describe ",[82,42798,42799],{},"estructura",", no lógica.",[277,42802,42805],{"className":279,"code":42803,"filename":281,"highlights":42804,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n \nconst items = ref([\n { id: 1, name: 'Vue' },\n { id: 2, name: 'React' }\n])\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cli v-for=\"item in items\" :key=\"item.id\">\n {{ item.name }}\n \u003C/li>\n\u003C/template>\n",[410,444,464],[26,42806,42807,42817,42827,42831,42843,42855,42867,42871,42879,42883,42891,42913,42919,42928],{"__ignoreMap":9},[286,42808,42809,42811,42813,42815],{"class":288,"line":289},[286,42810,293],{"class":292},[286,42812,297],{"class":296},[286,42814,301],{"class":300},[286,42816,314],{"class":292},[286,42818,42819,42821,42823,42825],{"class":288,"line":317},[286,42820,321],{"class":320},[286,42822,11013],{"class":292},[286,42824,327],{"class":320},[286,42826,330],{"class":310},[286,42828,42829],{"class":288,"line":333},[286,42830,42613],{"class":292},[286,42832,42833,42835,42837,42839,42841],{"class":288,"line":339},[286,42834,413],{"class":320},[286,42836,38361],{"class":364},[286,42838,348],{"class":320},[286,42840,421],{"class":300},[286,42842,2111],{"class":292},[286,42844,42845,42847,42849,42851,42853],{"class":288,"line":354},[286,42846,2116],{"class":292},[286,42848,2079],{"class":364},[286,42850,22627],{"class":292},[286,42852,37156],{"class":310},[286,42854,2139],{"class":292},[286,42856,42857,42859,42861,42863,42865],{"class":288,"line":368},[286,42858,2116],{"class":292},[286,42860,2146],{"class":364},[286,42862,22627],{"class":292},[286,42864,37161],{"class":310},[286,42866,2186],{"class":292},[286,42868,42869],{"class":288,"line":379},[286,42870,2191],{"class":292},[286,42872,42873,42875,42877],{"class":288,"line":389},[286,42874,793],{"class":292},[286,42876,297],{"class":296},[286,42878,314],{"class":292},[286,42880,42881],{"class":288,"line":399},[286,42882,336],{"emptyLinePlaceholder":6},[286,42884,42885,42887,42889],{"class":288,"line":405},[286,42886,293],{"class":292},[286,42888,810],{"class":296},[286,42890,314],{"class":292},[286,42892,42894,42896,42898,42900,42902,42905,42907,42909,42911],{"class":42893,"line":410},[288,9405],[286,42895,818],{"class":292},[286,42897,51],{"class":296},[286,42899,12792],{"class":300},[286,42901,307],{"class":292},[286,42903,42904],{"class":310},"\"item in items\"",[286,42906,4324],{"class":300},[286,42908,307],{"class":292},[286,42910,30041],{"class":310},[286,42912,314],{"class":292},[286,42914,42916],{"class":42915,"line":444},[288,9405],[286,42917,42918],{"class":292}," {{ item.name }}\n",[286,42920,42922,42924,42926],{"class":42921,"line":464},[288,9405],[286,42923,962],{"class":292},[286,42925,51],{"class":296},[286,42927,314],{"class":292},[286,42929,42930,42932,42934],{"class":288,"line":469},[286,42931,793],{"class":292},[286,42933,810],{"class":296},[286,42935,314],{"class":292},[277,42937,42940],{"className":279,"code":42938,"filename":979,"highlights":42939,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n items: [\n { id: 1, name: 'Vue' },\n { id: 2, name: 'React' }\n ]\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cli v-for=\"item in items\" :key=\"item.id\">\n {{ item.name }}\n \u003C/li>\n\u003C/template>\n",[484,508,513],[26,42941,42942,42950,42958,42964,42970,42974,42986,42998,43002,43006,43010,43014,43022,43026,43034,43055,43060,43069],{"__ignoreMap":9},[286,42943,42944,42946,42948],{"class":288,"line":289},[286,42945,293],{"class":292},[286,42947,297],{"class":296},[286,42949,314],{"class":292},[286,42951,42952,42954,42956],{"class":288,"line":317},[286,42953,1065],{"class":320},[286,42955,1068],{"class":320},[286,42957,351],{"class":292},[286,42959,42960,42962],{"class":288,"line":333},[286,42961,1094],{"class":300},[286,42963,481],{"class":292},[286,42965,42966,42968],{"class":288,"line":339},[286,42967,1101],{"class":320},[286,42969,351],{"class":292},[286,42971,42972],{"class":288,"line":354},[286,42973,38556],{"class":292},[286,42975,42976,42978,42980,42982,42984],{"class":288,"line":368},[286,42977,2671],{"class":292},[286,42979,2079],{"class":364},[286,42981,22627],{"class":292},[286,42983,37156],{"class":310},[286,42985,2139],{"class":292},[286,42987,42988,42990,42992,42994,42996],{"class":288,"line":379},[286,42989,2671],{"class":292},[286,42991,2146],{"class":364},[286,42993,22627],{"class":292},[286,42995,37161],{"class":310},[286,42997,2186],{"class":292},[286,42999,43000],{"class":288,"line":389},[286,43001,2732],{"class":292},[286,43003,43004],{"class":288,"line":399},[286,43005,1134],{"class":292},[286,43007,43008],{"class":288,"line":405},[286,43009,550],{"class":292},[286,43011,43012],{"class":288,"line":410},[286,43013,402],{"class":292},[286,43015,43016,43018,43020],{"class":288,"line":444},[286,43017,793],{"class":292},[286,43019,297],{"class":296},[286,43021,314],{"class":292},[286,43023,43024],{"class":288,"line":464},[286,43025,336],{"emptyLinePlaceholder":6},[286,43027,43028,43030,43032],{"class":288,"line":469},[286,43029,293],{"class":292},[286,43031,810],{"class":296},[286,43033,314],{"class":292},[286,43035,43037,43039,43041,43043,43045,43047,43049,43051,43053],{"class":43036,"line":484},[288,9405],[286,43038,818],{"class":292},[286,43040,51],{"class":296},[286,43042,12792],{"class":300},[286,43044,307],{"class":292},[286,43046,42904],{"class":310},[286,43048,4324],{"class":300},[286,43050,307],{"class":292},[286,43052,30041],{"class":310},[286,43054,314],{"class":292},[286,43056,43058],{"class":43057,"line":508},[288,9405],[286,43059,42918],{"class":292},[286,43061,43063,43065,43067],{"class":43062,"line":513},[288,9405],[286,43064,962],{"class":292},[286,43066,51],{"class":296},[286,43068,314],{"class":292},[286,43070,43071,43073,43075],{"class":288,"line":528},[286,43072,793],{"class":292},[286,43074,810],{"class":296},[286,43076,314],{"class":292},[31,43078,43079,10976,43081,43084],{},[26,43080,1796],{},[82,43082,43083],{},"no es opcional",". Nunca lo fue.\nEs esencial para que Vue pueda optimizar correctamente el renderizado.",[40,43086,43087],{"id":17981},[26,43088,17981],{},[31,43090,43091],{},"Vincula dinámicamente atributos HTML o props de componentes.",[31,43093,7837,43094,43096],{},[26,43095,17981],{}," como:",[3118,43098,43099],{},[31,43100,43101],{},"“Este atributo depende del estado”",[277,43103,43106],{"className":279,"code":43104,"filename":281,"highlights":43105,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst imageUrl = ref('https://example.com/image.jpg')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cimg v-bind:src=\"imageUrl\" alt=\"Imagen dinámica\" />\n\u003C/template>\n",[389],[26,43107,43108,43118,43128,43132,43150,43158,43162,43170,43195],{"__ignoreMap":9},[286,43109,43110,43112,43114,43116],{"class":288,"line":289},[286,43111,293],{"class":292},[286,43113,297],{"class":296},[286,43115,301],{"class":300},[286,43117,314],{"class":292},[286,43119,43120,43122,43124,43126],{"class":288,"line":317},[286,43121,321],{"class":320},[286,43123,11013],{"class":292},[286,43125,327],{"class":320},[286,43127,330],{"class":310},[286,43129,43130],{"class":288,"line":333},[286,43131,336],{"emptyLinePlaceholder":6},[286,43133,43134,43136,43139,43141,43143,43145,43148],{"class":288,"line":339},[286,43135,413],{"class":320},[286,43137,43138],{"class":364}," imageUrl",[286,43140,348],{"class":320},[286,43142,421],{"class":300},[286,43144,456],{"class":292},[286,43146,43147],{"class":310},"'https://example.com/image.jpg'",[286,43149,441],{"class":292},[286,43151,43152,43154,43156],{"class":288,"line":354},[286,43153,793],{"class":292},[286,43155,297],{"class":296},[286,43157,314],{"class":292},[286,43159,43160],{"class":288,"line":368},[286,43161,336],{"emptyLinePlaceholder":6},[286,43163,43164,43166,43168],{"class":288,"line":379},[286,43165,293],{"class":292},[286,43167,810],{"class":296},[286,43169,314],{"class":292},[286,43171,43173,43175,43177,43180,43182,43185,43188,43190,43193],{"class":43172,"line":389},[288,9405],[286,43174,818],{"class":292},[286,43176,34227],{"class":296},[286,43178,43179],{"class":300}," v-bind:src",[286,43181,307],{"class":292},[286,43183,43184],{"class":310},"\"imageUrl\"",[286,43186,43187],{"class":300}," alt",[286,43189,307],{"class":292},[286,43191,43192],{"class":310},"\"Imagen dinámica\"",[286,43194,4332],{"class":292},[286,43196,43197,43199,43201],{"class":288,"line":399},[286,43198,793],{"class":292},[286,43200,810],{"class":296},[286,43202,314],{"class":292},[277,43204,43207],{"className":279,"code":43205,"filename":979,"highlights":43206,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n imageUrl: '/logo.png',\n description: 'Logo'\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cimg :src=\"imageUrl\" :alt=\"description\" />\n\u003C/template>\n",[464],[26,43208,43209,43217,43225,43231,43237,43247,43255,43259,43263,43267,43275,43279,43287,43311],{"__ignoreMap":9},[286,43210,43211,43213,43215],{"class":288,"line":289},[286,43212,293],{"class":292},[286,43214,297],{"class":296},[286,43216,314],{"class":292},[286,43218,43219,43221,43223],{"class":288,"line":317},[286,43220,1065],{"class":320},[286,43222,1068],{"class":320},[286,43224,351],{"class":292},[286,43226,43227,43229],{"class":288,"line":333},[286,43228,1094],{"class":300},[286,43230,481],{"class":292},[286,43232,43233,43235],{"class":288,"line":339},[286,43234,1101],{"class":320},[286,43236,351],{"class":292},[286,43238,43239,43242,43245],{"class":288,"line":354},[286,43240,43241],{"class":292}," imageUrl: ",[286,43243,43244],{"class":310},"'/logo.png'",[286,43246,1085],{"class":292},[286,43248,43249,43252],{"class":288,"line":368},[286,43250,43251],{"class":292}," description: ",[286,43253,43254],{"class":310},"'Logo'\n",[286,43256,43257],{"class":288,"line":379},[286,43258,1134],{"class":292},[286,43260,43261],{"class":288,"line":389},[286,43262,550],{"class":292},[286,43264,43265],{"class":288,"line":399},[286,43266,402],{"class":292},[286,43268,43269,43271,43273],{"class":288,"line":405},[286,43270,793],{"class":292},[286,43272,297],{"class":296},[286,43274,314],{"class":292},[286,43276,43277],{"class":288,"line":410},[286,43278,336],{"emptyLinePlaceholder":6},[286,43280,43281,43283,43285],{"class":288,"line":444},[286,43282,293],{"class":292},[286,43284,810],{"class":296},[286,43286,314],{"class":292},[286,43288,43290,43292,43294,43297,43299,43301,43304,43306,43309],{"class":43289,"line":464},[288,9405],[286,43291,818],{"class":292},[286,43293,34227],{"class":296},[286,43295,43296],{"class":300}," :src",[286,43298,307],{"class":292},[286,43300,43184],{"class":310},[286,43302,43303],{"class":300}," :alt",[286,43305,307],{"class":292},[286,43307,43308],{"class":310},"\"description\"",[286,43310,4332],{"class":292},[286,43312,43313,43315,43317],{"class":288,"line":469},[286,43314,793],{"class":292},[286,43316,810],{"class":296},[286,43318,314],{"class":292},[40,43320,43321],{"id":17978},[26,43322,17978],{},[31,43324,43325,43326,43329],{},"Crea una ",[82,43327,43328],{},"sincronización bidireccional"," entre el estado y un input o componente.",[31,43331,43332],{},"Es ideal para:",[48,43334,43335,43337,43340],{},[51,43336,30955],{},[51,43338,43339],{},"Inputs controlados",[51,43341,43342],{},"Componentes reutilizables",[277,43344,43347],{"className":279,"code":43345,"filename":281,"highlights":43346,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst username = ref('')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cinput v-model=\"username\" placeholder=\"Ingresa tu nombre de usuario\" />\n \u003Cp>Hola, {{ username }}!\u003C/p>\n\u003C/template>\n",[389],[26,43348,43349,43359,43369,43373,43390,43398,43402,43410,43433,43446],{"__ignoreMap":9},[286,43350,43351,43353,43355,43357],{"class":288,"line":289},[286,43352,293],{"class":292},[286,43354,297],{"class":296},[286,43356,301],{"class":300},[286,43358,314],{"class":292},[286,43360,43361,43363,43365,43367],{"class":288,"line":317},[286,43362,321],{"class":320},[286,43364,11013],{"class":292},[286,43366,327],{"class":320},[286,43368,330],{"class":310},[286,43370,43371],{"class":288,"line":333},[286,43372,336],{"emptyLinePlaceholder":6},[286,43374,43375,43377,43380,43382,43384,43386,43388],{"class":288,"line":339},[286,43376,413],{"class":320},[286,43378,43379],{"class":364}," username",[286,43381,348],{"class":320},[286,43383,421],{"class":300},[286,43385,456],{"class":292},[286,43387,459],{"class":310},[286,43389,441],{"class":292},[286,43391,43392,43394,43396],{"class":288,"line":354},[286,43393,793],{"class":292},[286,43395,297],{"class":296},[286,43397,314],{"class":292},[286,43399,43400],{"class":288,"line":368},[286,43401,336],{"emptyLinePlaceholder":6},[286,43403,43404,43406,43408],{"class":288,"line":379},[286,43405,293],{"class":292},[286,43407,810],{"class":296},[286,43409,314],{"class":292},[286,43411,43413,43415,43417,43419,43421,43424,43426,43428,43431],{"class":43412,"line":389},[288,9405],[286,43414,818],{"class":292},[286,43416,18048],{"class":296},[286,43418,23758],{"class":300},[286,43420,307],{"class":292},[286,43422,43423],{"class":310},"\"username\"",[286,43425,31927],{"class":300},[286,43427,307],{"class":292},[286,43429,43430],{"class":310},"\"Ingresa tu nombre de usuario\"",[286,43432,4332],{"class":292},[286,43434,43435,43437,43439,43442,43444],{"class":288,"line":399},[286,43436,818],{"class":292},[286,43438,31],{"class":296},[286,43440,43441],{"class":292},">Hola, {{ username }}!\u003C/",[286,43443,31],{"class":296},[286,43445,314],{"class":292},[286,43447,43448,43450,43452],{"class":288,"line":405},[286,43449,793],{"class":292},[286,43451,810],{"class":296},[286,43453,314],{"class":292},[277,43455,43458],{"className":279,"code":43456,"filename":979,"highlights":43457,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n username: ''\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cinput v-model=\"username\" placeholder=\"Ingresa tu nombre de usuario\" />\n \u003Cp>Hola, {{ username }}!\u003C/p>\n\u003C/template>\n",[444],[26,43459,43460,43468,43476,43482,43488,43495,43499,43503,43507,43515,43519,43527,43548,43560],{"__ignoreMap":9},[286,43461,43462,43464,43466],{"class":288,"line":289},[286,43463,293],{"class":292},[286,43465,297],{"class":296},[286,43467,314],{"class":292},[286,43469,43470,43472,43474],{"class":288,"line":317},[286,43471,1065],{"class":320},[286,43473,1068],{"class":320},[286,43475,351],{"class":292},[286,43477,43478,43480],{"class":288,"line":333},[286,43479,1094],{"class":300},[286,43481,481],{"class":292},[286,43483,43484,43486],{"class":288,"line":339},[286,43485,1101],{"class":320},[286,43487,351],{"class":292},[286,43489,43490,43493],{"class":288,"line":354},[286,43491,43492],{"class":292}," username: ",[286,43494,1129],{"class":310},[286,43496,43497],{"class":288,"line":368},[286,43498,1134],{"class":292},[286,43500,43501],{"class":288,"line":379},[286,43502,550],{"class":292},[286,43504,43505],{"class":288,"line":389},[286,43506,402],{"class":292},[286,43508,43509,43511,43513],{"class":288,"line":399},[286,43510,793],{"class":292},[286,43512,297],{"class":296},[286,43514,314],{"class":292},[286,43516,43517],{"class":288,"line":405},[286,43518,336],{"emptyLinePlaceholder":6},[286,43520,43521,43523,43525],{"class":288,"line":410},[286,43522,293],{"class":292},[286,43524,810],{"class":296},[286,43526,314],{"class":292},[286,43528,43530,43532,43534,43536,43538,43540,43542,43544,43546],{"class":43529,"line":444},[288,9405],[286,43531,818],{"class":292},[286,43533,18048],{"class":296},[286,43535,23758],{"class":300},[286,43537,307],{"class":292},[286,43539,43423],{"class":310},[286,43541,31927],{"class":300},[286,43543,307],{"class":292},[286,43545,43430],{"class":310},[286,43547,4332],{"class":292},[286,43549,43550,43552,43554,43556,43558],{"class":288,"line":464},[286,43551,818],{"class":292},[286,43553,31],{"class":296},[286,43555,43441],{"class":292},[286,43557,31],{"class":296},[286,43559,314],{"class":292},[286,43561,43562,43564,43566],{"class":288,"line":469},[286,43563,793],{"class":292},[286,43565,810],{"class":296},[286,43567,314],{"class":292},[31,43569,43570,43571,28162,43573,43575],{},"Internamente, combina props y eventos (",[26,43572,28238],{},[26,43574,28244],{},").\nNo es magia, pero se le parece bastante.",[40,43577,43578],{"id":17984},[26,43579,17984],{},[31,43581,43582],{},"Escucha eventos del DOM y ejecuta lógica reactiva.",[277,43584,43587],{"className":279,"code":43585,"filename":281,"highlights":43586,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\nconst increment = () => {\n count.value++\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton v-on:click=\"increment\">Has hecho clic {{ count }} veces\u003C/button>\n\u003C/template>\n",[410],[26,43588,43589,43599,43609,43613,43629,43644,43650,43654,43662,43666,43674,43696],{"__ignoreMap":9},[286,43590,43591,43593,43595,43597],{"class":288,"line":289},[286,43592,293],{"class":292},[286,43594,297],{"class":296},[286,43596,301],{"class":300},[286,43598,314],{"class":292},[286,43600,43601,43603,43605,43607],{"class":288,"line":317},[286,43602,321],{"class":320},[286,43604,11013],{"class":292},[286,43606,327],{"class":320},[286,43608,330],{"class":310},[286,43610,43611],{"class":288,"line":333},[286,43612,336],{"emptyLinePlaceholder":6},[286,43614,43615,43617,43619,43621,43623,43625,43627],{"class":288,"line":339},[286,43616,413],{"class":320},[286,43618,9387],{"class":364},[286,43620,348],{"class":320},[286,43622,421],{"class":300},[286,43624,456],{"class":292},[286,43626,3549],{"class":364},[286,43628,441],{"class":292},[286,43630,43631,43633,43636,43638,43640,43642],{"class":288,"line":354},[286,43632,413],{"class":320},[286,43634,43635],{"class":300}," increment",[286,43637,348],{"class":320},[286,43639,606],{"class":292},[286,43641,609],{"class":320},[286,43643,351],{"class":292},[286,43645,43646,43648],{"class":288,"line":368},[286,43647,9419],{"class":292},[286,43649,9422],{"class":320},[286,43651,43652],{"class":288,"line":379},[286,43653,402],{"class":292},[286,43655,43656,43658,43660],{"class":288,"line":389},[286,43657,793],{"class":292},[286,43659,297],{"class":296},[286,43661,314],{"class":292},[286,43663,43664],{"class":288,"line":399},[286,43665,336],{"emptyLinePlaceholder":6},[286,43667,43668,43670,43672],{"class":288,"line":405},[286,43669,293],{"class":292},[286,43671,810],{"class":296},[286,43673,314],{"class":292},[286,43675,43677,43679,43681,43684,43686,43689,43692,43694],{"class":43676,"line":410},[288,9405],[286,43678,818],{"class":292},[286,43680,4274],{"class":296},[286,43682,43683],{"class":300}," v-on:click",[286,43685,307],{"class":292},[286,43687,43688],{"class":310},"\"increment\"",[286,43690,43691],{"class":292},">Has hecho clic {{ count }} veces\u003C/",[286,43693,4274],{"class":296},[286,43695,314],{"class":292},[286,43697,43698,43700,43702],{"class":288,"line":444},[286,43699,793],{"class":292},[286,43701,810],{"class":296},[286,43703,314],{"class":292},[277,43705,43708],{"className":279,"code":43706,"filename":979,"highlights":43707,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n count: 0\n }\n },\n methods: {\n increment() {\n this.count++\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton v-on:click=\"increment\">Clickeame\u003C/button>\n \u003Cp>Has clickeado {{ count }} veces.\u003C/p>\n\u003C/template>\n",[513],[26,43709,43710,43718,43726,43732,43738,43744,43748,43752,43756,43763,43772,43776,43780,43784,43792,43796,43804,43824,43837],{"__ignoreMap":9},[286,43711,43712,43714,43716],{"class":288,"line":289},[286,43713,293],{"class":292},[286,43715,297],{"class":296},[286,43717,314],{"class":292},[286,43719,43720,43722,43724],{"class":288,"line":317},[286,43721,1065],{"class":320},[286,43723,1068],{"class":320},[286,43725,351],{"class":292},[286,43727,43728,43730],{"class":288,"line":333},[286,43729,1094],{"class":300},[286,43731,481],{"class":292},[286,43733,43734,43736],{"class":288,"line":339},[286,43735,1101],{"class":320},[286,43737,351],{"class":292},[286,43739,43740,43742],{"class":288,"line":354},[286,43741,31693],{"class":292},[286,43743,4699],{"class":364},[286,43745,43746],{"class":288,"line":368},[286,43747,1134],{"class":292},[286,43749,43750],{"class":288,"line":379},[286,43751,1139],{"class":292},[286,43753,43754],{"class":288,"line":389},[286,43755,1148],{"class":292},[286,43757,43758,43761],{"class":288,"line":399},[286,43759,43760],{"class":300}," increment",[286,43762,481],{"class":292},[286,43764,43765,43767,43770],{"class":288,"line":405},[286,43766,1220],{"class":364},[286,43768,43769],{"class":292},".count",[286,43771,9422],{"class":320},[286,43773,43774],{"class":288,"line":410},[286,43775,1134],{"class":292},[286,43777,43778],{"class":288,"line":444},[286,43779,550],{"class":292},[286,43781,43782],{"class":288,"line":464},[286,43783,402],{"class":292},[286,43785,43786,43788,43790],{"class":288,"line":469},[286,43787,793],{"class":292},[286,43789,297],{"class":296},[286,43791,314],{"class":292},[286,43793,43794],{"class":288,"line":484},[286,43795,336],{"emptyLinePlaceholder":6},[286,43797,43798,43800,43802],{"class":288,"line":508},[286,43799,293],{"class":292},[286,43801,810],{"class":296},[286,43803,314],{"class":292},[286,43805,43807,43809,43811,43813,43815,43817,43820,43822],{"class":43806,"line":513},[288,9405],[286,43808,818],{"class":292},[286,43810,4274],{"class":296},[286,43812,43683],{"class":300},[286,43814,307],{"class":292},[286,43816,43688],{"class":310},[286,43818,43819],{"class":292},">Clickeame\u003C/",[286,43821,4274],{"class":296},[286,43823,314],{"class":292},[286,43825,43826,43828,43830,43833,43835],{"class":288,"line":528},[286,43827,818],{"class":292},[286,43829,31],{"class":296},[286,43831,43832],{"class":292},">Has clickeado {{ count }} veces.\u003C/",[286,43834,31],{"class":296},[286,43836,314],{"class":292},[286,43838,43839,43841,43843],{"class":288,"line":547},[286,43840,793],{"class":292},[286,43842,810],{"class":296},[286,43844,314],{"class":292},[31,43846,43847,43848,519,43851,235,43853,235,43855,43857],{},"Soporta ",[82,43849,43850],{},"modificadores",[26,43852,31116],{},[26,43854,31113],{},[26,43856,31119],{},", etc.) que evitan código innecesario.",[40,43859,43860],{"id":24594},[26,43861,24594],{},[31,43863,43864],{},"Inserta texto plano en un elemento, reemplazando su contenido.",[277,43866,43869],{"className":279,"code":43867,"filename":281,"highlights":43868,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst message = ref('Hola Mundo')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-text=\"message\">\u003C/div>\n\u003C/template>\n",[389],[26,43870,43871,43881,43891,43895,43912,43920,43924,43932,43952],{"__ignoreMap":9},[286,43872,43873,43875,43877,43879],{"class":288,"line":289},[286,43874,293],{"class":292},[286,43876,297],{"class":296},[286,43878,301],{"class":300},[286,43880,314],{"class":292},[286,43882,43883,43885,43887,43889],{"class":288,"line":317},[286,43884,321],{"class":320},[286,43886,11013],{"class":292},[286,43888,327],{"class":320},[286,43890,330],{"class":310},[286,43892,43893],{"class":288,"line":333},[286,43894,336],{"emptyLinePlaceholder":6},[286,43896,43897,43899,43901,43903,43905,43907,43910],{"class":288,"line":339},[286,43898,413],{"class":320},[286,43900,23161],{"class":364},[286,43902,348],{"class":320},[286,43904,421],{"class":300},[286,43906,456],{"class":292},[286,43908,43909],{"class":310},"'Hola Mundo'",[286,43911,441],{"class":292},[286,43913,43914,43916,43918],{"class":288,"line":354},[286,43915,793],{"class":292},[286,43917,297],{"class":296},[286,43919,314],{"class":292},[286,43921,43922],{"class":288,"line":368},[286,43923,336],{"emptyLinePlaceholder":6},[286,43925,43926,43928,43930],{"class":288,"line":379},[286,43927,293],{"class":292},[286,43929,810],{"class":296},[286,43931,314],{"class":292},[286,43933,43935,43937,43939,43941,43943,43946,43948,43950],{"class":43934,"line":389},[288,9405],[286,43936,818],{"class":292},[286,43938,4208],{"class":296},[286,43940,24685],{"class":300},[286,43942,307],{"class":292},[286,43944,43945],{"class":310},"\"message\"",[286,43947,24697],{"class":292},[286,43949,4208],{"class":296},[286,43951,314],{"class":292},[286,43953,43954,43956,43958],{"class":288,"line":399},[286,43955,793],{"class":292},[286,43957,810],{"class":296},[286,43959,314],{"class":292},[277,43961,43964],{"className":279,"code":43962,"filename":979,"highlights":43963,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n message: 'Hola Vue'\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-text=\"message\">\u003C/div>\n\u003C/template>\n",[444],[26,43965,43966,43974,43982,43988,43994,44001,44005,44009,44013,44021,44025,44033,44052],{"__ignoreMap":9},[286,43967,43968,43970,43972],{"class":288,"line":289},[286,43969,293],{"class":292},[286,43971,297],{"class":296},[286,43973,314],{"class":292},[286,43975,43976,43978,43980],{"class":288,"line":317},[286,43977,1065],{"class":320},[286,43979,1068],{"class":320},[286,43981,351],{"class":292},[286,43983,43984,43986],{"class":288,"line":333},[286,43985,1094],{"class":300},[286,43987,481],{"class":292},[286,43989,43990,43992],{"class":288,"line":339},[286,43991,1101],{"class":320},[286,43993,351],{"class":292},[286,43995,43996,43998],{"class":288,"line":354},[286,43997,23275],{"class":292},[286,43999,44000],{"class":310},"'Hola Vue'\n",[286,44002,44003],{"class":288,"line":368},[286,44004,1134],{"class":292},[286,44006,44007],{"class":288,"line":379},[286,44008,550],{"class":292},[286,44010,44011],{"class":288,"line":389},[286,44012,402],{"class":292},[286,44014,44015,44017,44019],{"class":288,"line":399},[286,44016,793],{"class":292},[286,44018,297],{"class":296},[286,44020,314],{"class":292},[286,44022,44023],{"class":288,"line":405},[286,44024,336],{"emptyLinePlaceholder":6},[286,44026,44027,44029,44031],{"class":288,"line":410},[286,44028,293],{"class":292},[286,44030,810],{"class":296},[286,44032,314],{"class":292},[286,44034,44036,44038,44040,44042,44044,44046,44048,44050],{"class":44035,"line":444},[288,9405],[286,44037,818],{"class":292},[286,44039,4208],{"class":296},[286,44041,24685],{"class":300},[286,44043,307],{"class":292},[286,44045,43945],{"class":310},[286,44047,24697],{"class":292},[286,44049,4208],{"class":296},[286,44051,314],{"class":292},[286,44053,44054,44056,44058],{"class":288,"line":464},[286,44055,793],{"class":292},[286,44057,810],{"class":296},[286,44059,314],{"class":292},[31,44061,44062],{},"No se usa mucho, pero existe para casos muy específicos donde no quieres interpolaciones.",[40,44064,44065],{"id":24597},[26,44066,24597],{},[31,44068,44069],{},"Inserta HTML sin escapar.",[277,44071,44074],{"className":279,"code":44072,"filename":281,"highlights":44073,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst rawHtml = ref('\u003Cstrong>Texto en negrita\u003C/strong>')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-html=\"rawHtml\">\u003C/div>\n\u003C/template>\n",[389],[26,44075,44076,44086,44096,44100,44118,44126,44130,44138,44158],{"__ignoreMap":9},[286,44077,44078,44080,44082,44084],{"class":288,"line":289},[286,44079,293],{"class":292},[286,44081,297],{"class":296},[286,44083,301],{"class":300},[286,44085,314],{"class":292},[286,44087,44088,44090,44092,44094],{"class":288,"line":317},[286,44089,321],{"class":320},[286,44091,11013],{"class":292},[286,44093,327],{"class":320},[286,44095,330],{"class":310},[286,44097,44098],{"class":288,"line":333},[286,44099,336],{"emptyLinePlaceholder":6},[286,44101,44102,44104,44107,44109,44111,44113,44116],{"class":288,"line":339},[286,44103,413],{"class":320},[286,44105,44106],{"class":364}," rawHtml",[286,44108,348],{"class":320},[286,44110,421],{"class":300},[286,44112,456],{"class":292},[286,44114,44115],{"class":310},"'\u003Cstrong>Texto en negrita\u003C/strong>'",[286,44117,441],{"class":292},[286,44119,44120,44122,44124],{"class":288,"line":354},[286,44121,793],{"class":292},[286,44123,297],{"class":296},[286,44125,314],{"class":292},[286,44127,44128],{"class":288,"line":368},[286,44129,336],{"emptyLinePlaceholder":6},[286,44131,44132,44134,44136],{"class":288,"line":379},[286,44133,293],{"class":292},[286,44135,810],{"class":296},[286,44137,314],{"class":292},[286,44139,44141,44143,44145,44147,44149,44152,44154,44156],{"class":44140,"line":389},[288,9405],[286,44142,818],{"class":292},[286,44144,4208],{"class":296},[286,44146,24755],{"class":300},[286,44148,307],{"class":292},[286,44150,44151],{"class":310},"\"rawHtml\"",[286,44153,24697],{"class":292},[286,44155,4208],{"class":296},[286,44157,314],{"class":292},[286,44159,44160,44162,44164],{"class":288,"line":399},[286,44161,793],{"class":292},[286,44163,810],{"class":296},[286,44165,314],{"class":292},[277,44167,44170],{"className":279,"code":44168,"filename":979,"highlights":44169,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n rawHtml: '\u003Cstrong>HTML dinámico\u003C/strong>'\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-html=\"rawHtml\">\u003C/div>\n\u003C/template>\n",[444],[26,44171,44172,44180,44188,44194,44200,44208,44212,44216,44220,44228,44232,44240,44259],{"__ignoreMap":9},[286,44173,44174,44176,44178],{"class":288,"line":289},[286,44175,293],{"class":292},[286,44177,297],{"class":296},[286,44179,314],{"class":292},[286,44181,44182,44184,44186],{"class":288,"line":317},[286,44183,1065],{"class":320},[286,44185,1068],{"class":320},[286,44187,351],{"class":292},[286,44189,44190,44192],{"class":288,"line":333},[286,44191,1094],{"class":300},[286,44193,481],{"class":292},[286,44195,44196,44198],{"class":288,"line":339},[286,44197,1101],{"class":320},[286,44199,351],{"class":292},[286,44201,44202,44205],{"class":288,"line":354},[286,44203,44204],{"class":292}," rawHtml: ",[286,44206,44207],{"class":310},"'\u003Cstrong>HTML dinámico\u003C/strong>'\n",[286,44209,44210],{"class":288,"line":368},[286,44211,1134],{"class":292},[286,44213,44214],{"class":288,"line":379},[286,44215,550],{"class":292},[286,44217,44218],{"class":288,"line":389},[286,44219,402],{"class":292},[286,44221,44222,44224,44226],{"class":288,"line":399},[286,44223,793],{"class":292},[286,44225,297],{"class":296},[286,44227,314],{"class":292},[286,44229,44230],{"class":288,"line":405},[286,44231,336],{"emptyLinePlaceholder":6},[286,44233,44234,44236,44238],{"class":288,"line":410},[286,44235,293],{"class":292},[286,44237,810],{"class":296},[286,44239,314],{"class":292},[286,44241,44243,44245,44247,44249,44251,44253,44255,44257],{"class":44242,"line":444},[288,9405],[286,44244,818],{"class":292},[286,44246,4208],{"class":296},[286,44248,24755],{"class":300},[286,44250,307],{"class":292},[286,44252,44151],{"class":310},[286,44254,24697],{"class":292},[286,44256,4208],{"class":296},[286,44258,314],{"class":292},[286,44260,44261,44263,44265],{"class":288,"line":464},[286,44262,793],{"class":292},[286,44264,810],{"class":296},[286,44266,314],{"class":292},[3118,44268,44269],{},[31,44270,44271,44272,44275],{},"⚠️ ",[82,44273,44274],{},"Nunca lo uses con contenido no confiable",".\nEs una puerta directa a XSS si no sabes exactamente lo que estás renderizando.",[40,44277,44278],{"id":25876},[26,44279,25876],{},[31,44281,44282],{},"Permite definir contenido dinámico dentro de componentes mediante slots.",[277,44284,44287],{"className":279,"code":44285,"filename":281,"highlights":44286,"language":282,"meta":9,"style":9},"\u003Cscript setup>\n\u003C/script>\n\n\u003Ctemplate>\n \u003CMyCard>\n \u003Ctemplate v-slot:header>\n \u003Ch1>Encabezado Personalizado\u003C/h1>\n \u003C/template>\n \u003Cp>Contenido del cuerpo de la tarjeta.\u003C/p>\n \u003Ctemplate v-slot:footer>\n \u003Cbutton>Acción\u003C/button>\n \u003C/template>\n \u003C/MyCard>\n\u003C/template>\n",[368,405],[26,44288,44289,44299,44307,44311,44319,44328,44343,44356,44364,44377,44392,44405,44413,44421],{"__ignoreMap":9},[286,44290,44291,44293,44295,44297],{"class":288,"line":289},[286,44292,293],{"class":292},[286,44294,297],{"class":296},[286,44296,301],{"class":300},[286,44298,314],{"class":292},[286,44300,44301,44303,44305],{"class":288,"line":317},[286,44302,793],{"class":292},[286,44304,297],{"class":296},[286,44306,314],{"class":292},[286,44308,44309],{"class":288,"line":333},[286,44310,336],{"emptyLinePlaceholder":6},[286,44312,44313,44315,44317],{"class":288,"line":339},[286,44314,293],{"class":292},[286,44316,810],{"class":296},[286,44318,314],{"class":292},[286,44320,44321,44323,44326],{"class":288,"line":354},[286,44322,818],{"class":292},[286,44324,44325],{"class":296},"MyCard",[286,44327,314],{"class":292},[286,44329,44331,44333,44335,44337,44339,44341],{"class":44330,"line":368},[288,9405],[286,44332,837],{"class":292},[286,44334,810],{"class":296},[286,44336,26198],{"class":300},[286,44338,361],{"class":292},[286,44340,4145],{"class":300},[286,44342,314],{"class":292},[286,44344,44345,44347,44349,44352,44354],{"class":288,"line":379},[286,44346,887],{"class":292},[286,44348,21],{"class":296},[286,44350,44351],{"class":292},">Encabezado Personalizado\u003C/",[286,44353,21],{"class":296},[286,44355,314],{"class":292},[286,44357,44358,44360,44362],{"class":288,"line":389},[286,44359,930],{"class":292},[286,44361,810],{"class":296},[286,44363,314],{"class":292},[286,44365,44366,44368,44370,44373,44375],{"class":288,"line":399},[286,44367,837],{"class":292},[286,44369,31],{"class":296},[286,44371,44372],{"class":292},">Contenido del cuerpo de la tarjeta.\u003C/",[286,44374,31],{"class":296},[286,44376,314],{"class":292},[286,44378,44380,44382,44384,44386,44388,44390],{"class":44379,"line":405},[288,9405],[286,44381,837],{"class":292},[286,44383,810],{"class":296},[286,44385,26198],{"class":300},[286,44387,361],{"class":292},[286,44389,26588],{"class":300},[286,44391,314],{"class":292},[286,44393,44394,44396,44398,44401,44403],{"class":288,"line":410},[286,44395,887],{"class":292},[286,44397,4274],{"class":296},[286,44399,44400],{"class":292},">Acción\u003C/",[286,44402,4274],{"class":296},[286,44404,314],{"class":292},[286,44406,44407,44409,44411],{"class":288,"line":444},[286,44408,930],{"class":292},[286,44410,810],{"class":296},[286,44412,314],{"class":292},[286,44414,44415,44417,44419],{"class":288,"line":464},[286,44416,962],{"class":292},[286,44418,44325],{"class":296},[286,44420,314],{"class":292},[286,44422,44423,44425,44427],{"class":288,"line":469},[286,44424,793],{"class":292},[286,44426,810],{"class":296},[286,44428,314],{"class":292},[277,44430,44433],{"className":279,"code":44431,"filename":979,"highlights":44432,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n components: { MyCard }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CMyCard>\n \u003Ctemplate v-slot:header>\n \u003Ch1>Encabezado Personalizado\u003C/h1>\n \u003C/template>\n \u003Cp>Contenido del cuerpo de la tarjeta.\u003C/p>\n \u003Ctemplate v-slot:footer>\n \u003Cbutton>Acción\u003C/button>\n \u003C/template>\n \u003C/MyCard>\n\u003C/template>\n",[399,464],[26,44434,44435,44443,44451,44456,44460,44468,44472,44480,44488,44503,44515,44523,44535,44550,44562,44570,44578],{"__ignoreMap":9},[286,44436,44437,44439,44441],{"class":288,"line":289},[286,44438,293],{"class":292},[286,44440,297],{"class":296},[286,44442,314],{"class":292},[286,44444,44445,44447,44449],{"class":288,"line":317},[286,44446,1065],{"class":320},[286,44448,1068],{"class":320},[286,44450,351],{"class":292},[286,44452,44453],{"class":288,"line":333},[286,44454,44455],{"class":292}," components: { MyCard }\n",[286,44457,44458],{"class":288,"line":339},[286,44459,402],{"class":292},[286,44461,44462,44464,44466],{"class":288,"line":354},[286,44463,793],{"class":292},[286,44465,297],{"class":296},[286,44467,314],{"class":292},[286,44469,44470],{"class":288,"line":368},[286,44471,336],{"emptyLinePlaceholder":6},[286,44473,44474,44476,44478],{"class":288,"line":379},[286,44475,293],{"class":292},[286,44477,810],{"class":296},[286,44479,314],{"class":292},[286,44481,44482,44484,44486],{"class":288,"line":389},[286,44483,818],{"class":292},[286,44485,44325],{"class":296},[286,44487,314],{"class":292},[286,44489,44491,44493,44495,44497,44499,44501],{"class":44490,"line":399},[288,9405],[286,44492,837],{"class":292},[286,44494,810],{"class":296},[286,44496,26198],{"class":300},[286,44498,361],{"class":292},[286,44500,4145],{"class":300},[286,44502,314],{"class":292},[286,44504,44505,44507,44509,44511,44513],{"class":288,"line":405},[286,44506,887],{"class":292},[286,44508,21],{"class":296},[286,44510,44351],{"class":292},[286,44512,21],{"class":296},[286,44514,314],{"class":292},[286,44516,44517,44519,44521],{"class":288,"line":410},[286,44518,930],{"class":292},[286,44520,810],{"class":296},[286,44522,314],{"class":292},[286,44524,44525,44527,44529,44531,44533],{"class":288,"line":444},[286,44526,837],{"class":292},[286,44528,31],{"class":296},[286,44530,44372],{"class":292},[286,44532,31],{"class":296},[286,44534,314],{"class":292},[286,44536,44538,44540,44542,44544,44546,44548],{"class":44537,"line":464},[288,9405],[286,44539,837],{"class":292},[286,44541,810],{"class":296},[286,44543,26198],{"class":300},[286,44545,361],{"class":292},[286,44547,26588],{"class":300},[286,44549,314],{"class":292},[286,44551,44552,44554,44556,44558,44560],{"class":288,"line":469},[286,44553,887],{"class":292},[286,44555,4274],{"class":296},[286,44557,44400],{"class":292},[286,44559,4274],{"class":296},[286,44561,314],{"class":292},[286,44563,44564,44566,44568],{"class":288,"line":484},[286,44565,930],{"class":292},[286,44567,810],{"class":296},[286,44569,314],{"class":292},[286,44571,44572,44574,44576],{"class":288,"line":508},[286,44573,962],{"class":292},[286,44575,44325],{"class":296},[286,44577,314],{"class":292},[286,44579,44580,44582,44584],{"class":288,"line":513},[286,44581,793],{"class":292},[286,44583,810],{"class":296},[286,44585,314],{"class":292},[31,44587,44588,44589,114],{},"Es clave para crear componentes ",[82,44590,44591],{},"flexibles, composables y reutilizables",[40,44593,44594],{"id":21913},[26,44595,21913],{},[31,44597,44598,44599,44602],{},"Renderiza el contenido ",[82,44600,44601],{},"una sola vez"," y lo excluye del sistema reactivo.",[277,44604,44607],{"className":279,"code":44605,"filename":281,"highlights":44606,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n \nconst count = ref(0)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp v-once>Este texto no cambiará: {{ count }}\u003C/p>\n \u003Cbutton @click=\"count++\">Incrementar\u003C/button>\n\u003C/template>\n",[389],[26,44608,44609,44619,44629,44633,44649,44657,44661,44669,44685,44704],{"__ignoreMap":9},[286,44610,44611,44613,44615,44617],{"class":288,"line":289},[286,44612,293],{"class":292},[286,44614,297],{"class":296},[286,44616,301],{"class":300},[286,44618,314],{"class":292},[286,44620,44621,44623,44625,44627],{"class":288,"line":317},[286,44622,321],{"class":320},[286,44624,11013],{"class":292},[286,44626,327],{"class":320},[286,44628,330],{"class":310},[286,44630,44631],{"class":288,"line":333},[286,44632,42613],{"class":292},[286,44634,44635,44637,44639,44641,44643,44645,44647],{"class":288,"line":339},[286,44636,413],{"class":320},[286,44638,9387],{"class":364},[286,44640,348],{"class":320},[286,44642,421],{"class":300},[286,44644,456],{"class":292},[286,44646,3549],{"class":364},[286,44648,441],{"class":292},[286,44650,44651,44653,44655],{"class":288,"line":354},[286,44652,793],{"class":292},[286,44654,297],{"class":296},[286,44656,314],{"class":292},[286,44658,44659],{"class":288,"line":368},[286,44660,336],{"emptyLinePlaceholder":6},[286,44662,44663,44665,44667],{"class":288,"line":379},[286,44664,293],{"class":292},[286,44666,810],{"class":296},[286,44668,314],{"class":292},[286,44670,44672,44674,44676,44678,44681,44683],{"class":44671,"line":389},[288,9405],[286,44673,818],{"class":292},[286,44675,31],{"class":296},[286,44677,22321],{"class":300},[286,44679,44680],{"class":292},">Este texto no cambiará: {{ count }}\u003C/",[286,44682,31],{"class":296},[286,44684,314],{"class":292},[286,44686,44687,44689,44691,44693,44695,44697,44700,44702],{"class":288,"line":399},[286,44688,818],{"class":292},[286,44690,4274],{"class":296},[286,44692,4285],{"class":300},[286,44694,307],{"class":292},[286,44696,12471],{"class":310},[286,44698,44699],{"class":292},">Incrementar\u003C/",[286,44701,4274],{"class":296},[286,44703,314],{"class":292},[286,44705,44706,44708,44710],{"class":288,"line":405},[286,44707,793],{"class":292},[286,44709,810],{"class":296},[286,44711,314],{"class":292},[277,44713,44716],{"className":279,"code":44714,"filename":979,"highlights":44715,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n count: 0\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cp v-once>Este texto no cambiará: {{ count }}\u003C/p>\n \u003Cbutton @click=\"count++\">Incrementar\u003C/button>\n\u003C/template>\n",[444],[26,44717,44718,44726,44734,44740,44746,44752,44756,44760,44764,44772,44776,44784,44799,44817],{"__ignoreMap":9},[286,44719,44720,44722,44724],{"class":288,"line":289},[286,44721,293],{"class":292},[286,44723,297],{"class":296},[286,44725,314],{"class":292},[286,44727,44728,44730,44732],{"class":288,"line":317},[286,44729,1065],{"class":320},[286,44731,1068],{"class":320},[286,44733,351],{"class":292},[286,44735,44736,44738],{"class":288,"line":333},[286,44737,1094],{"class":300},[286,44739,481],{"class":292},[286,44741,44742,44744],{"class":288,"line":339},[286,44743,1101],{"class":320},[286,44745,351],{"class":292},[286,44747,44748,44750],{"class":288,"line":354},[286,44749,31693],{"class":292},[286,44751,4699],{"class":364},[286,44753,44754],{"class":288,"line":368},[286,44755,1134],{"class":292},[286,44757,44758],{"class":288,"line":379},[286,44759,550],{"class":292},[286,44761,44762],{"class":288,"line":389},[286,44763,402],{"class":292},[286,44765,44766,44768,44770],{"class":288,"line":399},[286,44767,793],{"class":292},[286,44769,297],{"class":296},[286,44771,314],{"class":292},[286,44773,44774],{"class":288,"line":405},[286,44775,336],{"emptyLinePlaceholder":6},[286,44777,44778,44780,44782],{"class":288,"line":410},[286,44779,293],{"class":292},[286,44781,810],{"class":296},[286,44783,314],{"class":292},[286,44785,44787,44789,44791,44793,44795,44797],{"class":44786,"line":444},[288,9405],[286,44788,818],{"class":292},[286,44790,31],{"class":296},[286,44792,22321],{"class":300},[286,44794,44680],{"class":292},[286,44796,31],{"class":296},[286,44798,314],{"class":292},[286,44800,44801,44803,44805,44807,44809,44811,44813,44815],{"class":288,"line":464},[286,44802,818],{"class":292},[286,44804,4274],{"class":296},[286,44806,4285],{"class":300},[286,44808,307],{"class":292},[286,44810,12471],{"class":310},[286,44812,44699],{"class":292},[286,44814,4274],{"class":296},[286,44816,314],{"class":292},[286,44818,44819,44821,44823],{"class":288,"line":469},[286,44820,793],{"class":292},[286,44822,810],{"class":296},[286,44824,314],{"class":292},[31,44826,44827],{},"Útil cuando el contenido no debe actualizarse jamás, incluso si el estado cambia.",[40,44829,44830],{"id":21916},[26,44831,21916],{},[31,44833,44834],{},"Evita renderizados innecesarios cuando las dependencias no cambian.",[277,44836,44839],{"className":279,"code":44837,"filename":281,"highlights":44838,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-memo=\"[count]\">\n \u003Cp>Este bloque solo se re-renderiza si 'count' cambia: {{ count }}\u003C/p>\n \u003C/div>\n \u003Cbutton @click=\"count++\">Incrementar\u003C/button>\n\u003C/template>\n",[389],[26,44840,44841,44851,44861,44865,44881,44889,44893,44901,44918,44931,44939,44957],{"__ignoreMap":9},[286,44842,44843,44845,44847,44849],{"class":288,"line":289},[286,44844,293],{"class":292},[286,44846,297],{"class":296},[286,44848,301],{"class":300},[286,44850,314],{"class":292},[286,44852,44853,44855,44857,44859],{"class":288,"line":317},[286,44854,321],{"class":320},[286,44856,11013],{"class":292},[286,44858,327],{"class":320},[286,44860,330],{"class":310},[286,44862,44863],{"class":288,"line":333},[286,44864,336],{"emptyLinePlaceholder":6},[286,44866,44867,44869,44871,44873,44875,44877,44879],{"class":288,"line":339},[286,44868,413],{"class":320},[286,44870,9387],{"class":364},[286,44872,348],{"class":320},[286,44874,421],{"class":300},[286,44876,456],{"class":292},[286,44878,3549],{"class":364},[286,44880,441],{"class":292},[286,44882,44883,44885,44887],{"class":288,"line":354},[286,44884,793],{"class":292},[286,44886,297],{"class":296},[286,44888,314],{"class":292},[286,44890,44891],{"class":288,"line":368},[286,44892,336],{"emptyLinePlaceholder":6},[286,44894,44895,44897,44899],{"class":288,"line":379},[286,44896,293],{"class":292},[286,44898,810],{"class":296},[286,44900,314],{"class":292},[286,44902,44904,44906,44908,44911,44913,44916],{"class":44903,"line":389},[288,9405],[286,44905,818],{"class":292},[286,44907,4208],{"class":296},[286,44909,44910],{"class":300}," v-memo",[286,44912,307],{"class":292},[286,44914,44915],{"class":310},"\"[count]\"",[286,44917,314],{"class":292},[286,44919,44920,44922,44924,44927,44929],{"class":288,"line":399},[286,44921,837],{"class":292},[286,44923,31],{"class":296},[286,44925,44926],{"class":292},">Este bloque solo se re-renderiza si 'count' cambia: {{ count }}\u003C/",[286,44928,31],{"class":296},[286,44930,314],{"class":292},[286,44932,44933,44935,44937],{"class":288,"line":405},[286,44934,962],{"class":292},[286,44936,4208],{"class":296},[286,44938,314],{"class":292},[286,44940,44941,44943,44945,44947,44949,44951,44953,44955],{"class":288,"line":410},[286,44942,818],{"class":292},[286,44944,4274],{"class":296},[286,44946,4285],{"class":300},[286,44948,307],{"class":292},[286,44950,12471],{"class":310},[286,44952,44699],{"class":292},[286,44954,4274],{"class":296},[286,44956,314],{"class":292},[286,44958,44959,44961,44963],{"class":288,"line":444},[286,44960,793],{"class":292},[286,44962,810],{"class":296},[286,44964,314],{"class":292},[277,44966,44969],{"className":279,"code":44967,"filename":979,"highlights":44968,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n value: 10\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-memo=\"[value]\">\n \u003Cp>El valor es: {{ value }}\u003C/p>\n \u003C/div>\n\u003C/template>\n",[444],[26,44970,44971,44979,44987,44993,44999,45007,45011,45015,45019,45027,45031,45039,45055,45068,45076],{"__ignoreMap":9},[286,44972,44973,44975,44977],{"class":288,"line":289},[286,44974,293],{"class":292},[286,44976,297],{"class":296},[286,44978,314],{"class":292},[286,44980,44981,44983,44985],{"class":288,"line":317},[286,44982,1065],{"class":320},[286,44984,1068],{"class":320},[286,44986,351],{"class":292},[286,44988,44989,44991],{"class":288,"line":333},[286,44990,1094],{"class":300},[286,44992,481],{"class":292},[286,44994,44995,44997],{"class":288,"line":339},[286,44996,1101],{"class":320},[286,44998,351],{"class":292},[286,45000,45001,45004],{"class":288,"line":354},[286,45002,45003],{"class":292}," value: ",[286,45005,45006],{"class":364},"10\n",[286,45008,45009],{"class":288,"line":368},[286,45010,1134],{"class":292},[286,45012,45013],{"class":288,"line":379},[286,45014,550],{"class":292},[286,45016,45017],{"class":288,"line":389},[286,45018,402],{"class":292},[286,45020,45021,45023,45025],{"class":288,"line":399},[286,45022,793],{"class":292},[286,45024,297],{"class":296},[286,45026,314],{"class":292},[286,45028,45029],{"class":288,"line":405},[286,45030,336],{"emptyLinePlaceholder":6},[286,45032,45033,45035,45037],{"class":288,"line":410},[286,45034,293],{"class":292},[286,45036,810],{"class":296},[286,45038,314],{"class":292},[286,45040,45042,45044,45046,45048,45050,45053],{"class":45041,"line":444},[288,9405],[286,45043,818],{"class":292},[286,45045,4208],{"class":296},[286,45047,44910],{"class":300},[286,45049,307],{"class":292},[286,45051,45052],{"class":310},"\"[value]\"",[286,45054,314],{"class":292},[286,45056,45057,45059,45061,45064,45066],{"class":288,"line":464},[286,45058,837],{"class":292},[286,45060,31],{"class":296},[286,45062,45063],{"class":292},">El valor es: {{ value }}\u003C/",[286,45065,31],{"class":296},[286,45067,314],{"class":292},[286,45069,45070,45072,45074],{"class":288,"line":469},[286,45071,962],{"class":292},[286,45073,4208],{"class":296},[286,45075,314],{"class":292},[286,45077,45078,45080,45082],{"class":288,"line":484},[286,45079,793],{"class":292},[286,45081,810],{"class":296},[286,45083,314],{"class":292},[31,45085,45086,45087,45090],{},"Es una ",[82,45088,45089],{},"optimización avanzada",".\nNo está pensada para usarse “porque sí”, sino en cuellos de botella reales.",[40,45092,45093],{"id":21919},[26,45094,21919],{},[31,45096,45097],{},"Evita que Vue compile el contenido del nodo.",[277,45099,45102],{"className":279,"code":45100,"filename":281,"highlights":45101,"language":282,"meta":9,"style":9},"\u003Cscript setup>\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-pre>\n {{ esto_no_se_evaluará }}\n \u003C/div>\n\u003C/template>\n",[354],[26,45103,45104,45114,45122,45126,45134,45145,45150,45158],{"__ignoreMap":9},[286,45105,45106,45108,45110,45112],{"class":288,"line":289},[286,45107,293],{"class":292},[286,45109,297],{"class":296},[286,45111,301],{"class":300},[286,45113,314],{"class":292},[286,45115,45116,45118,45120],{"class":288,"line":317},[286,45117,793],{"class":292},[286,45119,297],{"class":296},[286,45121,314],{"class":292},[286,45123,45124],{"class":288,"line":333},[286,45125,336],{"emptyLinePlaceholder":6},[286,45127,45128,45130,45132],{"class":288,"line":339},[286,45129,293],{"class":292},[286,45131,810],{"class":296},[286,45133,314],{"class":292},[286,45135,45137,45139,45141,45143],{"class":45136,"line":354},[288,9405],[286,45138,818],{"class":292},[286,45140,4208],{"class":296},[286,45142,23215],{"class":300},[286,45144,314],{"class":292},[286,45146,45147],{"class":288,"line":368},[286,45148,45149],{"class":292}," {{ esto_no_se_evaluará }}\n",[286,45151,45152,45154,45156],{"class":288,"line":379},[286,45153,962],{"class":292},[286,45155,4208],{"class":296},[286,45157,314],{"class":292},[286,45159,45160,45162,45164],{"class":288,"line":389},[286,45161,793],{"class":292},[286,45163,810],{"class":296},[286,45165,314],{"class":292},[277,45167,45170],{"className":279,"code":45168,"filename":979,"highlights":45169,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-pre>\n {{ esto_no_se_evaluará }}\n \u003C/div>\n\u003C/template>\n",[368],[26,45171,45172,45180,45189,45197,45201,45209,45220,45224,45232],{"__ignoreMap":9},[286,45173,45174,45176,45178],{"class":288,"line":289},[286,45175,293],{"class":292},[286,45177,297],{"class":296},[286,45179,314],{"class":292},[286,45181,45182,45184,45186],{"class":288,"line":317},[286,45183,1065],{"class":320},[286,45185,1068],{"class":320},[286,45187,45188],{"class":292}," {}\n",[286,45190,45191,45193,45195],{"class":288,"line":333},[286,45192,793],{"class":292},[286,45194,297],{"class":296},[286,45196,314],{"class":292},[286,45198,45199],{"class":288,"line":339},[286,45200,336],{"emptyLinePlaceholder":6},[286,45202,45203,45205,45207],{"class":288,"line":354},[286,45204,293],{"class":292},[286,45206,810],{"class":296},[286,45208,314],{"class":292},[286,45210,45212,45214,45216,45218],{"class":45211,"line":368},[288,9405],[286,45213,818],{"class":292},[286,45215,4208],{"class":296},[286,45217,23215],{"class":300},[286,45219,314],{"class":292},[286,45221,45222],{"class":288,"line":379},[286,45223,45149],{"class":292},[286,45225,45226,45228,45230],{"class":288,"line":389},[286,45227,962],{"class":292},[286,45229,4208],{"class":296},[286,45231,314],{"class":292},[286,45233,45234,45236,45238],{"class":288,"line":399},[286,45235,793],{"class":292},[286,45237,810],{"class":296},[286,45239,314],{"class":292},[31,45241,45242],{},"Perfecta para mostrar snippets, ejemplos literales o templates de demostración.",[40,45244,45245],{"id":20615},[26,45246,20615],{},[31,45248,45249],{},"Oculta el template hasta que Vue termine de montar la aplicación.",[277,45251,45254],{"className":279,"code":45252,"filename":281,"highlights":45253,"language":282,"meta":9,"style":9},"\u003Cscript setup>\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-cloak>\n {{ mensaje }}\n \u003C/div>\n\u003C/template>\n",[354],[26,45255,45256,45266,45274,45278,45286,45297,45302,45310],{"__ignoreMap":9},[286,45257,45258,45260,45262,45264],{"class":288,"line":289},[286,45259,293],{"class":292},[286,45261,297],{"class":296},[286,45263,301],{"class":300},[286,45265,314],{"class":292},[286,45267,45268,45270,45272],{"class":288,"line":317},[286,45269,793],{"class":292},[286,45271,297],{"class":296},[286,45273,314],{"class":292},[286,45275,45276],{"class":288,"line":333},[286,45277,336],{"emptyLinePlaceholder":6},[286,45279,45280,45282,45284],{"class":288,"line":339},[286,45281,293],{"class":292},[286,45283,810],{"class":296},[286,45285,314],{"class":292},[286,45287,45289,45291,45293,45295],{"class":45288,"line":354},[288,9405],[286,45290,818],{"class":292},[286,45292,4208],{"class":296},[286,45294,21006],{"class":300},[286,45296,314],{"class":292},[286,45298,45299],{"class":288,"line":368},[286,45300,45301],{"class":292}," {{ mensaje }}\n",[286,45303,45304,45306,45308],{"class":288,"line":379},[286,45305,962],{"class":292},[286,45307,4208],{"class":296},[286,45309,314],{"class":292},[286,45311,45312,45314,45316],{"class":288,"line":389},[286,45313,793],{"class":292},[286,45315,810],{"class":296},[286,45317,314],{"class":292},[277,45319,45322],{"className":279,"code":45320,"filename":979,"highlights":45321,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv v-cloak>\n {{ mensaje }}\n \u003C/div>\n\u003C/template>\n",[368],[26,45323,45324,45332,45340,45348,45352,45360,45371,45375,45383],{"__ignoreMap":9},[286,45325,45326,45328,45330],{"class":288,"line":289},[286,45327,293],{"class":292},[286,45329,297],{"class":296},[286,45331,314],{"class":292},[286,45333,45334,45336,45338],{"class":288,"line":317},[286,45335,1065],{"class":320},[286,45337,1068],{"class":320},[286,45339,45188],{"class":292},[286,45341,45342,45344,45346],{"class":288,"line":333},[286,45343,793],{"class":292},[286,45345,297],{"class":296},[286,45347,314],{"class":292},[286,45349,45350],{"class":288,"line":339},[286,45351,336],{"emptyLinePlaceholder":6},[286,45353,45354,45356,45358],{"class":288,"line":354},[286,45355,293],{"class":292},[286,45357,810],{"class":296},[286,45359,314],{"class":292},[286,45361,45363,45365,45367,45369],{"class":45362,"line":368},[288,9405],[286,45364,818],{"class":292},[286,45366,4208],{"class":296},[286,45368,21006],{"class":300},[286,45370,314],{"class":292},[286,45372,45373],{"class":288,"line":379},[286,45374,45301],{"class":292},[286,45376,45377,45379,45381],{"class":288,"line":389},[286,45378,962],{"class":292},[286,45380,4208],{"class":296},[286,45382,314],{"class":292},[286,45384,45385,45387,45389],{"class":288,"line":399},[286,45386,793],{"class":292},[286,45388,810],{"class":296},[286,45390,314],{"class":292},[31,45392,45393],{},"Evita el parpadeo inicial en aplicaciones renderizadas del lado del cliente.",[40,45395,3248],{"id":45396},"directivas-personalizadas",[31,45398,45399],{},"Permiten extender Vue para manipular directamente el DOM cuando no hay otra opción más declarativa.",[277,45401,45404],{"className":15979,"code":45402,"filename":19445,"highlights":45403,"language":15982,"meta":9,"style":9},"import { createApp } from 'vue'\nimport App from './App.vue'\nconst app = createApp(App)\napp.directive('focus', {\n mounted(el) {\n el.focus()\n }\n})\n",[339,354,368,379,389],[26,45405,45406,45417,45429,45444,45460,45471,45481,45486],{"__ignoreMap":9},[286,45407,45408,45410,45413,45415],{"class":288,"line":289},[286,45409,321],{"class":320},[286,45411,45412],{"class":292}," { createApp } ",[286,45414,327],{"class":320},[286,45416,330],{"class":310},[286,45418,45419,45421,45424,45426],{"class":288,"line":317},[286,45420,321],{"class":320},[286,45422,45423],{"class":292}," App ",[286,45425,327],{"class":320},[286,45427,45428],{"class":310}," './App.vue'\n",[286,45430,45431,45433,45436,45438,45441],{"class":288,"line":333},[286,45432,413],{"class":320},[286,45434,45435],{"class":364}," app",[286,45437,348],{"class":320},[286,45439,45440],{"class":300}," createApp",[286,45442,45443],{"class":292},"(App)\n",[286,45445,45447,45450,45453,45455,45458],{"class":45446,"line":339},[288,9405],[286,45448,45449],{"class":292},"app.",[286,45451,45452],{"class":300},"directive",[286,45454,456],{"class":292},[286,45456,45457],{"class":310},"'focus'",[286,45459,2367],{"class":292},[286,45461,45463,45465,45467,45469],{"class":45462,"line":354},[288,9405],[286,45464,6791],{"class":300},[286,45466,456],{"class":292},[286,45468,18326],{"class":357},[286,45470,2483],{"class":292},[286,45472,45474,45477,45479],{"class":45473,"line":368},[288,9405],[286,45475,45476],{"class":292}," el.",[286,45478,11483],{"class":300},[286,45480,630],{"class":292},[286,45482,45484],{"class":45483,"line":379},[288,9405],[286,45485,550],{"class":292},[286,45487,45489],{"class":45488,"line":389},[288,9405],[286,45490,684],{"class":292},[277,45492,45495],{"className":279,"code":45493,"filename":9346,"highlights":45494,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003Cinput v-focus />\n\u003C/template>\n",[317],[26,45496,45497,45505,45517],{"__ignoreMap":9},[286,45498,45499,45501,45503],{"class":288,"line":289},[286,45500,293],{"class":292},[286,45502,810],{"class":296},[286,45504,314],{"class":292},[286,45506,45508,45510,45512,45515],{"class":45507,"line":317},[288,9405],[286,45509,818],{"class":292},[286,45511,18048],{"class":296},[286,45513,45514],{"class":300}," v-focus",[286,45516,4332],{"class":292},[286,45518,45519,45521,45523],{"class":288,"line":333},[286,45520,793],{"class":292},[286,45522,810],{"class":296},[286,45524,314],{"class":292},[31,45526,45527],{},"Son poderosas, pero deben usarse con cuidado:\nsi abusas de ellas, probablemente estás rompiendo el modelo mental de Vue.",[40,45529,17678],{"id":17677},[31,45531,45532,45533,114],{},"Las directivas no son solo sintaxis bonita.\nSon ",[82,45534,45535],{},"contratos claros entre el estado y el DOM",[31,45537,45538],{},"Este artículo es el punto de partida.\nCada directiva tendrá su entrada individual, con:",[48,45540,45541,45544,45546],{},[51,45542,45543],{},"Casos reales",[51,45545,200],{},[51,45547,45548],{},"Buenas y malas prácticas",[31,45550,45551,45552,45555],{},"Este mapa ya te permite ",[82,45553,45554],{},"leer código Vue con criterio",".\nLo demás es profundidad, no confusión.",[1614,45557,40271],{},{"title":9,"searchDepth":317,"depth":317,"links":45559},[45560,45561,45563,45564,45565,45566,45567,45568,45569,45570,45571,45572,45573,45574,45575,45576],{"id":13175,"depth":317,"text":13176},{"id":42303,"depth":317,"text":45562},"v-if, v-else-if, v-else",{"id":7708,"depth":317,"text":7708},{"id":24887,"depth":317,"text":24887},{"id":17981,"depth":317,"text":17981},{"id":17978,"depth":317,"text":17978},{"id":17984,"depth":317,"text":17984},{"id":24594,"depth":317,"text":24594},{"id":24597,"depth":317,"text":24597},{"id":25876,"depth":317,"text":25876},{"id":21913,"depth":317,"text":21913},{"id":21916,"depth":317,"text":21916},{"id":21919,"depth":317,"text":21919},{"id":20615,"depth":317,"text":20615},{"id":45396,"depth":317,"text":3248},{"id":17677,"depth":317,"text":17678},"https://res.cloudinary.com/denj4fg7f/image/upload/v1770161262/vue-directives-overview_qyrngz.png","2026-02-04","Explora las directivas esenciales de Vue.js, su sintaxis y casos de uso comunes.",{"script":45581},[45582],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":45583},[45584],{"headline":42211,"author":45585,"datePublished":45586,"@type":1647},{"name":1644,"@type":1645},"2026-02-03T20:00:00-05:00",{"updatedAt":28107,"readingTime":368,"coverCaption":45588,"author":1644,"keywords":45589},"Imagen destacada que representa las directivas en Vue.js.",[1652,20595,45590,45591],"Desarrollo Frontend","Buenas Prácticas","/blog/vue-directives-overview.es",[45594],{"headline":42211,"author":45595,"datePublished":45586,"@type":1647},{"name":1644,"@type":1645},{"title":42211,"description":45579},"blog/vue-directives-overview.es",[45599,45600,45601,45602,45603,45604],{"tag":20595,"color":20596},{"tag":21898,"color":21899},{"tag":42204,"color":42205},{"tag":40332,"color":3175},{"tag":3174,"color":3175},{"tag":9081,"color":9082},"_TiH5SZfhuhLltkiEIYgNLFFzrrnC62SUz0UvHozHoI",{"id":45607,"title":45608,"body":45609,"cover":46372,"coverAlt":45608,"date":46373,"description":46374,"draft":12,"extension":1635,"head":46375,"locale":1648,"meta":46382,"navigation":6,"path":46388,"schemaOrg":46389,"seo":46392,"series":1663,"seriesDescription":1663,"seriesOrder":1663,"seriesTitle":1663,"slug":1663,"stem":46393,"tags":46394,"__hash__":46403},"blog/blog/mastering-renderless-components-vue-3.es.md","Patrones Avanzados en Vue 3: El Poder de los Renderless Components",{"type":18,"value":45610,"toc":46361},[45611,45615,45626,45630,45637,45644,45648,45662,45666,45669,45821,45974,45980,46092,46099,46119,46210,46213,46217,46227,46306,46318,46322,46345,46349,46358],[21,45612,45614],{"id":45613},"el-patrón-renderless-en-vue-3-arquitectura-y-separación-de-responsabilidades","El Patrón Renderless en Vue 3: Arquitectura y Separación de Responsabilidades",[31,45616,45617,45618,45621,45622,45625],{},"En el ecosistema de Vue 3, la reutilización de código ha evolucionado significativamente gracias a la Composition API. Sin embargo, persiste un desafío recurrente: ",[82,45619,45620],{},"¿Cómo compartir una lógica de interfaz compleja sin imponer un diseño o una estructura HTML específicos?"," Aquí es donde el patrón de ",[82,45623,45624],{},"Renderless Components"," se consolida como una herramienta indispensable para la arquitectura de software.",[40,45627,45629],{"id":45628},"qué-es-un-renderless-component","¿Qué es un Renderless Component?",[31,45631,45632,45633,45636],{},"Un componente ",[3299,45634,45635],{},"renderless"," (sin renderizado) es aquel que no genera ningún marcado propio ni estilos CSS. Su única responsabilidad es encapsular el estado y la lógica de comportamiento para exponer estos datos al componente padre. El padre, a su vez, decide exactamente qué elementos del DOM utilizar y cómo estilizarlos.",[31,45638,45639,45640,45643],{},"Este patrón es la columna vertebral de las ",[82,45641,45642],{},"bibliotecas \"Headless UI\"",", permitiendo que la lógica de un componente —como la gestión de un modal, un desplegable o un formulario— sea universal, mientras que el diseño permanece 100% personalizable.",[40,45645,45647],{"id":45646},"el-motor-scoped-slots","El Motor: Scoped Slots",[31,45649,45650,45651,45654,45655,45657,45658,45661],{},"La implementación de este patrón se apoya en los ",[82,45652,45653],{},"Scoped Slots",". A diferencia de un ",[3299,45656,25954],{}," convencional, un ",[3299,45659,45660],{},"scoped slot"," permite al componente hijo enviar datos \"hacia arriba\" a la plantilla del padre en el momento de la ejecución.",[202,45663,45665],{"id":45664},"ejemplo-práctico-un-controlador-de-visibilidad","Ejemplo Práctico: Un Controlador de Visibilidad",[31,45667,45668],{},"Imagina un componente que gestiona el estado de \"abierto/cerrado\", algo esencial en menús y modales.",[277,45670,45674],{"className":279,"code":45671,"filename":45672,"highlights":45673,"language":282,"meta":9,"style":9},"\u003Cscript setup>\n import { ref } from 'vue';\n\n const isOpen = ref(false);\n const toggle = () => {\n isOpen.value = !isOpen.value;\n };\n\n // Exponemos el estado y el método al slot\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cslot :isOpen=\"isOpen\" :toggle=\"toggle\">\u003C/slot>\n\u003C/template>\n","LogicToggle.vue - Composition API",[339,354,368,379,464],[26,45675,45676,45686,45700,45704,45721,45737,45750,45756,45760,45765,45773,45777,45785,45813],{"__ignoreMap":9},[286,45677,45678,45680,45682,45684],{"class":288,"line":289},[286,45679,293],{"class":292},[286,45681,297],{"class":296},[286,45683,301],{"class":300},[286,45685,314],{"class":292},[286,45687,45688,45691,45693,45695,45698],{"class":288,"line":317},[286,45689,45690],{"class":320}," import",[286,45692,11013],{"class":292},[286,45694,327],{"class":320},[286,45696,45697],{"class":310}," 'vue'",[286,45699,18158],{"class":292},[286,45701,45702],{"class":288,"line":333},[286,45703,336],{"emptyLinePlaceholder":6},[286,45705,45707,45709,45711,45713,45715,45717,45719],{"class":45706,"line":339},[288,9405],[286,45708,487],{"class":320},[286,45710,18273],{"class":364},[286,45712,348],{"class":320},[286,45714,421],{"class":300},[286,45716,456],{"class":292},[286,45718,2130],{"class":364},[286,45720,18284],{"class":292},[286,45722,45724,45726,45729,45731,45733,45735],{"class":45723,"line":354},[288,9405],[286,45725,487],{"class":320},[286,45727,45728],{"class":300}," toggle",[286,45730,348],{"class":320},[286,45732,606],{"class":292},[286,45734,609],{"class":320},[286,45736,351],{"class":292},[286,45738,45740,45743,45745,45747],{"class":45739,"line":368},[288,9405],[286,45741,45742],{"class":292}," isOpen.value ",[286,45744,307],{"class":320},[286,45746,2295],{"class":320},[286,45748,45749],{"class":292},"isOpen.value;\n",[286,45751,45753],{"class":45752,"line":379},[288,9405],[286,45754,45755],{"class":292}," };\n",[286,45757,45758],{"class":288,"line":389},[286,45759,336],{"emptyLinePlaceholder":6},[286,45761,45762],{"class":288,"line":399},[286,45763,45764],{"class":12748}," // Exponemos el estado y el método al slot\n",[286,45766,45767,45769,45771],{"class":288,"line":405},[286,45768,793],{"class":292},[286,45770,297],{"class":296},[286,45772,314],{"class":292},[286,45774,45775],{"class":288,"line":410},[286,45776,336],{"emptyLinePlaceholder":6},[286,45778,45779,45781,45783],{"class":288,"line":444},[286,45780,293],{"class":292},[286,45782,810],{"class":296},[286,45784,314],{"class":292},[286,45786,45788,45790,45792,45795,45797,45799,45802,45804,45807,45809,45811],{"class":45787,"line":464},[288,9405],[286,45789,818],{"class":292},[286,45791,25954],{"class":296},[286,45793,45794],{"class":300}," :isOpen",[286,45796,307],{"class":292},[286,45798,18731],{"class":310},[286,45800,45801],{"class":300}," :toggle",[286,45803,307],{"class":292},[286,45805,45806],{"class":310},"\"toggle\"",[286,45808,24697],{"class":292},[286,45810,25954],{"class":296},[286,45812,314],{"class":292},[286,45814,45815,45817,45819],{"class":288,"line":469},[286,45816,793],{"class":292},[286,45818,810],{"class":296},[286,45820,314],{"class":292},[277,45822,45826],{"className":279,"code":45823,"filename":45824,"highlights":45825,"language":282,"meta":9,"style":9},"\u003Cscript>\n export default {\n data() {\n return {\n isOpen: false\n };\n },\n methods: {\n toggle() {\n this.isOpen = !this.isOpen;\n }\n }\n };\n // Exponemos el estado y el método al slot\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cslot :isOpen=\"isOpen\" :toggle=\"toggle\">\u003C/slot>\n\u003C/template>\n","LogicToggle.vue - Options API",[354,399,405,410,528],[26,45827,45828,45836,45845,45852,45858,45866,45870,45874,45879,45887,45904,45909,45913,45917,45921,45929,45933,45941,45966],{"__ignoreMap":9},[286,45829,45830,45832,45834],{"class":288,"line":289},[286,45831,293],{"class":292},[286,45833,297],{"class":296},[286,45835,314],{"class":292},[286,45837,45838,45841,45843],{"class":288,"line":317},[286,45839,45840],{"class":320}," export",[286,45842,1068],{"class":320},[286,45844,351],{"class":292},[286,45846,45847,45850],{"class":288,"line":333},[286,45848,45849],{"class":300}," data",[286,45851,481],{"class":292},[286,45853,45854,45856],{"class":288,"line":339},[286,45855,2761],{"class":320},[286,45857,351],{"class":292},[286,45859,45861,45864],{"class":45860,"line":354},[288,9405],[286,45862,45863],{"class":292}," isOpen: ",[286,45865,2050],{"class":364},[286,45867,45868],{"class":288,"line":368},[286,45869,36573],{"class":292},[286,45871,45872],{"class":288,"line":379},[286,45873,7023],{"class":292},[286,45875,45876],{"class":288,"line":389},[286,45877,45878],{"class":292}," methods: {\n",[286,45880,45882,45885],{"class":45881,"line":399},[288,9405],[286,45883,45884],{"class":300}," toggle",[286,45886,481],{"class":292},[286,45888,45890,45892,45895,45897,45899,45901],{"class":45889,"line":405},[288,9405],[286,45891,8826],{"class":364},[286,45893,45894],{"class":292},".isOpen ",[286,45896,307],{"class":320},[286,45898,2295],{"class":320},[286,45900,1349],{"class":364},[286,45902,45903],{"class":292},".isOpen;\n",[286,45905,45907],{"class":45906,"line":410},[288,9405],[286,45908,1211],{"class":292},[286,45910,45911],{"class":288,"line":444},[286,45912,1134],{"class":292},[286,45914,45915],{"class":288,"line":464},[286,45916,45755],{"class":292},[286,45918,45919],{"class":288,"line":469},[286,45920,45764],{"class":12748},[286,45922,45923,45925,45927],{"class":288,"line":484},[286,45924,793],{"class":292},[286,45926,297],{"class":296},[286,45928,314],{"class":292},[286,45930,45931],{"class":288,"line":508},[286,45932,336],{"emptyLinePlaceholder":6},[286,45934,45935,45937,45939],{"class":288,"line":513},[286,45936,293],{"class":292},[286,45938,810],{"class":296},[286,45940,314],{"class":292},[286,45942,45944,45946,45948,45950,45952,45954,45956,45958,45960,45962,45964],{"class":45943,"line":528},[288,9405],[286,45945,818],{"class":292},[286,45947,25954],{"class":296},[286,45949,45794],{"class":300},[286,45951,307],{"class":292},[286,45953,18731],{"class":310},[286,45955,45801],{"class":300},[286,45957,307],{"class":292},[286,45959,45806],{"class":310},[286,45961,24697],{"class":292},[286,45963,25954],{"class":296},[286,45965,314],{"class":292},[286,45967,45968,45970,45972],{"class":288,"line":547},[286,45969,793],{"class":292},[286,45971,810],{"class":296},[286,45973,314],{"class":292},[31,45975,45976,45979],{},[82,45977,45978],{},"Implementación en el Padre","\nAl consumir este componente, gozas de total libertad creativa:",[277,45981,45985],{"className":279,"code":45982,"filename":45983,"highlights":45984,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003CLogicToggle v-slot=\"{ isOpen, toggle }\">\n \u003Cbutton @click=\"toggle\">\n {{ isOpen ? 'Cerrar Menú' : 'Abrir Menú' }}\n \u003C/button>\n \u003Cdiv v-if=\"isOpen\" class=\"custom-dropdown\">\n Contenido dinámico aquí\n \u003C/div>\n \u003C/LogicToggle>\n\u003C/template>\n","ParentComponent.vue",[317,333,339,368],[26,45986,45987,45995,46012,46027,46033,46041,46063,46068,46076,46084],{"__ignoreMap":9},[286,45988,45989,45991,45993],{"class":288,"line":289},[286,45990,293],{"class":292},[286,45992,810],{"class":296},[286,45994,314],{"class":292},[286,45996,45998,46000,46003,46005,46007,46010],{"class":45997,"line":317},[288,9405],[286,45999,818],{"class":292},[286,46001,46002],{"class":296},"LogicToggle",[286,46004,26198],{"class":300},[286,46006,307],{"class":292},[286,46008,46009],{"class":310},"\"{ isOpen, toggle }\"",[286,46011,314],{"class":292},[286,46013,46015,46017,46019,46021,46023,46025],{"class":46014,"line":333},[288,9405],[286,46016,837],{"class":292},[286,46018,4274],{"class":296},[286,46020,4285],{"class":300},[286,46022,307],{"class":292},[286,46024,45806],{"class":310},[286,46026,314],{"class":292},[286,46028,46030],{"class":46029,"line":339},[288,9405],[286,46031,46032],{"class":292}," {{ isOpen ? 'Cerrar Menú' : 'Abrir Menú' }}\n",[286,46034,46035,46037,46039],{"class":288,"line":354},[286,46036,930],{"class":292},[286,46038,4274],{"class":296},[286,46040,314],{"class":292},[286,46042,46044,46046,46048,46050,46052,46054,46056,46058,46061],{"class":46043,"line":368},[288,9405],[286,46045,837],{"class":292},[286,46047,4208],{"class":296},[286,46049,842],{"class":300},[286,46051,307],{"class":292},[286,46053,18731],{"class":310},[286,46055,824],{"class":300},[286,46057,307],{"class":292},[286,46059,46060],{"class":310},"\"custom-dropdown\"",[286,46062,314],{"class":292},[286,46064,46065],{"class":288,"line":379},[286,46066,46067],{"class":292}," Contenido dinámico aquí\n",[286,46069,46070,46072,46074],{"class":288,"line":389},[286,46071,930],{"class":292},[286,46073,4208],{"class":296},[286,46075,314],{"class":292},[286,46077,46078,46080,46082],{"class":288,"line":399},[286,46079,962],{"class":292},[286,46081,46002],{"class":296},[286,46083,314],{"class":292},[286,46085,46086,46088,46090],{"class":288,"line":405},[286,46087,793],{"class":292},[286,46089,810],{"class":296},[286,46091,314],{"class":292},[40,46093,46095,46096,29],{"id":46094},"optimización-senior-render-functions-h","Optimización Senior: Render Functions (",[26,46097,46098],{},"h",[31,46100,46101,46102,46104,46105,46108,46109,519,46111,46114,46115,46118],{},"Para alcanzar un nivel de producción profesional, especialmente en bibliotecas distribuidas vía NPM, es recomendable prescindir del bloque ",[26,46103,26166],{},". Al utilizar la función ",[26,46106,46107],{},"render"," y el método ",[26,46110,46098],{},[3299,46112,46113],{},"hyperscript","), eliminamos la ",[82,46116,46117],{},"sobrecarga"," de la compilación de plantillas y evitamos la creación de nodos adicionales innecesarios en el DOM.",[277,46120,46126],{"className":46121,"code":46122,"filename":46123,"highlights":46124,"language":46125,"meta":9,"style":9},"language-javascript shiki shiki-themes github-light github-dark","import { ref, h } from 'vue';\n\nexport default {\n setup(props, { slots }) {\n const isOpen = ref(false);\n const toggle = () => (isOpen.value = !isOpen.value);\n\n return () => {\n // Retornamos el slot por defecto pasando el estado\n return slots.default ? slots.default({\n isOpen: isOpen.value,\n toggle\n }) : null;\n };\n }\n};\n","LogicToggle.js",[339,354,368,405,410,444,464],"javascript",[26,46127,46128,46133,46137,46142,46148,46154,46160,46164,46169,46174,46180,46186,46192,46198,46202,46206],{"__ignoreMap":9},[286,46129,46130],{"class":288,"line":289},[286,46131,46132],{},"import { ref, h } from 'vue';\n",[286,46134,46135],{"class":288,"line":317},[286,46136,336],{"emptyLinePlaceholder":6},[286,46138,46139],{"class":288,"line":333},[286,46140,46141],{},"export default {\n",[286,46143,46145],{"class":46144,"line":339},[288,9405],[286,46146,46147],{}," setup(props, { slots }) {\n",[286,46149,46151],{"class":46150,"line":354},[288,9405],[286,46152,46153],{}," const isOpen = ref(false);\n",[286,46155,46157],{"class":46156,"line":368},[288,9405],[286,46158,46159],{}," const toggle = () => (isOpen.value = !isOpen.value);\n",[286,46161,46162],{"class":288,"line":379},[286,46163,336],{"emptyLinePlaceholder":6},[286,46165,46166],{"class":288,"line":389},[286,46167,46168],{}," return () => {\n",[286,46170,46171],{"class":288,"line":399},[286,46172,46173],{}," // Retornamos el slot por defecto pasando el estado\n",[286,46175,46177],{"class":46176,"line":405},[288,9405],[286,46178,46179],{}," return slots.default ? slots.default({\n",[286,46181,46183],{"class":46182,"line":410},[288,9405],[286,46184,46185],{}," isOpen: isOpen.value,\n",[286,46187,46189],{"class":46188,"line":444},[288,9405],[286,46190,46191],{}," toggle\n",[286,46193,46195],{"class":46194,"line":464},[288,9405],[286,46196,46197],{}," }) : null;\n",[286,46199,46200],{"class":288,"line":469},[286,46201,18485],{},[286,46203,46204],{"class":288,"line":484},[286,46205,550],{},[286,46207,46208],{"class":288,"line":508},[286,46209,18262],{},[31,46211,46212],{},"Esta aproximación permite que el componente actúe como un \"pasamanos\" puro de datos, manteniendo el Virtual DOM limpio y eficiente.",[40,46214,46216],{"id":46215},"renderless-components-vs-composables","Renderless Components vs. Composables",[31,46218,46219,46220,519,46223,46226],{},"Una duda frecuente es por qué no utilizar simplemente un ",[3299,46221,46222],{},"Composable",[26,46224,46225],{},"useToggle","). La elección depende del contexto:",[5399,46228,46229,46240],{},[5402,46230,46231],{},[5405,46232,46233,46236,46238],{},[5408,46234,46235],{},"Característica",[5408,46237,13476],{},[5408,46239,45624],{},[5421,46241,46242,46255,46268,46281,46293],{},[5405,46243,46244,46249,46252],{},[5426,46245,46246],{},[82,46247,46248],{},"Encapsulación",[5426,46250,46251],{},"Lógica pura de JavaScript.",[5426,46253,46254],{},"Lógica ligada al ciclo de vida del componente.",[5405,46256,46257,46262,46265],{},[5426,46258,46259],{},[82,46260,46261],{},"Plantilla",[5426,46263,46264],{},"Se importa en el script.",[5426,46266,46267],{},"Se define de forma declarativa en la plantilla.",[5405,46269,46270,46275,46278],{},[5426,46271,46272],{},[82,46273,46274],{},"Ámbito",[5426,46276,46277],{},"Ideal para lógica global o de negocio.",[5426,46279,46280],{},"Ideal para patrones de UI (accesibilidad, eventos).",[5405,46282,46283,46287,46290],{},[5426,46284,46285],{},[82,46286,26347],{},[5426,46288,46289],{},"No tiene acceso a slots.",[5426,46291,46292],{},"Puede orquestar múltiples subcomponentes.",[5405,46294,46295,46300,46303],{},[5426,46296,46297],{},[82,46298,46299],{},"Curva de aprendizaje",[5426,46301,46302],{},"Requiere entender reactividad pura.",[5426,46304,46305],{},"Más intuitivo para desarrolladores de plantillas.",[31,46307,46308,46309,46311,46312,46314,46315,1902],{},"Los ",[3299,46310,45624],{}," brillan cuando la lógica requiere interactuar con el ciclo de vida (como ",[26,46313,695],{},") o cuando deseas crear una jerarquía de componentes que compartan un estado implícito (",[3299,46316,46317],{},"Compound Components",[40,46319,46321],{"id":46320},"ventajas-competitivas-del-patrón","Ventajas Competitivas del Patrón",[10096,46323,46324,46333,46339],{},[51,46325,46326,46329,46330,46332],{},[82,46327,46328],{},"Mantenibilidad:"," Si la lógica de validación cambia, solo modificas el componente ",[3299,46331,45635],{},". La interfaz permanece intacta.",[51,46334,46335,46338],{},[82,46336,46337],{},"Testabilidad:"," Facilita las pruebas unitarias sobre la lógica de estado sin lidiar con selectores de CSS o colisiones de estilos.",[51,46340,46341,46344],{},[82,46342,46343],{},"Extensibilidad:"," Permite crear múltiples versiones visuales de una misma funcionalidad sin duplicar código lógico.",[40,46346,46348],{"id":46347},"consideraciones-finales","Consideraciones Finales",[31,46350,46351,46352,46354,46355,46357],{},"Si bien este patrón ofrece una flexibilidad inigualable, debe usarse con criterio. En plantillas muy extensas, el uso excesivo de ",[26,46353,25876],{}," puede dificultar la lectura del código. Sin embargo, para el desarrollo de sistemas de diseño y bibliotecas de componentes, los ",[82,46356,45624],{}," representan el estándar de oro en la arquitectura de Vue 3.",[1614,46359,46360],{},"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);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":9,"searchDepth":317,"depth":317,"links":46362},[46363,46364,46367,46369,46370,46371],{"id":45628,"depth":317,"text":45629},{"id":45646,"depth":317,"text":45647,"children":46365},[46366],{"id":45664,"depth":333,"text":45665},{"id":46094,"depth":317,"text":46368},"Optimización Senior: Render Functions (h)",{"id":46215,"depth":317,"text":46216},{"id":46320,"depth":317,"text":46321},{"id":46347,"depth":317,"text":46348},"https://res.cloudinary.com/denj4fg7f/image/upload/v1769789805/mastering-renderless-components-vue-3_f5mqbs.png","2026-01-30","Explora cómo los Renderless Components en Vue 3 pueden mejorar la reutilización de código y la separación de lógica y presentación en tus aplicaciones.",{"script":46376},[46377],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":46378},[46379],{"headline":45608,"author":46380,"datePublished":46381,"@type":1647},{"name":1644,"@type":1645},"2026-01-30T17:00:00-05:00",{"updatedAt":46383,"coverCaption":46384,"author":1644,"keywords":46385},"2026-02-11T00:00:00-05:00","Imagen destacada que representa el concepto de Renderless Components en Vue 3.",[13121,45624,46386,46387,45590],"Reutilización de Código","Patrones de Diseño","/blog/mastering-renderless-components-vue-3.es",[46390],{"headline":45608,"author":46391,"datePublished":46381,"@type":1647},{"name":1644,"@type":1645},{"title":45608,"description":46374},"blog/mastering-renderless-components-vue-3.es",[46395,46396,46398,46399,46400,46401],{"tag":1672,"color":1673},{"tag":46387,"color":46397},"#9C27B0",{"tag":1675,"color":1676},{"tag":3174,"color":3175},{"tag":1678,"color":1679},{"tag":45591,"color":46402},"#2196F3","wkBzCTrYSVlz1Kd-5Eu3wdkl3Wa1TA2xf4r2o20kVNU",{"id":46405,"title":46406,"body":46407,"cover":48328,"coverAlt":46406,"date":48329,"description":48330,"draft":12,"extension":1635,"head":48331,"locale":1648,"meta":48338,"navigation":6,"path":48341,"schemaOrg":48342,"seo":48345,"series":1663,"seriesDescription":1663,"seriesOrder":1663,"seriesTitle":1663,"slug":1663,"stem":48346,"tags":48347,"__hash__":48358},"blog/blog/vue-provide-inject-avoid-prop-drilling.es.md","Provide e Inject en Vue 3: Guía definitiva para eliminar el Prop Drilling",{"type":18,"value":46408,"toc":48313},[46409,46413,46420,46430,46434,46461,46468,46471,46485,46489,46492,46498,46620,46700,46706,46802,46879,46883,46896,46917,46927,46945,46952,46957,47089,47280,47285,47419,47648,47652,47659,47701,47705,47708,47719,47725,47887,47893,48099,48103,48114,48125,48129,48140,48162,48165,48169,48243,48247,48267,48269,48279,48307,48310],[21,46410,46412],{"id":46411},"provide-e-inject-cómo-evitar-el-prop-drilling-en-vuejs","Provide e Inject: Cómo evitar el Prop Drilling en Vue.js",[31,46414,46415,46416,46419],{},"Imagina que en tu proyecto tienes un componente \"Abuelo\" que debe enviar un dato a un componente \"Nieto\". Tradicionalmente, tendrías que pasar ese dato a través del componente \"Padre\", aunque este último no lo utilice para nada. A este fenómeno se le conoce como ",[82,46417,46418],{},"Prop Drilling",", y es una de las principales causas de que el código se vuelva complejo y difícil de mantener.",[31,46421,46422,46425,46426,46429],{},[26,46423,46424],{},"Provide"," e ",[26,46427,46428],{},"Inject"," permiten que un componente ancestro exponga un dato para que cualquier descendiente lo \"atrape\" directamente, sin necesidad de pasarlo manualmente por cada nivel de la jerarquía.",[40,46431,46433],{"id":46432},"problemas-comunes-del-prop-drilling","Problemas comunes del Prop Drilling",[10096,46435,46436,46446,46452],{},[51,46437,46438,46441,46442,46445],{},[82,46439,46440],{},"Mantenimiento costoso:"," Si decides renombrar una ",[26,46443,46444],{},"prop"," o modificar su estructura, debes actualizar cada componente intermedio, incluso si no consumen el dato.",[51,46447,46448,46451],{},[82,46449,46450],{},"Fragilidad:"," Al depender de múltiples niveles de anidamiento, es más fácil romper la cadena de datos por un error en un componente intermedio.",[51,46453,46454,46457,46458,46460],{},[82,46455,46456],{},"Baja Reutilización:"," Los componentes intermedios pierden versatilidad, ya que quedan obligados a recibir y transmitir ",[26,46459,1889],{}," que no pertenecen a su lógica interna.",[40,46462,46464,46465],{"id":46463},"la-solución-nativa-provide-e-inject","La solución nativa: ",[82,46466,46467],{},"Provide e Inject",[31,46469,46470],{},"Vue nos ofrece una solución integrada sin necesidad de recurrir a librerías externas de gestión de estado (como Pinia):",[48,46472,46473,46479],{},[51,46474,46475,46478],{},[82,46476,46477],{},"Provide:"," El componente ancestro define y \"provee\" el dato al árbol de componentes.",[51,46480,46481,46484],{},[82,46482,46483],{},"Inject:"," Cualquier componente descendiente, sin importar su profundidad, \"inyecta\" y consume ese dato.",[40,46486,46488],{"id":46487},"implementación-en-vue-3-composition-api-y-options-api","Implementación en Vue 3 (Composition API y Options API)",[31,46490,46491],{},"Para implementar esta comunicación, seguimos una estructura de clave y valor.",[23931,46493,46495],{"id":46494},"componente-emisor-abuelo",[82,46496,46497],{},"Componente Emisor (Abuelo):",[277,46499,46502],{"className":279,"code":46500,"filename":281,"highlights":46501,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref, provide } from 'vue'\nimport Hijo from './Hijo.vue'\n\nconst nombreApp = ref('TODOvue')\n\n// Provee el dato usando una \"clave\" única\nprovide('app-name-key', nombreApp)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CHijo />\n\u003C/template>\n",[317,389],[26,46503,46504,46514,46526,46538,46542,46560,46564,46569,46583,46591,46595,46603,46612],{"__ignoreMap":9},[286,46505,46506,46508,46510,46512],{"class":288,"line":289},[286,46507,293],{"class":292},[286,46509,297],{"class":296},[286,46511,301],{"class":300},[286,46513,314],{"class":292},[286,46515,46517,46519,46522,46524],{"class":46516,"line":317},[288,9405],[286,46518,321],{"class":320},[286,46520,46521],{"class":292}," { ref, provide } ",[286,46523,327],{"class":320},[286,46525,330],{"class":310},[286,46527,46528,46530,46533,46535],{"class":288,"line":333},[286,46529,321],{"class":320},[286,46531,46532],{"class":292}," Hijo ",[286,46534,327],{"class":320},[286,46536,46537],{"class":310}," './Hijo.vue'\n",[286,46539,46540],{"class":288,"line":339},[286,46541,336],{"emptyLinePlaceholder":6},[286,46543,46544,46546,46549,46551,46553,46555,46558],{"class":288,"line":354},[286,46545,413],{"class":320},[286,46547,46548],{"class":364}," nombreApp",[286,46550,348],{"class":320},[286,46552,421],{"class":300},[286,46554,456],{"class":292},[286,46556,46557],{"class":310},"'TODOvue'",[286,46559,441],{"class":292},[286,46561,46562],{"class":288,"line":368},[286,46563,336],{"emptyLinePlaceholder":6},[286,46565,46566],{"class":288,"line":379},[286,46567,46568],{"class":12748},"// Provee el dato usando una \"clave\" única\n",[286,46570,46572,46575,46577,46580],{"class":46571,"line":389},[288,9405],[286,46573,46574],{"class":300},"provide",[286,46576,456],{"class":292},[286,46578,46579],{"class":310},"'app-name-key'",[286,46581,46582],{"class":292},", nombreApp)\n",[286,46584,46585,46587,46589],{"class":288,"line":399},[286,46586,793],{"class":292},[286,46588,297],{"class":296},[286,46590,314],{"class":292},[286,46592,46593],{"class":288,"line":405},[286,46594,336],{"emptyLinePlaceholder":6},[286,46596,46597,46599,46601],{"class":288,"line":410},[286,46598,293],{"class":292},[286,46600,810],{"class":296},[286,46602,314],{"class":292},[286,46604,46605,46607,46610],{"class":288,"line":444},[286,46606,818],{"class":292},[286,46608,46609],{"class":296},"Hijo",[286,46611,4332],{"class":292},[286,46613,46614,46616,46618],{"class":288,"line":464},[286,46615,793],{"class":292},[286,46617,810],{"class":296},[286,46619,314],{"class":292},[277,46621,46624],{"className":279,"code":46622,"filename":979,"highlights":46623,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n provide: {\n nombreApp : 'TODOvue'\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CHijo />\n\u003C/template>\n",[333],[26,46625,46626,46634,46642,46648,46656,46660,46664,46672,46676,46684,46692],{"__ignoreMap":9},[286,46627,46628,46630,46632],{"class":288,"line":289},[286,46629,293],{"class":292},[286,46631,297],{"class":296},[286,46633,314],{"class":292},[286,46635,46636,46638,46640],{"class":288,"line":317},[286,46637,1065],{"class":320},[286,46639,1068],{"class":320},[286,46641,351],{"class":292},[286,46643,46645],{"class":46644,"line":333},[288,9405],[286,46646,46647],{"class":292}," provide: {\n",[286,46649,46650,46653],{"class":288,"line":339},[286,46651,46652],{"class":292}," nombreApp : ",[286,46654,46655],{"class":310},"'TODOvue'\n",[286,46657,46658],{"class":288,"line":354},[286,46659,550],{"class":292},[286,46661,46662],{"class":288,"line":368},[286,46663,402],{"class":292},[286,46665,46666,46668,46670],{"class":288,"line":379},[286,46667,793],{"class":292},[286,46669,297],{"class":296},[286,46671,314],{"class":292},[286,46673,46674],{"class":288,"line":389},[286,46675,336],{"emptyLinePlaceholder":6},[286,46677,46678,46680,46682],{"class":288,"line":399},[286,46679,293],{"class":292},[286,46681,810],{"class":296},[286,46683,314],{"class":292},[286,46685,46686,46688,46690],{"class":288,"line":405},[286,46687,818],{"class":292},[286,46689,46609],{"class":296},[286,46691,4332],{"class":292},[286,46693,46694,46696,46698],{"class":288,"line":410},[286,46695,793],{"class":292},[286,46697,810],{"class":296},[286,46699,314],{"class":292},[23931,46701,46703],{"id":46702},"componente-receptor-nieto",[82,46704,46705],{},"Componente Receptor (Nieto):",[277,46707,46710],{"className":279,"code":46708,"filename":281,"highlights":46709,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { inject } from 'vue'\n\n// \"Atrapa\" el dato usando la misma clave definida en el ancestro\nconst nombreApp = inject('app-name-key')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ch1>{{ nombreApp }}\u003C/h1>\n\u003C/template>\n",[317,354],[26,46711,46712,46722,46734,46738,46743,46761,46769,46773,46781,46794],{"__ignoreMap":9},[286,46713,46714,46716,46718,46720],{"class":288,"line":289},[286,46715,293],{"class":292},[286,46717,297],{"class":296},[286,46719,301],{"class":300},[286,46721,314],{"class":292},[286,46723,46725,46727,46730,46732],{"class":46724,"line":317},[288,9405],[286,46726,321],{"class":320},[286,46728,46729],{"class":292}," { inject } ",[286,46731,327],{"class":320},[286,46733,330],{"class":310},[286,46735,46736],{"class":288,"line":333},[286,46737,336],{"emptyLinePlaceholder":6},[286,46739,46740],{"class":288,"line":339},[286,46741,46742],{"class":12748},"// \"Atrapa\" el dato usando la misma clave definida en el ancestro\n",[286,46744,46746,46748,46750,46752,46755,46757,46759],{"class":46745,"line":354},[288,9405],[286,46747,413],{"class":320},[286,46749,46548],{"class":364},[286,46751,348],{"class":320},[286,46753,46754],{"class":300}," inject",[286,46756,456],{"class":292},[286,46758,46579],{"class":310},[286,46760,441],{"class":292},[286,46762,46763,46765,46767],{"class":288,"line":368},[286,46764,793],{"class":292},[286,46766,297],{"class":296},[286,46768,314],{"class":292},[286,46770,46771],{"class":288,"line":379},[286,46772,336],{"emptyLinePlaceholder":6},[286,46774,46775,46777,46779],{"class":288,"line":389},[286,46776,293],{"class":292},[286,46778,810],{"class":296},[286,46780,314],{"class":292},[286,46782,46783,46785,46787,46790,46792],{"class":288,"line":399},[286,46784,818],{"class":292},[286,46786,21],{"class":296},[286,46788,46789],{"class":292},">{{ nombreApp }}\u003C/",[286,46791,21],{"class":296},[286,46793,314],{"class":292},[286,46795,46796,46798,46800],{"class":288,"line":405},[286,46797,793],{"class":292},[286,46799,810],{"class":296},[286,46801,314],{"class":292},[277,46803,46806],{"className":279,"code":46804,"filename":979,"highlights":46805,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n inject: ['nombreApp'],\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ch1>{{ nombreApp }}\u003C/h1>\n\u003C/template>\n",[333],[26,46807,46808,46816,46824,46835,46839,46847,46851,46859,46871],{"__ignoreMap":9},[286,46809,46810,46812,46814],{"class":288,"line":289},[286,46811,293],{"class":292},[286,46813,297],{"class":296},[286,46815,314],{"class":292},[286,46817,46818,46820,46822],{"class":288,"line":317},[286,46819,1065],{"class":320},[286,46821,1068],{"class":320},[286,46823,351],{"class":292},[286,46825,46827,46830,46833],{"class":46826,"line":333},[288,9405],[286,46828,46829],{"class":292}," inject: [",[286,46831,46832],{"class":310},"'nombreApp'",[286,46834,30187],{"class":292},[286,46836,46837],{"class":288,"line":339},[286,46838,402],{"class":292},[286,46840,46841,46843,46845],{"class":288,"line":354},[286,46842,793],{"class":292},[286,46844,297],{"class":296},[286,46846,314],{"class":292},[286,46848,46849],{"class":288,"line":368},[286,46850,336],{"emptyLinePlaceholder":6},[286,46852,46853,46855,46857],{"class":288,"line":379},[286,46854,293],{"class":292},[286,46856,810],{"class":296},[286,46858,314],{"class":292},[286,46860,46861,46863,46865,46867,46869],{"class":288,"line":389},[286,46862,818],{"class":292},[286,46864,21],{"class":296},[286,46866,46789],{"class":292},[286,46868,21],{"class":296},[286,46870,314],{"class":292},[286,46872,46873,46875,46877],{"class":288,"line":399},[286,46874,793],{"class":292},[286,46876,810],{"class":296},[286,46878,314],{"class":292},[40,46880,46882],{"id":46881},"el-reto-de-la-reactividad-y-la-seguridad","El reto de la reactividad y la seguridad",[31,46884,46885,46886,9185,46888,46890,46891,46895],{},"Para que los cambios en el dato fluyan correctamente, debemos pasar un ",[26,46887,1934],{},[26,46889,12326],{},". Si quieres profundizar más sobre cómo funciona la reactividad en Vue 3, puedes consultar nuestra entrada ",[13185,46892,46894],{"href":46893},"/blog/vue-reactivity-explained.es/","¿Qué es la reactividad? La magia detrás de Vue.js explicada con claridad",". Sin embargo, esto introduce un riesgo: un componente hijo podría intentar modificar el valor directamente.",[277,46897,46900],{"className":46121,"code":46898,"filename":46899,"language":46125,"meta":9,"style":9},"// ¡Peligro! Modificar el estado desde un hijo dificulta la depuración\nidioma.value = 'en'\n","inject-example.js",[26,46901,46902,46907],{"__ignoreMap":9},[286,46903,46904],{"class":288,"line":289},[286,46905,46906],{"class":12748},"// ¡Peligro! Modificar el estado desde un hijo dificulta la depuración\n",[286,46908,46909,46912,46914],{"class":288,"line":317},[286,46910,46911],{"class":292},"idioma.value ",[286,46913,307],{"class":320},[286,46915,46916],{"class":310}," 'en'\n",[31,46918,46919,46920,46923,46924,361],{},"Si cualquier componente puede alterar el estado inyectado, perdemos el rastro de ",[82,46921,46922],{},"quién, cuándo y por qué"," cambió el dato. Para solucionar esto, aplicamos el patrón de ",[82,46925,46926],{},"Inyección de Solo Lectura",[10096,46928,46929,46939],{},[51,46930,46931,46934,46935,46938],{},[82,46932,46933],{},"El dato:"," Se protege con ",[26,46936,46937],{},"readonly()"," para evitar modificaciones accidentales.",[51,46940,46941,46944],{},[82,46942,46943],{},"La función:"," Se provee una función específica para realizar el cambio, centralizando la lógica en el ancestro.",[40,46946,46948,46949],{"id":46947},"ejemplo-de-uso-correcto-con-readonly","Ejemplo de uso correcto con ",[26,46950,46951],{},"readonly",[23931,46953,46955],{"id":46954},"componente-emisor-abuelo-1",[82,46956,46497],{},[277,46958,46961],{"className":279,"code":46959,"filename":281,"highlights":46960,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref, provide, readonly } from 'vue'\n\nconst idioma = ref('es')\nconst cambiarIdioma = (nuevo) => {\n idioma.value = nuevo\n}\n\nprovide('config-idioma', {\n idioma: readonly(idioma), // Protegemos el estado\n cambiarIdioma // Exponemos la vía de modificación\n})\n\u003C/script>\n",[405],[26,46962,46963,46973,46984,46988,47006,47026,47036,47040,47044,47055,47069,47077,47081],{"__ignoreMap":9},[286,46964,46965,46967,46969,46971],{"class":288,"line":289},[286,46966,293],{"class":292},[286,46968,297],{"class":296},[286,46970,301],{"class":300},[286,46972,314],{"class":292},[286,46974,46975,46977,46980,46982],{"class":288,"line":317},[286,46976,321],{"class":320},[286,46978,46979],{"class":292}," { ref, provide, readonly } ",[286,46981,327],{"class":320},[286,46983,330],{"class":310},[286,46985,46986],{"class":288,"line":333},[286,46987,336],{"emptyLinePlaceholder":6},[286,46989,46990,46992,46995,46997,46999,47001,47004],{"class":288,"line":339},[286,46991,413],{"class":320},[286,46993,46994],{"class":364}," idioma",[286,46996,348],{"class":320},[286,46998,421],{"class":300},[286,47000,456],{"class":292},[286,47002,47003],{"class":310},"'es'",[286,47005,441],{"class":292},[286,47007,47008,47010,47013,47015,47017,47020,47022,47024],{"class":288,"line":354},[286,47009,413],{"class":320},[286,47011,47012],{"class":300}," cambiarIdioma",[286,47014,348],{"class":320},[286,47016,519],{"class":292},[286,47018,47019],{"class":357},"nuevo",[286,47021,2347],{"class":292},[286,47023,609],{"class":320},[286,47025,351],{"class":292},[286,47027,47028,47031,47033],{"class":288,"line":368},[286,47029,47030],{"class":292}," idioma.value ",[286,47032,307],{"class":320},[286,47034,47035],{"class":292}," nuevo\n",[286,47037,47038],{"class":288,"line":379},[286,47039,402],{"class":292},[286,47041,47042],{"class":288,"line":389},[286,47043,336],{"emptyLinePlaceholder":6},[286,47045,47046,47048,47050,47053],{"class":288,"line":399},[286,47047,46574],{"class":300},[286,47049,456],{"class":292},[286,47051,47052],{"class":310},"'config-idioma'",[286,47054,2367],{"class":292},[286,47056,47058,47061,47063,47066],{"class":47057,"line":405},[288,9405],[286,47059,47060],{"class":292}," idioma: ",[286,47062,46951],{"class":300},[286,47064,47065],{"class":292},"(idioma), ",[286,47067,47068],{"class":12748},"// Protegemos el estado\n",[286,47070,47071,47074],{"class":288,"line":410},[286,47072,47073],{"class":292}," cambiarIdioma ",[286,47075,47076],{"class":12748},"// Exponemos la vía de modificación\n",[286,47078,47079],{"class":288,"line":444},[286,47080,684],{"class":292},[286,47082,47083,47085,47087],{"class":288,"line":464},[286,47084,793],{"class":292},[286,47086,297],{"class":296},[286,47088,314],{"class":292},[277,47090,47093],{"className":279,"code":47091,"filename":979,"highlights":47092,"language":282,"meta":9,"style":9},"\u003Cscript>\nimport { computed } from 'vue'\n\nexport default {\n data() {\n return {\n idioma: 'es'\n }\n },\n methods: {\n cambiarIdioma(nuevo) {\n this.idioma = nuevo\n }\n },\n provide() {\n return {\n // IMPORTANTE: En Options API, 'provide' se evalúa una sola vez.\n // Para mantener reactividad, envolvemos el valor con computed()\n // que crea una función getter que Vue reevalúa automáticamente\n 'config-idioma': {\n // Usamos computed para que el hijo vea los cambios de this.idioma\n idioma: computed(() => this.idioma),\n cambiarIdioma: this.cambiarIdioma\n }\n }\n }\n}\n\u003C/script>\n",[591],[26,47094,47095,47103,47114,47118,47126,47132,47138,47146,47150,47154,47158,47169,47180,47184,47188,47195,47201,47206,47211,47216,47224,47229,47245,47256,47260,47264,47268,47272],{"__ignoreMap":9},[286,47096,47097,47099,47101],{"class":288,"line":289},[286,47098,293],{"class":292},[286,47100,297],{"class":296},[286,47102,314],{"class":292},[286,47104,47105,47107,47110,47112],{"class":288,"line":317},[286,47106,321],{"class":320},[286,47108,47109],{"class":292}," { computed } ",[286,47111,327],{"class":320},[286,47113,330],{"class":310},[286,47115,47116],{"class":288,"line":333},[286,47117,336],{"emptyLinePlaceholder":6},[286,47119,47120,47122,47124],{"class":288,"line":339},[286,47121,1065],{"class":320},[286,47123,1068],{"class":320},[286,47125,351],{"class":292},[286,47127,47128,47130],{"class":288,"line":354},[286,47129,1094],{"class":300},[286,47131,481],{"class":292},[286,47133,47134,47136],{"class":288,"line":368},[286,47135,1101],{"class":320},[286,47137,351],{"class":292},[286,47139,47140,47143],{"class":288,"line":379},[286,47141,47142],{"class":292}," idioma: ",[286,47144,47145],{"class":310},"'es'\n",[286,47147,47148],{"class":288,"line":389},[286,47149,1134],{"class":292},[286,47151,47152],{"class":288,"line":399},[286,47153,1139],{"class":292},[286,47155,47156],{"class":288,"line":405},[286,47157,45878],{"class":292},[286,47159,47160,47163,47165,47167],{"class":288,"line":410},[286,47161,47162],{"class":300}," cambiarIdioma",[286,47164,456],{"class":292},[286,47166,47019],{"class":357},[286,47168,2483],{"class":292},[286,47170,47171,47173,47176,47178],{"class":288,"line":444},[286,47172,8826],{"class":364},[286,47174,47175],{"class":292},".idioma ",[286,47177,307],{"class":320},[286,47179,47035],{"class":292},[286,47181,47182],{"class":288,"line":464},[286,47183,1211],{"class":292},[286,47185,47186],{"class":288,"line":469},[286,47187,1139],{"class":292},[286,47189,47190,47193],{"class":288,"line":484},[286,47191,47192],{"class":300}," provide",[286,47194,481],{"class":292},[286,47196,47197,47199],{"class":288,"line":508},[286,47198,1101],{"class":320},[286,47200,351],{"class":292},[286,47202,47203],{"class":288,"line":513},[286,47204,47205],{"class":12748}," // IMPORTANTE: En Options API, 'provide' se evalúa una sola vez.\n",[286,47207,47208],{"class":288,"line":528},[286,47209,47210],{"class":12748}," // Para mantener reactividad, envolvemos el valor con computed()\n",[286,47212,47213],{"class":288,"line":547},[286,47214,47215],{"class":12748}," // que crea una función getter que Vue reevalúa automáticamente\n",[286,47217,47218,47221],{"class":288,"line":553},[286,47219,47220],{"class":310}," 'config-idioma'",[286,47222,47223],{"class":292},": {\n",[286,47225,47226],{"class":288,"line":558},[286,47227,47228],{"class":12748}," // Usamos computed para que el hijo vea los cambios de this.idioma\n",[286,47230,47231,47234,47236,47238,47240,47242],{"class":288,"line":586},[286,47232,47233],{"class":292}," idioma: ",[286,47235,1739],{"class":300},[286,47237,2210],{"class":292},[286,47239,609],{"class":320},[286,47241,1276],{"class":364},[286,47243,47244],{"class":292},".idioma),\n",[286,47246,47248,47251,47253],{"class":47247,"line":591},[288,9405],[286,47249,47250],{"class":292}," cambiarIdioma: ",[286,47252,1349],{"class":364},[286,47254,47255],{"class":292},".cambiarIdioma\n",[286,47257,47258],{"class":288,"line":596},[286,47259,1211],{"class":292},[286,47261,47262],{"class":288,"line":614},[286,47263,1134],{"class":292},[286,47265,47266],{"class":288,"line":622},[286,47267,550],{"class":292},[286,47269,47270],{"class":288,"line":633},[286,47271,402],{"class":292},[286,47273,47274,47276,47278],{"class":288,"line":645},[286,47275,793],{"class":292},[286,47277,297],{"class":296},[286,47279,314],{"class":292},[23931,47281,47283],{"id":47282},"componente-receptor-nieto-1",[82,47284,46705],{},[277,47286,47289],{"className":279,"code":47287,"filename":281,"highlights":47288,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { inject } from 'vue'\n\nconst { idioma, cambiarIdioma } = inject('config-idioma')\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cp>Idioma actual: {{ idioma }}\u003C/p>\n \u003Cbutton @click=\"cambiarIdioma('en')\">Cambiar a Inglés\u003C/button>\n \u003C/div>\n\u003C/template>\n",[339],[26,47290,47291,47301,47311,47315,47342,47350,47354,47362,47370,47383,47403,47411],{"__ignoreMap":9},[286,47292,47293,47295,47297,47299],{"class":288,"line":289},[286,47294,293],{"class":292},[286,47296,297],{"class":296},[286,47298,301],{"class":300},[286,47300,314],{"class":292},[286,47302,47303,47305,47307,47309],{"class":288,"line":317},[286,47304,321],{"class":320},[286,47306,46729],{"class":292},[286,47308,327],{"class":320},[286,47310,330],{"class":310},[286,47312,47313],{"class":288,"line":333},[286,47314,336],{"emptyLinePlaceholder":6},[286,47316,47318,47320,47322,47325,47327,47330,47332,47334,47336,47338,47340],{"class":47317,"line":339},[288,9405],[286,47319,413],{"class":320},[286,47321,6002],{"class":292},[286,47323,47324],{"class":364},"idioma",[286,47326,235],{"class":292},[286,47328,47329],{"class":364},"cambiarIdioma",[286,47331,17513],{"class":292},[286,47333,307],{"class":320},[286,47335,46754],{"class":300},[286,47337,456],{"class":292},[286,47339,47052],{"class":310},[286,47341,441],{"class":292},[286,47343,47344,47346,47348],{"class":288,"line":354},[286,47345,793],{"class":292},[286,47347,297],{"class":296},[286,47349,314],{"class":292},[286,47351,47352],{"class":288,"line":368},[286,47353,336],{"emptyLinePlaceholder":6},[286,47355,47356,47358,47360],{"class":288,"line":379},[286,47357,293],{"class":292},[286,47359,810],{"class":296},[286,47361,314],{"class":292},[286,47363,47364,47366,47368],{"class":288,"line":389},[286,47365,818],{"class":292},[286,47367,4208],{"class":296},[286,47369,314],{"class":292},[286,47371,47372,47374,47376,47379,47381],{"class":288,"line":399},[286,47373,837],{"class":292},[286,47375,31],{"class":296},[286,47377,47378],{"class":292},">Idioma actual: {{ idioma }}\u003C/",[286,47380,31],{"class":296},[286,47382,314],{"class":292},[286,47384,47385,47387,47389,47391,47393,47396,47399,47401],{"class":288,"line":405},[286,47386,837],{"class":292},[286,47388,4274],{"class":296},[286,47390,4285],{"class":300},[286,47392,307],{"class":292},[286,47394,47395],{"class":310},"\"cambiarIdioma('en')\"",[286,47397,47398],{"class":292},">Cambiar a Inglés\u003C/",[286,47400,4274],{"class":296},[286,47402,314],{"class":292},[286,47404,47405,47407,47409],{"class":288,"line":410},[286,47406,962],{"class":292},[286,47408,4208],{"class":296},[286,47410,314],{"class":292},[286,47412,47413,47415,47417],{"class":288,"line":444},[286,47414,793],{"class":292},[286,47416,810],{"class":296},[286,47418,314],{"class":292},[277,47420,47423],{"className":279,"code":47421,"filename":979,"highlights":47422,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n inject: {\n configIdioma: {\n from: 'config-idioma',\n default: () => ({\n idioma: { value: 'es' },\n cambiarIdioma: () => {}\n })\n }\n },\n computed: {\n idiomaActual() {\n return this.configIdioma.idioma.value\n }\n },\n methods: {\n cambiarAIngles() {\n this.configIdioma.cambiarIdioma('en')\n }\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cp>Idioma actual: {{ idiomaActual }}\u003C/p>\n \u003Cbutton @click=\"cambiarAIngles\">Cambiar a Inglés\u003C/button>\n \u003C/div>\n\u003C/template>\n",[379,469],[26,47424,47425,47433,47441,47446,47451,47460,47471,47481,47492,47496,47500,47504,47508,47515,47525,47529,47533,47537,47544,47560,47564,47568,47572,47580,47584,47592,47600,47613,47632,47640],{"__ignoreMap":9},[286,47426,47427,47429,47431],{"class":288,"line":289},[286,47428,293],{"class":292},[286,47430,297],{"class":296},[286,47432,314],{"class":292},[286,47434,47435,47437,47439],{"class":288,"line":317},[286,47436,1065],{"class":320},[286,47438,1068],{"class":320},[286,47440,351],{"class":292},[286,47442,47443],{"class":288,"line":333},[286,47444,47445],{"class":292}," inject: {\n",[286,47447,47448],{"class":288,"line":339},[286,47449,47450],{"class":292}," configIdioma: {\n",[286,47452,47453,47456,47458],{"class":288,"line":354},[286,47454,47455],{"class":292}," from: ",[286,47457,47052],{"class":310},[286,47459,1085],{"class":292},[286,47461,47462,47465,47467,47469],{"class":288,"line":368},[286,47463,47464],{"class":300}," default",[286,47466,3797],{"class":292},[286,47468,609],{"class":320},[286,47470,36133],{"class":292},[286,47472,47474,47477,47479],{"class":47473,"line":379},[288,9405],[286,47475,47476],{"class":292}," idioma: { value: ",[286,47478,47003],{"class":310},[286,47480,2139],{"class":292},[286,47482,47483,47486,47488,47490],{"class":288,"line":389},[286,47484,47485],{"class":300}," cambiarIdioma",[286,47487,3797],{"class":292},[286,47489,609],{"class":320},[286,47491,45188],{"class":292},[286,47493,47494],{"class":288,"line":399},[286,47495,2860],{"class":292},[286,47497,47498],{"class":288,"line":405},[286,47499,1134],{"class":292},[286,47501,47502],{"class":288,"line":410},[286,47503,1139],{"class":292},[286,47505,47506],{"class":288,"line":444},[286,47507,2749],{"class":292},[286,47509,47510,47513],{"class":288,"line":464},[286,47511,47512],{"class":300}," idiomaActual",[286,47514,481],{"class":292},[286,47516,47518,47520,47522],{"class":47517,"line":469},[288,9405],[286,47519,2761],{"class":320},[286,47521,1276],{"class":364},[286,47523,47524],{"class":292},".configIdioma.idioma.value\n",[286,47526,47527],{"class":288,"line":484},[286,47528,1134],{"class":292},[286,47530,47531],{"class":288,"line":508},[286,47532,1139],{"class":292},[286,47534,47535],{"class":288,"line":513},[286,47536,1148],{"class":292},[286,47538,47539,47542],{"class":288,"line":528},[286,47540,47541],{"class":300}," cambiarAIngles",[286,47543,481],{"class":292},[286,47545,47546,47548,47551,47553,47555,47558],{"class":288,"line":547},[286,47547,1220],{"class":364},[286,47549,47550],{"class":292},".configIdioma.",[286,47552,47329],{"class":300},[286,47554,456],{"class":292},[286,47556,47557],{"class":310},"'en'",[286,47559,441],{"class":292},[286,47561,47562],{"class":288,"line":553},[286,47563,1134],{"class":292},[286,47565,47566],{"class":288,"line":558},[286,47567,550],{"class":292},[286,47569,47570],{"class":288,"line":586},[286,47571,402],{"class":292},[286,47573,47574,47576,47578],{"class":288,"line":591},[286,47575,793],{"class":292},[286,47577,297],{"class":296},[286,47579,314],{"class":292},[286,47581,47582],{"class":288,"line":596},[286,47583,336],{"emptyLinePlaceholder":6},[286,47585,47586,47588,47590],{"class":288,"line":614},[286,47587,293],{"class":292},[286,47589,810],{"class":296},[286,47591,314],{"class":292},[286,47593,47594,47596,47598],{"class":288,"line":622},[286,47595,818],{"class":292},[286,47597,4208],{"class":296},[286,47599,314],{"class":292},[286,47601,47602,47604,47606,47609,47611],{"class":288,"line":633},[286,47603,837],{"class":292},[286,47605,31],{"class":296},[286,47607,47608],{"class":292},">Idioma actual: {{ idiomaActual }}\u003C/",[286,47610,31],{"class":296},[286,47612,314],{"class":292},[286,47614,47615,47617,47619,47621,47623,47626,47628,47630],{"class":288,"line":645},[286,47616,837],{"class":292},[286,47618,4274],{"class":296},[286,47620,4285],{"class":300},[286,47622,307],{"class":292},[286,47624,47625],{"class":310},"\"cambiarAIngles\"",[286,47627,47398],{"class":292},[286,47629,4274],{"class":296},[286,47631,314],{"class":292},[286,47633,47634,47636,47638],{"class":288,"line":654},[286,47635,962],{"class":292},[286,47637,4208],{"class":296},[286,47639,314],{"class":292},[286,47641,47642,47644,47646],{"class":288,"line":676},[286,47643,793],{"class":292},[286,47645,810],{"class":296},[286,47647,314],{"class":292},[40,47649,47651],{"id":47650},"manejo-de-valores-por-defecto","Manejo de valores por defecto",[31,47653,47654,47655,47658],{},"Para hacer tus componentes más robustos, puedes definir un valor por defecto en el ",[26,47656,47657],{},"inject",". Si el componente se usa fuera de un árbol que provea la clave, evitarás errores de ejecución:",[277,47660,47664],{"className":46121,"code":47661,"filename":47662,"highlights":47663,"language":46125,"meta":9,"style":9},"// Si no encuentra 'user-data', usará el objeto por defecto\nconst usuario = inject('user-data', { nombre: 'Invitado', premium: false })\n","inject-default.js",[317],[26,47665,47666,47671],{"__ignoreMap":9},[286,47667,47668],{"class":288,"line":289},[286,47669,47670],{"class":12748},"// Si no encuentra 'user-data', usará el objeto por defecto\n",[286,47672,47674,47676,47679,47681,47683,47685,47688,47691,47694,47697,47699],{"class":47673,"line":317},[288,9405],[286,47675,413],{"class":320},[286,47677,47678],{"class":364}," usuario",[286,47680,348],{"class":320},[286,47682,46754],{"class":300},[286,47684,456],{"class":292},[286,47686,47687],{"class":310},"'user-data'",[286,47689,47690],{"class":292},", { nombre: ",[286,47692,47693],{"class":310},"'Invitado'",[286,47695,47696],{"class":292},", premium: ",[286,47698,2130],{"class":364},[286,47700,16893],{"class":292},[40,47702,47704],{"id":47703},"provideinject-a-nivel-de-aplicación","Provide/Inject a nivel de aplicación",[31,47706,47707],{},"Además de usarlo entre componentes, puedes definir valores globales directamente en la instancia de la aplicación. Esto es útil para:",[48,47709,47710,47713,47716],{},[51,47711,47712],{},"Configuración de la aplicación (URL de API, claves de servicios)",[51,47714,47715],{},"Temas o preferencias globales",[51,47717,47718],{},"Plugins o utilidades compartidas",[23931,47720,47722],{"id":47721},"implementación",[82,47723,47724],{},"Implementación:",[277,47726,47729],{"className":46121,"code":47727,"filename":19445,"highlights":47728,"language":46125,"meta":9,"style":9},"import { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\n// Provee valores globales disponibles en toda la aplicación\napp.provide('api-url', 'https://api.ejemplo.com')\napp.provide('theme', 'dark')\napp.provide('analytics', {\n trackEvent: (eventName) => {\n console.log(`Evento: ${eventName}`)\n }\n})\n\napp.mount('#app')\n",[379,389],[26,47730,47731,47741,47751,47755,47767,47771,47776,47795,47814,47827,47844,47861,47865,47869,47873],{"__ignoreMap":9},[286,47732,47733,47735,47737,47739],{"class":288,"line":289},[286,47734,321],{"class":320},[286,47736,45412],{"class":292},[286,47738,327],{"class":320},[286,47740,330],{"class":310},[286,47742,47743,47745,47747,47749],{"class":288,"line":317},[286,47744,321],{"class":320},[286,47746,45423],{"class":292},[286,47748,327],{"class":320},[286,47750,45428],{"class":310},[286,47752,47753],{"class":288,"line":333},[286,47754,336],{"emptyLinePlaceholder":6},[286,47756,47757,47759,47761,47763,47765],{"class":288,"line":339},[286,47758,413],{"class":320},[286,47760,45435],{"class":364},[286,47762,348],{"class":320},[286,47764,45440],{"class":300},[286,47766,45443],{"class":292},[286,47768,47769],{"class":288,"line":354},[286,47770,336],{"emptyLinePlaceholder":6},[286,47772,47773],{"class":288,"line":368},[286,47774,47775],{"class":12748},"// Provee valores globales disponibles en toda la aplicación\n",[286,47777,47779,47781,47783,47785,47788,47790,47793],{"class":47778,"line":379},[288,9405],[286,47780,45449],{"class":292},[286,47782,46574],{"class":300},[286,47784,456],{"class":292},[286,47786,47787],{"class":310},"'api-url'",[286,47789,235],{"class":292},[286,47791,47792],{"class":310},"'https://api.ejemplo.com'",[286,47794,441],{"class":292},[286,47796,47798,47800,47802,47804,47807,47809,47812],{"class":47797,"line":389},[288,9405],[286,47799,45449],{"class":292},[286,47801,46574],{"class":300},[286,47803,456],{"class":292},[286,47805,47806],{"class":310},"'theme'",[286,47808,235],{"class":292},[286,47810,47811],{"class":310},"'dark'",[286,47813,441],{"class":292},[286,47815,47816,47818,47820,47822,47825],{"class":288,"line":399},[286,47817,45449],{"class":292},[286,47819,46574],{"class":300},[286,47821,456],{"class":292},[286,47823,47824],{"class":310},"'analytics'",[286,47826,2367],{"class":292},[286,47828,47829,47832,47835,47838,47840,47842],{"class":288,"line":405},[286,47830,47831],{"class":300}," trackEvent",[286,47833,47834],{"class":292},": (",[286,47836,47837],{"class":357},"eventName",[286,47839,2347],{"class":292},[286,47841,609],{"class":320},[286,47843,351],{"class":292},[286,47845,47846,47848,47850,47852,47855,47857,47859],{"class":288,"line":410},[286,47847,2888],{"class":292},[286,47849,2359],{"class":300},[286,47851,456],{"class":292},[286,47853,47854],{"class":310},"`Evento: ${",[286,47856,47837],{"class":292},[286,47858,3895],{"class":310},[286,47860,441],{"class":292},[286,47862,47863],{"class":288,"line":444},[286,47864,550],{"class":292},[286,47866,47867],{"class":288,"line":464},[286,47868,684],{"class":292},[286,47870,47871],{"class":288,"line":469},[286,47872,336],{"emptyLinePlaceholder":6},[286,47874,47875,47877,47880,47882,47885],{"class":288,"line":484},[286,47876,45449],{"class":292},[286,47878,47879],{"class":300},"mount",[286,47881,456],{"class":292},[286,47883,47884],{"class":310},"'#app'",[286,47886,441],{"class":292},[23931,47888,47890],{"id":47889},"consumiendo-en-cualquier-componente",[82,47891,47892],{},"Consumiendo en cualquier componente:",[277,47894,47898],{"className":279,"code":47895,"filename":47896,"highlights":47897,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { inject } from 'vue'\n\nconst apiUrl = inject('api-url')\nconst theme = inject('theme')\nconst analytics = inject('analytics')\n\nconst handleClick = () => {\n analytics.trackEvent('button-click')\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv :class=\"`theme-${theme}`\">\n \u003Cp>API Base: {{ apiUrl }}\u003C/p>\n \u003Cbutton @click=\"handleClick\">Hacer clic\u003C/button>\n \u003C/div>\n\u003C/template>\n","SomeComponent.vue",[339,354],[26,47899,47900,47910,47920,47924,47942,47960,47977,47981,47996,48011,48015,48023,48027,48035,48050,48063,48083,48091],{"__ignoreMap":9},[286,47901,47902,47904,47906,47908],{"class":288,"line":289},[286,47903,293],{"class":292},[286,47905,297],{"class":296},[286,47907,301],{"class":300},[286,47909,314],{"class":292},[286,47911,47912,47914,47916,47918],{"class":288,"line":317},[286,47913,321],{"class":320},[286,47915,46729],{"class":292},[286,47917,327],{"class":320},[286,47919,330],{"class":310},[286,47921,47922],{"class":288,"line":333},[286,47923,336],{"emptyLinePlaceholder":6},[286,47925,47927,47929,47932,47934,47936,47938,47940],{"class":47926,"line":339},[288,9405],[286,47928,413],{"class":320},[286,47930,47931],{"class":364}," apiUrl",[286,47933,348],{"class":320},[286,47935,46754],{"class":300},[286,47937,456],{"class":292},[286,47939,47787],{"class":310},[286,47941,441],{"class":292},[286,47943,47945,47947,47950,47952,47954,47956,47958],{"class":47944,"line":354},[288,9405],[286,47946,413],{"class":320},[286,47948,47949],{"class":364}," theme",[286,47951,348],{"class":320},[286,47953,46754],{"class":300},[286,47955,456],{"class":292},[286,47957,47806],{"class":310},[286,47959,441],{"class":292},[286,47961,47962,47964,47967,47969,47971,47973,47975],{"class":288,"line":368},[286,47963,413],{"class":320},[286,47965,47966],{"class":364}," analytics",[286,47968,348],{"class":320},[286,47970,46754],{"class":300},[286,47972,456],{"class":292},[286,47974,47824],{"class":310},[286,47976,441],{"class":292},[286,47978,47979],{"class":288,"line":379},[286,47980,336],{"emptyLinePlaceholder":6},[286,47982,47983,47985,47988,47990,47992,47994],{"class":288,"line":389},[286,47984,413],{"class":320},[286,47986,47987],{"class":300}," handleClick",[286,47989,348],{"class":320},[286,47991,606],{"class":292},[286,47993,609],{"class":320},[286,47995,351],{"class":292},[286,47997,47998,48001,48004,48006,48009],{"class":288,"line":399},[286,47999,48000],{"class":292}," analytics.",[286,48002,48003],{"class":300},"trackEvent",[286,48005,456],{"class":292},[286,48007,48008],{"class":310},"'button-click'",[286,48010,441],{"class":292},[286,48012,48013],{"class":288,"line":405},[286,48014,402],{"class":292},[286,48016,48017,48019,48021],{"class":288,"line":410},[286,48018,793],{"class":292},[286,48020,297],{"class":296},[286,48022,314],{"class":292},[286,48024,48025],{"class":288,"line":444},[286,48026,336],{"emptyLinePlaceholder":6},[286,48028,48029,48031,48033],{"class":288,"line":464},[286,48030,293],{"class":292},[286,48032,810],{"class":296},[286,48034,314],{"class":292},[286,48036,48037,48039,48041,48043,48045,48048],{"class":288,"line":469},[286,48038,818],{"class":292},[286,48040,4208],{"class":296},[286,48042,36359],{"class":300},[286,48044,307],{"class":292},[286,48046,48047],{"class":310},"\"`theme-${theme}`\"",[286,48049,314],{"class":292},[286,48051,48052,48054,48056,48059,48061],{"class":288,"line":484},[286,48053,837],{"class":292},[286,48055,31],{"class":296},[286,48057,48058],{"class":292},">API Base: {{ apiUrl }}\u003C/",[286,48060,31],{"class":296},[286,48062,314],{"class":292},[286,48064,48065,48067,48069,48071,48073,48076,48079,48081],{"class":288,"line":508},[286,48066,837],{"class":292},[286,48068,4274],{"class":296},[286,48070,4285],{"class":300},[286,48072,307],{"class":292},[286,48074,48075],{"class":310},"\"handleClick\"",[286,48077,48078],{"class":292},">Hacer clic\u003C/",[286,48080,4274],{"class":296},[286,48082,314],{"class":292},[286,48084,48085,48087,48089],{"class":288,"line":513},[286,48086,962],{"class":292},[286,48088,4208],{"class":296},[286,48090,314],{"class":292},[286,48092,48093,48095,48097],{"class":288,"line":528},[286,48094,793],{"class":292},[286,48096,810],{"class":296},[286,48098,314],{"class":292},[23931,48100,48102],{"id":48101},"ventajas","Ventajas",[48,48104,48105,48108,48111],{},[51,48106,48107],{},"No necesitas crear un componente raíz solo para proveer valores",[51,48109,48110],{},"Ideal para configuraciones que no cambian durante la vida de la aplicación",[51,48112,48113],{},"Simplifica el testing al poder sobrescribir estos valores fácilmente",[3118,48115,48116],{},[31,48117,48118,48121,48122,114],{},[82,48119,48120],{},"Nota:"," Para valores reactivos a nivel de aplicación que cambien frecuentemente, considera usar Pinia en lugar de ",[26,48123,48124],{},"app.provide()",[40,48126,48128],{"id":48127},"bajo-el-capó-cómo-funciona","Bajo el capó: ¿Cómo funciona?",[31,48130,48131,48132,48135,48136,48139],{},"La eficiencia de ",[26,48133,48134],{},"provide/inject"," radica en que utiliza la ",[82,48137,48138],{},"cadena de prototipos"," de JavaScript.",[10096,48141,48142,48157],{},[51,48143,48144,48146,48147,48150,48151,48153,48154,114],{},[82,48145,46477],{}," Cuando un componente provee algo, Vue crea un nuevo objeto ",[26,48148,48149],{},"provides"," para ese componente que hereda del objeto ",[26,48152,48149],{}," de su padre mediante ",[26,48155,48156],{},"Object.create()",[51,48158,48159,48161],{},[82,48160,46483],{}," Vue simplemente busca la clave en el objeto. Si no está en el padre inmediato, el motor de JavaScript sube por la cadena de prototipos hasta encontrarlo o llegar al final.",[31,48163,48164],{},"Esta arquitectura permite que un hijo \"sobrescriba\" un valor para sus propios descendientes sin afectar a sus hermanos o ancestros, garantizando un aislamiento total.",[40,48166,48168],{"id":48167},"resumen-de-capacidades","Resumen de capacidades",[5399,48170,48171,48183],{},[5402,48172,48173],{},[5405,48174,48175,48177,48180],{},[5408,48176,46235],{},[5408,48178,48179],{},"Nivel Básico",[5408,48181,48182],{},"Nivel Profesional",[5421,48184,48185,48198,48214,48227],{},[5405,48186,48187,48192,48195],{},[5426,48188,48189],{},[82,48190,48191],{},"Flujo",[5426,48193,48194],{},"Pasar datos de A a B",[5426,48196,48197],{},"Arquitectura de estado jerárquico",[5405,48199,48200,48205,48208],{},[5426,48201,48202],{},[82,48203,48204],{},"Seguridad",[5426,48206,48207],{},"Datos mutables (riesgoso)",[5426,48209,48210,48211,48213],{},"Uso de ",[26,48212,46937],{}," para proteger el estado",[5405,48215,48216,48221,48224],{},[5426,48217,48218],{},[82,48219,48220],{},"Robustez",[5426,48222,48223],{},"Puede fallar si falta la clave",[5426,48225,48226],{},"Uso de valores por defecto",[5405,48228,48229,48234,48237],{},[5426,48230,48231],{},[82,48232,48233],{},"Alcance",[5426,48235,48236],{},"Entre componentes locales",[5426,48238,48239,48240],{},"Configuración global a nivel de ",[26,48241,48242],{},"app",[40,48244,48246],{"id":48245},"cuándo-no-usar-provideinject","Cuándo NO usar Provide/Inject",[48,48248,48249,48255,48261],{},[51,48250,48251,48254],{},[82,48252,48253],{},"Para estado global complejo:"," Usa Pinia o Vuex",[51,48256,48257,48260],{},[82,48258,48259],{},"Para comunicación entre hermanos:"," Usa composables o el patrón Event Bus",[51,48262,48263,48266],{},[82,48264,48265],{},"Para estado simple de 2 niveles:"," Las props son más explícitas y fáciles de seguir",[40,48268,17678],{"id":17677},[31,48270,48271,46425,48273,48275,48276,48278],{},[26,48272,46424],{},[26,48274,47657],{}," son herramientas poderosas que, usadas correctamente, eliminan el ",[82,48277,46418],{}," sin comprometer la mantenibilidad del código. La clave está en:",[10096,48280,48281,48289,48295,48301],{},[51,48282,48283,48286,48287],{},[82,48284,48285],{},"Proteger el estado"," con ",[26,48288,46937],{},[51,48290,48291,48294],{},[82,48292,48293],{},"Proveer funciones"," para modificarlo de forma controlada",[51,48296,48297,48300],{},[82,48298,48299],{},"Definir valores por defecto"," para mayor robustez",[51,48302,48303,48306],{},[82,48304,48305],{},"Usarlo en el nivel adecuado:"," componentes para estado jerárquico, Pinia para estado global complejo",[31,48308,48309],{},"Dominar este patrón te permitirá construir aplicaciones Vue más escalables y fáciles de mantener.",[1614,48311,48312],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":9,"searchDepth":317,"depth":317,"links":48314},[48315,48316,48318,48319,48320,48322,48323,48324,48325,48326,48327],{"id":46432,"depth":317,"text":46433},{"id":46463,"depth":317,"text":48317},"La solución nativa: Provide e Inject",{"id":46487,"depth":317,"text":46488},{"id":46881,"depth":317,"text":46882},{"id":46947,"depth":317,"text":48321},"Ejemplo de uso correcto con readonly",{"id":47650,"depth":317,"text":47651},{"id":47703,"depth":317,"text":47704},{"id":48127,"depth":317,"text":48128},{"id":48167,"depth":317,"text":48168},{"id":48245,"depth":317,"text":48246},{"id":17677,"depth":317,"text":17678},"https://res.cloudinary.com/denj4fg7f/image/upload/v1769126104/vue-provide-inject-avoid-prop-drilling_pkd9s1.png","2026-01-23","Aprende a usar provide e inject en Vue.js para eliminar el Prop Drilling, gestionar la reactividad de forma segura con readonly y mejorar la arquitectura de tus componentes.",{"script":48332},[48333],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":48334},[48335],{"headline":46406,"author":48336,"datePublished":48337,"@type":1647},{"name":1644,"@type":1645},"2026-01-22T23:30:00-05:00",{"updatedAt":46383,"coverCaption":48339,"author":1644,"keywords":48340},"Provide e Inject en Vue 3 por TODOvue",[1652,46424,46428,46418,281,17768],"/blog/vue-provide-inject-avoid-prop-drilling.es",[48343],{"headline":46406,"author":48344,"datePublished":48337,"@type":1647},{"name":1644,"@type":1645},{"title":46406,"description":48330},"blog/vue-provide-inject-avoid-prop-drilling.es",[48348,48351,48354,48355,48356,48357],{"tag":48349,"color":48350},"Inyección de Dependencias","#2E86DE",{"tag":48352,"color":48353},"Gestión de Estado","#FF9800",{"tag":1672,"color":1673},{"tag":46387,"color":46397},{"tag":1675,"color":1676},{"tag":45591,"color":46402},"FT4c-BeVz5R6eLwab6zTqdL2OAkKfUL-giyeASVBMeE",{"id":48360,"title":46894,"body":48361,"cover":48999,"coverAlt":49000,"date":49001,"description":49002,"draft":12,"extension":1635,"head":49003,"locale":1648,"meta":49011,"navigation":6,"path":49014,"schemaOrg":49015,"seo":49018,"series":1663,"seriesDescription":1663,"seriesOrder":1663,"seriesTitle":1663,"slug":1663,"stem":49019,"tags":49020,"__hash__":49026},"blog/blog/vue-reactivity-explained.es.md",{"type":18,"value":48362,"toc":48985},[48363,48366,48369,48372,48376,48379,48400,48403,48411,48415,48418,48425,48437,48452,48458,48464,48467,48475,48485,48488,48551,48559,48563,48566,48586,48589,48593,48596,48614,48639,48642,48700,48704,48841,48979,48982],[21,48364,46894],{"id":48365},"qué-es-la-reactividad-la-magia-detrás-de-vuejs-explicada-con-claridad",[31,48367,48368],{},"La reactividad es el corazón de Vue.js. Es lo que hace que la interfaz no sea un adorno bonito, sino un sistema vivo que responde a los cambios de estado sin que tú tengas que perseguir el DOM como si fuera 2012.",[31,48370,48371],{},"En este artículo vamos a desmontar el concepto sin misticismo innecesario: primero con una analogía simple, luego con lo que realmente ocurre a nivel técnico, y finalmente con buenas prácticas que te ahorrarán bugs y problemas de rendimiento.",[40,48373,48375],{"id":48374},"la-analogía-el-efecto-excel","La analogía: el efecto Excel",[31,48377,48378],{},"No necesitas un doctorado en ciencias de la computación para entender la reactividad. Basta con haber usado Excel sin romper nada.",[31,48380,48381,48382,48385,48386,48389,48390,48392,48393,128,48396,48399],{},"Si en una celda ",[82,48383,48384],{},"C1"," escribes la fórmula ",[26,48387,48388],{},"=A1 + B1",", el valor de ",[82,48391,48384],{}," se actualiza automáticamente cuando cambian ",[82,48394,48395],{},"A1",[82,48397,48398],{},"B1",". No haces clic en “refrescar”, no vuelves a escribir la fórmula. Simplemente ocurre.",[31,48401,48402],{},"Eso es reactividad: una relación automática entre datos y resultados.",[3118,48404,48405],{},[31,48406,48407,48410],{},[82,48408,48409],{},"Analogía del mundo real:"," imagina una cafetera inteligente. En el momento en que detecta que hay una taza colocada, el botón de iniciar se activa. No porque alguien lo programe cada vez, sino porque el sistema está atento al estado.",[40,48412,48414],{"id":48413},"la-evolución-técnica-de-vue-2-a-vue-3","La evolución técnica: de Vue 2 a Vue 3",[31,48416,48417],{},"Vue no siempre tuvo el sistema de reactividad elegante que conocemos hoy. Entender su evolución ayuda a escribir mejor código y a no pelearse con el framework.",[202,48419,48421,48422],{"id":48420},"vue-2-objectdefineproperty","Vue 2: ",[26,48423,48424],{},"Object.defineProperty",[31,48426,48427,48428,1704,48431,48434,48435,114],{},"En Vue 2, cada propiedad reactiva se convertía en un par de ",[3299,48429,48430],{},"getters",[3299,48432,48433],{},"setters"," usando ",[26,48436,48424],{},[48,48438,48439],{},[51,48440,48441,48444,48445,48448,48449,114],{},[82,48442,48443],{},"La limitación:"," Vue tenía que recorrer el objeto completo al inicializarlo. Si añadías una propiedad nueva o modificabas un índice de un array directamente (",[26,48446,48447],{},"arr[0] = x","), Vue no se enteraba. Por eso existían soluciones como ",[26,48450,48451],{},"Vue.set()",[202,48453,48455,48456],{"id":48454},"vue-3-el-poder-de-proxy","Vue 3: el poder de ",[26,48457,16984],{},[31,48459,48460,48461,48139],{},"Vue 3 cambió completamente el enfoque usando ",[82,48462,48463],{},"Proxies",[31,48465,48466],{},"Un Proxy envuelve un objeto y puede interceptar prácticamente cualquier operación: leer, escribir, borrar o añadir propiedades.",[48,48468,48469],{},[51,48470,48471,48474],{},[82,48472,48473],{},"La ventaja:"," no importa cuándo ni cómo cambie el objeto. Vue puede detectarlo. El resultado es una reactividad más profunda, más predecible y con mejor rendimiento.",[40,48476,48478,48479,12501,48482],{"id":48477},"los-dos-pilares-ref-vs-reactive","Los dos pilares: ",[26,48480,48481],{},"ref()",[26,48483,48484],{},"reactive()",[31,48486,48487],{},"Si usas la Composition API, esta duda aparece antes de que termines tu primer café.",[5399,48489,48490,48504],{},[5402,48491,48492],{},[5405,48493,48494,48496,48500],{},[5408,48495,46235],{},[5408,48497,48498],{},[26,48499,48481],{},[5408,48501,48502],{},[26,48503,48484],{},[5421,48505,48506,48517,48529,48540],{},[5405,48507,48508,48511,48514],{},[5426,48509,48510],{},"Tipo de dato",[5426,48512,48513],{},"Primitivos y objetos",[5426,48515,48516],{},"Solo objetos y colecciones",[5405,48518,48519,48522,48526],{},[5426,48520,48521],{},"Acceso en JS",[5426,48523,48524],{},[26,48525,17083],{},[5426,48527,48528],{},"Acceso directo",[5405,48530,48531,48535,48538],{},[5426,48532,120,48533],{},[26,48534,26166],{},[5426,48536,48537],{},"Auto-desempaquetado",[5426,48539,48528],{},[5405,48541,48542,48545,48548],{},[5426,48543,48544],{},"Uso ideal",[5426,48546,48547],{},"Estados simples y aislados",[5426,48549,48550],{},"Estados complejos o anidados",[31,48552,48553,48554,48556,48557,114],{},"Regla mental rápida: si es una sola cosa, ",[26,48555,1934],{},". Si es una estructura, ",[26,48558,12326],{},[40,48560,48562],{"id":48561},"el-ciclo-interno-track-y-trigger","El ciclo interno: track y trigger",[31,48564,48565],{},"El motor de reactividad de Vue funciona con un sistema sorprendentemente elegante:",[10096,48567,48568,48574,48580],{},[51,48569,48570,48573],{},[82,48571,48572],{},"Track:"," cuando una función lee una variable reactiva, Vue registra esa relación.",[51,48575,48576,48579],{},[82,48577,48578],{},"Trigger:"," cuando el valor cambia, Vue notifica a todas las funciones que dependen de él.",[51,48581,48582,48585],{},[82,48583,48584],{},"Update:"," el componente se vuelve a renderizar. El Virtual DOM se encarga de actualizar solo lo necesario.",[31,48587,48588],{},"Tú cambias datos. Vue decide qué tocar en el DOM. Separación de responsabilidades en su máxima expresión.",[40,48590,48592],{"id":48591},"consejos-de-rendimiento-nivel-2026","Consejos de rendimiento (nivel 2026)",[31,48594,48595],{},"Si tu aplicación empieza a crecer, estas decisiones importan más de lo que parece.",[48,48597,48598,48608],{},[51,48599,48600,48607],{},[82,48601,48602,1704,48604,361],{},[26,48603,17557],{},[26,48605,48606],{},"shallowReactive"," útiles cuando trabajas con objetos grandes que no necesitan reactividad profunda.",[51,48609,48610,48613],{},[82,48611,48612],{},"Cuidado al desestructurar:"," hacer esto rompe la reactividad:",[277,48615,48618],{"className":46121,"code":48616,"filename":48617,"language":46125,"meta":9,"style":9},"const { nombre } = estadoReactivo; // mal\n","index.js",[26,48619,48620],{"__ignoreMap":9},[286,48621,48622,48624,48626,48629,48631,48633,48636],{"class":288,"line":289},[286,48623,413],{"class":320},[286,48625,6002],{"class":292},[286,48627,48628],{"class":364},"nombre",[286,48630,17513],{"class":292},[286,48632,307],{"class":320},[286,48634,48635],{"class":292}," estadoReactivo; ",[286,48637,48638],{"class":12748},"// mal\n",[31,48640,48641],{},"La forma correcta es:",[277,48643,48645],{"className":46121,"code":48644,"filename":48617,"language":46125,"meta":9,"style":9},"import { reactive, toRefs } from 'vue';\n\nconst estado = reactive({ nombre: 'Vue' });\nconst { nombre } = toRefs(estado);\n",[26,48646,48647,48660,48664,48682],{"__ignoreMap":9},[286,48648,48649,48651,48654,48656,48658],{"class":288,"line":289},[286,48650,321],{"class":320},[286,48652,48653],{"class":292}," { reactive, toRefs } ",[286,48655,327],{"class":320},[286,48657,45697],{"class":310},[286,48659,18158],{"class":292},[286,48661,48662],{"class":288,"line":317},[286,48663,336],{"emptyLinePlaceholder":6},[286,48665,48666,48668,48671,48673,48675,48678,48680],{"class":288,"line":333},[286,48667,413],{"class":320},[286,48669,48670],{"class":364}," estado",[286,48672,348],{"class":320},[286,48674,2031],{"class":300},[286,48676,48677],{"class":292},"({ nombre: ",[286,48679,37156],{"class":310},[286,48681,29411],{"class":292},[286,48683,48684,48686,48688,48690,48692,48694,48697],{"class":288,"line":339},[286,48685,413],{"class":320},[286,48687,6002],{"class":292},[286,48689,48628],{"class":364},[286,48691,17513],{"class":292},[286,48693,307],{"class":320},[286,48695,48696],{"class":300}," toRefs",[286,48698,48699],{"class":292},"(estado);\n",[40,48701,48703],{"id":48702},"ejemplo-práctico-el-contador-más-honesto-del-mundo","Ejemplo práctico: el contador más honesto del mundo",[277,48705,48707],{"className":279,"code":48706,"filename":281,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue';\n\nconst tazasDeCafe = ref(0);\n\nconst incrementar = () => {\n tazasDeCafe.value++;\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"incrementar\">\n Tazas consumidas: {{ tazasDeCafe }}\n \u003C/button>\n\u003C/template>\n",[26,48708,48709,48719,48731,48735,48752,48756,48771,48781,48785,48793,48797,48805,48820,48825,48833],{"__ignoreMap":9},[286,48710,48711,48713,48715,48717],{"class":288,"line":289},[286,48712,293],{"class":292},[286,48714,297],{"class":296},[286,48716,301],{"class":300},[286,48718,314],{"class":292},[286,48720,48721,48723,48725,48727,48729],{"class":288,"line":317},[286,48722,321],{"class":320},[286,48724,11013],{"class":292},[286,48726,327],{"class":320},[286,48728,45697],{"class":310},[286,48730,18158],{"class":292},[286,48732,48733],{"class":288,"line":333},[286,48734,336],{"emptyLinePlaceholder":6},[286,48736,48737,48739,48742,48744,48746,48748,48750],{"class":288,"line":339},[286,48738,413],{"class":320},[286,48740,48741],{"class":364}," tazasDeCafe",[286,48743,348],{"class":320},[286,48745,421],{"class":300},[286,48747,456],{"class":292},[286,48749,3549],{"class":364},[286,48751,18284],{"class":292},[286,48753,48754],{"class":288,"line":354},[286,48755,336],{"emptyLinePlaceholder":6},[286,48757,48758,48760,48763,48765,48767,48769],{"class":288,"line":368},[286,48759,413],{"class":320},[286,48761,48762],{"class":300}," incrementar",[286,48764,348],{"class":320},[286,48766,606],{"class":292},[286,48768,609],{"class":320},[286,48770,351],{"class":292},[286,48772,48773,48776,48779],{"class":288,"line":379},[286,48774,48775],{"class":292}," tazasDeCafe.value",[286,48777,48778],{"class":320},"++",[286,48780,18158],{"class":292},[286,48782,48783],{"class":288,"line":389},[286,48784,18262],{"class":292},[286,48786,48787,48789,48791],{"class":288,"line":399},[286,48788,793],{"class":292},[286,48790,297],{"class":296},[286,48792,314],{"class":292},[286,48794,48795],{"class":288,"line":405},[286,48796,336],{"emptyLinePlaceholder":6},[286,48798,48799,48801,48803],{"class":288,"line":410},[286,48800,293],{"class":292},[286,48802,810],{"class":296},[286,48804,314],{"class":292},[286,48806,48807,48809,48811,48813,48815,48818],{"class":288,"line":444},[286,48808,818],{"class":292},[286,48810,4274],{"class":296},[286,48812,4285],{"class":300},[286,48814,307],{"class":292},[286,48816,48817],{"class":310},"\"incrementar\"",[286,48819,314],{"class":292},[286,48821,48822],{"class":288,"line":464},[286,48823,48824],{"class":292}," Tazas consumidas: {{ tazasDeCafe }}\n",[286,48826,48827,48829,48831],{"class":288,"line":469},[286,48828,962],{"class":292},[286,48830,4274],{"class":296},[286,48832,314],{"class":292},[286,48834,48835,48837,48839],{"class":288,"line":484},[286,48836,793],{"class":292},[286,48838,810],{"class":296},[286,48840,314],{"class":292},[277,48842,48844],{"className":279,"code":48843,"filename":979,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n tazasDeCafe: 0,\n };\n },\n methods: {\n incrementar() {\n this.tazasDeCafe++;\n },\n },\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"incrementar\">\n Tazas consumidas: {{ tazasDeCafe }}\n \u003C/button>\n\u003C/template>\n",[26,48845,48846,48854,48862,48868,48874,48883,48887,48891,48895,48902,48913,48917,48921,48925,48933,48937,48945,48959,48963,48971],{"__ignoreMap":9},[286,48847,48848,48850,48852],{"class":288,"line":289},[286,48849,293],{"class":292},[286,48851,297],{"class":296},[286,48853,314],{"class":292},[286,48855,48856,48858,48860],{"class":288,"line":317},[286,48857,1065],{"class":320},[286,48859,1068],{"class":320},[286,48861,351],{"class":292},[286,48863,48864,48866],{"class":288,"line":333},[286,48865,1094],{"class":300},[286,48867,481],{"class":292},[286,48869,48870,48872],{"class":288,"line":339},[286,48871,1101],{"class":320},[286,48873,351],{"class":292},[286,48875,48876,48879,48881],{"class":288,"line":354},[286,48877,48878],{"class":292}," tazasDeCafe: ",[286,48880,3549],{"class":364},[286,48882,1085],{"class":292},[286,48884,48885],{"class":288,"line":368},[286,48886,18485],{"class":292},[286,48888,48889],{"class":288,"line":379},[286,48890,1139],{"class":292},[286,48892,48893],{"class":288,"line":389},[286,48894,1148],{"class":292},[286,48896,48897,48900],{"class":288,"line":399},[286,48898,48899],{"class":300}," incrementar",[286,48901,481],{"class":292},[286,48903,48904,48906,48909,48911],{"class":288,"line":405},[286,48905,1220],{"class":364},[286,48907,48908],{"class":292},".tazasDeCafe",[286,48910,48778],{"class":320},[286,48912,18158],{"class":292},[286,48914,48915],{"class":288,"line":410},[286,48916,7023],{"class":292},[286,48918,48919],{"class":288,"line":444},[286,48920,1139],{"class":292},[286,48922,48923],{"class":288,"line":464},[286,48924,18262],{"class":292},[286,48926,48927,48929,48931],{"class":288,"line":469},[286,48928,793],{"class":292},[286,48930,297],{"class":296},[286,48932,314],{"class":292},[286,48934,48935],{"class":288,"line":484},[286,48936,336],{"emptyLinePlaceholder":6},[286,48938,48939,48941,48943],{"class":288,"line":508},[286,48940,293],{"class":292},[286,48942,810],{"class":296},[286,48944,314],{"class":292},[286,48946,48947,48949,48951,48953,48955,48957],{"class":288,"line":513},[286,48948,818],{"class":292},[286,48950,4274],{"class":296},[286,48952,4285],{"class":300},[286,48954,307],{"class":292},[286,48956,48817],{"class":310},[286,48958,314],{"class":292},[286,48960,48961],{"class":288,"line":528},[286,48962,48824],{"class":292},[286,48964,48965,48967,48969],{"class":288,"line":547},[286,48966,962],{"class":292},[286,48968,4274],{"class":296},[286,48970,314],{"class":292},[286,48972,48973,48975,48977],{"class":288,"line":553},[286,48974,793],{"class":292},[286,48976,810],{"class":296},[286,48978,314],{"class":292},[31,48980,48981],{},"Cada clic actualiza el estado. Vue detecta el cambio, vuelve a renderizar lo necesario y tú no tocas el DOM en ningún momento. Eso es la reactividad bien entendida: menos código imperativo, menos errores mentales y una interfaz que hace exactamente lo que debería.",[1614,48983,48984],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":9,"searchDepth":317,"depth":317,"links":48986},[48987,48988,48994,48996,48997,48998],{"id":48374,"depth":317,"text":48375},{"id":48413,"depth":317,"text":48414,"children":48989},[48990,48992],{"id":48420,"depth":333,"text":48991},"Vue 2: Object.defineProperty",{"id":48454,"depth":333,"text":48993},"Vue 3: el poder de Proxy",{"id":48477,"depth":317,"text":48995},"Los dos pilares: ref() vs reactive()",{"id":48561,"depth":317,"text":48562},{"id":48591,"depth":317,"text":48592},{"id":48702,"depth":317,"text":48703},"https://res.cloudinary.com/denj4fg7f/image/upload/v1767664201/magical_vue_coding_laboratory_p1incq.jpg","Ilustración de un laboratorio de codificación mágica de Vue.js","2026-01-06","Explora el sistema de reactividad de Vue.js, desde analogías simples hasta su implementación técnica con Proxies, y aprende a optimizar tus aplicaciones.",{"script":49004},[49005],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":49006},[49007],{"headline":49008,"author":49009,"datePublished":49010,"@type":1647},"Vue 3.6 Beta: La Revolución de Vapor Mode y el Nuevo Motor de Reactividad",{"name":1644,"@type":1645},"2026-01-05T22:00:00-05:00",{"updatedAt":46383,"coverCaption":49012,"author":1644,"keywords":49013},"Ilustración de un laboratorio de codificación mágica de Vue.js por TODOvue",[1652,3174,48463,281,1934,12326],"/blog/vue-reactivity-explained.es",[49016],{"headline":49008,"author":49017,"datePublished":49010,"@type":1647},{"name":1644,"@type":1645},{"title":46894,"description":49002},"blog/vue-reactivity-explained.es",[49021,49022,49023],{"tag":3174,"color":3175},{"tag":9081,"color":9082},{"tag":49024,"color":49025},"Historia","#F27E68","kA0PMDINVoB0Dsgq3xyYI2bGeetWqOo0cgy2htftkyY",{"id":49028,"title":49008,"body":49029,"cover":49867,"coverAlt":49868,"date":49869,"description":49870,"draft":12,"extension":1635,"head":49871,"locale":1648,"meta":49878,"navigation":6,"path":49881,"schemaOrg":49882,"seo":49885,"series":1663,"seriesDescription":1663,"seriesOrder":1663,"seriesTitle":1663,"slug":1663,"stem":49886,"tags":49887,"__hash__":49898},"blog/blog/vue-beta-vapor-mode-revealed.es.md",{"type":18,"value":49030,"toc":49846},[49031,49034,49045,49051,49055,49065,49069,49076,49079,49122,49130,49138,49144,49148,49157,49164,49169,49193,49198,49225,49229,49232,49236,49324,49333,49337,49350,49354,49357,49520,49526,49530,49622,49626,49629,49633,49651,49666,49680,49694,49698,49705,49787,49791,49797,49831,49833,49843],[21,49032,49008],{"id":49033},"vue-36-beta-la-revolución-de-vapor-mode-y-el-nuevo-motor-de-reactividad",[31,49035,49036,49037,49040,49041,49044],{},"El ecosistema de Vue ha alcanzado un punto de inflexión con el lanzamiento de la ",[82,49038,49039],{},"versión 3.6.0-beta.1",".\nEsta actualización no es un paso incremental; es una reingeniería profunda que prepara a Vue para un futuro donde el ",[82,49042,49043],{},"Virtual DOM (VDOM)"," deja de ser el protagonista absoluto.",[31,49046,49047,49048,114],{},"En este artículo, desglosamos los dos pilares de esta beta: la llegada de la \"Paridad Funcional\" en Vapor Mode y el nuevo motor de señales inspirado en ",[26,49049,49050],{},"alien-signals",[40,49052,49054],{"id":49053},"vapor-mode-alcanzando-la-paridad-funcional","Vapor Mode: Alcanzando la \"Paridad Funcional\"",[31,49056,49057,49058,49061,49062,114],{},"Hasta hace poco, ",[82,49059,49060],{},"Vapor Mode"," era un experimento prometedor pero limitado.\nCon la versión 3.6, el equipo core anuncia que se ha alcanzado la ",[82,49063,49064],{},"Paridad Funcional",[202,49066,49068],{"id":49067},"qué-significa-paridad-funcional-exactamente","¿Qué significa \"Paridad Funcional\" exactamente?",[31,49070,49071,49072,49075],{},"En el desarrollo de software, este término significa que una nueva implementación (en este caso, el compilador Vapor) ya es capaz de hacer ",[82,49073,49074],{},"exactamente lo mismo"," que la implementación original (el compilador de VDOM estándar).",[31,49077,49078],{},"Para nosotros los desarrolladores, esto implica que Vapor ya no es solo para \"componentes simples\". Ahora soporta:",[48,49080,49081,49094,49109],{},[51,49082,49083,49086,49087,235,49089,49091,49092,114],{},[82,49084,49085],{},"Directivas de control total:"," Manejo complejo de ",[26,49088,7545],{},[26,49090,24887],{}," (con algoritmos de movimiento de nodos optimizados) y ",[26,49093,17978],{},[51,49095,49096,49099,49100,49102,49103,49106,49107,114],{},[82,49097,49098],{},"Arquitectura de Componentes:"," Soporte para ",[3299,49101,45653],{},", componentes dinámicos (",[26,49104,49105],{},"\u003Ccomponent :is=\"...\">",") y ",[26,49108,7495],{},[51,49110,49111,49114,49115,49118,49119,114],{},[82,49112,49113],{},"Funciones integradas:"," Soporte nativo para ",[26,49116,49117],{},"\u003CTeleport>"," y el sistema de ",[26,49120,49121],{},"\u003CTransition>",[3118,49123,49124],{},[31,49125,49126,49129],{},[82,49127,49128],{},"En resumen:"," La paridad funcional permite que un componente complejo de producción pueda ser compilado en modo Vapor sin perder ninguna característica de Vue, pero ganando una velocidad de ejecución sin precedentes.",[40,49131,49133,49134,49137],{"id":49132},"refactorización-de-vuereactivity-el-efecto-alien","Refactorización de ",[26,49135,49136],{},"@vue/reactivity",": El efecto \"Alien\"",[31,49139,49140,49141,49143],{},"La gran sorpresa técnica de Vue 3.6 es la integración de los conceptos de ",[82,49142,49050],{}," (una librería de señales ultrarrápida creada por Johnson Chu, miembro del core team) dentro del núcleo de Vue.",[202,49145,49147],{"id":49146},"por-qué-cambiar-el-motor-de-señales","¿Por qué cambiar el motor de señales?",[31,49149,49150,49151,49153,49154,49156],{},"El sistema de reactividad de Vue 3 basado en ",[26,49152,16984],{}," era excelente, pero sufría en dos puntos: el uso de memoria y la limpieza de dependencias.\nLa adopción del modelo de ",[26,49155,49050],{}," resuelve esto cambiando la estructura de datos interna.",[23931,49158,49160,49161,49163],{"id":49159},"el-cambio-técnico-de-set-a-listas-enlazadas","El cambio técnico: De ",[26,49162,15831],{}," a Listas Enlazadas",[31,49165,49166,49167,114],{},"Tradicionalmente, Vue guardaba los \"suscriptores\" (los efectos que deben ejecutarse cuando un dato cambia) en objetos tipo ",[26,49168,15831],{},[48,49170,49171,49183],{},[51,49172,49173,49176,49177,49179,49180,1902],{},[82,49174,49175],{},"El Problema:"," Crear miles de ",[26,49178,15831],{}," consume mucha memoria y estresa al recolector de basura (",[3299,49181,49182],{},"Garbage Collector",[51,49184,49185,49188,49189,49192],{},[82,49186,49187],{},"La Solución:"," El nuevo motor usa una ",[82,49190,49191],{},"Lista Doblemente Enlazada",". Las suscripciones se conectan entre sí como eslabones de una cadena.",[31,49194,49195],{},[82,49196,49197],{},"Los beneficios reales son impactantes:",[10096,49199,49200,49210,49216],{},[51,49201,49202,49205,49206,49209],{},[82,49203,49204],{},"Reducción de Memoria:"," Hasta un ",[82,49207,49208],{},"14% - 20% menos de consumo"," en aplicaciones con alta densidad de estados.",[51,49211,49212,49215],{},[82,49213,49214],{},"Operaciones O(1):"," Añadir o eliminar una suscripción reactiva ahora tiene un coste constante, sin importar cuántas dependencias existan.",[51,49217,49218,49221,49222,49224],{},[82,49219,49220],{},"Computadas Inteligentes:"," Se ha refinado el algoritmo de \"limpieza\" (cleanup), evitando que las propiedades ",[26,49223,1739],{}," se recalculen innecesariamente cuando las dependencias no han cambiado realmente.",[40,49226,49228],{"id":49227},"comparativa-vnode-vs-vapor-mode","Comparativa: VNode vs. Vapor Mode",[31,49230,49231],{},"Para entender por qué esto es una revolución, comparemos qué sucede \"bajo el capó\" con un componente básico.",[202,49233,49235],{"id":49234},"código-fuente","Código Fuente",[277,49237,49239],{"className":279,"code":49238,"filename":281,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref } from 'vue'\nconst count = ref(0)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"count++\">Contador: {{ count }}\u003C/button>\n\u003C/template>\n",[26,49240,49241,49251,49261,49277,49285,49289,49297,49316],{"__ignoreMap":9},[286,49242,49243,49245,49247,49249],{"class":288,"line":289},[286,49244,293],{"class":292},[286,49246,297],{"class":296},[286,49248,301],{"class":300},[286,49250,314],{"class":292},[286,49252,49253,49255,49257,49259],{"class":288,"line":317},[286,49254,321],{"class":320},[286,49256,11013],{"class":292},[286,49258,327],{"class":320},[286,49260,330],{"class":310},[286,49262,49263,49265,49267,49269,49271,49273,49275],{"class":288,"line":333},[286,49264,413],{"class":320},[286,49266,9387],{"class":364},[286,49268,348],{"class":320},[286,49270,421],{"class":300},[286,49272,456],{"class":292},[286,49274,3549],{"class":364},[286,49276,441],{"class":292},[286,49278,49279,49281,49283],{"class":288,"line":339},[286,49280,793],{"class":292},[286,49282,297],{"class":296},[286,49284,314],{"class":292},[286,49286,49287],{"class":288,"line":354},[286,49288,336],{"emptyLinePlaceholder":6},[286,49290,49291,49293,49295],{"class":288,"line":368},[286,49292,293],{"class":292},[286,49294,810],{"class":296},[286,49296,314],{"class":292},[286,49298,49299,49301,49303,49305,49307,49309,49312,49314],{"class":288,"line":379},[286,49300,818],{"class":292},[286,49302,4274],{"class":296},[286,49304,4285],{"class":300},[286,49306,307],{"class":292},[286,49308,12471],{"class":310},[286,49310,49311],{"class":292},">Contador: {{ count }}\u003C/",[286,49313,4274],{"class":296},[286,49315,314],{"class":292},[286,49317,49318,49320,49322],{"class":288,"line":389},[286,49319,793],{"class":292},[286,49321,810],{"class":296},[286,49323,314],{"class":292},[277,49325,49327],{"className":279,"code":49326,"filename":979,"language":282,"meta":9,"style":9},"// Vapor Mode es exclusivo de Composition API. No hay soporte disponible para Options API.\n",[26,49328,49329],{"__ignoreMap":9},[286,49330,49331],{"class":288,"line":289},[286,49332,49326],{"class":292},[202,49334,49336],{"id":49335},"el-enfoque-tradicional-virtual-dom","El enfoque tradicional (Virtual DOM)",[31,49338,49339,49340,49342,49343,49345,49346,49349],{},"Vue crea un objeto de JavaScript (VNode) que representa el botón. Cuando ",[26,49341,17510],{}," cambia, Vue crea un ",[82,49344,47019],{}," VNode, compara ambos (",[3299,49347,49348],{},"diffing",") y decide qué parte del DOM real actualizar. Esto ocurre en milisegundos, pero tiene un costo de CPU y memoria.",[202,49351,49353],{"id":49352},"el-enfoque-vapor-directo-al-grano","El enfoque Vapor (Directo al grano)",[31,49355,49356],{},"El compilador de Vapor genera código que \"apunta\" directamente al nodo de texto del botón.",[277,49358,49361],{"className":46121,"code":49359,"filename":49360,"language":46125,"meta":9,"style":9},"import { delegateEvents, t, setInterpolation, renderEffect } from '@vue/runtime-vapor'\n\nconst t0 = t('\u003Cbutton>\u003C/button>') // Plantilla estática\n\nexport function render(_ctx) {\n const el0 = t0() \n delegateEvents(el0, 'click', () => _ctx.count++)\n \n // No hay comparación de árboles. Hay un \"vínculo\" directo.\n renderEffect(() => {\n setInterpolation(el0, () => `Contador: ${_ctx.count}`)\n })\n \n return el0\n}\n","Counter.vapor.compiled.js",[26,49362,49363,49375,49379,49401,49405,49421,49435,49458,49462,49467,49478,49501,49505,49509,49516],{"__ignoreMap":9},[286,49364,49365,49367,49370,49372],{"class":288,"line":289},[286,49366,321],{"class":320},[286,49368,49369],{"class":292}," { delegateEvents, t, setInterpolation, renderEffect } ",[286,49371,327],{"class":320},[286,49373,49374],{"class":310}," '@vue/runtime-vapor'\n",[286,49376,49377],{"class":288,"line":317},[286,49378,336],{"emptyLinePlaceholder":6},[286,49380,49381,49383,49386,49388,49391,49393,49396,49398],{"class":288,"line":333},[286,49382,413],{"class":320},[286,49384,49385],{"class":364}," t0",[286,49387,348],{"class":320},[286,49389,49390],{"class":300}," t",[286,49392,456],{"class":292},[286,49394,49395],{"class":310},"'\u003Cbutton>\u003C/button>'",[286,49397,2347],{"class":292},[286,49399,49400],{"class":12748},"// Plantilla estática\n",[286,49402,49403],{"class":288,"line":339},[286,49404,336],{"emptyLinePlaceholder":6},[286,49406,49407,49409,49411,49414,49416,49419],{"class":288,"line":354},[286,49408,1065],{"class":320},[286,49410,475],{"class":320},[286,49412,49413],{"class":300}," render",[286,49415,456],{"class":292},[286,49417,49418],{"class":357},"_ctx",[286,49420,2483],{"class":292},[286,49422,49423,49425,49428,49430,49432],{"class":288,"line":368},[286,49424,487],{"class":320},[286,49426,49427],{"class":364}," el0",[286,49429,348],{"class":320},[286,49431,49385],{"class":300},[286,49433,49434],{"class":292},"() \n",[286,49436,49437,49440,49443,49446,49449,49451,49454,49456],{"class":288,"line":379},[286,49438,49439],{"class":300}," delegateEvents",[286,49441,49442],{"class":292},"(el0, ",[286,49444,49445],{"class":310},"'click'",[286,49447,49448],{"class":292},", () ",[286,49450,609],{"class":320},[286,49452,49453],{"class":292}," _ctx.count",[286,49455,48778],{"class":320},[286,49457,441],{"class":292},[286,49459,49460],{"class":288,"line":389},[286,49461,42613],{"class":292},[286,49463,49464],{"class":288,"line":399},[286,49465,49466],{"class":12748}," // No hay comparación de árboles. Hay un \"vínculo\" directo.\n",[286,49468,49469,49472,49474,49476],{"class":288,"line":405},[286,49470,49471],{"class":300}," renderEffect",[286,49473,2210],{"class":292},[286,49475,609],{"class":320},[286,49477,351],{"class":292},[286,49479,49480,49483,49486,49488,49491,49493,49495,49497,49499],{"class":288,"line":410},[286,49481,49482],{"class":300}," setInterpolation",[286,49484,49485],{"class":292},"(el0, () ",[286,49487,609],{"class":320},[286,49489,49490],{"class":310}," `Contador: ${",[286,49492,49418],{"class":292},[286,49494,114],{"class":310},[286,49496,17510],{"class":292},[286,49498,3895],{"class":310},[286,49500,441],{"class":292},[286,49502,49503],{"class":288,"line":444},[286,49504,2325],{"class":292},[286,49506,49507],{"class":288,"line":464},[286,49508,42613],{"class":292},[286,49510,49511,49513],{"class":288,"line":469},[286,49512,2219],{"class":320},[286,49514,49515],{"class":292}," el0\n",[286,49517,49518],{"class":288,"line":484},[286,49519,402],{"class":292},[31,49521,49522,49525],{},[82,49523,49524],{},"Resultado:"," Cero Virtual DOM, cero algoritmos de comparación, solo manipulación directa del DOM con la máxima eficiencia posible.",[40,49527,49529],{"id":49528},"tabla-de-rendimiento-y-capacidades","Tabla de Rendimiento y Capacidades",[5399,49531,49532,49544],{},[5402,49533,49534],{},[5405,49535,49536,49538,49541],{},[5408,49537,46235],{},[5408,49539,49540],{},"Vue 3.5 (Standard)",[5408,49542,49543],{},"Vue 3.6 (Vapor Mode)",[5421,49545,49546,49560,49576,49591,49607],{},[5405,49547,49548,49553,49555],{},[5426,49549,49550],{},[82,49551,49552],{},"Estructura Interna",[5426,49554,49043],{},[5426,49556,49557],{},[82,49558,49559],{},"VDOM-less (Directo)",[5405,49561,49562,49567,49572],{},[5426,49563,49564],{},[82,49565,49566],{},"Motor de Señales",[5426,49568,49569,49570],{},"Basado en ",[26,49571,15831],{},[5426,49573,49574],{},[82,49575,49191],{},[5405,49577,49578,49583,49586],{},[5426,49579,49580],{},[82,49581,49582],{},"Consumo de Memoria",[5426,49584,49585],{},"Base estándar",[5426,49587,49588],{},[82,49589,49590],{},"~14% menor",[5405,49592,49593,49598,49601],{},[5426,49594,49595],{},[82,49596,49597],{},"Interoperabilidad",[5426,49599,49600],{},"Completa",[5426,49602,49603,49604,29],{},"Alta (vía ",[26,49605,49606],{},"vaporInterop",[5405,49608,49609,49614,49617],{},[5426,49610,49611],{},[82,49612,49613],{},"Recomendado para",[5426,49615,49616],{},"Apps generales, SSR masivo",[5426,49618,49619],{},[82,49620,49621],{},"Dispositivos IoT, Dashboards pesados, Web Components",[40,49623,49625],{"id":49624},"cómo-empezar-a-probarlo","¿Cómo empezar a probarlo?",[31,49627,49628],{},"Para experimentar con estas mejoras, debes usar la versión beta y configurar tu entorno de Vite para reconocer el modo Vapor.",[202,49630,49632],{"id":49631},"paso-1-instalación","Paso 1: Instalación",[277,49634,49639],{"className":49635,"code":49636,"filename":49637,"language":49638,"meta":9,"style":9},"language-bash shiki shiki-themes github-light github-dark","npm install vue@3.6.0-beta.1\n","npm","bash",[26,49640,49641],{"__ignoreMap":9},[286,49642,49643,49645,49648],{"class":288,"line":289},[286,49644,49637],{"class":300},[286,49646,49647],{"class":310}," install",[286,49649,49650],{"class":310}," vue@3.6.0-beta.1\n",[277,49652,49655],{"className":49635,"code":49653,"filename":49654,"language":49638,"meta":9,"style":9},"pnpm add vue@3.6.0-beta.1\n","pnpm",[26,49656,49657],{"__ignoreMap":9},[286,49658,49659,49661,49664],{"class":288,"line":289},[286,49660,49654],{"class":300},[286,49662,49663],{"class":310}," add",[286,49665,49650],{"class":310},[277,49667,49670],{"className":49635,"code":49668,"filename":49669,"language":49638,"meta":9,"style":9},"yarn add vue@3.6.0-beta.1\n","yarn",[26,49671,49672],{"__ignoreMap":9},[286,49673,49674,49676,49678],{"class":288,"line":289},[286,49675,49669],{"class":300},[286,49677,49663],{"class":310},[286,49679,49650],{"class":310},[277,49681,49684],{"className":49635,"code":49682,"filename":49683,"language":49638,"meta":9,"style":9},"bun add vue@3.6.0-beta.1\n","bun",[26,49685,49686],{"__ignoreMap":9},[286,49687,49688,49690,49692],{"class":288,"line":289},[286,49689,49683],{"class":300},[286,49691,49663],{"class":310},[286,49693,49650],{"class":310},[202,49695,49697],{"id":49696},"paso-2-configuración-de-vite","Paso 2: Configuración de Vite",[31,49699,49700,49701,49704],{},"Activa el soporte para archivos ",[26,49702,49703],{},".vapor.vue"," (la convención recomendada para diferenciar componentes):",[277,49706,49710],{"className":46121,"code":49707,"filename":49708,"highlights":49709,"language":46125,"meta":9,"style":9},"import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\nexport default defineConfig({\n plugins: [\n vue({\n vapor: true // Activa el compilador de Vapor\n })\n ]\n})\n","vite.config.js",[379],[26,49711,49712,49724,49736,49740,49751,49756,49763,49774,49778,49783],{"__ignoreMap":9},[286,49713,49714,49716,49719,49721],{"class":288,"line":289},[286,49715,321],{"class":320},[286,49717,49718],{"class":292}," { defineConfig } ",[286,49720,327],{"class":320},[286,49722,49723],{"class":310}," 'vite'\n",[286,49725,49726,49728,49731,49733],{"class":288,"line":317},[286,49727,321],{"class":320},[286,49729,49730],{"class":292}," vue ",[286,49732,327],{"class":320},[286,49734,49735],{"class":310}," '@vitejs/plugin-vue'\n",[286,49737,49738],{"class":288,"line":333},[286,49739,336],{"emptyLinePlaceholder":6},[286,49741,49742,49744,49746,49749],{"class":288,"line":339},[286,49743,1065],{"class":320},[286,49745,1068],{"class":320},[286,49747,49748],{"class":300}," defineConfig",[286,49750,1074],{"class":292},[286,49752,49753],{"class":288,"line":354},[286,49754,49755],{"class":292}," plugins: [\n",[286,49757,49758,49761],{"class":288,"line":368},[286,49759,49760],{"class":300}," vue",[286,49762,1074],{"class":292},[286,49764,49766,49769,49771],{"class":49765,"line":379},[288,9405],[286,49767,49768],{"class":292}," vapor: ",[286,49770,2156],{"class":364},[286,49772,49773],{"class":12748}," // Activa el compilador de Vapor\n",[286,49775,49776],{"class":288,"line":389},[286,49777,2920],{"class":292},[286,49779,49780],{"class":288,"line":399},[286,49781,49782],{"class":292}," ]\n",[286,49784,49785],{"class":288,"line":405},[286,49786,684],{"class":292},[202,49788,49790],{"id":49789},"paso-3-uso-de-componentes","Paso 3: Uso de componentes",[31,49792,49793,49794,49796],{},"Puedes mezclar componentes estándar y Vapor. Para forzar a un componente a usar el nuevo motor, usa la extensión ",[26,49795,49703],{}," o define el bloque script:",[277,49798,49802],{"className":279,"code":49799,"filename":49800,"highlights":49801,"language":282,"meta":9,"style":9},"\u003Cscript setup vapor>\n// Este componente se compilará sin Virtual DOM\n\u003C/script>\n","Index.vue",[289],[26,49803,49804,49818,49823],{"__ignoreMap":9},[286,49805,49807,49809,49811,49813,49816],{"class":49806,"line":289},[288,9405],[286,49808,293],{"class":292},[286,49810,297],{"class":296},[286,49812,301],{"class":300},[286,49814,49815],{"class":300}," vapor",[286,49817,314],{"class":292},[286,49819,49820],{"class":288,"line":317},[286,49821,49822],{"class":12748},"// Este componente se compilará sin Virtual DOM\n",[286,49824,49825,49827,49829],{"class":288,"line":333},[286,49826,793],{"class":292},[286,49828,297],{"class":296},[286,49830,314],{"class":292},[40,49832,17678],{"id":17677},[31,49834,49835,49836,49839,49840,49842],{},"Vue 3.6 no es solo una actualización; es un mensaje claro a la comunidad: ",[82,49837,49838],{},"Vue puede ser tan rápido y ligero como el que más, sin sacrificar su amada sintaxis."," Al integrar la eficiencia de ",[26,49841,49050],{}," y alcanzar la paridad funcional con Vapor, Vue se posiciona como el framework más flexible y potente para la próxima década del desarrollo web.",[1614,49844,49845],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":9,"searchDepth":317,"depth":317,"links":49847},[49848,49851,49855,49860,49861,49866],{"id":49053,"depth":317,"text":49054,"children":49849},[49850],{"id":49067,"depth":333,"text":49068},{"id":49132,"depth":317,"text":49852,"children":49853},"Refactorización de @vue/reactivity: El efecto \"Alien\"",[49854],{"id":49146,"depth":333,"text":49147},{"id":49227,"depth":317,"text":49228,"children":49856},[49857,49858,49859],{"id":49234,"depth":333,"text":49235},{"id":49335,"depth":333,"text":49336},{"id":49352,"depth":333,"text":49353},{"id":49528,"depth":317,"text":49529},{"id":49624,"depth":317,"text":49625,"children":49862},[49863,49864,49865],{"id":49631,"depth":333,"text":49632},{"id":49696,"depth":333,"text":49697},{"id":49789,"depth":333,"text":49790},{"id":17677,"depth":317,"text":17678},"https://res.cloudinary.com/denj4fg7f/image/upload/v1766870280/vue-beta-vapor-mode-revealed_snvcqg.png","Logo de Vue.js sobre un fondo de código fuente","2025-12-27","Explora las novedades de Vue 3.6 Beta, incluyendo Vapor Mode y la integración de alien-signals para una reactividad más eficiente.",{"script":49872},[49873],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":49874},[49875],{"headline":49008,"author":49876,"datePublished":49877,"@type":1647},{"name":1644,"@type":1645},"2025-12-27T00:00:00-05",{"updatedAt":46383,"coverCaption":49879,"author":1644,"keywords":49880},"Descubre las innovaciones de Vue 3.6 Beta: Vapor Mode y un motor de reactividad renovado","vue 3.6, vapor mode, alien-signals, reactividad, javascript, framework, frontend, beta","/blog/vue-beta-vapor-mode-revealed.es",[49883],{"headline":49008,"author":49884,"datePublished":49877,"@type":1647},{"name":1644,"@type":1645},{"title":49008,"description":49870},"blog/vue-beta-vapor-mode-revealed.es",[49888,49891,49893,49894,49897],{"tag":49889,"color":49890},"Beta","#42B883",{"tag":49060,"color":49892},"#41B2A6",{"tag":3174,"color":3175},{"tag":49895,"color":49896},"Ecosistema","#68D4F2",{"tag":1678,"color":1679},"A6Q1HoZGN7cVXgiqEGeT2SrCupp9KD1iIJTRYwsxnyY",{"id":49900,"title":49901,"body":49902,"cover":50860,"coverAlt":50861,"date":50862,"description":50863,"draft":12,"extension":1635,"head":50864,"locale":1648,"meta":50871,"navigation":6,"path":50873,"schemaOrg":50874,"seo":50877,"series":1663,"seriesDescription":1663,"seriesOrder":1663,"seriesTitle":1663,"slug":1663,"stem":50878,"tags":50879,"__hash__":50884},"blog/blog/setting-up-vue-with-vite.es.md","¿Cómo crear tu primer proyecto con Vue usando Vite?",{"type":18,"value":49903,"toc":50848},[49904,49908,49915,49919,49922,49958,49962,49969,49982,49986,49989,50007,50023,50038,50053,50063,50067,50070,50094,50098,50101,50104,50116,50119,50131,50142,50153,50164,50171,50175,50178,50193,50204,50215,50228,50235,50239,50242,50283,50287,50293,50556,50808,50812,50845],[21,49905,49907],{"id":49906},"guía-creando-tu-primer-proyecto-con-vue-y-vite","Guía: Creando tu primer proyecto con Vue y Vite",[31,49909,49910,49911,49914],{},"En esta guía aprenderás a configurar un entorno de desarrollo moderno. ",[82,49912,49913],{},"Vite"," es una herramienta que reemplaza al antiguo Vue CLI, ofreciendo una velocidad de carga casi instantánea durante el desarrollo.",[40,49916,49918],{"id":49917},"resumen-de-la-solución","Resumen de la solución",[31,49920,49921],{},"Para completar este proyecto, seguiremos estos pasos:",[10096,49923,49924,49930,49940,49946,49952],{},[51,49925,49926,49929],{},[82,49927,49928],{},"Preparación",": Verificación de herramientas necesarias (Node.js).",[51,49931,49932,49935,49936,49939],{},[82,49933,49934],{},"Andamiaje",": Uso del comando ",[26,49937,49938],{},"npm create vite"," para generar la estructura.",[51,49941,49942,49945],{},[82,49943,49944],{},"Instalación",": Configuración de las dependencias del proyecto.",[51,49947,49948,49951],{},[82,49949,49950],{},"Ejecución",": Lanzamiento del servidor de desarrollo local.",[51,49953,49954,49957],{},[82,49955,49956],{},"Exploración",": Breve explicación de la estructura de archivos generada.",[40,49959,49961],{"id":49960},"requisitos-previos","Requisitos previos",[31,49963,49964,49965,49968],{},"Antes de empezar, asegúrate de tener instalado ",[82,49966,49967],{},"Node.js"," (versión 18 o superior). Puedes verificarlo abriendo una terminal y escribiendo:",[277,49970,49972],{"className":49635,"code":49971,"filename":49638,"language":49638,"meta":9,"style":9},"node -v\n",[26,49973,49974],{"__ignoreMap":9},[286,49975,49976,49979],{"class":288,"line":289},[286,49977,49978],{"class":300},"node",[286,49980,49981],{"class":364}," -v\n",[40,49983,49985],{"id":49984},"paso-1-inicializar-el-proyecto","Paso 1: Inicializar el proyecto",[31,49987,49988],{},"Abre tu terminal en la carpeta donde quieras guardar tu proyecto y ejecuta el siguiente comando:",[277,49990,49992],{"className":49635,"code":49991,"filename":49637,"language":49638,"meta":9,"style":9},"npm create vite@latest mi-primer-proyecto-vue\n",[26,49993,49994],{"__ignoreMap":9},[286,49995,49996,49998,50001,50004],{"class":288,"line":289},[286,49997,49637],{"class":300},[286,49999,50000],{"class":310}," create",[286,50002,50003],{"class":310}," vite@latest",[286,50005,50006],{"class":310}," mi-primer-proyecto-vue\n",[277,50008,50010],{"className":49635,"code":50009,"filename":49654,"language":49638,"meta":9,"style":9},"pnpm create vite mi-primer-proyecto-vue\n",[26,50011,50012],{"__ignoreMap":9},[286,50013,50014,50016,50018,50021],{"class":288,"line":289},[286,50015,49654],{"class":300},[286,50017,50000],{"class":310},[286,50019,50020],{"class":310}," vite",[286,50022,50006],{"class":310},[277,50024,50026],{"className":49635,"code":50025,"filename":49669,"language":49638,"meta":9,"style":9},"yarn create vite mi-primer-proyecto-vue\n",[26,50027,50028],{"__ignoreMap":9},[286,50029,50030,50032,50034,50036],{"class":288,"line":289},[286,50031,49669],{"class":300},[286,50033,50000],{"class":310},[286,50035,50020],{"class":310},[286,50037,50006],{"class":310},[277,50039,50041],{"className":49635,"code":50040,"filename":49683,"language":49638,"meta":9,"style":9},"bun create vite mi-primer-proyecto-vue\n",[26,50042,50043],{"__ignoreMap":9},[286,50044,50045,50047,50049,50051],{"class":288,"line":289},[286,50046,49683],{"class":300},[286,50048,50000],{"class":310},[286,50050,50020],{"class":310},[286,50052,50006],{"class":310},[3118,50054,50055],{},[31,50056,50057,10976,50059,50062],{},[82,50058,48120],{},[26,50060,50061],{},"mi-primer-proyecto-vue"," es el nombre de la carpeta que se creará. Puedes cambiarlo por el que prefieras.",[40,50064,50066],{"id":50065},"paso-2-configuración-del-asistente","Paso 2: Configuración del asistente",[31,50068,50069],{},"Una vez ejecutado el comando, la terminal te hará unas preguntas interactivas. Sigue estas opciones para un proyecto estándar:",[10096,50071,50072,50080],{},[51,50073,50074,50077,50078,114],{},[82,50075,50076],{},"Select a framework:"," Usa las flechas del teclado para seleccionar ",[26,50079,20623],{},[51,50081,50082,50085,50086,50089,50090,50093],{},[82,50083,50084],{},"Select a variant:"," Selecciona ",[26,50087,50088],{},"JavaScript"," (o ",[26,50091,50092],{},"TypeScript"," si prefieres tipado fuerte, pero para empezar recomendamos JavaScript).",[40,50095,50097],{"id":50096},"paso-3-instalación-de-dependencias","Paso 3: Instalación de dependencias",[31,50099,50100],{},"Vite crea la estructura de archivos, pero no instala las librerías automáticamente para ahorrar tiempo. Debes entrar a la carpeta e instalarlas manualmente:",[31,50102,50103],{},"Entra a la carpeta del proyecto",[277,50105,50107],{"className":49635,"code":50106,"filename":49638,"language":49638,"meta":9,"style":9},"cd mi-primer-proyecto-vue\n",[26,50108,50109],{"__ignoreMap":9},[286,50110,50111,50114],{"class":288,"line":289},[286,50112,50113],{"class":364},"cd",[286,50115,50006],{"class":310},[31,50117,50118],{},"Instala todas las librerías necesarias",[277,50120,50122],{"className":49635,"code":50121,"filename":49637,"language":49638,"meta":9,"style":9},"npm install\n",[26,50123,50124],{"__ignoreMap":9},[286,50125,50126,50128],{"class":288,"line":289},[286,50127,49637],{"class":300},[286,50129,50130],{"class":310}," install\n",[277,50132,50134],{"className":49635,"code":50133,"filename":49654,"language":49638,"meta":9,"style":9},"pnpm install\n",[26,50135,50136],{"__ignoreMap":9},[286,50137,50138,50140],{"class":288,"line":289},[286,50139,49654],{"class":300},[286,50141,50130],{"class":310},[277,50143,50145],{"className":49635,"code":50144,"filename":49669,"language":49638,"meta":9,"style":9},"yarn install\n",[26,50146,50147],{"__ignoreMap":9},[286,50148,50149,50151],{"class":288,"line":289},[286,50150,49669],{"class":300},[286,50152,50130],{"class":310},[277,50154,50156],{"className":49635,"code":50155,"filename":49683,"language":49638,"meta":9,"style":9},"bun install\n",[26,50157,50158],{"__ignoreMap":9},[286,50159,50160,50162],{"class":288,"line":289},[286,50161,49683],{"class":300},[286,50163,50130],{"class":310},[31,50165,50166,50167,50170],{},"Este proceso creará la carpeta ",[26,50168,50169],{},"node_modules",", que contiene todo el código necesario para que Vue funcione.",[40,50172,50174],{"id":50173},"paso-4-ejecutar-el-servidor-de-desarrollo","Paso 4: Ejecutar el servidor de desarrollo",[31,50176,50177],{},"¡Ya estás listo! Ahora inicia el servidor para ver tu aplicación en el navegador:",[277,50179,50181],{"className":49635,"code":50180,"filename":49637,"language":49638,"meta":9,"style":9},"npm run dev\n",[26,50182,50183],{"__ignoreMap":9},[286,50184,50185,50187,50190],{"class":288,"line":289},[286,50186,49637],{"class":300},[286,50188,50189],{"class":310}," run",[286,50191,50192],{"class":310}," dev\n",[277,50194,50196],{"className":49635,"code":50195,"filename":49654,"language":49638,"meta":9,"style":9},"pnpm dev\n",[26,50197,50198],{"__ignoreMap":9},[286,50199,50200,50202],{"class":288,"line":289},[286,50201,49654],{"class":300},[286,50203,50192],{"class":310},[277,50205,50207],{"className":49635,"code":50206,"filename":49669,"language":49638,"meta":9,"style":9},"yarn dev\n",[26,50208,50209],{"__ignoreMap":9},[286,50210,50211,50213],{"class":288,"line":289},[286,50212,49669],{"class":300},[286,50214,50192],{"class":310},[277,50216,50218],{"className":49635,"code":50217,"filename":49683,"language":49638,"meta":9,"style":9},"bun run dev\n",[26,50219,50220],{"__ignoreMap":9},[286,50221,50222,50224,50226],{"class":288,"line":289},[286,50223,49683],{"class":300},[286,50225,50189],{"class":310},[286,50227,50192],{"class":310},[31,50229,50230,50231,50234],{},"La terminal te mostrará una URL (normalmente ",[26,50232,50233],{},"http://localhost:5173/","). Abre ese enlace en tu navegador y verás la página de bienvenida de Vue.",[40,50236,50238],{"id":50237},"paso-5-estructura-del-proyecto","Paso 5: Estructura del proyecto",[31,50240,50241],{},"Aquí tienes una descripción de los archivos más importantes que verás en tu editor de código:",[48,50243,50244,50252,50260,50268,50276],{},[51,50245,50246,50251],{},[82,50247,50248],{},[26,50249,50250],{},"index.html",": El punto de entrada principal. Vite lo usa para montar la aplicación.",[51,50253,50254,50259],{},[82,50255,50256],{},[26,50257,50258],{},"src/main.js",": El archivo JavaScript que inicializa la instancia de Vue y la conecta con el HTML.",[51,50261,50262,50267],{},[82,50263,50264],{},[26,50265,50266],{},"src/App.vue",": El componente raíz de tu aplicación. Todo lo que escribas aquí se verá en pantalla.",[51,50269,50270,50275],{},[82,50271,50272],{},[26,50273,50274],{},"src/components/",": Carpeta donde guardarás tus propios componentes reutilizables.",[51,50277,50278,50282],{},[82,50279,50280],{},[26,50281,49708],{},": Archivo de configuración de Vite.",[40,50284,50286],{"id":50285},"ejemplo-de-un-componente-básico","Ejemplo de un componente básico",[31,50288,50289,50290,50292],{},"Para empezar a programar, puedes abrir el archivo ",[26,50291,50266],{}," y reemplazar su contenido con este código sencillo para entender cómo funciona la reactividad:",[277,50294,50296],{"className":279,"code":50295,"filename":281,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>{{ mensaje }}\u003C/h1>\n \u003Cbutton @click=\"incrementar\">Contador: {{ contador }}\u003C/button>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from 'vue';\n\n// Definimos una variable reactiva\nconst mensaje = \"¡Hola desde mi app con Vite!\";\nconst contador = ref(0);\n\n// Función para cambiar el estado\nconst incrementar = () => {\n contador.value++;\n};\n\u003C/script>\n\n\u003Cstyle scoped>\nh1 {\n color: #42b983;\n}\nbutton {\n padding: 10px 20px;\n cursor: pointer;\n}\n\u003C/style>\n",[26,50297,50298,50306,50314,50327,50346,50354,50362,50366,50376,50388,50392,50397,50411,50428,50432,50437,50451,50460,50464,50472,50476,50487,50493,50504,50508,50514,50532,50544,50548],{"__ignoreMap":9},[286,50299,50300,50302,50304],{"class":288,"line":289},[286,50301,293],{"class":292},[286,50303,810],{"class":296},[286,50305,314],{"class":292},[286,50307,50308,50310,50312],{"class":288,"line":317},[286,50309,818],{"class":292},[286,50311,4208],{"class":296},[286,50313,314],{"class":292},[286,50315,50316,50318,50320,50323,50325],{"class":288,"line":333},[286,50317,837],{"class":292},[286,50319,21],{"class":296},[286,50321,50322],{"class":292},">{{ mensaje }}\u003C/",[286,50324,21],{"class":296},[286,50326,314],{"class":292},[286,50328,50329,50331,50333,50335,50337,50339,50342,50344],{"class":288,"line":339},[286,50330,837],{"class":292},[286,50332,4274],{"class":296},[286,50334,4285],{"class":300},[286,50336,307],{"class":292},[286,50338,48817],{"class":310},[286,50340,50341],{"class":292},">Contador: {{ contador }}\u003C/",[286,50343,4274],{"class":296},[286,50345,314],{"class":292},[286,50347,50348,50350,50352],{"class":288,"line":354},[286,50349,962],{"class":292},[286,50351,4208],{"class":296},[286,50353,314],{"class":292},[286,50355,50356,50358,50360],{"class":288,"line":368},[286,50357,793],{"class":292},[286,50359,810],{"class":296},[286,50361,314],{"class":292},[286,50363,50364],{"class":288,"line":379},[286,50365,336],{"emptyLinePlaceholder":6},[286,50367,50368,50370,50372,50374],{"class":288,"line":389},[286,50369,293],{"class":292},[286,50371,297],{"class":296},[286,50373,301],{"class":300},[286,50375,314],{"class":292},[286,50377,50378,50380,50382,50384,50386],{"class":288,"line":399},[286,50379,321],{"class":320},[286,50381,11013],{"class":292},[286,50383,327],{"class":320},[286,50385,45697],{"class":310},[286,50387,18158],{"class":292},[286,50389,50390],{"class":288,"line":405},[286,50391,336],{"emptyLinePlaceholder":6},[286,50393,50394],{"class":288,"line":410},[286,50395,50396],{"class":12748},"// Definimos una variable reactiva\n",[286,50398,50399,50401,50404,50406,50409],{"class":288,"line":444},[286,50400,413],{"class":320},[286,50402,50403],{"class":364}," mensaje",[286,50405,348],{"class":320},[286,50407,50408],{"class":310}," \"¡Hola desde mi app con Vite!\"",[286,50410,18158],{"class":292},[286,50412,50413,50415,50418,50420,50422,50424,50426],{"class":288,"line":464},[286,50414,413],{"class":320},[286,50416,50417],{"class":364}," contador",[286,50419,348],{"class":320},[286,50421,421],{"class":300},[286,50423,456],{"class":292},[286,50425,3549],{"class":364},[286,50427,18284],{"class":292},[286,50429,50430],{"class":288,"line":469},[286,50431,336],{"emptyLinePlaceholder":6},[286,50433,50434],{"class":288,"line":484},[286,50435,50436],{"class":12748},"// Función para cambiar el estado\n",[286,50438,50439,50441,50443,50445,50447,50449],{"class":288,"line":508},[286,50440,413],{"class":320},[286,50442,48762],{"class":300},[286,50444,348],{"class":320},[286,50446,606],{"class":292},[286,50448,609],{"class":320},[286,50450,351],{"class":292},[286,50452,50453,50456,50458],{"class":288,"line":513},[286,50454,50455],{"class":292}," contador.value",[286,50457,48778],{"class":320},[286,50459,18158],{"class":292},[286,50461,50462],{"class":288,"line":528},[286,50463,18262],{"class":292},[286,50465,50466,50468,50470],{"class":288,"line":547},[286,50467,793],{"class":292},[286,50469,297],{"class":296},[286,50471,314],{"class":292},[286,50473,50474],{"class":288,"line":553},[286,50475,336],{"emptyLinePlaceholder":6},[286,50477,50478,50480,50482,50485],{"class":288,"line":558},[286,50479,293],{"class":292},[286,50481,1614],{"class":296},[286,50483,50484],{"class":300}," scoped",[286,50486,314],{"class":292},[286,50488,50489,50491],{"class":288,"line":586},[286,50490,21],{"class":296},[286,50492,351],{"class":292},[286,50494,50495,50497,50499,50502],{"class":288,"line":591},[286,50496,21270],{"class":364},[286,50498,20706],{"class":292},[286,50500,50501],{"class":364},"#42b983",[286,50503,18158],{"class":292},[286,50505,50506],{"class":288,"line":596},[286,50507,402],{"class":292},[286,50509,50510,50512],{"class":288,"line":614},[286,50511,4274],{"class":296},[286,50513,351],{"class":292},[286,50515,50516,50518,50520,50523,50525,50528,50530],{"class":288,"line":622},[286,50517,21282],{"class":364},[286,50519,20706],{"class":292},[286,50521,50522],{"class":364},"10",[286,50524,21304],{"class":320},[286,50526,50527],{"class":364}," 20",[286,50529,21304],{"class":320},[286,50531,18158],{"class":292},[286,50533,50534,50537,50539,50542],{"class":288,"line":633},[286,50535,50536],{"class":364}," cursor",[286,50538,20706],{"class":292},[286,50540,50541],{"class":364},"pointer",[286,50543,18158],{"class":292},[286,50545,50546],{"class":288,"line":645},[286,50547,402],{"class":292},[286,50549,50550,50552,50554],{"class":288,"line":654},[286,50551,793],{"class":292},[286,50553,1614],{"class":296},[286,50555,314],{"class":292},[277,50557,50559],{"className":279,"code":50558,"filename":979,"language":282,"meta":9,"style":9},"\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>{{ mensaje }}\u003C/h1>\n \u003Cbutton @click=\"incrementar\">Contador: {{ contador }}\u003C/button>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nexport default {\n name: 'App',\n data() {\n return {\n mensaje: '¡Hola desde mi app con Vite!',\n contador: 0\n };\n },\n methods: {\n incrementar() {\n this.contador++;\n }\n }\n};\n\u003C/script>\n\n\u003Cstyle scoped>\nh1 {\n color: #42b983;\n}\nbutton {\n padding: 10px 20px;\n cursor: pointer;\n}\n\u003C/style>\n",[26,50560,50561,50569,50577,50589,50607,50615,50623,50627,50635,50643,50652,50658,50664,50674,50681,50685,50689,50693,50699,50710,50714,50718,50722,50730,50734,50744,50750,50760,50764,50770,50786,50796,50800],{"__ignoreMap":9},[286,50562,50563,50565,50567],{"class":288,"line":289},[286,50564,293],{"class":292},[286,50566,810],{"class":296},[286,50568,314],{"class":292},[286,50570,50571,50573,50575],{"class":288,"line":317},[286,50572,818],{"class":292},[286,50574,4208],{"class":296},[286,50576,314],{"class":292},[286,50578,50579,50581,50583,50585,50587],{"class":288,"line":333},[286,50580,837],{"class":292},[286,50582,21],{"class":296},[286,50584,50322],{"class":292},[286,50586,21],{"class":296},[286,50588,314],{"class":292},[286,50590,50591,50593,50595,50597,50599,50601,50603,50605],{"class":288,"line":339},[286,50592,837],{"class":292},[286,50594,4274],{"class":296},[286,50596,4285],{"class":300},[286,50598,307],{"class":292},[286,50600,48817],{"class":310},[286,50602,50341],{"class":292},[286,50604,4274],{"class":296},[286,50606,314],{"class":292},[286,50608,50609,50611,50613],{"class":288,"line":354},[286,50610,962],{"class":292},[286,50612,4208],{"class":296},[286,50614,314],{"class":292},[286,50616,50617,50619,50621],{"class":288,"line":368},[286,50618,793],{"class":292},[286,50620,810],{"class":296},[286,50622,314],{"class":292},[286,50624,50625],{"class":288,"line":379},[286,50626,336],{"emptyLinePlaceholder":6},[286,50628,50629,50631,50633],{"class":288,"line":389},[286,50630,293],{"class":292},[286,50632,297],{"class":296},[286,50634,314],{"class":292},[286,50636,50637,50639,50641],{"class":288,"line":399},[286,50638,1065],{"class":320},[286,50640,1068],{"class":320},[286,50642,351],{"class":292},[286,50644,50645,50647,50650],{"class":288,"line":405},[286,50646,1079],{"class":292},[286,50648,50649],{"class":310},"'App'",[286,50651,1085],{"class":292},[286,50653,50654,50656],{"class":288,"line":410},[286,50655,1094],{"class":300},[286,50657,481],{"class":292},[286,50659,50660,50662],{"class":288,"line":444},[286,50661,1101],{"class":320},[286,50663,351],{"class":292},[286,50665,50666,50669,50672],{"class":288,"line":464},[286,50667,50668],{"class":292}," mensaje: ",[286,50670,50671],{"class":310},"'¡Hola desde mi app con Vite!'",[286,50673,1085],{"class":292},[286,50675,50676,50679],{"class":288,"line":469},[286,50677,50678],{"class":292}," contador: ",[286,50680,4699],{"class":364},[286,50682,50683],{"class":288,"line":484},[286,50684,18485],{"class":292},[286,50686,50687],{"class":288,"line":508},[286,50688,1139],{"class":292},[286,50690,50691],{"class":288,"line":513},[286,50692,1148],{"class":292},[286,50694,50695,50697],{"class":288,"line":528},[286,50696,48899],{"class":300},[286,50698,481],{"class":292},[286,50700,50701,50703,50706,50708],{"class":288,"line":547},[286,50702,1220],{"class":364},[286,50704,50705],{"class":292},".contador",[286,50707,48778],{"class":320},[286,50709,18158],{"class":292},[286,50711,50712],{"class":288,"line":553},[286,50713,1134],{"class":292},[286,50715,50716],{"class":288,"line":558},[286,50717,550],{"class":292},[286,50719,50720],{"class":288,"line":586},[286,50721,18262],{"class":292},[286,50723,50724,50726,50728],{"class":288,"line":591},[286,50725,793],{"class":292},[286,50727,297],{"class":296},[286,50729,314],{"class":292},[286,50731,50732],{"class":288,"line":596},[286,50733,336],{"emptyLinePlaceholder":6},[286,50735,50736,50738,50740,50742],{"class":288,"line":614},[286,50737,293],{"class":292},[286,50739,1614],{"class":296},[286,50741,50484],{"class":300},[286,50743,314],{"class":292},[286,50745,50746,50748],{"class":288,"line":622},[286,50747,21],{"class":296},[286,50749,351],{"class":292},[286,50751,50752,50754,50756,50758],{"class":288,"line":633},[286,50753,21270],{"class":364},[286,50755,20706],{"class":292},[286,50757,50501],{"class":364},[286,50759,18158],{"class":292},[286,50761,50762],{"class":288,"line":645},[286,50763,402],{"class":292},[286,50765,50766,50768],{"class":288,"line":654},[286,50767,4274],{"class":296},[286,50769,351],{"class":292},[286,50771,50772,50774,50776,50778,50780,50782,50784],{"class":288,"line":676},[286,50773,21282],{"class":364},[286,50775,20706],{"class":292},[286,50777,50522],{"class":364},[286,50779,21304],{"class":320},[286,50781,50527],{"class":364},[286,50783,21304],{"class":320},[286,50785,18158],{"class":292},[286,50787,50788,50790,50792,50794],{"class":288,"line":681},[286,50789,50536],{"class":364},[286,50791,20706],{"class":292},[286,50793,50541],{"class":364},[286,50795,18158],{"class":292},[286,50797,50798],{"class":288,"line":687},[286,50799,402],{"class":292},[286,50801,50802,50804,50806],{"class":288,"line":692},[286,50803,793],{"class":292},[286,50805,1614],{"class":296},[286,50807,314],{"class":292},[202,50809,50811],{"id":50810},"explicación-del-código","Explicación del código:",[48,50813,50814,50824,50834],{},[51,50815,50816,50820,50821,50823],{},[82,50817,50818],{},[26,50819,26166],{},": Contiene el HTML. Usamos ",[26,50822,24729],{}," para mostrar variables.",[51,50825,50826,50830,50831,50833],{},[82,50827,50828],{},[26,50829,19257],{},": Es la forma moderna de escribir lógica en Vue 3. Usamos ",[26,50832,1934],{}," para que Vue sepa que cuando el valor cambie, debe actualizar la pantalla.",[51,50835,50836,50840,50841,50844],{},[82,50837,50838],{},[26,50839,20845],{},": Aquí va el CSS, y el atributo ",[26,50842,50843],{},"scoped"," asegura que los estilos solo afecten a este componente.",[1614,50846,50847],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":9,"searchDepth":317,"depth":317,"links":50849},[50850,50851,50852,50853,50854,50855,50856,50857],{"id":49917,"depth":317,"text":49918},{"id":49960,"depth":317,"text":49961},{"id":49984,"depth":317,"text":49985},{"id":50065,"depth":317,"text":50066},{"id":50096,"depth":317,"text":50097},{"id":50173,"depth":317,"text":50174},{"id":50237,"depth":317,"text":50238},{"id":50285,"depth":317,"text":50286,"children":50858},[50859],{"id":50810,"depth":333,"text":50811},"https://res.cloudinary.com/denj4fg7f/image/upload/v1766607505/setting_up_vue_with_vite_crikmp.png","Logo de Vue.js con el logo de Vite de fondo","2025-12-24","Una guía paso a paso para configurar un entorno de desarrollo moderno con Vue.js y Vite.",{"script":50865},[50866],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":50867},[50868],{"headline":49901,"author":50869,"datePublished":50870,"@type":1647},{"name":1644,"@type":1645},"2025-12-24T00:00:00-05",{"updatedAt":46383,"coverCaption":50872},"Configura tu entorno de desarrollo con Vue y Vite en minutos","/blog/setting-up-vue-with-vite.es",[50875],{"headline":49901,"author":50876,"datePublished":50870,"@type":1647},{"name":1644,"@type":1645},{"title":49901,"description":50863},"blog/setting-up-vue-with-vite.es",[50880,50882,50883],{"tag":49913,"color":50881},"#646CFF",{"tag":49895,"color":49896},{"tag":9081,"color":9082},"nisSD7gx7iXbl0uktGTbkKJM-KnfAw_jtFWm-ZmgpK8",{"id":50886,"title":50887,"body":50888,"cover":51062,"coverAlt":51063,"date":51064,"description":51065,"draft":12,"extension":1635,"head":51066,"locale":1648,"meta":51073,"navigation":6,"path":51075,"schemaOrg":51076,"seo":51079,"series":1663,"seriesDescription":1663,"seriesOrder":1663,"seriesTitle":1663,"slug":1663,"stem":51080,"tags":51081,"__hash__":51084},"blog/blog/history-evolution-philosophy-vue-progressive-framework.es.md","Historia y Evolución de Vue.js: El Framework Progresivo",{"type":18,"value":50889,"toc":51053},[50890,50894,50900,50904,50915,50921,50925,50932,50972,50982,50986,50990,51004,51008,51011,51036,51040],[21,50891,50893],{"id":50892},"vuejs-la-evolución-del-framework-progresivo","Vue.js: La Evolución del Framework Progresivo",[31,50895,50896,50897,50899],{},"Desde su humilde comienzo como un proyecto paralelo en Google hasta convertirse en uno de los pilares del desarrollo web moderno, ",[82,50898,1652],{}," ha mantenido una filosofía única: ser el framework que crece contigo. En este artículo, exploraremos cómo su historia y diseño técnico han redefinido la experiencia de desarrollo (DX).",[40,50901,50903],{"id":50902},"el-origen-la-visión-de-evan-you","El Origen: La Visión de Evan You",[31,50905,50906,50907,50910,50911,50914],{},"La historia de Vue comienza en 2013, dentro de las oficinas de Google Creative Lab. ",[82,50908,50909],{},"Evan You",", trabajando con AngularJS, sintió que podía extraer lo mejor de ese mundo (el enlace de datos o ",[3299,50912,50913],{},"data binding",") y combinarlo con una estructura mucho más ligera y menos restrictiva.",[31,50916,120,50917,50920],{},[82,50918,50919],{},"febrero de 2014",", se lanzó oficialmente la versión 1.0. A diferencia de sus competidores, Vue no nació bajo el ala de una gran corporación (como React con Facebook o Angular con Google), sino como un proyecto independiente impulsado por la comunidad y el feedback directo de los desarrolladores.",[40,50922,50924],{"id":50923},"la-filosofía-del-framework-progresivo","La Filosofía del \"Framework Progresivo\"",[31,50926,50927,50928,50931],{},"¿Qué significa realmente que Vue sea ",[82,50929,50930],{},"progresivo","? A diferencia de los frameworks monolíticos, Vue se divide en capas que puedes adoptar según tus necesidades:",[10096,50933,50934,50940,50946,50955,50964],{},[51,50935,50936,50939],{},[82,50937,50938],{},"Declarative Rendering:"," Puedes usarlo solo para manejar el DOM.",[51,50941,50942,50945],{},[82,50943,50944],{},"Component System:"," Para crear interfaces modulares.",[51,50947,50948,50951,50952,114],{},[82,50949,50950],{},"Client-Side Routing:"," Mediante ",[3299,50953,50954],{},"Vue Router",[51,50956,50957,50951,50960,50963],{},[82,50958,50959],{},"State Management:",[3299,50961,50962],{},"Pinia"," (anteriormente Vuex).",[51,50965,50966,50969,50970,114],{},[82,50967,50968],{},"Build System:"," Optimizado actualmente por ",[3299,50971,49913],{},[31,50973,50974,50975,50977,50978,50981],{},"Esta escalabilidad permite que un desarrollador integre Vue en una página legacy mediante un simple ",[26,50976,19257],{}," de CDN, o construya una ",[82,50979,50980],{},"Single Page Application (SPA)"," compleja con millones de usuarios.",[40,50983,50985],{"id":50984},"evolución-técnica-de-la-v1-a-la-v3","Evolución Técnica: De la V1 a la V3",[202,50987,50989],{"id":50988},"vue-2-la-consolidación","Vue 2: La Consolidación",[31,50991,50992,50993,50996,50997,51000,51001,51003],{},"Lanzado en 2016, introdujo el ",[82,50994,50995],{},"Virtual DOM",", mejorando drásticamente el rendimiento. Fue la era donde el ecosistema explotó, popularizando los ",[82,50998,50999],{},"Single File Components (SFC)"," y el uso de ",[26,51002,48424],{}," para su sistema de reactividad.",[202,51005,51007],{"id":51006},"vue-3-el-gran-salto-one-piece","Vue 3: El Gran Salto (One Piece)",[31,51009,51010],{},"En septiembre de 2020, Vue 3 trajo una reescritura completa del núcleo. Los cambios clave fueron:",[48,51012,51013,51024,51030],{},[51,51014,51015,51018,51019,51021,51022,1902],{},[82,51016,51017],{},"Composition API:"," Una alternativa superior a la ",[3299,51020,979],{}," para organizar la lógica de componentes complejos y mejorar la reutilización de código (",[3299,51023,12337],{},[51,51025,51026,51029],{},[82,51027,51028],{},"Reactividad basada en Proxies:"," Superando las limitaciones de Vue 2, permitiendo detectar cambios en propiedades nuevas y arreglos de forma nativa.",[51,51031,51032,51035],{},[82,51033,51034],{},"Soporte de TypeScript de primer nivel:"," El framework ahora está escrito en TS, facilitando el tipado estático.",[40,51037,51039],{"id":51038},"el-futuro-y-el-ecosistema-actual","El Futuro y el Ecosistema Actual",[31,51041,51042,51043,51045,51046,51049,51050,51052],{},"Hoy, Vue no es solo una librería; es un estándar de rendimiento gracias a ",[82,51044,49913],{},", el motor de bundling creado por el propio equipo de Vue que ha revolucionado la industria. Con el auge de ",[82,51047,51048],{},"Nuxt 3"," para aplicaciones SSR (Server Side Rendering) y la transición oficial a ",[82,51051,50962],{}," como gestor de estado, el ecosistema es más robusto y maduro que nunca.",{"title":9,"searchDepth":317,"depth":317,"links":51054},[51055,51056,51057,51061],{"id":50902,"depth":317,"text":50903},{"id":50923,"depth":317,"text":50924},{"id":50984,"depth":317,"text":50985,"children":51058},[51059,51060],{"id":50988,"depth":333,"text":50989},{"id":51006,"depth":333,"text":51007},{"id":51038,"depth":317,"text":51039},"https://res.cloudinary.com/denj4fg7f/image/upload/v1766105778/historia_de_vue_wbwv72.png","Logo de Vue.js con fondo de código fuente","2025-12-19","Desde sus inicios como un proyecto paralelo en Google hasta convertirse en uno de los pilares del desarrollo web moderno, exploramos la evolución y filosofía de Vue.js.",{"script":51067},[51068],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":51069},[51070],{"headline":50887,"author":51071,"datePublished":51072,"@type":1647},{"name":1644,"@type":1645},"2025-12-19T00:00:00-05",{"updatedAt":46383,"coverCaption":51074},"Explorando la evolución de Vue.js desde sus inicios hasta la actualidad","/blog/history-evolution-philosophy-vue-progressive-framework.es",[51077],{"headline":50887,"author":51078,"datePublished":51072,"@type":1647},{"name":1644,"@type":1645},{"title":50887,"description":51065},"blog/history-evolution-philosophy-vue-progressive-framework.es",[51082,51083],{"tag":49024,"color":49025},{"tag":49895,"color":49896},"za74lWir7bqMzxflbMIiTVoDNp7ZkaBvQ9_9paq4BFo",{"id":51086,"title":51087,"body":51088,"cover":51719,"coverAlt":49868,"date":51720,"description":51721,"draft":12,"extension":1635,"head":51722,"locale":1648,"meta":51729,"navigation":6,"path":51732,"schemaOrg":51733,"seo":51736,"series":1663,"seriesDescription":1663,"seriesOrder":1663,"seriesTitle":1663,"slug":1663,"stem":51737,"tags":51738,"__hash__":51742},"blog/blog/what-is-vue-js-and-why-you-should-use-it.es.md","¿Qué es Vue.js y por qué deberías usarlo?",{"type":18,"value":51089,"toc":51701},[51090,51094,51100,51106,51109,51113,51119,51125,51130,51136,51147,51151,51157,51372,51581,51592,51596,51599,51605,51617,51622,51632,51636,51642,51647,51653,51668,51674,51679,51685,51690,51692,51695,51698],[21,51091,51093],{"id":51092},"vuejs-el-framework-progresivo-para-la-web-moderna","Vue.js: El Framework Progresivo para la Web Moderna",[31,51095,51096,51097,51099],{},"En el saturado ecosistema de JavaScript, elegir una herramienta para el frontend puede sentirse como intentar dar a un blanco móvil. Sin embargo, ",[82,51098,1652],{}," ha logrado posicionarse no solo como una alternativa a gigantes como React o Angular, sino como la opción preferida para quienes buscan un equilibrio entre potencia, simplicidad y rendimiento.",[31,51101,51102,51105],{},[82,51103,51104],{},"Vue.js es un framework JavaScript de código abierto"," creado por Evan You en 2014, diseñado específicamente para construir interfaces de usuario interactivas y aplicaciones de una sola página (SPA). Su filosofía se centra en ser accesible, versátil y eficiente, priorizando la experiencia del desarrollador sin comprometer el rendimiento.",[31,51107,51108],{},"Pero, ¿qué es exactamente lo que hace a Vue especial y por qué deberías considerarlo para tu próximo proyecto en 2025?",[40,51110,51112],{"id":51111},"el-concepto-de-framework-progresivo","El Concepto de \"Framework Progresivo\"",[31,51114,51115,51116,51118],{},"A diferencia de otros frameworks monolíticos que te obligan a adoptar toda su estructura desde el día uno, Vue se define como ",[82,51117,50930],{},". Esto significa que su complejidad escala según tus necesidades:",[202,51120,51122],{"id":51121},"uso-como-librería",[82,51123,51124],{},"Uso como librería:",[48,51126,51127],{},[51,51128,51129],{},"Puedes integrar Vue en una página existente mediante un simple CDN para manejar widgets pequeños o añadir interactividad ligera sin reescribir todo tu backend.",[202,51131,51133],{"id":51132},"uso-como-framework-spa",[82,51134,51135],{},"Uso como Framework (SPA):",[48,51137,51138],{},[51,51139,51140,51141,51143,51144,51146],{},"Puedes construir aplicaciones robustas de una sola página (Single Page Applications) utilizando su ecosistema oficial completo: ",[82,51142,50954],{}," para la navegación y ",[82,51145,50962],{}," para la gestión del estado global.",[40,51148,51150],{"id":51149},"reactividad-transparente-y-eficiente","Reactividad Transparente y Eficiente",[31,51152,51153,51154,51156],{},"El corazón de Vue es su sistema de reactividad. En su versión 3, Vue utiliza los ",[26,51155,16984],{}," nativos de JavaScript para interceptar cambios en los datos. Esto permite que el framework sepa exactamente qué parte del DOM debe actualizarse, evitando renderizados innecesarios y procesos pesados de comparación de nodos.",[277,51158,51160],{"className":279,"code":51159,"filename":281,"language":282,"meta":9,"style":9},"\u003Cscript setup>\nimport { ref, computed } from 'vue';\n\n// Estado reactivo simple\nconst contador = ref(0);\n\n// Propiedad computada: se recalcula solo cuando cambia 'contador'\nconst esPar = computed(() => contador.value % 2 === 0);\n\nconst incrementar = () => {\n contador.value++;\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"contador\">\n \u003Ch3>Contador: {{ contador }}\u003C/h3>\n \u003Cp>El número es: {{ esPar ? 'Par' : 'Impar' }}\u003C/p>\n \u003Cbutton @click=\"incrementar\">Incrementar\u003C/button>\n \u003C/div>\n\u003C/template>\n",[26,51161,51162,51172,51184,51188,51193,51209,51213,51218,51248,51252,51266,51274,51278,51286,51290,51298,51313,51325,51338,51356,51364],{"__ignoreMap":9},[286,51163,51164,51166,51168,51170],{"class":288,"line":289},[286,51165,293],{"class":292},[286,51167,297],{"class":296},[286,51169,301],{"class":300},[286,51171,314],{"class":292},[286,51173,51174,51176,51178,51180,51182],{"class":288,"line":317},[286,51175,321],{"class":320},[286,51177,12369],{"class":292},[286,51179,327],{"class":320},[286,51181,45697],{"class":310},[286,51183,18158],{"class":292},[286,51185,51186],{"class":288,"line":333},[286,51187,336],{"emptyLinePlaceholder":6},[286,51189,51190],{"class":288,"line":339},[286,51191,51192],{"class":12748},"// Estado reactivo simple\n",[286,51194,51195,51197,51199,51201,51203,51205,51207],{"class":288,"line":354},[286,51196,413],{"class":320},[286,51198,50417],{"class":364},[286,51200,348],{"class":320},[286,51202,421],{"class":300},[286,51204,456],{"class":292},[286,51206,3549],{"class":364},[286,51208,18284],{"class":292},[286,51210,51211],{"class":288,"line":368},[286,51212,336],{"emptyLinePlaceholder":6},[286,51214,51215],{"class":288,"line":379},[286,51216,51217],{"class":12748},"// Propiedad computada: se recalcula solo cuando cambia 'contador'\n",[286,51219,51220,51222,51225,51227,51229,51231,51233,51236,51239,51241,51244,51246],{"class":288,"line":389},[286,51221,413],{"class":320},[286,51223,51224],{"class":364}," esPar",[286,51226,348],{"class":320},[286,51228,2207],{"class":300},[286,51230,2210],{"class":292},[286,51232,609],{"class":320},[286,51234,51235],{"class":292}," contador.value ",[286,51237,51238],{"class":320},"%",[286,51240,12417],{"class":364},[286,51242,51243],{"class":320}," ===",[286,51245,38891],{"class":364},[286,51247,18284],{"class":292},[286,51249,51250],{"class":288,"line":399},[286,51251,336],{"emptyLinePlaceholder":6},[286,51253,51254,51256,51258,51260,51262,51264],{"class":288,"line":405},[286,51255,413],{"class":320},[286,51257,48762],{"class":300},[286,51259,348],{"class":320},[286,51261,606],{"class":292},[286,51263,609],{"class":320},[286,51265,351],{"class":292},[286,51267,51268,51270,51272],{"class":288,"line":410},[286,51269,50455],{"class":292},[286,51271,48778],{"class":320},[286,51273,18158],{"class":292},[286,51275,51276],{"class":288,"line":444},[286,51277,18262],{"class":292},[286,51279,51280,51282,51284],{"class":288,"line":464},[286,51281,793],{"class":292},[286,51283,297],{"class":296},[286,51285,314],{"class":292},[286,51287,51288],{"class":288,"line":469},[286,51289,336],{"emptyLinePlaceholder":6},[286,51291,51292,51294,51296],{"class":288,"line":484},[286,51293,293],{"class":292},[286,51295,810],{"class":296},[286,51297,314],{"class":292},[286,51299,51300,51302,51304,51306,51308,51311],{"class":288,"line":508},[286,51301,818],{"class":292},[286,51303,4208],{"class":296},[286,51305,824],{"class":300},[286,51307,307],{"class":292},[286,51309,51310],{"class":310},"\"contador\"",[286,51312,314],{"class":292},[286,51314,51315,51317,51319,51321,51323],{"class":288,"line":513},[286,51316,837],{"class":292},[286,51318,202],{"class":296},[286,51320,50341],{"class":292},[286,51322,202],{"class":296},[286,51324,314],{"class":292},[286,51326,51327,51329,51331,51334,51336],{"class":288,"line":528},[286,51328,837],{"class":292},[286,51330,31],{"class":296},[286,51332,51333],{"class":292},">El número es: {{ esPar ? 'Par' : 'Impar' }}\u003C/",[286,51335,31],{"class":296},[286,51337,314],{"class":292},[286,51339,51340,51342,51344,51346,51348,51350,51352,51354],{"class":288,"line":547},[286,51341,837],{"class":292},[286,51343,4274],{"class":296},[286,51345,4285],{"class":300},[286,51347,307],{"class":292},[286,51349,48817],{"class":310},[286,51351,44699],{"class":292},[286,51353,4274],{"class":296},[286,51355,314],{"class":292},[286,51357,51358,51360,51362],{"class":288,"line":553},[286,51359,962],{"class":292},[286,51361,4208],{"class":296},[286,51363,314],{"class":292},[286,51365,51366,51368,51370],{"class":288,"line":558},[286,51367,793],{"class":292},[286,51369,810],{"class":296},[286,51371,314],{"class":292},[277,51373,51375],{"className":279,"code":51374,"filename":979,"language":282,"meta":9,"style":9},"\u003Cscript>\nexport default {\n data() {\n return {\n contador: 0\n };\n },\n computed: {\n esPar() {\n return this.contador % 2 === 0;\n }\n },\n methods: {\n incrementar() {\n this.contador++;\n }\n }\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"contador\">\n \u003Ch3>Contador: {{ contador }}\u003C/h3>\n \u003Cp>El número es: {{ esPar ? 'Par' : 'Impar' }}\u003C/p>\n \u003Cbutton @click=\"incrementar\">Incrementar\u003C/button>\n \u003C/div>\n\u003C/template>\n",[26,51376,51377,51385,51393,51399,51405,51411,51415,51419,51423,51430,51449,51453,51457,51461,51467,51477,51481,51485,51489,51497,51501,51509,51523,51535,51547,51565,51573],{"__ignoreMap":9},[286,51378,51379,51381,51383],{"class":288,"line":289},[286,51380,293],{"class":292},[286,51382,297],{"class":296},[286,51384,314],{"class":292},[286,51386,51387,51389,51391],{"class":288,"line":317},[286,51388,1065],{"class":320},[286,51390,1068],{"class":320},[286,51392,351],{"class":292},[286,51394,51395,51397],{"class":288,"line":333},[286,51396,1094],{"class":300},[286,51398,481],{"class":292},[286,51400,51401,51403],{"class":288,"line":339},[286,51402,1101],{"class":320},[286,51404,351],{"class":292},[286,51406,51407,51409],{"class":288,"line":354},[286,51408,50678],{"class":292},[286,51410,4699],{"class":364},[286,51412,51413],{"class":288,"line":368},[286,51414,18485],{"class":292},[286,51416,51417],{"class":288,"line":379},[286,51418,1139],{"class":292},[286,51420,51421],{"class":288,"line":389},[286,51422,2749],{"class":292},[286,51424,51425,51428],{"class":288,"line":399},[286,51426,51427],{"class":300}," esPar",[286,51429,481],{"class":292},[286,51431,51432,51434,51436,51439,51441,51443,51445,51447],{"class":288,"line":405},[286,51433,2761],{"class":320},[286,51435,1276],{"class":364},[286,51437,51438],{"class":292},".contador ",[286,51440,51238],{"class":320},[286,51442,12417],{"class":364},[286,51444,51243],{"class":320},[286,51446,38891],{"class":364},[286,51448,18158],{"class":292},[286,51450,51451],{"class":288,"line":410},[286,51452,1134],{"class":292},[286,51454,51455],{"class":288,"line":444},[286,51456,1139],{"class":292},[286,51458,51459],{"class":288,"line":464},[286,51460,1148],{"class":292},[286,51462,51463,51465],{"class":288,"line":469},[286,51464,48899],{"class":300},[286,51466,481],{"class":292},[286,51468,51469,51471,51473,51475],{"class":288,"line":484},[286,51470,1220],{"class":364},[286,51472,50705],{"class":292},[286,51474,48778],{"class":320},[286,51476,18158],{"class":292},[286,51478,51479],{"class":288,"line":508},[286,51480,1134],{"class":292},[286,51482,51483],{"class":288,"line":513},[286,51484,550],{"class":292},[286,51486,51487],{"class":288,"line":528},[286,51488,18262],{"class":292},[286,51490,51491,51493,51495],{"class":288,"line":547},[286,51492,793],{"class":292},[286,51494,297],{"class":296},[286,51496,314],{"class":292},[286,51498,51499],{"class":288,"line":553},[286,51500,336],{"emptyLinePlaceholder":6},[286,51502,51503,51505,51507],{"class":288,"line":558},[286,51504,293],{"class":292},[286,51506,810],{"class":296},[286,51508,314],{"class":292},[286,51510,51511,51513,51515,51517,51519,51521],{"class":288,"line":586},[286,51512,818],{"class":292},[286,51514,4208],{"class":296},[286,51516,824],{"class":300},[286,51518,307],{"class":292},[286,51520,51310],{"class":310},[286,51522,314],{"class":292},[286,51524,51525,51527,51529,51531,51533],{"class":288,"line":591},[286,51526,837],{"class":292},[286,51528,202],{"class":296},[286,51530,50341],{"class":292},[286,51532,202],{"class":296},[286,51534,314],{"class":292},[286,51536,51537,51539,51541,51543,51545],{"class":288,"line":596},[286,51538,837],{"class":292},[286,51540,31],{"class":296},[286,51542,51333],{"class":292},[286,51544,31],{"class":296},[286,51546,314],{"class":292},[286,51548,51549,51551,51553,51555,51557,51559,51561,51563],{"class":288,"line":614},[286,51550,837],{"class":292},[286,51552,4274],{"class":296},[286,51554,4285],{"class":300},[286,51556,307],{"class":292},[286,51558,48817],{"class":310},[286,51560,44699],{"class":292},[286,51562,4274],{"class":296},[286,51564,314],{"class":292},[286,51566,51567,51569,51571],{"class":288,"line":622},[286,51568,962],{"class":292},[286,51570,4208],{"class":296},[286,51572,314],{"class":292},[286,51574,51575,51577,51579],{"class":288,"line":633},[286,51576,793],{"class":292},[286,51578,810],{"class":296},[286,51580,314],{"class":292},[31,51582,51583,51584,51587,51588,51591],{},"Este simple ejemplo demuestra cómo Vue rastrea automáticamente las dependencias: cuando ",[26,51585,51586],{},"contador"," cambia, tanto la visualización del número como la propiedad computada ",[26,51589,51590],{},"esPar"," se actualizan sin intervención manual.",[40,51593,51595],{"id":51594},"versatilidad-de-apis-options-vs-composition","Versatilidad de APIs: Options vs. Composition",[31,51597,51598],{},"Una de las mayores fortalezas de Vue es su dualidad, adaptándose al nivel de experiencia del equipo y a la escala del problema:",[202,51600,51602],{"id":51601},"options-api",[82,51603,51604],{},"Options API:",[48,51606,51607],{},[51,51608,51609,51610,235,51612,235,51614,51616],{},"La forma clásica. Organiza el código por \"opciones\" (",[26,51611,12066],{},[26,51613,12075],{},[26,51615,1739],{},"). Es extremadamente legible y recomendada para quienes están haciendo la transición desde HTML/JS básico o jQuery.",[202,51618,51620],{"id":51619},"composition-api",[82,51621,51017],{},[48,51623,51624],{},[51,51625,51626,51627,51629,51630,114],{},"Introducida en Vue 3, permite agrupar la lógica por funcionalidades en lugar de por tipos de opción. Es la herramienta definitiva para proyectos grandes, ya que facilita la creación de lógica reutilizable (",[82,51628,13476],{},") y ofrece una integración nativa y robusta con ",[82,51631,50092],{},[40,51633,51635],{"id":51634},"por-qué-elegir-vuejs-hoy","¿Por qué elegir Vue.js hoy?",[202,51637,51639],{"id":51638},"curva-de-aprendizaje-amable",[82,51640,51641],{},"Curva de aprendizaje amable:",[48,51643,51644],{},[51,51645,51646],{},"Si dominas los fundamentos de la web (HTML, CSS y JS), serás productivo en Vue en cuestión de horas. Su sintaxis de plantillas (Templates) es familiar y reduce la carga cognitiva.",[202,51648,51650],{"id":51649},"ecosistema-unificado",[82,51651,51652],{},"Ecosistema Unificado:",[48,51654,51655],{},[51,51656,51657,51658,51660,51661,51663,51664,51667],{},"El equipo oficial de Vue mantiene las herramientas críticas: ",[82,51659,49913],{}," (el bundler más rápido del mercado), ",[82,51662,50962],{}," (estado) y ",[82,51665,51666],{},"Router",". Esto garantiza que todas las piezas encajen perfectamente tras cada actualización.",[202,51669,51671],{"id":51670},"rendimiento-de-élite",[82,51672,51673],{},"Rendimiento de Élite:",[48,51675,51676],{},[51,51677,51678],{},"Gracias a un compilador inteligente que optimiza las plantillas en tiempo de construcción, Vue genera un código de ejecución ligero que suele superar en velocidad a frameworks con mayor cuota de mercado.",[202,51680,51682],{"id":51681},"documentación-de-referencia",[82,51683,51684],{},"Documentación de referencia:",[48,51686,51687],{},[51,51688,51689],{},"Es ampliamente considerada como el estándar de oro en la industria por ser clara, estar siempre actualizada y ofrecer ejemplos que funcionan \"a la primera\".",[40,51691,17678],{"id":17677},[31,51693,51694],{},"Vue.js no intenta reinventar la web, sino hacer que trabajar en ella sea más placentero y eficiente. Es la elección lógica si buscas un framework que crezca con tu proyecto, ofreciendo la flexibilidad de una pequeña librería con la potencia de un entorno empresarial de alto nivel.",[31,51696,51697],{},"Ya sea que estés construyendo tu primera aplicación web o migrando un proyecto legacy, Vue te acompaña en cada etapa sin imponerte decisiones arquitectónicas prematuras. Su comunidad activa, el soporte corporativo de empresas como Alibaba y la constante innovación del equipo core garantizan que Vue seguirá siendo relevante en los años venideros.",[1614,51699,51700],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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":9,"searchDepth":317,"depth":317,"links":51702},[51703,51707,51708,51712,51718],{"id":51111,"depth":317,"text":51112,"children":51704},[51705,51706],{"id":51121,"depth":333,"text":51124},{"id":51132,"depth":333,"text":51135},{"id":51149,"depth":317,"text":51150},{"id":51594,"depth":317,"text":51595,"children":51709},[51710,51711],{"id":51601,"depth":333,"text":51604},{"id":51619,"depth":333,"text":51017},{"id":51634,"depth":317,"text":51635,"children":51713},[51714,51715,51716,51717],{"id":51638,"depth":333,"text":51641},{"id":51649,"depth":333,"text":51652},{"id":51670,"depth":333,"text":51673},{"id":51681,"depth":333,"text":51684},{"id":17677,"depth":317,"text":17678},"https://res.cloudinary.com/denj4fg7f/image/upload/v1766098457/Que_es_Vue_y_por_que_deberias_usarlo_tmowoz.png","2025-12-18","Descubre Vue.js, un framework progresivo de JavaScript, y aprende por qué es una excelente opción para desarrollar aplicaciones web modernas y reactivas.",{"script":51723},[51724],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":51725},[51726],{"headline":51087,"author":51727,"datePublished":51728,"@type":1647},{"name":1644,"@type":1645},"2025-12-18T00:00:00-05",{"updatedAt":46383,"coverCaption":51730,"author":1644,"keywords":51731},"Explorando Vue.js: El framework progresivo para la web moderna","vue.js, javascript, framework, frontend, spa, reactividad, composition api, vue 3","/blog/what-is-vue-js-and-why-you-should-use-it.es",[51734],{"headline":51087,"author":51735,"datePublished":51728,"@type":1647},{"name":1644,"@type":1645},{"title":51087,"description":51721},"blog/what-is-vue-js-and-why-you-should-use-it.es",[51739,51740,51741],{"tag":49895,"color":49896},{"tag":9081,"color":9082},{"tag":49024,"color":49025},"dlcnS8xScY4fwq-IMUdSPpUBggTkLlzZ3njwEGhyCv8",{"id":51744,"title":51745,"body":51746,"cover":51901,"coverAlt":51902,"date":51903,"description":51904,"draft":12,"extension":1635,"head":51905,"locale":1648,"meta":51912,"navigation":6,"path":51914,"schemaOrg":51915,"seo":51918,"series":1663,"seriesDescription":1663,"seriesOrder":1663,"seriesTitle":1663,"slug":1663,"stem":51919,"tags":51920,"__hash__":51926},"blog/blog/welcome-to-todovue.es.md","TODOvue: Un espacio dedicado al ecosistema de Vue.js",{"type":18,"value":51747,"toc":51895},[51748,51754,51760,51770,51774,51777,51828,51832,51838,51845,51852,51856,51870,51874,51880,51883,51885],[21,51749,51751,51752,522],{"id":51750},"bienvenidos-a-todovue","¡Bienvenidos a ",[82,51753,1644],{},[31,51755,51756,51757,51759],{},"Este espacio nace de una necesidad clara: establecer un punto de encuentro para desarrolladores que, al igual que yo, encuentran en el ecosistema de ",[82,51758,1652],{}," una de las herramientas más potentes, elegantes y eficientes para construir la web moderna.",[31,51761,51762,51764,51765,235,51767,51769],{},[82,51763,1644],{}," no es solo un blog; es un proyecto técnico dedicado a desglosar cada rincón de ",[82,51766,13121],{},[82,51768,123],{}," y el abanico de librerías que optimizan nuestro flujo de trabajo diario.",[40,51771,51773],{"id":51772},"qué-esperar-de-este-blog","¿Qué esperar de este blog?",[31,51775,51776],{},"Nuestro objetivo es trascender los tutoriales introductorios. En TODOvue profundizaremos en pilares fundamentales para el desarrollo profesional:",[48,51778,51779,51790,51805,51815],{},[51,51780,51781,51784,51785,51787,51788,114],{},[82,51782,51783],{},"Patrones de Diseño y Composición",": Uso avanzado de la ",[82,51786,281],{},", patrones de reusabilidad y diseño de ",[3299,51789,12337],{},[51,51791,51792,51795,51796,235,51798,235,51801,51804],{},[82,51793,51794],{},"Ecosistema Nuxt",": Estrategias de renderizado avanzado (",[82,51797,1653],{},[82,51799,51800],{},"SSG",[82,51802,51803],{},"Hybrid Rendering / ISR","), gestión de módulos y despliegue optimizado.",[51,51806,51807,51810,51811,51814],{},[82,51808,51809],{},"Rendimiento y Optimización",": Técnicas de ",[3299,51812,51813],{},"code-splitting",", optimización de bundles y estrategias para alcanzar la máxima velocidad en el lado del cliente.",[51,51816,51817,51820,51821,235,51823,235,51825,51827],{},[82,51818,51819],{},"Herramientas y Librerías",": Análisis profundo de ",[82,51822,50962],{},[82,51824,50954],{},[82,51826,49913],{}," y las propuestas emergentes más disruptivas de la comunidad.",[40,51829,51831],{"id":51830},"dogfooding-construido-con-lo-que-enseñamos","\"Dogfooding\": Construido con lo que enseñamos",[31,51833,51834,51835,114],{},"Un aspecto diferencial de este blog es su propia arquitectura. Todo lo que interactúa en esta plataforma ha sido desarrollado bajo los principios de ",[82,51836,51837],{},"Atomic Design",[31,51839,51840,51841,51844],{},"He decidido que cada pieza de TODOvue —desde los átomos (botones) hasta el motor de renderizado de artículos— funcione como un componente independiente publicado en ",[82,51842,51843],{},"NPM",". Aunque el foco principal es el contenido educativo, la infraestructura es totalmente transparente y abierta para quienes deseen integrarla en sus propios proyectos.",[31,51846,51847,51848,51851],{},"Creemos en el ",[82,51849,51850],{},"Open Source"," no solo como una filosofía, sino como una práctica de ingeniería. Si un componente es lo suficientemente robusto para dar vida a este blog, debe estar disponible para la comunidad en el registro de NPM.",[40,51853,51855],{"id":51854},"por-qué-ahora","¿Por qué ahora?",[31,51857,51858,51859,51861,51862,51865,51866,51869],{},"Vue 3 ha alcanzado un estado de madurez excepcional. Gracias a la adopción de ",[26,51860,19257],{},", la estabilidad de Nuxt 3 y la velocidad de Vite, el desarrollo ",[3299,51863,51864],{},"frontend"," nunca ha sido tan gratificante. Sin embargo, la evolución es constante: surgen nuevos retos, ",[3299,51867,51868],{},"breaking changes"," y patrones de arquitectura que merecen ser documentados y analizados con rigor técnico.",[40,51871,51873],{"id":51872},"únete-a-la-conversación","Únete a la conversación",[31,51875,51876,51877,51879],{},"Este es el inicio de un camino de aprendizaje continuo. ",[82,51878,1644],{}," aspira a ser una fuente de consulta confiable y un espacio de intercambio de conocimientos.",[31,51881,51882],{},"Te invito a explorar el contenido, experimentar con los componentes que alimentan este sitio y, sobre todo, a mantener la curiosidad por este framework que nos apasiona.",[38499,51884],{},[31,51886,51887,51890,51891],{},[82,51888,51889],{},"¿Hay algún tema específico de Vue o Nuxt que te gustaría que tratáramos primero?","\n¡Contáctame! ",[13185,51892,51894],{"href":51893},"mailto:blog@todovue.blog","blog@todovue.blog",{"title":9,"searchDepth":317,"depth":317,"links":51896},[51897,51898,51899,51900],{"id":51772,"depth":317,"text":51773},{"id":51830,"depth":317,"text":51831},{"id":51854,"depth":317,"text":51855},{"id":51872,"depth":317,"text":51873},"https://res.cloudinary.com/denj4fg7f/image/upload/v1766098456/TODOvue_idegxt.png","Logo de TODOvue con código fuente de fondo","2025-12-17","Bienvenidos a TODOvue. Un blog técnico diseñado por y para desarrolladores, donde exploramos a fondo Vue 3, Nuxt y la arquitectura de componentes moderna.",{"script":51906},[51907],{"type":1639,"key":1640,"data-nuxt-schema-org":6,"nodes":51908},[51909],{"headline":51745,"author":51910,"datePublished":51911,"@type":1647},{"name":1644,"@type":1645},"2025-12-17T00:00:00-05:00",{"updatedAt":46383,"coverCaption":51913},"Explorando el universo de Vue.js de principio a fin","/blog/welcome-to-todovue.es",[51916],{"headline":51745,"author":51917,"datePublished":51911,"@type":1647},{"name":1644,"@type":1645},{"title":51745,"description":51904},"blog/welcome-to-todovue.es",[51921,51922,51925],{"tag":1644,"color":49890},{"tag":51923,"color":51924},"Offtopic","#605AD1",{"tag":49895,"color":49896},"BCmOBO-2soGuV9x4K2M7CuS5RcLjexaIWQo_apfWI2k",1774057131929,{},[51930,51931,51932],{"label":16,"url":1655},{"label":1683,"url":3159},{"label":3180,"url":5154},{"_priority":51934,"currentLocale":1648,"defaultLocale":1648,"description":51936,"env":51937,"indexable":6,"name":1644,"trailingSlash":2156,"url":51938},{"name":11,"env":11,"url":11,"description":11,"defaultLocale":11,"trailingSlash":11,"indexable":11,"currentLocale":51935},-2,"Tu guía completa para aprender Vue.js desde cero hasta nivel avanzado","production","https://todovue.blog",["Set"],["ShallowReactive",51941],{"app-menu-posts":-1,"series-index-posts":-1},"/series/",1774057130442]