Comment utiliser Vue

Vue.js est un framework JavaScript populaire pour créer des applications Web interactives. Son idée principale est de séparer les vues et les états, permettant ainsi aux développeurs de créer facilement des composants réutilisables. Vue.js peut être considéré comme un concurrent de React.js et Angular.js, mais il est plus facile à démarrer, a une taille de fichier plus petite et des performances plus rapides. Dans cet article, nous verrons comment utiliser Vue.js.

1. Installer Vue.js

Pour commencer à utiliser Vue.js, vous devez l'installer. Vue.js peut être installé à l'aide de npm (Node Package Manager) ou CDN (Content Delivery Network). L'installation de Vue.js à l'aide de npm nécessite d'exécuter la commande suivante dans la ligne de commande :

npm install vue

Si vous utilisez un CDN, vous pouvez simplement ajouter le code suivant :

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. Créez une instance Vue

Une fois Vue.js installé installé, vous pouvez créer une instance Vue. Le code suivant peut être ajouté au fichier HTML :

<div id="app">
  {{ message }}
</div>

Le code ci-dessus créera une instance Vue et ajoutera un contenu texte à l'élément HTML avec l'identifiant "app". Les doubles accolades indiquent que Vue lie une variable "message". Vous devez maintenant définir l'objet Vue dans votre fichier JavaScript et le lier à l'élément HTML avec l'identifiant "app".

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

Le code ci-dessus lie l'objet Vue à l'élément HTML avec l'identifiant "app" et définit sa variable "message" sur "Bonjour, Vue !". Votre application Vue est maintenant prête et affiche « Bonjour, Vue ! »

3. Utilisation des liaisons Vue

L'une des fonctionnalités les plus puissantes de Vue.js est la liaison bidirectionnelle et les directives. Lorsque l’état de l’application change, cela se reflète immédiatement dans la vue. Voici quelques exemples de liaisons Vue.

Attribut de liaison :

<img  src="/static/imghwm/default1.png" data-src="imageURL" class="lazy" v-bind: alt="Comment utiliser Vue" >

Cela liera une URL d'image de sorte que chaque fois que l'URL de l'image change, l'attribut src de l'image change également.

Événement Bind :

<button v-on:click="submitForm">Submit</button>

Cela liera un événement de clic et la méthode submitForm sera déclenchée lorsque le bouton est cliqué.

Rendu conditionnel :

<div v-if="isAuthentiticated">Welcome, user!</div>

Cela affichera le message de bienvenue lorsque l'utilisateur aura été authentifié.

4. Componentisation

L'une des idées fondamentales de Vue.js est de décomposer les vues en composants réutilisables. Ces composants peuvent être utilisés dans différentes parties de l'application et sont mis à jour lors de la mise à jour de l'application. Voici un exemple de création d'un composant Vue :

Vue.component('my-component', {
  props: ['name'],
  template: '<div>Hello, {{ name }}!</div>'
})

Le code ci-dessus créera un composant Vue et ajoutera un attribut appelé "name" dans le HTML. Lorsque le composant est rendu, la variable "name" sera remplacée par la valeur de propriété correspondante. Vous pouvez utiliser ce composant n'importe où dans votre application comme ceci :

<my-component name="World"></my-component>

Cela affichera un message "Bonjour tout le monde !".

5. Gestion de l'état

L'état de l'application est un concept très important. Vue.js fournit la bibliothèque Vuex pour gérer l'état de l'application. Vuex est un gestionnaire d'état Vue global. Voici un exemple d'utilisation de Vuex pour stocker l'état :

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Le code ci-dessus créera un état appelé "count" et fournira une méthode appelée "increment" afin que l'état puisse être incrémenté. Maintenant, dans le composant Vue, vous pouvez lire ou mettre à jour cet état comme ceci :

computed: {
    count () {
      return this.$store.state.count
    }
  },
methods: {
    increment () {
      this.$store.commit('increment')
    }
  }

Le code ci-dessus connecte le composant Vue au magasin Vuex et fournit une propriété calculée appelée "count" et une propriété calculée appelée méthode "increment". Votre application Vue a désormais implémenté la gestion de l'état.

Résumé

Vue.js est un framework JavaScript flexible, facile à apprendre et à utiliser. Il fournit un ensemble puissant de fonctionnalités pour vous aider à créer des applications Web dynamiques. Cet article explique comment installer Vue.js, créer des instances Vue, utiliser la liaison Vue, la composantisation et la gestion des états. Espérons que ces exemples simples de Vue.js vous aideront à explorer davantage les capacités du framework.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!