<commit_before>---
title: Composants
type: guide
order: 11
---

## Exemple de base

Voici un exemple de composant Vue :

``` js
// Définition d'un nouveau composant appelé `button-counter`
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
})
```

Les composants sont des instances de Vue réutilisables avec un nom : dans notre cas `<button-counter>`. Nous pouvons utiliser ce composant en tant qu'élément personnalisé à l'intérieure d'une instance de Vue racine créée avec `new Vue` :

```html
<div id="components-demo">
  <button-counter></button-counter>
</div>
```

```js
new Vue({ el: '#components-demo' })
```

{% raw %}
<div id="components-demo" class="demo">
  <button-counter></button-counter>
</div>
<script><commit_msg>Update components.md (#163)<commit_after>---
title: Composants
type: guide
order: 11
---

## Exemple de base

Voici un exemple de composant Vue :

``` js
// Définition d'un nouveau composant appelé `button-counter`
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
})
```

Les composants sont des instances de Vue réutilisables avec un nom : dans notre cas `<button-counter>`. Nous pouvons utiliser ce composant en tant qu'élément personnalisé à l'intérieur d'une instance de Vue racine créée avec `new Vue` :

```html
<div id="components-demo">
  <button-counter></button-counter>
</div>
```

```js
new Vue({ el: '#components-demo' })
```

{% raw %}
<div id="components-demo" class="demo">
  <button-counter></button-counter>
</div>
<script>
{'fraction_non_alphanumeric': 0.16542217116599656, 'fraction_numerical': 0.005169442848937392, 'mean_word_length': 4.123529411764705, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1974923', 'n_tokens_mistral': 618, 'n_tokens_neox': 596, 'n_words': 177}