From 1d7841f7b4fd06e198aeeb91b4604f942d0c4ce9 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Wed, 1 Feb 2017 10:27:49 +0100 Subject: [PATCH 01/14] Traduction du `index.md` du Guide --- src/v2/guide/index.md | 144 +++++++++++++++++++++--------------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 1c2c7e3b28..69f4f712c2 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -4,27 +4,27 @@ type: guide order: 2 --- -## What is Vue.js? +## Vue.js, qu'est-ce que c'est ? -Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](single-file-components.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#libraries--plugins). +Vue (prononcé /vjuː/, comme le terme anglais **view**) est un **framework évolutif** pour construire des interfaces utilisateurs. À la différence des autres frameworks monolithiques, Vue est conçu pour partir d'une base simple qu'il convient de faire évoluer progressivement. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l'intégrer avec d'autres bibliothèques ou projets existants. D'un autre côté, Vue est tout à fait capable de propulser des applications web mono-page quand il est couplé avec [des outils modernes](single-file-components.html) et [des bibliothèques officiellement supportées](https://github.com/vuejs/awesome-vue#libraries--plugins). -If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html). +Si vous êtes un développeur frontend confirmé et que vous souhaitez comparer Vue avec les autres bibliothèques/frameworks, jettez un œil à la [Comparaison avec les autres frameworks](comparison.html). -## Getting Started +## Pour commencer -

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.

+

Ce guide officiel présuppose que vous ayez un certain niveau de connaissance en HTML, CSS et JavaScript. Si vous êtes complètement nouveau dans le développement frontend, ce n'est peut-être pas la solution la plus judicieuse de vous lancer dans un framework pour vos premiers pas — aussi complétez vos bases avant de revenir ! Bien qu'une première expérience avec d'autres frameworks puisse être utile, cela n'est pas obligatoire.

-The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can simply create an `.html` file and include Vue with: +La manière la plus simple d'essayer Vue.js est d'utiliser [le Hello World d'exemple JSFiddle](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Ouvrez le dans un nouvel onglet si vous le souhaitez et gardez le tout au long des exemples de base. Vous pouvez aussi simplement créer un fichier `.html` et ajouter Vue avec : ``` html ``` -The [Installation](installation.html) page provides more options of installing Vue. Note that we **do not** recommend beginners to start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools. +La page d'[installation](installation.html) vous offre d'autres manière 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 fournis avec Node.js. -## Declarative Rendering +## Rendu déclaratif -At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax: +Au cœur de Vue.js il y a un système qui va nous permettre de rendre les données déclarativement dans le DOM en utilisant simplement cette syntaxe : ``` html
@@ -35,7 +35,7 @@ At the core of Vue.js is a system that enables us to declaratively render data t var app = new Vue({ el: '#app', data: { - message: 'Hello Vue!' + message: 'Hello Vue !' } }) ``` @@ -47,20 +47,20 @@ var app = new Vue({ var app = new Vue({ el: '#app', data: { - message: 'Hello Vue!' + message: 'Hello Vue !' } }) {% endraw %} -We have already created our very first Vue app! This looks pretty similar to just rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Just open your browser's JavaScript console (right now, on this page) and set `app.message` to a different value. You should see the rendered example above update accordingly. +Nous venons tout juste de créer notre première application Vue ! Ça ressemble sacrément à du simple rendu dans un template, mais Vue effectue un réel travail dans l'ombre. Les données et le DOM sont maintenant couplés, et tout est à présent **réactif**. Comment s'en rendre compte ? Ouvrez juste la console JavaScript de votre navigateur (là maintenant, sur cette page) et attribuez à `app.message` différentes valeurs. Vous devriez voir le rendu de l'exemple en cours se mettre à jour en concordance. -In addition to text interpolation, we can also bind element attributes like this: +En plus de l'interpolation de texte, nous pouvons également lier les éléments par attributs comme ceci : ``` html
- Hover your mouse over me for a few seconds to see my dynamically bound title! + Passez votre souris sur moi pendant quelques secondes pour voir mon titre lié dynamiquement !
``` @@ -68,37 +68,37 @@ In addition to text interpolation, we can also bind element attributes like this var app2 = new Vue({ el: '#app-2', data: { - message: 'You loaded this page on ' + new Date() + message: 'Vous avez affiché cette page à ' + new Date() } }) ``` {% raw %}
- Hover your mouse over me for a few seconds to see my dynamically bound title! + Passez votre souris sur moi pendant quelques secondes pour voir mon titre lié dynamiquement !
{% endraw %} -Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance." +Ici nous venons de rencontrer quelque chose de nouveau. L'attribut `v-bind` que vous venez de croiser est appelé une **directive**. Les directives sont préfixées par `v-` pour indiquer que ce sont des attributs spéciaux fournis par Vue, et comme vous pouvez le deviner, elles appliques le comportement réactif au rendu du DOM. Ici nous avons un simple « garde l'attribut `title` de cet élément à jour avec la propriété `message` de l'instance de Vue ». -If you open up your JavaScript console again and enter `app2.message = 'some new message'`, you'll once again see that the bound HTML - in this case the `title` attribute - has been updated. +Si vous ouvrez votre console JavaScript une nouvelle fois et entrez `app2.message = 'un nouveau message'`, de nouveau vous verrez le HTML lié — dans notre cas l'attribut `title` — se mettre à jour. -## Conditionals and Loops +## Conditions et boucles -It's quite simple to toggle the presence of an element, too: +Il est également simple de permuter la présence d'un élément : ``` html
-

Now you see me

+

Maintenant vous me voyez

``` @@ -113,7 +113,7 @@ var app3 = new Vue({ {% raw %}
- Now you see me + Maintenant vous me voyez
{% endraw %} -Go ahead and enter `app3.seen = false` in the console. You should see the message disappear. +Côté console entrez `app3.seen = false`. Vous devriez voir le message disparaître. -This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions.html) when elements are inserted/updated/removed by Vue. +Cet exemple démontre que nous pouvons lier des données non seulement aux textes et attributs, mais également à la **structure** du DOM. De plus, Vue fournit un puissant système d'effets de transition qui peut automatiquement appliquer des [effets de transition](transitions.html) quand des éléments sont insérés/mis à jour/enlevés par Vue. -There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used for displaying a list of items using the data from an Array: +Il existe quelques autres directives, chacune avec leur propre fonction spécifique. Par exemple, la directive `v-for` peut être utilisée pour afficher une liste d'élément en provenance d'un tableau de données. ``` html
@@ -145,9 +145,9 @@ var app4 = new Vue({ el: '#app-4', data: { todos: [ - { text: 'Learn JavaScript' }, - { text: 'Learn Vue' }, - { text: 'Build something awesome' } + { text: 'Apprendre JavaScript' }, + { text: 'Apprendre Vue' }, + { text: 'Créer un truc top' } ] } }) @@ -165,32 +165,32 @@ var app4 = new Vue({ el: '#app-4', data: { todos: [ - { text: 'Learn JavaScript' }, - { text: 'Learn Vue' }, - { text: 'Build something awesome' } + { text: 'Apprendre JavaScript' }, + { text: 'Apprendre Vue' }, + { text: 'Créer un truc top' } ] } }) {% endraw %} -In the console, enter `app4.todos.push({ text: 'New item' })`. You should see a new item appended to the list. +Dans la console, entrez `app4.todos.push({ text: 'Nouvel élément' })`. Vous devriez le voir ajouter à la liste. -## Handling User Input +## Gestion des entrées utilisateur -To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances: +Afin de permettre aux utilisateurs d’interagir avec votre application, nous pouvons utiliser la directive `v-on` pour attacher des écouteurs d’événements qui appels des méthodes de vos instances de Vue : ``` html

{{ message }}

- +
``` ``` js var app5 = new Vue({ el: '#app-5', data: { - message: 'Hello Vue.js!' + message: 'Hello Vue.js !' }, methods: { reverseMessage: function () { @@ -202,13 +202,13 @@ var app5 = new Vue({ {% raw %}

{{ message }}

- +
{% endraw %} -Note in the method we simply update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic. +Notez que dans la méthode nous avons seulement mis à jour l'état de l'application sans toucher au DOM — toutes les manipulations de DOM sont prises en charge par Vue ainsi le code que vous écrivez se concentre exclusivement sur la partie logique. -Vue also provides the `v-model` directive that makes two-way binding between form input and app state a breeze: +Vue fournit aussi la directive `v-model` qui permet une liaison de données bidirectionnelle simple entre les champs d'un formulaire et l'état de l'application : ``` html
@@ -233,7 +233,7 @@ Vue also provides the `v-model` directive that makes two-way binding between for var app6 = new Vue({ el: '#app-6', data: { - message: 'Hello Vue!' + message: 'Hello Vue !' } }) ``` @@ -246,55 +246,55 @@ var app6 = new Vue({ var app6 = new Vue({ el: '#app-6', data: { - message: 'Hello Vue!' + message: 'Hello Vue !' } }) {% endraw %} -## Composing with Components +## Composer avec des composants -The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components: +Le système de composant est un autre concept important de Vue, car c'est une abstraction qui nous permet de construire de larges applications composées de plus petits composants réutilisables et auto-gérés. Si vous y pensez bien, presque n'importe quelle interface d'application peut être abstrait avec un arbre de composants. -![Component Tree](/images/components.png) +![Arbre de composants](/images/components.png) -In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward: +Dans Vue, un composant est essentiellement une instance de Vue avec des options pré-définies. Enregistrer un composant avec Vue est très rapide : ``` js -// Define a new component called todo-item +// Défini un nouveau composant appelé todo-item Vue.component('todo-item', { - template: '
  • This is a todo
    • ' + template: '
  • Ceci est une liste
    • ' }) ``` -Now you can compose it in another component's template: +Maintenant nous pouvons composer avec le template d'un autre composant : ``` html
      - +
    ``` -But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](components.html#Props): +Mais cela rendrait le même texte pour toutes les listes, ce qui n'est pas vraiment intéressant. Nous devrions être capable de passer les données du scope parent dans le composant enfant. Modifions la définition du composant pour lui permettre d'accepter une [*prop*](components.html#Props) : ``` js Vue.component('todo-item', { - // The todo-item component now accepts a - // "prop", which is like a custom attribute. - // This prop is called todo. + // Le composant todo-item accepte maintenant une + // « prop », ceci est comme un attribut personnalisé. + // Cette prop est appelée todo. props: ['todo'], template: '
  • {{ todo.text }}
    • ' }) ``` -Now we can pass the todo into each repeated component using `v-bind`: +Maintenant nous pouvons passer la liste dans chaque composant répété en utilisant `v-bind` : ``` html
      - - + +
    @@ -309,9 +309,9 @@ var app7 = new Vue({ el: '#app-7', data: { groceryList: [ - { text: 'Vegetables' }, - { text: 'Cheese' }, - { text: 'Whatever else humans are supposed to eat' } + { text: 'Légumes' }, + { text: 'Fromage' }, + { text: 'Tout ce que les humains sont supposés manger' } ] } }) @@ -331,18 +331,18 @@ var app7 = new Vue({ el: '#app-7', data: { groceryList: [ - { text: 'Vegetables' }, - { text: 'Cheese' }, - { text: 'Whatever else humans are supposed to eat' } + { text: 'Légumes' }, + { text: 'Fromage' }, + { text: 'Tout ce que les humains sont supposés manger' } ] } }) {% endraw %} -This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with more complex template and logic without affecting the parent app. +Ceci n'est qu'un exemple grossier, mais nous avons séparé notre application en deux plus petites unités, et chaque enfant est convenablement découplé de son parent via l'utilisation des props. Nous pouvons maintenant améliorer notre `` avec un template et une logique plus conséquente sans affecter l'application parente. -In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](components.html), but here's an (imaginary) example of what an app's template might look like with components: +Dans une large application, il est nécessaire de diviser l'application entière en composants afin de rendre le développement plus abordable. Nous parlerons des composants plus précisément [plus tard dans le guide](components.html), mais en attendant voici un exemple (imaginaire) de ce a quoi un template d'application pourrait ressemblé avec des composants : ``` html
    @@ -354,14 +354,14 @@ In a large application, it is necessary to divide the whole app into components
    ``` -### Relation to Custom Elements +### Parallèle avec les Custom Elements -You may have noticed that Vue components are very similar to **Custom Elements**, which are part of the [Web Components Spec](http://www.w3.org/wiki/WebComponents/). That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) and the `is` special attribute. However, there are a few key differences: +Vous avez peut-être remarqué que les composants de Vue sont très similaire aux **Custom Elements**, qui sont une part de la [spécification des Web Components](http://www.w3.org/wiki/WebComponents/). C'est parce que la syntaxe de Vue s'en est librement inspiré après les spécifications. Par exemple, les composants de Vue implémente la [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) et l'attribut spécial `is`. Cependant, il y a quelques différences clés : -1. The Web Components Spec is still in draft status, and is not natively implemented in every browser. In comparison, Vue components don't require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element. +1. La spécification des Web Components est toujours à l'état de brouillon, et n'est pas implémentée nativement dans tous les navigateurs. En comparaison, les composants de Vue n'ont besoin d'aucuns polyfills et fonctionnent de la même manière dans tous les navigateurs supportés (IE9 et supérieurs). Quand cela est nécessaire, les composants de Vue peuvent également être implémentés à l'intérieur d'un custom element natif. -2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations. +2. Les composants de Vue fournissent des fonctionnalités importantes qui ne sont pas disponible dans les custom elements standard, comme notablement le flux de données multi-composant, la communication événementielle personnalisée et les outils de build intégrés. -## Ready for More? +## Prêt pour la suite ? -We've just briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all! +Nous venons juste d'introduire brièvement les fonctionnalités les plus basiques du cœur de Vue.js — le reste de ce guide va les traiter, ainsi que des fonctionnalités plus avancées, plus en détails. Donc assurez-vous de ne rien rater ! From 1a75fda6762f238fe414fbaeed62d389c51a7b75 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Wed, 1 Feb 2017 18:25:04 +0100 Subject: [PATCH 02/14] rendre => faire le rendu --- src/v2/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 69f4f712c2..7d2bf1aa05 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -24,7 +24,7 @@ La page d'[installation](installation.html) vous offre d'autres manière d'insta ## Rendu déclaratif -Au cœur de Vue.js il y a un système qui va nous permettre de rendre les données déclarativement dans le DOM en utilisant simplement cette syntaxe : +Au cœur de Vue.js il y a un système qui va nous permettre de faire le rendu des données déclarativement dans le DOM en utilisant simplement cette syntaxe : ``` html
    From 336fbda333de9360a6abded2e0888562733dd9a4 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Wed, 1 Feb 2017 18:34:03 +0100 Subject: [PATCH 03/14] Approche more literal for Vue introduction. --- src/v2/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 7d2bf1aa05..eb385efb3c 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -6,7 +6,7 @@ order: 2 ## Vue.js, qu'est-ce que c'est ? -Vue (prononcé /vjuː/, comme le terme anglais **view**) est un **framework évolutif** pour construire des interfaces utilisateurs. À la différence des autres frameworks monolithiques, Vue est conçu pour partir d'une base simple qu'il convient de faire évoluer progressivement. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l'intégrer avec d'autres bibliothèques ou projets existants. D'un autre côté, Vue est tout à fait capable de propulser des applications web mono-page quand il est couplé avec [des outils modernes](single-file-components.html) et [des bibliothèques officiellement supportées](https://github.com/vuejs/awesome-vue#libraries--plugins). +Vue (prononcé /vjuː/, comme le terme anglais **view**) est un **framework évolutif** pour construire des interfaces utilisateurs. À la différence des autres frameworks monolithiques, Vue est conçu pour partir des bases et être progressivement pris en main. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l'intégrer avec d'autres bibliothèques ou projets existants. D'un autre côté, Vue est tout à fait capable de propulser des applications web mono-page quand il est couplé avec [des outils modernes](single-file-components.html) et [des bibliothèques officiellement supportées](https://github.com/vuejs/awesome-vue#libraries--plugins). Si vous êtes un développeur frontend confirmé et que vous souhaitez comparer Vue avec les autres bibliothèques/frameworks, jettez un œil à la [Comparaison avec les autres frameworks](comparison.html). From f1881fed73d34b6ed4bb027c36740b34341d6371 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Wed, 1 Feb 2017 18:35:04 +0100 Subject: [PATCH 04/14] jettez => jetez --- src/v2/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index eb385efb3c..af23087907 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -8,7 +8,7 @@ order: 2 Vue (prononcé /vjuː/, comme le terme anglais **view**) est un **framework évolutif** pour construire des interfaces utilisateurs. À la différence des autres frameworks monolithiques, Vue est conçu pour partir des bases et être progressivement pris en main. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l'intégrer avec d'autres bibliothèques ou projets existants. D'un autre côté, Vue est tout à fait capable de propulser des applications web mono-page quand il est couplé avec [des outils modernes](single-file-components.html) et [des bibliothèques officiellement supportées](https://github.com/vuejs/awesome-vue#libraries--plugins). -Si vous êtes un développeur frontend confirmé et que vous souhaitez comparer Vue avec les autres bibliothèques/frameworks, jettez un œil à la [Comparaison avec les autres frameworks](comparison.html). +Si vous êtes un développeur frontend confirmé et que vous souhaitez comparer Vue avec les autres bibliothèques/frameworks, jetez un œil à la [Comparaison avec les autres frameworks](comparison.html). ## Pour commencer From 48a6529afc6c9f5519cf032c0a85a4cf89c99c4d Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 2 Feb 2017 10:55:51 +0100 Subject: [PATCH 05/14] =?UTF-8?q?Premi=C3=A8re=20correction?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/index.md | 48 +++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index af23087907..8a56ab88fc 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -6,25 +6,25 @@ order: 2 ## Vue.js, qu'est-ce que c'est ? -Vue (prononcé /vjuː/, comme le terme anglais **view**) est un **framework évolutif** pour construire des interfaces utilisateurs. À la différence des autres frameworks monolithiques, Vue est conçu pour partir des bases et être progressivement pris en main. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l'intégrer avec d'autres bibliothèques ou projets existants. D'un autre côté, Vue est tout à fait capable de propulser des applications web mono-page quand il est couplé avec [des outils modernes](single-file-components.html) et [des bibliothèques officiellement supportées](https://github.com/vuejs/awesome-vue#libraries--plugins). +Vue (prononcé /vjuː/, comme le terme anglais **view**) est un **framework évolutif** pour construire des interfaces utilisateur. À la différence des autres frameworks monolithiques, Vue est conçu pour partir des bases et être progressivement pris en main. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l'intégrer avec d'autres bibliothèques ou projets existants. D'un autre côté, Vue est tout à fait capable de faire tourner des applications web monopages quand il est couplé avec [des outils modernes](single-file-components.html) et [des bibliothèques complémentaires](https://github.com/vuejs/awesome-vue#libraries--plugins). Si vous êtes un développeur frontend confirmé et que vous souhaitez comparer Vue avec les autres bibliothèques/frameworks, jetez un œil à la [Comparaison avec les autres frameworks](comparison.html). ## Pour commencer -

    Ce guide officiel présuppose que vous ayez un certain niveau de connaissance en HTML, CSS et JavaScript. Si vous êtes complètement nouveau dans le développement frontend, ce n'est peut-être pas la solution la plus judicieuse de vous lancer dans un framework pour vos premiers pas — aussi complétez vos bases avant de revenir ! Bien qu'une première expérience avec d'autres frameworks puisse être utile, cela n'est pas obligatoire.

    +

    Ce guide officiel présuppose que vous ayez un niveau intermédiaire de connaissance en HTML, CSS et JavaScript. Si vous êtes complètement nouveau dans le développement frontend, ce n'est peut-être pas la solution la plus judicieuse de vous lancer dans un framework pour vos premiers pas — aussi complétez vos bases avant de revenir ! Bien qu'une première expérience avec d'autres frameworks puisse être utile, cela n'est pas obligatoire.

    -La manière la plus simple d'essayer Vue.js est d'utiliser [le Hello World d'exemple JSFiddle](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Ouvrez le dans un nouvel onglet si vous le souhaitez et gardez le tout au long des exemples de base. Vous pouvez aussi simplement créer un fichier `.html` et ajouter Vue avec : +La manière la plus simple d'essayer Vue.js est d'utiliser [l'exemple Hello World sur JSFiddle](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Si vous le souhaitez, ouvrez-le dans un nouvel onglet afin de suivre pendant que nous parcourons des exemples de base. Vous pouvez aussi simplement créer un fichier `.html` et ajouter Vue avec : ``` html ``` -La page d'[installation](installation.html) vous offre d'autres manière 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 fournis avec Node.js. +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. ## Rendu déclaratif -Au cœur de Vue.js il y a un système qui va nous permettre de faire le rendu des données déclarativement dans le DOM en utilisant simplement cette syntaxe : +Au cœur de Vue.js, il y a un système qui va nous permettre de faire le rendu des données déclarativement dans le DOM en utilisant simplement cette syntaxe de template : ``` html
    @@ -55,7 +55,7 @@ var app = new Vue({ Nous venons tout juste de créer notre première application Vue ! Ça ressemble sacrément à du simple rendu dans un template, mais Vue effectue un réel travail dans l'ombre. Les données et le DOM sont maintenant couplés, et tout est à présent **réactif**. Comment s'en rendre compte ? Ouvrez juste la console JavaScript de votre navigateur (là maintenant, sur cette page) et attribuez à `app.message` différentes valeurs. Vous devriez voir le rendu de l'exemple en cours se mettre à jour en concordance. -En plus de l'interpolation de texte, nous pouvons également lier les éléments par attributs comme ceci : +En plus de l'interpolation de texte, nous pouvons également lier les attributs d'un élément comme ceci : ``` html
    @@ -68,7 +68,7 @@ En plus de l'interpolation de texte, nous pouvons également lier les éléments var app2 = new Vue({ el: '#app-2', data: { - message: 'Vous avez affiché cette page à ' + new Date() + message: 'Vous avez affiché cette page le ' + new Date() } }) ``` @@ -82,19 +82,19 @@ var app2 = new Vue({ var app2 = new Vue({ el: '#app-2', data: { - message: 'Vous avez affiché cette page à ' + new Date() + message: 'Vous avez affiché cette page le ' + new Date() } }) {% endraw %} -Ici nous venons de rencontrer quelque chose de nouveau. L'attribut `v-bind` que vous venez de croiser est appelé une **directive**. Les directives sont préfixées par `v-` pour indiquer que ce sont des attributs spéciaux fournis par Vue, et comme vous pouvez le deviner, elles appliques le comportement réactif au rendu du DOM. Ici nous avons un simple « garde l'attribut `title` de cet élément à jour avec la propriété `message` de l'instance de Vue ». +Ici nous venons de rencontrer quelque chose de nouveau. L'attribut `v-bind` que vous voyez est appelé une **directive**. Les directives sont préfixées par `v-` pour indiquer que ce sont des attributs spéciaux fournis par Vue, et comme vous avez peut être deviné, elles appliquent un comportement réactif spécifique au DOM après rendu. Ici cela veut basiquement dire : « garde l'attribut `title` de cet élément à jour avec la propriété `message` de l'instance de Vue ». Si vous ouvrez votre console JavaScript une nouvelle fois et entrez `app2.message = 'un nouveau message'`, de nouveau vous verrez le HTML lié — dans notre cas l'attribut `title` — se mettre à jour. ## Conditions et boucles -Il est également simple de permuter la présence d'un élément : +Il est assez simple de permuter la présence d'un élément : ``` html
    @@ -129,7 +129,7 @@ Côté console entrez `app3.seen = false`. Vous devriez voir le message dispara Cet exemple démontre que nous pouvons lier des données non seulement aux textes et attributs, mais également à la **structure** du DOM. De plus, Vue fournit un puissant système d'effets de transition qui peut automatiquement appliquer des [effets de transition](transitions.html) quand des éléments sont insérés/mis à jour/enlevés par Vue. -Il existe quelques autres directives, chacune avec leur propre fonction spécifique. Par exemple, la directive `v-for` peut être utilisée pour afficher une liste d'élément en provenance d'un tableau de données. +Il existe quelques autres directives, chacune avec leur propre fonction spécifique. Par exemple, la directive `v-for` peut être utilisée pour afficher une liste d'éléments en provenance d'un tableau de données. ``` html
    @@ -178,7 +178,7 @@ Dans la console, entrez `app4.todos.push({ text: 'Nouvel élément' })`. Vous de ## Gestion des entrées utilisateur -Afin de permettre aux utilisateurs d’interagir avec votre application, nous pouvons utiliser la directive `v-on` pour attacher des écouteurs d’événements qui appels des méthodes de vos instances de Vue : +Afin de permettre aux utilisateurs d’interagir avec votre application, nous pouvons utiliser la directive `v-on` pour attacher des écouteurs d’événements qui invoquent des méthodes sur nos instances de Vue : ``` html
    @@ -219,9 +219,9 @@ var app5 = new Vue({ {% endraw %} -Notez que dans la méthode nous avons seulement mis à jour l'état de l'application sans toucher au DOM — toutes les manipulations de DOM sont prises en charge par Vue ainsi le code que vous écrivez se concentre exclusivement sur la partie logique. +Notez que dans la méthode, nous avons seulement mis à jour l'état de l'application sans toucher au DOM — toutes les manipulations de DOM sont prises en charge par Vue, ainsi le code que vous écrivez se concentre sur la logique sous-jacente. -Vue fournit aussi la directive `v-model` qui permet une liaison de données bidirectionnelle simple entre les champs d'un formulaire et l'état de l'application : +Vue fournit aussi la directive `v-model` qui fait de la liaison de données bidirectionnelle entre les champs d'un formulaire et l'état de l'application une simple formalité : ``` html
    @@ -254,20 +254,20 @@ var app6 = new Vue({ ## Composer avec des composants -Le système de composant est un autre concept important de Vue, car c'est une abstraction qui nous permet de construire de larges applications composées de plus petits composants réutilisables et auto-gérés. Si vous y pensez bien, presque n'importe quelle interface d'application peut être abstrait avec un arbre de composants. +Le système de composant est un autre concept important de Vue, car c'est une abstraction qui nous permet de construire de larges applications composées de plus petits composants réutilisables et autonomes. Quand on y pense, presque tous les types d'interface applicative peuvent être abstraits en un arbre de composants. ![Arbre de composants](/images/components.png) -Dans Vue, un composant est essentiellement une instance de Vue avec des options pré-définies. Enregistrer un composant avec Vue est très rapide : +Dans Vue, un composant est essentiellement une instance de Vue avec des options prédéfinies. Déclarer un composant avec Vue est très rapide : ``` js -// Défini un nouveau composant appelé todo-item +// Définit un nouveau composant appelé todo-item Vue.component('todo-item', { template: '
  • Ceci est une liste
    • ' }) ``` -Maintenant nous pouvons composer avec le template d'un autre composant : +Maintenant nous pouvons l'insérer dans le template d'un autre composant : ``` html
      @@ -276,7 +276,7 @@ Maintenant nous pouvons composer avec le template d'un autre composant :
    ``` -Mais cela rendrait le même texte pour toutes les listes, ce qui n'est pas vraiment intéressant. Nous devrions être capable de passer les données du scope parent dans le composant enfant. Modifions la définition du composant pour lui permettre d'accepter une [*prop*](components.html#Props) : +Mais cela donnerait comme rendu le même texte, ce qui n'est pas vraiment intéressant. Nous devrions être capable de passer les données de la portée parente dans le composant enfant. Modifions la définition du composant pour lui permettre d'accepter une [*prop*](components.html#Props) : ``` js Vue.component('todo-item', { @@ -340,7 +340,7 @@ var app7 = new Vue({ {% endraw %} -Ceci n'est qu'un exemple grossier, mais nous avons séparé notre application en deux plus petites unités, et chaque enfant est convenablement découplé de son parent via l'utilisation des props. Nous pouvons maintenant améliorer notre `` avec un template et une logique plus conséquente sans affecter l'application parente. +Ceci n'est qu'un exemple grossier, nous avons réussi à séparer notre application en deux plus petites unités, et chaque enfant est raisonnablement bien découplé de son parent via l'utilisation des props. Nous pouvons maintenant améliorer notre `` avec un template et une logique plus complexes sans affecter l'application parente. Dans une large application, il est nécessaire de diviser l'application entière en composants afin de rendre le développement plus abordable. Nous parlerons des composants plus précisément [plus tard dans le guide](components.html), mais en attendant voici un exemple (imaginaire) de ce a quoi un template d'application pourrait ressemblé avec des composants : @@ -356,12 +356,12 @@ Dans une large application, il est nécessaire de diviser l'application entière ### Parallèle avec les Custom Elements -Vous avez peut-être remarqué que les composants de Vue sont très similaire aux **Custom Elements**, qui sont une part de la [spécification des Web Components](http://www.w3.org/wiki/WebComponents/). C'est parce que la syntaxe de Vue s'en est librement inspiré après les spécifications. Par exemple, les composants de Vue implémente la [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) et l'attribut spécial `is`. Cependant, il y a quelques différences clés : +Vous avez peut-être remarqué que les composants de Vue sont très similaires aux **Custom Elements**, qui sont une partie de la [spécification des Web Components](http://www.w3.org/wiki/WebComponents/). C'est parce que la syntaxe de Vue est vaguement inspirée de cette spécification. Par exemple, les composants de Vue implémentent l'[API Slot](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) et l'attribut spécial `is`. Cependant, il y a quelques différences clés : -1. La spécification des Web Components est toujours à l'état de brouillon, et n'est pas implémentée nativement dans tous les navigateurs. En comparaison, les composants de Vue n'ont besoin d'aucuns polyfills et fonctionnent de la même manière dans tous les navigateurs supportés (IE9 et supérieurs). Quand cela est nécessaire, les composants de Vue peuvent également être implémentés à l'intérieur d'un custom element natif. +1. La spécification des Web Components est toujours à l'état de brouillon, et n'est pas implémentée nativement dans tous les navigateurs. En comparaison, les composants de Vue n'ont besoin d'aucun polyfill et fonctionnent de la même manière dans tous les navigateurs supportés (IE9 et supérieurs). Quand cela est nécessaire, les composants de Vue peuvent également être implémentés à l'intérieur d'un élément personnalisé natif. -2. Les composants de Vue fournissent des fonctionnalités importantes qui ne sont pas disponible dans les custom elements standard, comme notablement le flux de données multi-composant, la communication événementielle personnalisée et les outils de build intégrés. +2. Les composants de Vue fournissent des fonctionnalités importantes qui ne sont pas disponibles dans les éléments personnalisés standards, notamment le flux de données entre composants, la communication par événements personnalisés et l'intégration avec les outils de build. ## Prêt pour la suite ? -Nous venons juste d'introduire brièvement les fonctionnalités les plus basiques du cœur de Vue.js — le reste de ce guide va les traiter, ainsi que des fonctionnalités plus avancées, plus en détails. Donc assurez-vous de ne rien rater ! +Nous venons juste d'introduire brièvement les fonctionnalités les plus basiques du cœur de Vue.js — le reste de ce guide va les traiter plus en détail, ainsi que d'autres fonctionnalités avancées. Donc assurez-vous de le lire jusqu'au bout ! From 83f666375afd38f2fdd7dc489738efabb84e6763 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 2 Feb 2017 11:12:07 +0100 Subject: [PATCH 06/14] second iteration --- src/v2/guide/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 8a56ab88fc..61b74ee81d 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -174,7 +174,7 @@ var app4 = new Vue({ {% endraw %} -Dans la console, entrez `app4.todos.push({ text: 'Nouvel élément' })`. Vous devriez le voir ajouter à la liste. +Dans la console, entrez `app4.todos.push({ text: 'Nouvel élément' })`. Vous devriez le voir ajouté à la liste. ## Gestion des entrées utilisateur @@ -254,7 +254,7 @@ var app6 = new Vue({ ## Composer avec des composants -Le système de composant est un autre concept important de Vue, car c'est une abstraction qui nous permet de construire de larges applications composées de plus petits composants réutilisables et autonomes. Quand on y pense, presque tous les types d'interface applicative peuvent être abstraits en un arbre de composants. +Le système de composant est un autre concept important de Vue, car c'est une abstraction qui nous permet de construire de larges applications composées de plus petits composants réutilisables et autonomes. Quand on y pense, presque tous les types d'interface applicative peuvent être abstraites en un arbre de composants. ![Arbre de composants](/images/components.png) @@ -281,7 +281,7 @@ Mais cela donnerait comme rendu le même texte, ce qui n'est pas vraiment intér ``` js Vue.component('todo-item', { // Le composant todo-item accepte maintenant une - // « prop », ceci est comme un attribut personnalisé. + // « prop » qui est comme un attribut personnalisé. // Cette prop est appelée todo. props: ['todo'], template: '
  • {{ todo.text }}
    • ' @@ -293,8 +293,8 @@ Maintenant nous pouvons passer la liste dans chaque composant répété en utili ``` html
      - - + +
    From a72930b8ca84c190571c4f7ae7b46b11c515b520 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 2 Feb 2017 11:19:28 +0100 Subject: [PATCH 07/14] =?UTF-8?q?Cr=C3=A9=C3=A9=20-->=20Cr=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 61b74ee81d..f252dfde89 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -271,7 +271,7 @@ Maintenant nous pouvons l'insérer dans le template d'un autre composant : ``` html
      - +
    ``` From fd5d22694a82a7a521edf587b1ebe743390ecdb3 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 2 Feb 2017 11:27:15 +0100 Subject: [PATCH 08/14] =?UTF-8?q?Cr=C3=A9er=20quelque=20chose=20de=20g?= =?UTF-8?q?=C3=A9nial?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index f252dfde89..78b1665271 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -147,7 +147,7 @@ var app4 = new Vue({ todos: [ { text: 'Apprendre JavaScript' }, { text: 'Apprendre Vue' }, - { text: 'Créer un truc top' } + { text: 'Créer quelque chose de génial' } ] } }) @@ -167,7 +167,7 @@ var app4 = new Vue({ todos: [ { text: 'Apprendre JavaScript' }, { text: 'Apprendre Vue' }, - { text: 'Créer un truc top' } + { text: 'Créer quelque chose de génial' } ] } }) From 4ef920c702d98f53288e27a7bfbd1da03636c695 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 2 Feb 2017 16:21:35 +0100 Subject: [PATCH 09/14] Update index.md --- src/v2/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 78b1665271..f6cca48b54 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -53,7 +53,7 @@ var app = new Vue({ {% endraw %} -Nous venons tout juste de créer notre première application Vue ! Ça ressemble sacrément à du simple rendu dans un template, mais Vue effectue un réel travail dans l'ombre. Les données et le DOM sont maintenant couplés, et tout est à présent **réactif**. Comment s'en rendre compte ? Ouvrez juste la console JavaScript de votre navigateur (là maintenant, sur cette page) et attribuez à `app.message` différentes valeurs. Vous devriez voir le rendu de l'exemple en cours se mettre à jour en concordance. +Nous venons tout juste de créer notre première application Vue ! Ça ressemble au rendu d'une chaîne de caractères dans un template, mais sous le capot, Vue effectue un réel travail. Les données et le DOM sont maintenant couplés, et tout est à présent **réactif**. Comment s'en rendre compte ? Ouvrez juste la console JavaScript de votre navigateur (là maintenant, sur cette page) et attribuez à `app.message` différentes valeurs. Vous devriez voir le rendu de l'exemple en cours se mettre à jour en concordance. En plus de l'interpolation de texte, nous pouvons également lier les attributs d'un élément comme ceci : From 25e4f8cd59aa91a04f4e41cd5a8d26bd30127f40 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 2 Feb 2017 17:55:32 +0100 Subject: [PATCH 10/14] =?UTF-8?q?=C3=87a=20ressemble=20=C3=A0=20un=20simpl?= =?UTF-8?q?e=20rendu...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index f6cca48b54..eb6405af3a 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -53,7 +53,7 @@ var app = new Vue({ {% endraw %} -Nous venons tout juste de créer notre première application Vue ! Ça ressemble au rendu d'une chaîne de caractères dans un template, mais sous le capot, Vue effectue un réel travail. Les données et le DOM sont maintenant couplés, et tout est à présent **réactif**. Comment s'en rendre compte ? Ouvrez juste la console JavaScript de votre navigateur (là maintenant, sur cette page) et attribuez à `app.message` différentes valeurs. Vous devriez voir le rendu de l'exemple en cours se mettre à jour en concordance. +Nous venons tout juste de créer notre première application Vue ! Ça ressemble à un simple rendu de template en chaîne de caractères, mais sous le capot, Vue effectue un réel travail. Les données et le DOM sont maintenant couplés, et tout est à présent **réactif**. Comment s'en rendre compte ? Ouvrez juste la console JavaScript de votre navigateur (là maintenant, sur cette page) et attribuez à `app.message` différentes valeurs. Vous devriez voir le rendu de l'exemple en cours se mettre à jour en concordance. En plus de l'interpolation de texte, nous pouvons également lier les attributs d'un élément comme ceci : From 49c8845764d9a3c20f4331b2ecd79882e58b4331 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 2 Feb 2017 18:06:25 +0100 Subject: [PATCH 11/14] rapide -> simple --- src/v2/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index eb6405af3a..2dda2a4af2 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -258,7 +258,7 @@ Le système de composant est un autre concept important de Vue, car c'est une ab ![Arbre de composants](/images/components.png) -Dans Vue, un composant est essentiellement une instance de Vue avec des options prédéfinies. Déclarer un composant avec Vue est très rapide : +Dans Vue, un composant est essentiellement une instance de Vue avec des options prédéfinies. Déclarer un composant avec Vue est très simple : ``` js // Définit un nouveau composant appelé todo-item From 53d673f4ac9d2c14077b9edc2babc6deae4522e8 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 3 Feb 2017 11:04:46 +0100 Subject: [PATCH 12/14] Correction et reformulation de phrase MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Vue a été conçu et pensé pour pouvoir être adopté de manière incrémentale - Pour une grosse application, il est nécessaire de la diviser entièrement en composants - construire de plus grosses applications - ressembler - essentielles - Assurez-vous donc --- src/v2/guide/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 2dda2a4af2..5c4e4d1643 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -6,13 +6,13 @@ order: 2 ## Vue.js, qu'est-ce que c'est ? -Vue (prononcé /vjuː/, comme le terme anglais **view**) est un **framework évolutif** pour construire des interfaces utilisateur. À la différence des autres frameworks monolithiques, Vue est conçu pour partir des bases et être progressivement pris en main. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l'intégrer avec d'autres bibliothèques ou projets existants. D'un autre côté, Vue est tout à fait capable de faire tourner des applications web monopages quand il est couplé avec [des outils modernes](single-file-components.html) et [des bibliothèques complémentaires](https://github.com/vuejs/awesome-vue#libraries--plugins). +Vue (prononcé /vjuː/, comme le terme anglais _**view**_) est un **framework évolutif** pour construire des interfaces utilisateur. À la différence des autres frameworks monolithiques, Vue a été conçu et pensé pour pouvoir être adopté de manière incrémentale. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l'intégrer avec d'autres bibliothèques ou projets existants. D'un autre côté, Vue est tout à fait capable de faire tourner des applications web monopages quand il est couplé avec [des outils modernes](single-file-components.html) et [des bibliothèques complémentaires](https://github.com/vuejs/awesome-vue#libraries--plugins). Si vous êtes un développeur frontend confirmé et que vous souhaitez comparer Vue avec les autres bibliothèques/frameworks, jetez un œil à la [Comparaison avec les autres frameworks](comparison.html). ## Pour commencer -

    Ce guide officiel présuppose que vous ayez un niveau intermédiaire de connaissance en HTML, CSS et JavaScript. Si vous êtes complètement nouveau dans le développement frontend, ce n'est peut-être pas la solution la plus judicieuse de vous lancer dans un framework pour vos premiers pas — aussi complétez vos bases avant de revenir ! Bien qu'une première expérience avec d'autres frameworks puisse être utile, cela n'est pas obligatoire.

    +

    Ce guide officiel présuppose que vous ayez un niveau intermédiaire de connaissance en HTML, CSS et JavaScript. Si vous êtes complètement nouveau dans le développement *frontend*, ce n'est peut-être pas la solution la plus judicieuse de vous lancer dans un framework pour vos premiers pas — aussi complétez vos bases avant de revenir ! Bien qu'une première expérience avec d'autres frameworks puisse être utile, cela n'est pas obligatoire.

    La manière la plus simple d'essayer Vue.js est d'utiliser [l'exemple Hello World sur JSFiddle](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Si vous le souhaitez, ouvrez-le dans un nouvel onglet afin de suivre pendant que nous parcourons des exemples de base. Vous pouvez aussi simplement créer un fichier `.html` et ajouter Vue avec : @@ -20,7 +20,7 @@ La manière la plus simple d'essayer Vue.js est d'utiliser [l'exemple Hello Worl ``` -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. +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. ## Rendu déclaratif @@ -254,7 +254,7 @@ var app6 = new Vue({ ## Composer avec des composants -Le système de composant est un autre concept important de Vue, car c'est une abstraction qui nous permet de construire de larges applications composées de plus petits composants réutilisables et autonomes. Quand on y pense, presque tous les types d'interface applicative peuvent être abstraites en un arbre de composants. +Le système de composant est un autre concept important de Vue, car c'est une abstraction qui nous permet de construire de plus grosses applications composées de plus petits composants réutilisables et autonomes. Quand on y pense, presque tous les types d'interface applicative peuvent être abstraites en un arbre de composants. ![Arbre de composants](/images/components.png) @@ -342,7 +342,7 @@ var app7 = new Vue({ Ceci n'est qu'un exemple grossier, nous avons réussi à séparer notre application en deux plus petites unités, et chaque enfant est raisonnablement bien découplé de son parent via l'utilisation des props. Nous pouvons maintenant améliorer notre `` avec un template et une logique plus complexes sans affecter l'application parente. -Dans une large application, il est nécessaire de diviser l'application entière en composants afin de rendre le développement plus abordable. Nous parlerons des composants plus précisément [plus tard dans le guide](components.html), mais en attendant voici un exemple (imaginaire) de ce a quoi un template d'application pourrait ressemblé avec des composants : +Pour une grosse application, il est nécessaire de la diviser entièrement en composants afin de rendre le développement plus abordable. Nous parlerons des composants plus précisément [plus tard dans le guide](components.html), mais en attendant voici un exemple (imaginaire) de ce a quoi un template d'application pourrait ressembler avec des composants : ``` html
    @@ -356,11 +356,11 @@ Dans une large application, il est nécessaire de diviser l'application entière ### Parallèle avec les Custom Elements -Vous avez peut-être remarqué que les composants de Vue sont très similaires aux **Custom Elements**, qui sont une partie de la [spécification des Web Components](http://www.w3.org/wiki/WebComponents/). C'est parce que la syntaxe de Vue est vaguement inspirée de cette spécification. Par exemple, les composants de Vue implémentent l'[API Slot](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) et l'attribut spécial `is`. Cependant, il y a quelques différences clés : +Vous avez peut-être remarqué que les composants de Vue sont très similaires aux **Custom Elements**, qui sont une partie de la [spécification des Web Components](http://www.w3.org/wiki/WebComponents/). C'est parce que la syntaxe de Vue est vaguement inspirée de cette spécification. Par exemple, les composants de Vue implémentent l'[API Slot](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) et l'attribut spécial `is`. Cependant, il y a quelques différences essentielles : -1. La spécification des Web Components est toujours à l'état de brouillon, et n'est pas implémentée nativement dans tous les navigateurs. En comparaison, les composants de Vue n'ont besoin d'aucun polyfill et fonctionnent de la même manière dans tous les navigateurs supportés (IE9 et supérieurs). Quand cela est nécessaire, les composants de Vue peuvent également être implémentés à l'intérieur d'un élément personnalisé natif. +1. La spécification des Web Components est toujours à l'état de brouillon, et n'est pas implémentée nativement dans tous les navigateurs. En comparaison, les composants de Vue n'ont besoin d'aucun *polyfill* et fonctionnent de la même manière dans tous les navigateurs supportés (IE9 et supérieurs). Quand cela est nécessaire, les composants de Vue peuvent également être implémentés à l'intérieur d'un élément personnalisé natif. -2. Les composants de Vue fournissent des fonctionnalités importantes qui ne sont pas disponibles dans les éléments personnalisés standards, notamment le flux de données entre composants, la communication par événements personnalisés et l'intégration avec les outils de build. +2. Les composants de Vue fournissent des fonctionnalités importantes qui ne sont pas disponibles dans les éléments personnalisés standards, notamment le flux de données entre composants, la communication par événements personnalisés et l'intégration avec les outils de *build*. ## Prêt pour la suite ? From c76fc981be56e7c185e2a5fb66680c63ddfdcb93 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 3 Feb 2017 11:09:07 +0100 Subject: [PATCH 13/14] Assurez-vous donc --- src/v2/guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 5c4e4d1643..45ca69eb40 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -364,4 +364,4 @@ Vous avez peut-être remarqué que les composants de Vue sont très similaires a ## Prêt pour la suite ? -Nous venons juste d'introduire brièvement les fonctionnalités les plus basiques du cœur de Vue.js — le reste de ce guide va les traiter plus en détail, ainsi que d'autres fonctionnalités avancées. Donc assurez-vous de le lire jusqu'au bout ! +Nous venons juste d'introduire brièvement les fonctionnalités les plus basiques du cœur de Vue.js — le reste de ce guide va les traiter plus en détail, ainsi que d'autres fonctionnalités avancées. Assurez-vous donc de le lire jusqu'au bout ! From 8030639ad8442c3eef7ae2998a3e26e18b98d7c1 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 3 Feb 2017 13:10:23 +0100 Subject: [PATCH 14/14] Some english term in italic --- src/v2/guide/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 45ca69eb40..5914ca56a6 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -8,7 +8,7 @@ order: 2 Vue (prononcé /vjuː/, comme le terme anglais _**view**_) est un **framework évolutif** pour construire des interfaces utilisateur. À la différence des autres frameworks monolithiques, Vue a été conçu et pensé pour pouvoir être adopté de manière incrémentale. Le cœur de la bibliothèque est concentré uniquement sur la partie vue, et il est vraiment simple de l'intégrer avec d'autres bibliothèques ou projets existants. D'un autre côté, Vue est tout à fait capable de faire tourner des applications web monopages quand il est couplé avec [des outils modernes](single-file-components.html) et [des bibliothèques complémentaires](https://github.com/vuejs/awesome-vue#libraries--plugins). -Si vous êtes un développeur frontend confirmé et que vous souhaitez comparer Vue avec les autres bibliothèques/frameworks, jetez un œil à la [Comparaison avec les autres frameworks](comparison.html). +Si vous êtes un développeur *frontend* confirmé et que vous souhaitez comparer Vue avec les autres bibliothèques/frameworks, jetez un œil à la [Comparaison avec les autres frameworks](comparison.html). ## Pour commencer @@ -356,9 +356,9 @@ Pour une grosse application, il est nécessaire de la diviser entièrement en co ### Parallèle avec les Custom Elements -Vous avez peut-être remarqué que les composants de Vue sont très similaires aux **Custom Elements**, qui sont une partie de la [spécification des Web Components](http://www.w3.org/wiki/WebComponents/). C'est parce que la syntaxe de Vue est vaguement inspirée de cette spécification. Par exemple, les composants de Vue implémentent l'[API Slot](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) et l'attribut spécial `is`. Cependant, il y a quelques différences essentielles : +Vous avez peut-être remarqué que les composants de Vue sont très similaires aux **_Custom Elements_**, qui sont une partie de la [spécification des *Web Components*](http://www.w3.org/wiki/WebComponents/). C'est parce que la syntaxe de Vue est vaguement inspirée de cette spécification. Par exemple, les composants de Vue implémentent l'[API Slot](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) et l'attribut spécial `is`. Cependant, il y a quelques différences essentielles : -1. La spécification des Web Components est toujours à l'état de brouillon, et n'est pas implémentée nativement dans tous les navigateurs. En comparaison, les composants de Vue n'ont besoin d'aucun *polyfill* et fonctionnent de la même manière dans tous les navigateurs supportés (IE9 et supérieurs). Quand cela est nécessaire, les composants de Vue peuvent également être implémentés à l'intérieur d'un élément personnalisé natif. +1. La spécification des *Web Components* est toujours à l'état de brouillon, et n'est pas implémentée nativement dans tous les navigateurs. En comparaison, les composants de Vue n'ont besoin d'aucun *polyfill* et fonctionnent de la même manière dans tous les navigateurs supportés (IE9 et supérieurs). Quand cela est nécessaire, les composants de Vue peuvent également être implémentés à l'intérieur d'un élément personnalisé natif. 2. Les composants de Vue fournissent des fonctionnalités importantes qui ne sont pas disponibles dans les éléments personnalisés standards, notamment le flux de données entre composants, la communication par événements personnalisés et l'intégration avec les outils de *build*.