Skip to content

Commit 9d79983

Browse files
committed
Merge remote-tracking branch 'upstream/master'
# Conflicts resolved: # README.md # src/v2/cookbook/adding-instance-properties.md # src/v2/guide/comparison.md # src/v2/guide/components-custom-events.md # src/v2/guide/components-edge-cases.md # src/v2/guide/components-props.md # src/v2/guide/components.md # src/v2/guide/computed.md # src/v2/guide/events.md # src/v2/guide/index.md # src/v2/guide/join.md # src/v2/guide/list.md # src/v2/guide/syntax.md # themes/vue/layout/partials/resources_dropdown.ejs Signed-off-by: Haeresis <[email protected]>
2 parents 93c5999 + 2018404 commit 9d79983

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+793
-47
lines changed

README.md

+8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@
22

33
Ce site est assemblé avec [hexo](http://hexo.io/). Le contenu du site est écrit au format Markdown et se trouve dans `src`. Les propositions de fusion (*pull request*) sont les bienvenues !
44

5+
<<<<<<< HEAD
56
## Développement
7+
=======
8+
## Writing
9+
10+
See the [Vue Docs Writing Guide](https://github.com/vuejs/vuejs.org/blob/master/writing-guide.md) for our rules and recommendations on writing and maintaining documentation.
11+
12+
## Developing
13+
>>>>>>> upstream/master
614
715
Lancez un serveur de développement sur `localhost:4000` :
816

src/images/oxford-comma.jpg

217 KB
Loading

src/resources/partners.md

+53-6
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ partners_list:
4444
description:
4545
"Modus Create is a digital product agency that supports clients with business and product strategy consulting, customer experience, cloud services, and Agile software delivery. Our official partnerships with Atlassian, AWS, InVision, Cloudflare, GitHub, Ionic Framework, and Vue.js reinforce our proven results with digital transformation with organizations from startups to the Fortune 100."
4646
proficiencies:
47-
- VueJs
47+
- name: Vue.js
48+
url: https://moduscreate.com/partners/vue/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
4849
- name: AWS
4950
url: https://moduscreate.com/partners/aws/?utm_source=Vue&utm_medium=Partner-Page&utm_campaign=Vue_partnerpage
5051
- name: Atlassian
@@ -90,10 +91,14 @@ partners_list:
9091
description:
9192
"Monterail is a full-service software development company with 100+ experts on board delivering meaningful software for start-ups, SMBs and enterprises. We build for the Web with Ruby on Rails, Python, JavaScript, and Agile. We guarantee this: a product so qualitative and aligned with your vision, you’ll swear it was built in-house."
9293
proficiencies:
93-
- VueJs
94-
- Ruby on Rails
95-
- Javascript
96-
- Python
94+
- name: VueJs
95+
url: https://hi.monterail.co/2NqPUa6
96+
- name: Ruby on Rails
97+
url: https://hi.monterail.co/31RvfBm
98+
- name: Javascript
99+
url: https://hi.monterail.co/34cWQhR
100+
- name: Python
101+
url: https://hi.monterail.co/2MXHLeb
97102
- name: Services
98103
url: https://www.monterail.com/services
99104
- name: Projects
@@ -103,7 +108,7 @@ partners_list:
103108
- English
104109
- Polish
105110
url_text: www.monterail.com
106-
url_link: www.monterail.com
111+
url_link: www.monterail.com/?utm_campaign=Vue.js&utm_source=partner-list
107112
hire_url: www.monterail.com/contact
108113
109114
social_links:
@@ -127,4 +132,46 @@ partners_list:
127132
name: Instagram
128133
class: instagram
129134
url: 'https://www.instagram.com/monterail/'
135+
-
136+
name: Rangle
137+
logo: https://res.cloudinary.com/rangle/image/upload/q_auto,f_auto/vuejs.org/rangle_black_lockup_n6q48z.png
138+
description:
139+
"Rangle is a global digital consultancy that helps ambitious organizations outperform the competition in the most demanding markets. We work closely with our clients as one team to imagine, design, and deliver human-centered digital experiences that create lasting results and real business value. Anchored in innovation and lean startup best-practices, our unique delivery and partnership model is purposed-built to this task."
140+
proficiencies:
141+
- name: Building Products
142+
url: https://rangle.io/#build-a-product/?utm_source=referral&utm_medium=partner&utm_campaign=vue-partners
143+
- name: Improving Experiences
144+
url: https://rangle.io/#improve-an-experience/?utm_source=referral&utm_medium=partner&utm_campaign=vue-partners
145+
- name: Training & Coaching
146+
url: https://rangle.io/#level-up-your-team/?utm_source=referral&utm_medium=partner&utm_campaign=vue-partners
147+
- name: Agile Transformation
148+
url: https://rangle.io/#adopt-agile-delivery/?utm_source=referral&utm_medium=partner&utm_campaign=vue-partners
149+
- name: Business Transformation
150+
url: https://rangle.io/#transform-your-business/?utm_source=referral&utm_medium=partner&utm_campaign=vue-partners
151+
location: Toronto, ON, CA Atlanta, GA, USA Amsterdam, Netherlands Tokyo, Japan
152+
languages:
153+
- English
154+
- French
155+
- Dutch
156+
url_text: rangle.io
157+
url_link: rangle.io/?utm_source=referral&utm_medium=partner&utm_campaign=vue-partners
158+
hire_url: rangle.io/contact-us/?utm_source=referral&utm_medium=partner&utm_campaign=vue-partners
159+
160+
social_links:
161+
-
162+
name: GitHub
163+
class: github
164+
url: 'https://github.com/rangle'
165+
-
166+
name: LinkedIn
167+
class: linkedin
168+
url: 'https://www.linkedin.com/company/rangle/'
169+
-
170+
name: Twitter
171+
class: twitter
172+
url: 'https://twitter.com/rangleio'
173+
-
174+
name: Instagram
175+
class: instagram
176+
url: 'https://www.instagram.com/rangleio/?hl=en'
130177
---

src/resources/themes.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ order: 804
2020
<h2 :id="partner.name">{{partner.name}}</h2>
2121
<blockquote class="theme-partner-description" v-html="partnerDescription"></blockquote>
2222
<div class="themes-grid">
23-
<div v-for="product in partner.products" :key="product.name" class="item-preview">
23+
<div v-for="product in partner.products" :key="product.url" class="item-preview">
2424
<a class="item-preview-img" :href="product.url" rel="sponsored">
2525
<img :src="product.image" :alt="`${product.name} - ${product.description}`" loading="lazy">
2626
</a>

src/v2/cookbook/adding-instance-properties.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ new Vue({
5858
})
5959
```
6060
61-
Cela sera `"Mon App"`, puis `"Le nom d'une autre app"`, car `this.appName` est écrasée ([en quelque sorte](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/this-object-prototypes/ch5.md)) par `data` quand l'instance est créée. Nous limitons la portée des propriétés avec `$` pour éviter ça. Vous pouvez même utiliser votre propre convention si vous préférez, comme `$_appName` ou `ΩappName`, pour en plus prévenir les conflits avec les plugins et les fonctionnalités futures.
61+
Cela sera `"Mon App"`, puis `"Le nom d'une autre app"`, car `this.appName` est écrasée ([en quelque sorte](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/objects-classes/ch5.md)) par `data` quand l'instance est créée. Nous limitons la portée des propriétés avec `$` pour éviter ça. Vous pouvez même utiliser votre propre convention si vous préférez, comme `$_appName` ou `ΩappName`, pour en plus prévenir les conflits avec les plugins et les fonctionnalités futures.
6262
6363
## Un exemple en situation réelle : Remplacer Vue Resource par Axios
6464

src/v2/guide/class-and-style.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ order: 6
77
Un besoin classique de la liaison de données est la manipulation de la liste des classes d'un élément, ainsi que ses styles en ligne. Puisque ce sont tous deux des attributs, il est possible d'utiliser `v-bind` pour les gérer : il faut simplement générer une chaine de caractère avec nos expressions. Cependant la concaténation de chaine de caractères est fastidieuse et source d'erreur. Pour cette raison, Vue fournit des améliorations spécifiques quand `v-bind` est utilisé avec `class` et `style`. En plus des chaines de caractères, l'expression peut évaluer des objets ou des tableaux.
88

99
## Liaison de Classes HTML
10-
<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-dynamic-classes?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les classes dynamiques">Regarder le cours gratuit sur Vue School</a></div>
10+
<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-dynamic-classes?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les classes dynamiques">Regarder le cours gratuit sur Vue School (EN)</a></div>
1111

1212
### Syntaxe Objet
1313

src/v2/guide/comparison.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -224,5 +224,5 @@ Avec Polymer, l'équipe a également créé un système de liaison de données v
224224

225225
Riot 3.0 fournit un modèle de développement similaire orienté composant (cela est appelé un « tag » dans Riot), avec une API minimaliste mais conçue de manière élégante. Riot et Vue partagent probablement beaucoup de choses dans leur philosophie d'architecture. Cependant, bien qu'étant un peu plus lourd que Riot, Vue offre certains avantages significatifs :
226226

227-
- De meilleures performances. Riot [utilise le DOM](http://riotjs.com/compare/#virtual-dom-vs-expressions-binding) plutôt qu'un DOM virtuel, et par conséquent il souffre des mêmes problèmes de performances que AngularJS.
227+
- De meilleures performances. Riot [utilise le DOM](https://v3.riotjs.now.sh/compare/#virtual-dom-vs-expressions-binding) plutôt qu'un DOM virtuel, et par conséquent il souffre des mêmes problèmes de performances que AngularJS.
228228
- Le support d'un outillage plus mature. Vue fournit un support officiel pour [webpack](https://github.com/vuejs/vue-loader) et [Browserify](https://github.com/vuejs/vueify), là où Riot s'appuie sur le soutien de la communauté pour l'intégration de systèmes de build.

src/v2/guide/components-custom-events.md

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ order: 103
66

77
> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.
88
9+
<div class="vueschool"><a href="https://vueschool.io/lessons/communication-between-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les évènements personnalisés">Regarder le cours gratuit sur Vue School (EN)</a></div>
10+
911
## Noms d'événements
1012

1113
Contrairement aux composants et aux props, les noms d'événements ne fournissent pas de conversion kebab-case/camelCase. Le nom de l'événement émis doit correspondre exactement au nom utilisé pour écouter cet événement. Par exemple, si l'on émet un nom d'événement en camelCase :

src/v2/guide/components-dynamic-async.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ Pour plus de détails sur `<keep-alive>`, consultez la [référence API](../api/
201201

202202
## Composants asynchrones
203203

204-
<div class="vueschool"><a href="https://vueschool.io/lessons/dynamically-load-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les composants asynchrones">Regarder le cours gratuit sur Vue School</a></div>
204+
<div class="vueschool"><a href="https://vueschool.io/lessons/dynamically-load-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les composants asynchrones">Regarder le cours gratuit sur Vue School (EN)</a></div>
205205

206206
Dans de grosses applications, nous pouvons avoir besoin de diviser l'application en morceaux plus petits et charger un composant depuis le serveur seulement lorsque celui-ci est requis. Pour rendre cela plus facile, Vue vous permet de définir un composant en tant que fonction usine qui va résoudre de façon asynchrone la définition de votre composant. Vue déclenchera la fonction usine seulement lorsque le rendu du composant est nécessaire, et mettra en cache le résultat pour les futurs nouveaux rendus. Par exemple :
207207

src/v2/guide/components-edge-cases.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ methods: {
233233
}
234234
```
235235

236-
Consultez [ce fiddle](https://jsfiddle.net/chrisvfritz/1Leb7up8/) pour le code complet. Notez cependant que si vous vous trouvez à devoir faire beaucoup de code de montage et de nettoyage au sein d'un seul composant, la meilleure solution sera souvent de créer des composants plus modulaires. Dans le cas présent, nous recommanderions de créer un composant réutilisable `<input-datepicker>`.
236+
Consultez [ce fiddle](https://jsfiddle.net/09jvu65m/) pour le code complet. Notez cependant que si vous vous trouvez à devoir faire beaucoup de code de montage et de nettoyage au sein d'un seul composant, la meilleure solution sera souvent de créer des composants plus modulaires. Dans le cas présent, nous recommanderions de créer un composant réutilisable `<input-datepicker>`.
237237

238238
Pour en apprendre plus sur les écouteurs programmatiques, allez voir l'API des [méthodes d'événements d'une instance](https://vuejs.org/v2/api/#Instance-Methods-Events).
239239

src/v2/guide/components-props.md

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ order: 102
66

77
> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.
88
9+
<div class="vueschool"><a href="https://vueschool.io/lessons/reusable-components-with-props?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les props">Regarder le cours gratuit sur Vue School (EN)</a></div>
10+
911
## Casse des props (camelCase vs. kebab-case)
1012

1113
Les noms d'attributs HTML sont insensibles à la casse, aussi les navigateurs interprèteront de la même manière les majuscules et les minuscules. Cela signifie que pour l'utilisation des templates directement dans le DOM, les props en camelCase doivent utiliser leur équivalent kebab-case (délimités par des tirets) :

src/v2/guide/components-registration.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ order: 101
66

77
> Cette page suppose que vous avez déjà lu les principes de base des [composants](components.html). Lisez-les en premier si les composants sont quelque chose de nouveau pour vous.
88
9-
<div class="vueschool"><a href="https://vueschool.io/lessons/global-vs-local-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur l'abonnement des composants">Regarder le cours gratuit sur Vue School</a></div>
9+
<div class="vueschool"><a href="https://vueschool.io/lessons/global-vs-local-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur l'abonnement des composants">Regarder le cours gratuit sur Vue School (EN)</a></div>
1010

1111
## Noms de composant
1212

src/v2/guide/components.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type: guide
44
order: 11
55
---
66

7-
<div class="vueschool"><a href="https://vueschool.io/courses/vuejs-components-fundamentals?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les fondamentaux des composants">Regarder le cours gratuit sur Vue School</a></div>
7+
<div class="vueschool"><a href="https://vueschool.io/courses/vuejs-components-fundamentals?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les fondamentaux des composants">Regarder le cours gratuit sur Vue School (EN)</a></div>
88

99
## Exemple de base
1010

@@ -603,6 +603,8 @@ Dans l'exemple ci-dessus, `currentTabComponent` peut contenir soit :
603603

604604
Regardez [ce fiddle](https://jsfiddle.net/chrisvfritz/o3nycadu/) pour expérimenter cela avec un code complet, ou [cette version](https://jsfiddle.net/chrisvfritz/b2qj69o1/) pour un exemple lié à un objet d'option de composant plutôt qu'à un nom enregistré.
605605

606+
Gardez à l'esprit que ces attributs peuvent être utilisés sur des éléments HTML standard, cependant ils seront traités comme des composants, ce qui signifie que tous les attributs **seront liés en tant qu'attribut du DOM**. Pour que diverses propriétés fonctionnent comme vous le souhaité, comme pour `value`, vous allez devoir les liés en utilisant le [modificateur `.prop`](../api/#v-bind).
607+
606608
C'est tout ce que vous avez besoin de savoir à propos des composants dynamiques pour le moment, mais une fois que vous aurez fini de lire cette page et que vous vous sentirez à l'aise avec son contenu, nous vous recommandons de revenir pour lire le guide complet à propos des [Composants dynamiques et asynchrones](components-dynamic-async.html).
607609

608610
## Cas particuliers de l'analyse des templates de DOM

src/v2/guide/computed.md

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ order: 5
66

77
## Propriétés calculées
88

9+
<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-computed-properties?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les propriétés calculées et observateurs">Regarder le cours gratuit sur Vue School (EN)</a></div>
10+
911
Les expressions dans le template sont très pratiques, mais elles sont uniquement destinées à des opérations simples. Mettre trop de logique dans vos templates peut les rendre trop verbeux et difficiles à maintenir. Par exemple :
1012

1113
``` html

src/v2/guide/conditional.md

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ type: guide
44
order: 7
55
---
66

7+
<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-conditionals?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how conditional rendering works with Vue School">Learn how conditional rendering works with a free lesson on Vue School</a></div>
8+
79
## `v-if`
810

911
La directive `v-if` est utilisée pour conditionnellement faire le rendu d'un bloc. Le rendu du bloc sera effectué uniquement si l'expression de la directive retourne une valeur évaluée à vrai.

src/v2/guide/custom-directive.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ order: 302
66

77
## Introduction
88

9-
<div class="vueschool"><a href="https://vueschool.io/lessons/create-vuejs-directive?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les directives personnalisées">Regarder le cours gratuit sur Vue School</a></div>
9+
<div class="vueschool"><a href="https://vueschool.io/lessons/create-vuejs-directive?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur les directives personnalisées">Regarder le cours gratuit sur Vue School (EN)</a></div>
1010

1111
En supplément de l'ensemble de directives fournies par défaut (`v-model` et `v-show`), Vue vous permet également d'enregistrer vos propres directives. Notez qu'avec Vue 2.0, les composants sont la forme principale de réutilisabilité et d'abstraction du code. Il y a cependant des cas où vous aurez juste besoin d'un accès de bas niveau aux éléments du DOM, et c'est là que les directives personnalisées vous seraient utiles. Un exemple pourrait être la prise du focus sur un élément de champ, comme celui-ci :
1212

src/v2/guide/events.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ type: guide
44
order: 9
55
---
66

7+
<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-user-events?friend=vuejs" target="_blank" rel="sponsored noopener" title="Cours Vue.js gratuit sur la gestion des évènements">Regarder le cours gratuit sur Vue School (EN)</a></div>
8+
79
## Écouter des évènements
810

911
Nous pouvons utiliser l'instruction `v-on` pour écouter les évènements du DOM afin d'exécuter du JavaScript lorsque ces évènements surviennent.
@@ -154,7 +156,9 @@ Parfois nous avons également besoin d'accéder à l'évènement original du DOM
154156
methods: {
155157
warn: function (message, event) {
156158
// maintenant nous avons accès à l'évènement natif
157-
if (event) event.preventDefault()
159+
if (event) {
160+
event.preventDefault()
161+
}
158162
alert(message)
159163
}
160164
}

src/v2/guide/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ ou :
3636

3737
La page d'[installation](installation.html) vous offre d'autres manières d'installer Vue. Notez que nous **ne** recommandons **pas** aux débutants de commencer avec `vue-cli`, surtout si vous n'êtes pas encore familier avec les outils de *build* basés sur Node.js.
3838

39-
Si vous préférez quelque chose de plus interactif, vous pouvez également consulter [cette série de tutoriels sur Scrimba](https://scrimba.com/playlist/pXKqta), ce qui vous donnera un mélange de démonstration visuelle et de jeu avec le code que vous pourrez mettre en pause à n'importe quel moment.
39+
Si vous préférez quelque chose de plus interactif, vous pouvez également consulter [cette série de tutoriels sur Scrimba](https://scrimba.com/g/gvuedocs), ce qui vous donnera un mélange de démonstration visuelle et de jeu avec le code que vous pourrez mettre en pause à n'importe quel moment.
4040

4141
## Rendu déclaratif
4242

0 commit comments

Comments
 (0)