Application mobile: Présentation | Vue.js

REMARQUE

Vous connaissez déjà Vue 2 et vous souhaitez simplement découvrir les nouveautés de Vue 3 ? Consultez le guide de migration !

Qu’est-ce que Vue.js ?

Vue (prononcé /vjuː/, comme vue) est un cadre progressif pour la construction d’interfaces utilisateur. Contrairement à d’autres frameworks monolithiques, Vue est conçu dès le départ pour être progressivement adoptable. La bibliothèque principale se concentre uniquement sur la couche de vue et est facile à prendre en charge et à intégrer à d’autres bibliothèques ou projets existants. D’un autre côté, Vue est également parfaitement capable d’alimenter des applications sophistiquées à page unique lorsqu’il est utilisé en combinaison avec des outils modernes et des bibliothèques de support. (ouvre une nouvelle fenêtre).

Si vous souhaitez en savoir plus sur Vue avant de vous lancer, nous avons créé une vidéo présentant les principes de base et un exemple de projet.

Regardez un cours vidéo gratuit sur Vue Mastery

Commencer

Installation

ASTUCE

Le guide officiel suppose une connaissance de niveau intermédiaire de HTML, CSS et JavaScript. Si vous êtes totalement nouveau dans le développement frontend, ce n’est peut-être pas la meilleure idée de vous lancer directement dans un framework comme première étape – saisissez les bases puis revenez ! Une expérience préalable avec d’autres frameworks est utile, mais n’est pas requise.

Le moyen le plus simple d’essayer Vue.js est d’utiliser l’exemple Hello World (ouvre une nouvelle fenêtre). N’hésitez pas à l’ouvrir dans un autre onglet et à suivre quelques exemples de base.

La page d’installation fournit plus d’options d’installation de Vue. Remarque : Nous ne pas recommande aux débutants de commencer par vue-cli, surtout si vous n’êtes pas encore familiarisé avec les outils de génération basés sur Node.js.

Rendu déclaratif

Au cœur de Vue.js se trouve un système qui nous permet de rendre des données de manière déclarative au DOM à l’aide d’une syntaxe de modèle simple :

<div id="counter">
  Counter: {{ counter }}
div>

1
2
3

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')

1
2
3
4
5
6
7
8
9

Nous avons déjà créé notre toute première application Vue ! Cela ressemble assez au rendu d’un modèle de chaîne, mais Vue a fait beaucoup de travail sous le capot. Les données et le DOM sont désormais liés, et tout est désormais réactif. Comment savons nous? Jetez un œil à l’exemple ci-dessous où counter la propriété s’incrémente chaque seconde et vous verrez comment le DOM rendu change :

const Counter = {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}

1
2
3
4
5
6
7
8
9
dix
11
12

En plus de l’interpolation de texte, nous pouvons également lier des attributs d’élément comme celui-ci :

<div id="bind-attribute">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound
    title!
  span>
div>

1
2
3
4
5
6

const AttributeBinding = {
  data() {
    return {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  }
}

Vue.createApp(AttributeBinding).mount('#bind-attribute')

1
2
3
4
5
6
7
8
9

Voir la liaison dynamique d’attribut de plume
par Vue (@Vue)
sur CodePen.

Ici, nous rencontrons quelque chose de nouveau. Les v-bind l’attribut que vous voyez s’appelle un directif. Les directives sont précédées de v- pour indiquer qu’il s’agit d’attributs spéciaux fournis par Vue, et comme vous l’avez peut-être deviné, ils appliquent un comportement réactif spécial au DOM rendu. Ici, nous disons essentiellement « garder cet élément title attribut à jour avec le message propriété sur l’instance active actuelle.« 

Gestion des entrées utilisateur

Pour permettre aux utilisateurs d’interagir avec notre application, nous pouvons utiliser le v-on directive pour attacher des écouteurs d’événement qui invoquent des méthodes sur nos instances :

<div id="event-handling">
  <p>{{ message }}p>
  <button v-on:click="reverseMessage">Reverse Messagebutton>
div>

1
2
3
4

const EventHandling = {
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
}

Vue.createApp(EventHandling).mount('#event-handling')

1
2
3
4
5
6
7
8
9
dix
11
12
13
14
15
16
17

Voir la gestion des événements Pen
par Vue (@Vue)
sur CodePen.

Notez que dans cette méthode, nous mettons à jour l’état de notre application sans toucher au DOM – toutes les manipulations du DOM sont gérées par Vue, et le code que vous écrivez se concentre sur la logique sous-jacente.

Vue fournit également le v-model directive qui facilite la liaison bidirectionnelle entre la saisie du formulaire et l’état de l’application :

<div id="two-way-binding">
  <p>{{ message }}p>
  <input v-model="message" />
div>

1
2
3
4

const TwoWayBinding = {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}

Vue.createApp(TwoWayBinding).mount('#two-way-binding')

1
2
3
4
5
6
7
8
9

Voir le Pen Reliure bidirectionnelle
par Vue (@Vue)
sur CodePen.

Conditions et boucles

Il est également facile de basculer la présence d’un élément :

<div id="conditional-rendering">
  <span v-if="seen">Now you see mespan>
div>

1
2
3

const ConditionalRendering = {
  data() {
    return {
      seen: true
    }
  }
}

Vue.createApp(ConditionalRendering).mount('#conditional-rendering')

1
2
3
4
5
6
7
8
9

Cet exemple montre que nous pouvons lier des données non seulement à du texte et des attributs, mais aussi à structure des DOM. De plus, Vue fournit également un puissant système d’effets de transition qui peut appliquer automatiquement des effets de transition lorsque des éléments sont insérés/mis à jour/supprimés par Vue.

Vous pouvez changer seen de true à false dans le bac à sable ci-dessous pour vérifier l’effet :

Voir le rendu conditionnel du stylet
par Vue (@Vue)
sur CodePen.

Il existe de nombreuses autres directives, chacune avec sa propre fonctionnalité spéciale. Par exemple, le v-for La directive peut être utilisée pour afficher une liste d’éléments en utilisant les données d’un tableau :

<div id="list-rendering">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    li>
  ol>
div>

1
2
3
4
5
6
7

const ListRendering = {
  data() {
    return {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  }
}

Vue.createApp(ListRendering).mount('#list-rendering')

1
2
3
4
5
6
7
8
9
dix
11
12
13

Voir le rendu Pen List
par Vue (@Vue)
sur CodePen.

Composer avec des composants

Le système de composants est un autre concept important dans Vue, car c’est une abstraction qui nous permet de créer des applications à grande échelle composées de petits composants autonomes et souvent réutilisables. Si nous y réfléchissons, presque n’importe quel type d’interface d’application peut être résumé dans un arbre de composants :

Arborescence des composants

Dans Vue, un composant est essentiellement une instance avec des options prédéfinies. L’enregistrement d’un composant dans Vue est simple : nous créons un objet composant comme nous l’avons fait avec App objets et nous le définissons dans le parent components option:

const TodoItem = {
  template: `
  • This is a todo
  • `
    } const app = Vue.createApp({ components: { TodoItem }, ... }) app.mount(...)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    dix
    11
    12
    13
    14

    Vous pouvez maintenant le composer dans le modèle d’un autre composant :

    <ol>
      
      <todo-item>todo-item>
    ol>
    

    1
    2
    3
    4

    Mais cela rendrait le même texte pour chaque tâche, ce qui n’est pas super intéressant. Nous devrions être en mesure de transmettre les données de la portée parent aux composants enfants. Modifions la définition du composant pour qu’il accepte un accessoire :

    app.component('todo-item', {
      props: ['todo'],
      template: `<li>{{ todo.text }}li>`
    })
    

    1
    2
    3
    4

    Maintenant, nous pouvons passer le todo dans chaque composant répété en utilisant v-bind:

    <div id="todo-list-app">
      <ol>
        
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        >todo-item>
      ol>
    div>
    

    1
    2
    3
    4
    5
    6
    7
    8
    9
    dix
    11
    12
    13
    14
    15

    const TodoList = {
      data() {
        return {
          groceryList: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Whatever else humans are supposed to eat' }
          ]
        }
      }
    }
    
    const app = Vue.createApp(TodoList)
    
    app.component('todo-item', {
      props: ['todo'],
      template: `<li>{{ todo.text }}li>`
    })
    
    app.mount('#todo-list-app')
    

    1
    2
    3
    4
    5
    6
    7
    8
    9
    dix
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    Voir le Pen Intro-Components-1
    par Vue (@Vue)
    sur CodePen.

    Ceci est un exemple artificiel, mais nous avons réussi à séparer notre application en deux unités plus petites, et l’enfant est raisonnablement bien découplé du parent via l’interface props. Nous pouvons maintenant améliorer encore notre composant avec un modèle et une logique plus complexes sans affecter l’application parent.

    Dans une grande application, il est nécessaire de diviser l’ensemble de l’application en composants pour rendre le développement gérable. Nous parlerons beaucoup plus des composants plus loin dans le guide, mais voici un exemple (imaginaire) de ce à quoi pourrait ressembler le modèle d’une application avec des composants :

    <div id="app">
      <app-nav>app-nav>
      <app-view>
        <app-sidebar>app-sidebar>
        <app-content>app-content>
      app-view>
    div>
    

    1
    2
    3
    4
    5
    6
    7

    Relation avec les éléments personnalisés

    Vous avez peut-être remarqué que les composants Vue ressemblent à Éléments personnalisés, qui font partie de la spécification des composants Web (ouvre une nouvelle fenêtre). En effet, certaines parties de la conception des composants de Vue (par exemple l’API slot) ont été influencées par la spécification avant qu’elle ne soit nativement implémentée dans les navigateurs.

    La principale différence est que le modèle de composant de Vue est conçu comme faisant partie d’un cadre cohérent qui fournit de nombreuses fonctionnalités supplémentaires nécessaires à la création d’applications non triviales, par exemple la modélisation réactive et la gestion d’état – les deux ne sont pas couverts par la spécification.

    Vue fournit également un excellent support pour la consommation et la création d’éléments personnalisés. Pour plus de détails, consultez la section Vue et composants Web.

    Prêt pour plus ?

    Nous avons brièvement présenté les fonctionnalités les plus basiques du noyau de Vue.js – le reste de ce guide les couvrira ainsi que d’autres fonctionnalités avancées avec des détails beaucoup plus fins, alors assurez-vous de tout lire !

    #Présentation #Vuejs