Skip to content

instance.md - Diagramme Responsive FR #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 3, 2017
Merged

instance.md - Diagramme Responsive FR #25

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
222 changes: 221 additions & 1 deletion src/v2/guide/instance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,4 +100,224 @@ Il y aussi d'autres hooks qui seront appelés à différentes étapes du cycle d

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.

![Lifecycle](/images/lifecycle.png)
<div class="lifecycle">
<style scoped>
.lifecycle {
position: relative;
font-size: 2vw;
font-weight: bold;
color: #fff;
text-align: center;
}
@media (min-width: 760px) {
.lifecycle {
font-size: 16px;
}
}
.lifecycle--observe-data,
.lifecycle--init-event,
.lifecycle--has-el,
.lifecycle--has-template,
.lifecycle--when-mount,
.lifecycle--if-el-yes,
.lifecycle--if-el-no,
.lifecycle--if-template-yes,
.lifecycle--if-template-no,
.lifecycle--compile-function,
.lifecycle--compile-template,
.lifecycle--create-el,
.lifecycle--virtual-dom,
.lifecycle--when-data-change,
.lifecycle--when-destroy,
.lifecycle--teardown,
.lifecycle--mounted,
.lifecycle--destroyed {
z-index: 2;
position: absolute;
transform: translate(-50%, -50%);
background-color: #3ab882;
border-radius: 10px;
}
.lifecycle--observe-data,
.lifecycle--init-event,
.lifecycle--compile-function,
.lifecycle--compile-template,
.lifecycle--create-el,
.lifecycle--virtual-dom,
.lifecycle--teardown {
background-color: #3ab882;
border-radius: 10px;
}
.lifecycle--has-el,
.lifecycle--has-template {
background-color: #fcb738;
border-radius: 50%;
}
.lifecycle--mounted,
.lifecycle--destroyed {
background-color: #da5961;
border-radius: 50%;
}
.lifecycle--when-mount,
.lifecycle--if-el-yes,
.lifecycle--if-el-no,
.lifecycle--if-template-yes,
.lifecycle--if-template-no,
.lifecycle--when-data-change,
.lifecycle--when-destroy {
color: #8699A3;
background-color: #fff;
}
.lifecycle--observe-data {
top: 9.7%;
left: 49%;
width: 24.5%;
height: 3.3%;
}
.lifecycle--init-event {
top: 15.3%;
left: 49%;
width: 24.5%;
height: 2.9%;
}
.lifecycle--has-el {
top: 23.2%;
left: 49%;
width: 16%;
height: 4%;
}
.lifecycle--has-template {
top: 31.6%;
left: 49%;
width: 16%;
height: 4%;
}
.lifecycle--when-mount {
top: 27%;
left: 77.5%;
width: 18%;
height: 4%;
}
.lifecycle--if-el-yes {
left: 45%;
top: 27.4%;
width: 6%;
height: 1%;
}
.lifecycle--if-el-no {
top: 22.2%;
left: 70.5%;
width: 6%;
height: 1%;
}
.lifecycle--if-template-yes {
top: 37.7%;
left: 22.5%;
width: 6%;
height: 1%;
}
.lifecycle--if-template-no {
top: 37.7%;
left: 75.5%;
width: 6%;
height: 1%;
}
.lifecycle--compile-function {
top: 41.7%;
left: 27%;
width: 24.5%;
height: 5%;
}
.lifecycle--compile-template {
top: 41.7%;
left: 70.5%;
width: 24.5%;
height: 5%;
}
.lifecycle--create-el {
top: 55%;
left: 49%;
width: 24.5%;
height: 5%;
}
.lifecycle--virtual-dom {
top: 68.5%;
left: 79%;
width: 17%;
height: 5%;
}
.lifecycle--when-data-change {
top: 63%;
left: 66%;
width: 13%;
height: 4%;
}
.lifecycle--when-destroy {
top: 75.2%;
left: 49%;
width: 17%;
height: 4%;
}
.lifecycle--teardown {
top: 85%;
left: 49%;
width: 28%;
height: 5%;
}
.lifecycle--mounted {
top: 68.3%;
left: 49%;
width: 12%;
height: 5%;
}
.lifecycle--destroyed {
top: 94%;
left: 49%;
width: 12%;
height: 5%;
}
.lifecycle--observe-data span,
.lifecycle--init-event span,
.lifecycle--has-el span,
.lifecycle--has-template span,
.lifecycle--when-mount span,
.lifecycle--if-el-yes span,
.lifecycle--if-el-no span,
.lifecycle--if-template-yes span,
.lifecycle--if-template-no span,
.lifecycle--compile-function span,
.lifecycle--compile-template span,
.lifecycle--create-el span,
.lifecycle--virtual-dom span,
.lifecycle--when-data-change span,
.lifecycle--when-destroy span,
.lifecycle--teardown span,
.lifecycle--mounted span,
.lifecycle--destroyed span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
</style>
<div class="lifecycle--observe-data"><span>Observe les données</span></div>
<div class="lifecycle--init-event"><span>Initialise les événements</span></div>
<div class="lifecycle--has-el"><span>A l'option “el”</span></div>
<div class="lifecycle--has-template"><span>A l'option “template”</span></div>
<div class="lifecycle--when-mount"><span>quand vm.$mount(el) est appelé</span></div>
<div class="lifecycle--if-el-yes"><span>OUI</span></div>
<div class="lifecycle--if-el-no"><span>NON</span></div>
<div class="lifecycle--if-template-yes"><span>OUI</span></div>
<div class="lifecycle--if-template-no"><span>NON</span></div>
<div class="lifecycle--compile-function"><span>Compiler le template en une fonction de rendu</span></div>
<div class="lifecycle--compile-template"><span>Compiler le contenu HTML de el en tant que template</span></div>
<div class="lifecycle--create-el"><span>Créer vm.$el et remplacer el avec</span></div>
<div class="lifecycle--virtual-dom"><span>Nouveau rendu du DOM Virtuel</span></div>
<div class="lifecycle--when-data-change"><span>quand les données changent</span></div>
<div class="lifecycle--when-destroy"><span>quand vm.$destroy() est appelé</span></div>
<div class="lifecycle--teardown"><span>Démontage des observateurs, composants enfants et écouteurs d'événement</span></div>
<div class="lifecycle--mounted"><span>Monté</span></div>
<div class="lifecycle--destroyed"><span>Détruit</span></div>
<p><img src="/images/lifecycle.png" alt="Lifecycle"></p>
</div>