[{"data":1,"prerenderedAt":1067},["ShallowReactive",2],{"page-\u002Fvue\u002Ftemplate-et-directives":3,"pieces-vue":1024,"autour-\u002Fvue\u002Ftemplate-et-directives":1049,"prerequis-\u002Fvue\u002Ftemplate-et-directives":1054,"plan-vue":1056},{"id":4,"title":5,"body":6,"description":993,"extension":994,"ligne":69,"meta":995,"motsCles":996,"navigation":125,"niveau":997,"path":998,"prerequis":999,"ressources":1001,"seo":1013,"sources":1014,"stem":1022,"__hash__":1023},"docs\u002Fvue\u002F02.template-et-directives.md","Le template et les directives",{"type":7,"value":8,"toc":982},"minimark",[9,14,51,55,64,161,171,175,185,314,328,332,340,490,500,517,521,534,613,620,624,630,680,691,695,700,888,895,899,906,913,923,927,978],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,30,36],"ul",{},[18,19,20,21,25,26,29],"li",{},"Afficher une valeur avec ",[22,23,24],"code",{},"{{ }}"," et lier un attribut avec ",[22,27,28],{},"v-bind",".",[18,31,32,33,29],{},"Réagir à un clic avec ",[22,34,35],{},"v-on",[18,37,38,39,42,43,46,47,50],{},"Afficher selon une condition (",[22,40,41],{},"v-if",") et répéter un élément (",[22,44,45],{},"v-for"," avec ",[22,48,49],{},"key",").",[10,52,54],{"id":53},"afficher-une-valeur-linterpolation","Afficher une valeur : l'interpolation",[56,57,58,59,63],"p",{},"L'",[60,61,62],"strong",{},"interpolation"," insère une valeur JavaScript dans le texte, avec des doubles accolades :",[65,66,71],"pre",{"className":67,"code":68,"language":69,"meta":70,"style":70},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cscript setup>\nconst titre = 'Tarte aux pommes'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch2>Recette : {{ titre }}\u003C\u002Fh2>\n\u003C\u002Ftemplate>\n","vue","",[22,72,73,93,110,120,127,137,152],{"__ignoreMap":70},[74,75,78,82,86,90],"span",{"class":76,"line":77},"line",1,[74,79,81],{"class":80},"scfrF","\u003C",[74,83,85],{"class":84},"s5JFL","script",[74,87,89],{"class":88},"s5iOY"," setup",[74,91,92],{"class":80},">\n",[74,94,96,100,103,106],{"class":76,"line":95},2,[74,97,99],{"class":98},"sOnC1","const",[74,101,102],{"class":88}," titre",[74,104,105],{"class":98}," =",[74,107,109],{"class":108},"shWOn"," 'Tarte aux pommes'\n",[74,111,113,116,118],{"class":76,"line":112},3,[74,114,115],{"class":80},"\u003C\u002F",[74,117,85],{"class":84},[74,119,92],{"class":80},[74,121,123],{"class":76,"line":122},4,[74,124,126],{"emptyLinePlaceholder":125},true,"\n",[74,128,130,132,135],{"class":76,"line":129},5,[74,131,81],{"class":80},[74,133,134],{"class":84},"template",[74,136,92],{"class":80},[74,138,140,143,145,148,150],{"class":76,"line":139},6,[74,141,142],{"class":80},"  \u003C",[74,144,10],{"class":84},[74,146,147],{"class":80},">Recette : {{ titre }}\u003C\u002F",[74,149,10],{"class":84},[74,151,92],{"class":80},[74,153,155,157,159],{"class":76,"line":154},7,[74,156,115],{"class":80},[74,158,134],{"class":84},[74,160,92],{"class":80},[56,162,163,164,167,168,29],{},"Si ",[22,165,166],{},"titre"," change, le texte se met à jour. Entre les accolades, tu peux écrire une expression JavaScript, par exemple ",[22,169,170],{},"{{ titre.toUpperCase() }}",[10,172,174],{"id":173},"lier-un-attribut-v-bind","Lier un attribut : v-bind",[56,176,177,178,181,182,29],{},"Les accolades ne fonctionnent pas dans un attribut HTML. Pour y mettre une valeur JavaScript, on utilise une ",[60,179,180],{},"directive"," : un attribut spécial de Vue, qui commence par ",[22,183,184],{},"v-",[65,186,188],{"className":67,"code":187,"language":69,"meta":70,"style":70},"\u003Cscript setup>\nconst image = '\u002Ftarte.jpg'\nconst id = 'photo-tarte'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cimg v-bind:src=\"image\" alt=\"Une tarte\" \u002F>\n  \u003Cimg :src=\"image\" alt=\"Une tarte\" \u002F>\n  \u003Cimg :id \u002F>\n\u003C\u002Ftemplate>\n",[22,189,190,200,212,224,232,236,244,271,293,305],{"__ignoreMap":70},[74,191,192,194,196,198],{"class":76,"line":77},[74,193,81],{"class":80},[74,195,85],{"class":84},[74,197,89],{"class":88},[74,199,92],{"class":80},[74,201,202,204,207,209],{"class":76,"line":95},[74,203,99],{"class":98},[74,205,206],{"class":88}," image",[74,208,105],{"class":98},[74,210,211],{"class":108}," '\u002Ftarte.jpg'\n",[74,213,214,216,219,221],{"class":76,"line":112},[74,215,99],{"class":98},[74,217,218],{"class":88}," id",[74,220,105],{"class":98},[74,222,223],{"class":108}," 'photo-tarte'\n",[74,225,226,228,230],{"class":76,"line":122},[74,227,115],{"class":80},[74,229,85],{"class":84},[74,231,92],{"class":80},[74,233,234],{"class":76,"line":129},[74,235,126],{"emptyLinePlaceholder":125},[74,237,238,240,242],{"class":76,"line":139},[74,239,81],{"class":80},[74,241,134],{"class":84},[74,243,92],{"class":80},[74,245,246,248,251,254,257,260,263,265,268],{"class":76,"line":154},[74,247,142],{"class":80},[74,249,250],{"class":84},"img",[74,252,253],{"class":88}," v-bind:src",[74,255,256],{"class":80},"=",[74,258,259],{"class":108},"\"image\"",[74,261,262],{"class":88}," alt",[74,264,256],{"class":80},[74,266,267],{"class":108},"\"Une tarte\"",[74,269,270],{"class":80}," \u002F>\n",[74,272,274,276,278,281,283,285,287,289,291],{"class":76,"line":273},8,[74,275,142],{"class":80},[74,277,250],{"class":84},[74,279,280],{"class":88}," :src",[74,282,256],{"class":80},[74,284,259],{"class":108},[74,286,262],{"class":88},[74,288,256],{"class":80},[74,290,267],{"class":108},[74,292,270],{"class":80},[74,294,296,298,300,303],{"class":76,"line":295},9,[74,297,142],{"class":80},[74,299,250],{"class":84},[74,301,302],{"class":88}," :id",[74,304,270],{"class":80},[74,306,308,310,312],{"class":76,"line":307},10,[74,309,115],{"class":80},[74,311,134],{"class":84},[74,313,92],{"class":80},[56,315,316,319,320,323,324,327],{},[22,317,318],{},"v-bind:src"," se raccourcit en ",[22,321,322],{},":src",". Quand le nom de l'attribut est le même que celui de la variable, on peut même écrire ",[22,325,326],{},":id",", comme dans la dernière ligne (Vue 3.4 et suivants).",[10,329,331],{"id":330},"réagir-à-un-événement-v-on","Réagir à un événement : v-on",[56,333,334,336,337,29],{},[22,335,35],{}," attache une fonction à un événement du navigateur. Son raccourci est ",[22,338,339],{},"@",[65,341,343],{"className":67,"code":342,"language":69,"meta":70,"style":70},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst portions = ref(4)\n\nfunction ajouter() {\n  portions.value++\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>Pour {{ portions }} personnes\u003C\u002Fp>\n  \u003Cbutton @click=\"ajouter\">Une portion de plus\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[22,344,345,355,369,373,395,399,410,418,423,431,435,444,458,481],{"__ignoreMap":70},[74,346,347,349,351,353],{"class":76,"line":77},[74,348,81],{"class":80},[74,350,85],{"class":84},[74,352,89],{"class":88},[74,354,92],{"class":80},[74,356,357,360,363,366],{"class":76,"line":95},[74,358,359],{"class":98},"import",[74,361,362],{"class":80}," { ref } ",[74,364,365],{"class":98},"from",[74,367,368],{"class":108}," 'vue'\n",[74,370,371],{"class":76,"line":112},[74,372,126],{"emptyLinePlaceholder":125},[74,374,375,377,380,382,386,389,392],{"class":76,"line":122},[74,376,99],{"class":98},[74,378,379],{"class":88}," portions",[74,381,105],{"class":98},[74,383,385],{"class":384},"syCW7"," ref",[74,387,388],{"class":80},"(",[74,390,391],{"class":88},"4",[74,393,394],{"class":80},")\n",[74,396,397],{"class":76,"line":129},[74,398,126],{"emptyLinePlaceholder":125},[74,400,401,404,407],{"class":76,"line":139},[74,402,403],{"class":98},"function",[74,405,406],{"class":384}," ajouter",[74,408,409],{"class":80},"() {\n",[74,411,412,415],{"class":76,"line":154},[74,413,414],{"class":80},"  portions.value",[74,416,417],{"class":98},"++\n",[74,419,420],{"class":76,"line":273},[74,421,422],{"class":80},"}\n",[74,424,425,427,429],{"class":76,"line":295},[74,426,115],{"class":80},[74,428,85],{"class":84},[74,430,92],{"class":80},[74,432,433],{"class":76,"line":307},[74,434,126],{"emptyLinePlaceholder":125},[74,436,438,440,442],{"class":76,"line":437},11,[74,439,81],{"class":80},[74,441,134],{"class":84},[74,443,92],{"class":80},[74,445,447,449,451,454,456],{"class":76,"line":446},12,[74,448,142],{"class":80},[74,450,56],{"class":84},[74,452,453],{"class":80},">Pour {{ portions }} personnes\u003C\u002F",[74,455,56],{"class":84},[74,457,92],{"class":80},[74,459,461,463,466,469,471,474,477,479],{"class":76,"line":460},13,[74,462,142],{"class":80},[74,464,465],{"class":84},"button",[74,467,468],{"class":88}," @click",[74,470,256],{"class":80},[74,472,473],{"class":108},"\"ajouter\"",[74,475,476],{"class":80},">Une portion de plus\u003C\u002F",[74,478,465],{"class":84},[74,480,92],{"class":80},[74,482,484,486,488],{"class":76,"line":483},14,[74,485,115],{"class":80},[74,487,134],{"class":84},[74,489,92],{"class":80},[56,491,492,493,496,497,50],{},"Entre guillemets, tu peux donner un nom de fonction (",[22,494,495],{},"@click=\"ajouter\"",") ou une courte instruction (",[22,498,499],{},"@click=\"portions++\"",[501,502,503],"note",{},[56,504,505,506,509,510,513,514,516],{},"Dans le script, un ",[22,507,508],{},"ref"," se lit avec ",[22,511,512],{},".value",". Dans le template, Vue enlève ce ",[22,515,512],{}," pour toi. La réactivité est détaillée au prochain chapitre.",[10,518,520],{"id":519},"afficher-selon-une-condition-v-if","Afficher selon une condition : v-if",[56,522,523,525,526,529,530,533],{},[22,524,41],{}," affiche l'élément seulement si la condition est vraie. ",[22,527,528],{},"v-else-if"," et ",[22,531,532],{},"v-else"," donnent les autres cas.",[65,535,537],{"className":67,"code":536,"language":69,"meta":70,"style":70},"\u003Ctemplate>\n  \u003Cp v-if=\"portions > 8\">Recette pour un banquet\u003C\u002Fp>\n  \u003Cp v-else-if=\"portions > 2\">Recette pour la famille\u003C\u002Fp>\n  \u003Cp v-else>Recette pour une ou deux personnes\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[22,538,539,547,568,589,605],{"__ignoreMap":70},[74,540,541,543,545],{"class":76,"line":77},[74,542,81],{"class":80},[74,544,134],{"class":84},[74,546,92],{"class":80},[74,548,549,551,553,556,558,561,564,566],{"class":76,"line":95},[74,550,142],{"class":80},[74,552,56],{"class":84},[74,554,555],{"class":88}," v-if",[74,557,256],{"class":80},[74,559,560],{"class":108},"\"portions > 8\"",[74,562,563],{"class":80},">Recette pour un banquet\u003C\u002F",[74,565,56],{"class":84},[74,567,92],{"class":80},[74,569,570,572,574,577,579,582,585,587],{"class":76,"line":112},[74,571,142],{"class":80},[74,573,56],{"class":84},[74,575,576],{"class":88}," v-else-if",[74,578,256],{"class":80},[74,580,581],{"class":108},"\"portions > 2\"",[74,583,584],{"class":80},">Recette pour la famille\u003C\u002F",[74,586,56],{"class":84},[74,588,92],{"class":80},[74,590,591,593,595,598,601,603],{"class":76,"line":122},[74,592,142],{"class":80},[74,594,56],{"class":84},[74,596,597],{"class":88}," v-else",[74,599,600],{"class":80},">Recette pour une ou deux personnes\u003C\u002F",[74,602,56],{"class":84},[74,604,92],{"class":80},[74,606,607,609,611],{"class":76,"line":129},[74,608,115],{"class":80},[74,610,134],{"class":84},[74,612,92],{"class":80},[56,614,615,616,619],{},"Pour conditionner plusieurs éléments à la fois, entoure-les d'un ",[22,617,618],{},"\u003Ctemplate v-if=\"...\">",". Cette balise n'apparaît pas dans la page finale.",[10,621,623],{"id":622},"v-if-ou-v-show","v-if ou v-show ?",[56,625,626,629],{},[22,627,628],{},"v-show"," affiche aussi selon une condition, mais d'une autre manière.",[631,632,633,649],"table",{},[634,635,636],"thead",{},[637,638,639,643,646],"tr",{},[640,641,642],"th",{},"Directive",[640,644,645],{},"Ce qu'elle fait",[640,647,648],{},"Pour quel usage",[650,651,652,665],"tbody",{},[637,653,654,659,662],{},[655,656,657],"td",{},[22,658,41],{},[655,660,661],{},"Crée ou détruit l'élément.",[655,663,664],{},"Une condition qui change rarement.",[637,666,667,671,677],{},[655,668,669],{},[22,670,628],{},[655,672,673,674,29],{},"Garde l'élément, change son CSS ",[22,675,676],{},"display",[655,678,679],{},"Un affichage qui bascule souvent.",[56,681,682,684,685,688,689,29],{},[22,683,628],{}," ne fonctionne pas sur ",[22,686,687],{},"\u003Ctemplate>"," et ne se combine pas avec ",[22,690,532],{},[10,692,694],{"id":693},"répéter-un-élément-v-for","Répéter un élément : v-for",[56,696,697,699],{},[22,698,45],{}," crée un élément par entrée d'un tableau.",[65,701,704],{"className":67,"code":702,"filename":703,"language":69,"meta":70,"style":70},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst recettes = ref([\n  { id: 1, nom: 'Tarte aux pommes' },\n  { id: 2, nom: 'Soupe à l\\'oignon' },\n  { id: 3, nom: 'Crêpes' }\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul>\n    \u003Cli v-for=\"recette in recettes\" :key=\"recette.id\">\n      {{ recette.nom }}\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FListeRecettes.vue",[22,705,706,716,726,730,744,761,781,796,801,809,813,821,829,854,859,869,879],{"__ignoreMap":70},[74,707,708,710,712,714],{"class":76,"line":77},[74,709,81],{"class":80},[74,711,85],{"class":84},[74,713,89],{"class":88},[74,715,92],{"class":80},[74,717,718,720,722,724],{"class":76,"line":95},[74,719,359],{"class":98},[74,721,362],{"class":80},[74,723,365],{"class":98},[74,725,368],{"class":108},[74,727,728],{"class":76,"line":112},[74,729,126],{"emptyLinePlaceholder":125},[74,731,732,734,737,739,741],{"class":76,"line":122},[74,733,99],{"class":98},[74,735,736],{"class":88}," recettes",[74,738,105],{"class":98},[74,740,385],{"class":384},[74,742,743],{"class":80},"([\n",[74,745,746,749,752,755,758],{"class":76,"line":129},[74,747,748],{"class":80},"  { id: ",[74,750,751],{"class":88},"1",[74,753,754],{"class":80},", nom: ",[74,756,757],{"class":108},"'Tarte aux pommes'",[74,759,760],{"class":80}," },\n",[74,762,763,765,768,770,773,776,779],{"class":76,"line":139},[74,764,748],{"class":80},[74,766,767],{"class":88},"2",[74,769,754],{"class":80},[74,771,772],{"class":108},"'Soupe à l",[74,774,775],{"class":98},"\\'",[74,777,778],{"class":108},"oignon'",[74,780,760],{"class":80},[74,782,783,785,788,790,793],{"class":76,"line":154},[74,784,748],{"class":80},[74,786,787],{"class":88},"3",[74,789,754],{"class":80},[74,791,792],{"class":108},"'Crêpes'",[74,794,795],{"class":80}," }\n",[74,797,798],{"class":76,"line":273},[74,799,800],{"class":80},"])\n",[74,802,803,805,807],{"class":76,"line":295},[74,804,115],{"class":80},[74,806,85],{"class":84},[74,808,92],{"class":80},[74,810,811],{"class":76,"line":307},[74,812,126],{"emptyLinePlaceholder":125},[74,814,815,817,819],{"class":76,"line":437},[74,816,81],{"class":80},[74,818,134],{"class":84},[74,820,92],{"class":80},[74,822,823,825,827],{"class":76,"line":446},[74,824,142],{"class":80},[74,826,15],{"class":84},[74,828,92],{"class":80},[74,830,831,834,836,839,841,844,847,849,852],{"class":76,"line":460},[74,832,833],{"class":80},"    \u003C",[74,835,18],{"class":84},[74,837,838],{"class":88}," v-for",[74,840,256],{"class":80},[74,842,843],{"class":108},"\"recette in recettes\"",[74,845,846],{"class":88}," :key",[74,848,256],{"class":80},[74,850,851],{"class":108},"\"recette.id\"",[74,853,92],{"class":80},[74,855,856],{"class":76,"line":483},[74,857,858],{"class":80},"      {{ recette.nom }}\n",[74,860,862,865,867],{"class":76,"line":861},15,[74,863,864],{"class":80},"    \u003C\u002F",[74,866,18],{"class":84},[74,868,92],{"class":80},[74,870,872,875,877],{"class":76,"line":871},16,[74,873,874],{"class":80},"  \u003C\u002F",[74,876,15],{"class":84},[74,878,92],{"class":80},[74,880,882,884,886],{"class":76,"line":881},17,[74,883,115],{"class":80},[74,885,134],{"class":84},[74,887,92],{"class":80},[56,889,890,891,894],{},"Pour récupérer aussi la position, écris ",[22,892,893],{},"v-for=\"(recette, index) in recettes\"",". L'index commence à 0.",[10,896,898],{"id":897},"pourquoi-la-key","Pourquoi la key ?",[56,900,901,902,905],{},"L'attribut ",[22,903,904],{},":key"," donne à chaque élément une identité unique. Sans lui, Vue réutilise les éléments existants dans l'ordre. C'est gênant si les éléments contiennent des composants ou des champs de saisie : le texte tapé dans un champ peut se retrouver dans la mauvaise ligne après un tri.",[56,907,908,909,912],{},"Prends un identifiant propre à chaque donnée, comme ",[22,910,911],{},"recette.id",". La clé doit être un nombre ou du texte, pas un objet.",[914,915,916],"warning",{},[56,917,918,919,922],{},"N'utilise ",[22,920,921],{},"v-html"," (qui insère du HTML brut) que sur du contenu de confiance, jamais sur du texte saisi par un visiteur : c'est une porte ouverte aux attaques XSS.",[10,924,926],{"id":925},"à-retenir","À retenir",[15,928,929,939,951,964,973],{},[18,930,931,934,935,938],{},[22,932,933],{},"{{ valeur }}"," affiche une valeur dans le texte, ",[22,936,937],{},":attribut=\"valeur\""," dans un attribut.",[18,940,941,944,945,947,948,29],{},[22,942,943],{},"@click=\"fonction\""," écoute un événement, ",[22,946,339],{}," est le raccourci de ",[22,949,950],{},"v-on:",[18,952,953,955,956,529,958,960,961,963],{},[22,954,41],{},", ",[22,957,528],{},[22,959,532],{}," créent ou détruisent des éléments ; ",[22,962,628],{}," change seulement le CSS.",[18,965,966,969,970,972],{},[22,967,968],{},"v-for=\"x in liste\""," répète un élément, et chaque élément reçoit une ",[22,971,904],{}," unique.",[18,974,975,977],{},[22,976,921],{}," n'est jamais sûr avec du contenu venant d'un utilisateur.",[979,980,981],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}",{"title":70,"searchDepth":95,"depth":112,"links":983},[984,985,986,987,988,989,990,991,992],{"id":12,"depth":95,"text":13},{"id":53,"depth":95,"text":54},{"id":173,"depth":95,"text":174},{"id":330,"depth":95,"text":331},{"id":519,"depth":95,"text":520},{"id":622,"depth":95,"text":623},{"id":693,"depth":95,"text":694},{"id":897,"depth":95,"text":898},{"id":925,"depth":95,"text":926},"Afficher des données avec l'interpolation, lier des attributs avec v-bind, réagir aux clics avec v-on, puis afficher selon une condition ou une liste.","md",{},[62,28,35,41,532,628,45,49,180],"debutant","\u002Fvue\u002Ftemplate-et-directives",[1000],"\u002Fvue\u002Fpremier-composant",[1002,1006,1009],{"nom":1003,"url":1004,"type":1005},"Vue.js, syntaxe de template (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fessentials\u002Ftemplate-syntax.html","doc",{"nom":1007,"url":1008,"type":1005},"Vue.js, rendu de liste (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fessentials\u002Flist.html",{"nom":1010,"url":1011,"type":1012},"Vue.js, tutoriel interactif (documentation officielle)","https:\u002F\u002Ffr.vuejs.org\u002Ftutorial\u002F","exercice",{"title":5,"description":993},[1015,1017,1020],{"nom":1016,"url":1004},"Syntaxe de template (documentation officielle en français)",{"nom":1018,"url":1019},"Rendu conditionnel (documentation officielle en français)","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fessentials\u002Fconditional.html",{"nom":1021,"url":1008},"Rendu de liste (documentation officielle en français)","vue\u002F02.template-et-directives","dzVlCvaWU5IeVl32m1ApqEcbp6nUGNpjWUU4BAMrdu0",[1025,1028,1029,1033,1037,1041,1045],{"path":1000,"title":1026,"stem":1027},"Ton premier composant Vue","vue\u002F01.premier-composant",{"path":998,"title":5,"stem":1022},{"path":1030,"title":1031,"stem":1032},"\u002Fvue\u002Freactivite","La réactivité","vue\u002F03.reactivite",{"path":1034,"title":1035,"stem":1036},"\u002Fvue\u002Fprops-et-evenements","Props, événements et v-model sur un composant","vue\u002F04.props-et-evenements",{"path":1038,"title":1039,"stem":1040},"\u002Fvue\u002Fslots-watch-et-cycle-de-vie","Slots, watch et cycle de vie","vue\u002F05.slots-watch-et-cycle-de-vie",{"path":1042,"title":1043,"stem":1044},"\u002Fvue\u002Fcomposables","Les composables","vue\u002F06.composables",{"path":1046,"title":1047,"stem":1048},"\u002Fvue","Vue","vue\u002Findex",[1050,1052],{"title":1026,"path":1000,"stem":1027,"description":1051,"children":-1},"Créer un projet Vue 3 avec l'outil officiel, découvrir le composant monofichier .vue et la syntaxe script setup.",{"title":1031,"path":1030,"stem":1032,"description":1053,"children":-1},"Déclarer un état avec ref et reactive, calculer des valeurs dérivées avec computed et lier un champ de formulaire avec v-model.",[1055],{"path":1000,"title":1026,"ligne":69},[1057,1058,1059,1060,1062,1063,1065],{"path":1000,"title":1026,"niveau":997,"stem":1027},{"path":998,"title":5,"niveau":997,"stem":1022},{"path":1030,"title":1031,"niveau":997,"stem":1032},{"path":1034,"title":1035,"niveau":1061,"stem":1036},"intermediaire",{"path":1038,"title":1039,"niveau":1061,"stem":1040},{"path":1042,"title":1043,"niveau":1064,"stem":1044},"avance",{"path":1046,"title":1047,"niveau":1066,"stem":1048},"memo",1794583438354]