diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 1c2c7e3b28..5914ca56a6 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 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). -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, jetez 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 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.

-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 [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 ``` -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è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. -## 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 faire le rendu des données déclarativement dans le DOM en utilisant simplement cette syntaxe de template : ``` 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 à 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. -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 attributs d'un élément 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 le ' + 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 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 ». -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 assez 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éments 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 quelque chose de génial' } ] } }) @@ -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 quelque chose de génial' } ] } }) {% 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 ajouté à 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 invoquent des méthodes sur nos 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 sur la logique sous-jacente. -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 fait de la liaison de données bidirectionnelle entre les champs d'un formulaire et l'état de l'application une simple formalité : ``` 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 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. -![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. Déclarer un composant avec Vue est très simple : ``` js -// Define a new component called todo-item +// Définit 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 l'insérer dans 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 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', { - // 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 » qui 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, 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. -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: +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
    @@ -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 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. 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'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. 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 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*. -## 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 plus en détail, ainsi que d'autres fonctionnalités avancées. Assurez-vous donc de le lire jusqu'au bout !