Skip to content

Commit 11bf7fa

Browse files
MachinisteWebMachinisteWeb
authored
Diagramme Responsive FR
1 parent 8030639 commit 11bf7fa

File tree

1 file changed

+221
-1
lines changed

1 file changed

+221
-1
lines changed

Diff for: ‎src/v2/guide/instance.md

+221-1
Original file line numberDiff line numberDiff line change
@@ -100,4 +100,224 @@ Il y aussi d'autres hooks qui seront appelés à différentes étapes du cycle d
100100

101101
Ci-dessous se trouve le diagramme d'un cycle de vie d'une instance. Vous n'avez pas besoin de tout comprendre de A à Z à ce stade, mais ce diagramme pourra vous être utile dans le futur.
102102

103-
![Lifecycle](/images/lifecycle.png)
103+
<div class="lifecycle">
104+
<style scoped>
105+
.lifecycle {
106+
position: relative;
107+
font-size: 2vw;
108+
font-weight: bold;
109+
color: #fff;
110+
text-align: center;
111+
}
112+
@media (min-width: 760px) {
113+
.lifecycle {
114+
font-size: 16px;
115+
}
116+
}
117+
.lifecycle--observe-data,
118+
.lifecycle--init-event,
119+
.lifecycle--has-el,
120+
.lifecycle--has-template,
121+
.lifecycle--when-mount,
122+
.lifecycle--if-el-yes,
123+
.lifecycle--if-el-no,
124+
.lifecycle--if-template-yes,
125+
.lifecycle--if-template-no,
126+
.lifecycle--compile-function,
127+
.lifecycle--compile-template,
128+
.lifecycle--create-el,
129+
.lifecycle--virtual-dom,
130+
.lifecycle--when-data-change,
131+
.lifecycle--when-destroy,
132+
.lifecycle--teardown,
133+
.lifecycle--mounted,
134+
.lifecycle--destroyed {
135+
z-index: 2;
136+
position: absolute;
137+
transform: translate(-50%, -50%);
138+
background-color: #3ab882;
139+
border-radius: 10px;
140+
}
141+
.lifecycle--observe-data,
142+
.lifecycle--init-event,
143+
.lifecycle--compile-function,
144+
.lifecycle--compile-template,
145+
.lifecycle--create-el,
146+
.lifecycle--virtual-dom,
147+
.lifecycle--teardown {
148+
background-color: #3ab882;
149+
border-radius: 10px;
150+
}
151+
.lifecycle--has-el,
152+
.lifecycle--has-template {
153+
background-color: #fcb738;
154+
border-radius: 50%;
155+
}
156+
.lifecycle--mounted,
157+
.lifecycle--destroyed {
158+
background-color: #da5961;
159+
border-radius: 50%;
160+
}
161+
.lifecycle--when-mount,
162+
.lifecycle--if-el-yes,
163+
.lifecycle--if-el-no,
164+
.lifecycle--if-template-yes,
165+
.lifecycle--if-template-no,
166+
.lifecycle--when-data-change,
167+
.lifecycle--when-destroy {
168+
color: #8699A3;
169+
background-color: #fff;
170+
}
171+
.lifecycle--observe-data {
172+
top: 9.7%;
173+
left: 49%;
174+
width: 24.5%;
175+
height: 3.3%;
176+
}
177+
.lifecycle--init-event {
178+
top: 15.3%;
179+
left: 49%;
180+
width: 24.5%;
181+
height: 2.9%;
182+
}
183+
.lifecycle--has-el {
184+
top: 23.2%;
185+
left: 49%;
186+
width: 16%;
187+
height: 4%;
188+
}
189+
.lifecycle--has-template {
190+
top: 31.6%;
191+
left: 49%;
192+
width: 16%;
193+
height: 4%;
194+
}
195+
.lifecycle--when-mount {
196+
top: 27%;
197+
left: 77.5%;
198+
width: 18%;
199+
height: 4%;
200+
}
201+
.lifecycle--if-el-yes {
202+
left: 45%;
203+
top: 27.4%;
204+
width: 6%;
205+
height: 1%;
206+
}
207+
.lifecycle--if-el-no {
208+
top: 22.2%;
209+
left: 70.5%;
210+
width: 6%;
211+
height: 1%;
212+
}
213+
.lifecycle--if-template-yes {
214+
top: 37.7%;
215+
left: 22.5%;
216+
width: 6%;
217+
height: 1%;
218+
}
219+
.lifecycle--if-template-no {
220+
top: 37.7%;
221+
left: 75.5%;
222+
width: 6%;
223+
height: 1%;
224+
}
225+
.lifecycle--compile-function {
226+
top: 41.7%;
227+
left: 27%;
228+
width: 24.5%;
229+
height: 5%;
230+
}
231+
.lifecycle--compile-template {
232+
top: 41.7%;
233+
left: 70.5%;
234+
width: 24.5%;
235+
height: 5%;
236+
}
237+
.lifecycle--create-el {
238+
top: 55%;
239+
left: 49%;
240+
width: 24.5%;
241+
height: 5%;
242+
}
243+
.lifecycle--virtual-dom {
244+
top: 68.5%;
245+
left: 79%;
246+
width: 17%;
247+
height: 5%;
248+
}
249+
.lifecycle--when-data-change {
250+
top: 63%;
251+
left: 66%;
252+
width: 13%;
253+
height: 4%;
254+
}
255+
.lifecycle--when-destroy {
256+
top: 75.2%;
257+
left: 49%;
258+
width: 17%;
259+
height: 4%;
260+
}
261+
.lifecycle--teardown {
262+
top: 85%;
263+
left: 49%;
264+
width: 28%;
265+
height: 5%;
266+
}
267+
.lifecycle--mounted {
268+
top: 68.3%;
269+
left: 49%;
270+
width: 12%;
271+
height: 5%;
272+
}
273+
.lifecycle--destroyed {
274+
top: 94%;
275+
left: 49%;
276+
width: 12%;
277+
height: 5%;
278+
}
279+
.lifecycle--observe-data span,
280+
.lifecycle--init-event span,
281+
.lifecycle--has-el span,
282+
.lifecycle--has-template span,
283+
.lifecycle--when-mount span,
284+
.lifecycle--if-el-yes span,
285+
.lifecycle--if-el-no span,
286+
.lifecycle--if-template-yes span,
287+
.lifecycle--if-template-no span,
288+
.lifecycle--compile-function span,
289+
.lifecycle--compile-template span,
290+
.lifecycle--create-el span,
291+
.lifecycle--virtual-dom span,
292+
.lifecycle--when-data-change span,
293+
.lifecycle--when-destroy span,
294+
.lifecycle--teardown span,
295+
.lifecycle--mounted span,
296+
.lifecycle--destroyed span {
297+
position: absolute;
298+
top: 50%;
299+
left: 50%;
300+
transform: translate(-50%, -50%);
301+
width: 100%;
302+
}
303+
</style>
304+
<div class="lifecycle--observe-data"><span>Observe les données</span></div>
305+
<div class="lifecycle--init-event"><span>Initialise les événements</span></div>
306+
<div class="lifecycle--has-el"><span>A l'option “el”</span></div>
307+
<div class="lifecycle--has-template"><span>A l'option “template”</span></div>
308+
<div class="lifecycle--when-mount"><span>quand vm.$mount(el) est appelé</span></div>
309+
<div class="lifecycle--if-el-yes"><span>OUI</span></div>
310+
<div class="lifecycle--if-el-no"><span>NON</span></div>
311+
<div class="lifecycle--if-template-yes"><span>OUI</span></div>
312+
<div class="lifecycle--if-template-no"><span>NON</span></div>
313+
<div class="lifecycle--compile-function"><span>Compiler le template en une fonction de rendu</span></div>
314+
<div class="lifecycle--compile-template"><span>Compiler le contenu HTML de el en tant que template</span></div>
315+
<div class="lifecycle--create-el"><span>Créer vm.$el et remplacer el avec</span></div>
316+
<div class="lifecycle--virtual-dom"><span>Nouveau rendu du DOM Virtuel</span></div>
317+
<div class="lifecycle--when-data-change"><span>quand les données changent</span></div>
318+
<div class="lifecycle--when-destroy"><span>quand vm.$destroy() est appelé</span></div>
319+
<div class="lifecycle--teardown"><span>Démontage des observateurs, composants enfants et écouteurs d'événement</span></div>
320+
<div class="lifecycle--mounted"><span>Monté</span></div>
321+
<div class="lifecycle--destroyed"><span>Détruit</span></div>
322+
<p><img src="/images/lifecycle.png" alt="Lifecycle"></p>
323+
</div>

0 commit comments

Comments
 (0)