Introduction aux bases du développement de VUE3 : implémentation des fonctions de base

Dans le développement front-end, VUE est sans aucun doute un framework très populaire. Avec la sortie de VUE3, de plus en plus de développeurs ont commencé à apprendre et à utiliser cette nouvelle version de VUE. Cet article présentera comment utiliser VUE3 pour développer une application frontale et démontrera comment implémenter certaines fonctions de base basées sur quelques exemples simples.

1. Préparer l'environnement

Avant de commencer, assurez-vous d'avoir installé Node.js et npm. Ensuite, vous pouvez saisir la commande suivante sur l'interface de ligne de commande pour installer VUE CLI :

npm install -g @vue/cli

Une fois l'installation terminée, vous pouvez utiliser VUE CLI pour créer un nouveau projet. Entrez la commande suivante dans l'interface de ligne de commande :

vue create my-project

où "mon-projet" est le nom de votre propre projet. Ensuite, il vous sera demandé de sélectionner les options de configuration pour VUE. Vous pouvez choisir les options par défaut ou les configurer manuellement. Une fois le projet créé, vous pouvez commencer à utiliser VUE3 pour votre propre développement.

2. Création de composants

Dans VUE, les composants sont un concept important. Un composant typique contient trois parties : modèle, script et style. Le modèle est le contenu HTML du composant, le script est le code logique du composant et le style est la feuille de style du composant. Créons ensuite un composant simple. Tout d'abord, créez un fichier nommé "HelloWorld.vue" dans le répertoire "src/components". Ajoutez le contenu suivant au fichier :

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  methods: {},
  computed: {},
  created() {}
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  color: #333;
}
</style>

Ici, nous définissons un composant nommé "HelloWorld" et définissons une balise H1 comme contenu du composant. De plus, nous définissons également d'autres options, notamment les données, les méthodes, calculées et créées.

3. Utilisation des composants

Après avoir créé le composant, nous devons l'utiliser dans l'application. Ajoutez le contenu suivant dans le fichier "src/App.vue" :

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Ici, nous avons référencé le composant "HelloWorld" dans le composant et enregistré le composant dans "components". Dans l'application, il suffit d'utiliser la balise "" pour référencer le composant. Lorsque nous exécuterons l'application, nous verrons le titre "Hello World" affiché sur la page.

4. Event handler

Dans les applications, nous devons généralement répondre aux opérations de l'utilisateur, telles que cliquer sur des boutons, saisir du texte, etc. Pour le moment, nous devons utiliser des gestionnaires d’événements. Dans VUE, les gestionnaires d'événements peuvent être implémentés via la directive "v-on". Créons ensuite un composant de bouton simple. Lorsque l'utilisateur clique sur le bouton, un événement sera déclenché et une fenêtre contextuelle s'affichera.

Tout d'abord, créez un fichier nommé "Button.vue" dans le répertoire "src/components". Ajoutez le contenu suivant au fichier :

<template>
  <button @click="showAlert">Click me!</button>
</template>

<script>
export default {
  name: 'Button',
  methods: {
    showAlert() {
      window.alert('Hello World!')
    }
  },
}
</script>

<style scoped>
button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Ici, nous avons créé un composant appelé "Button" et défini un bouton. La commande "v-on:click" est utilisée sur le bouton pour lier un événement de clic, et une méthode "showAlert" est appelée lorsque vous cliquez dessus pour afficher une fenêtre contextuelle.

Enfin, ajoutez le contenu suivant dans le fichier "src/App.vue" :

<template>
  <div id="app">
    <Button />
  </div>
</template>

<script>
import Button from '@/components/Button.vue'

export default {
  components: {
    Button
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Ici, nous avons référencé le composant "Button" dans l'application. Lorsque nous exécutons l'application et cliquons sur le bouton, nous verrons une fenêtre pop-up s'afficher.

5. Propriété calculée

Dans les applications, nous avons parfois besoin de calculer une nouvelle valeur en fonction d'un ou plusieurs états. À l’heure actuelle, nous pouvons utiliser des propriétés calculées pour résoudre ce problème. Dans VUE, les propriétés calculées peuvent être implémentées via l'option "calculée". Créons ensuite une propriété calculée pour calculer le carré d'un nombre.

Tout d'abord, créez un fichier nommé "Number.vue" dans le répertoire "src/components". Ajoutez le contenu suivant au fichier :

<template>
  <div>
    <label>Number: </label>
    <input type="number" v-model="number" />
    <p>Number squared: {{ numberSquared }}</p>
  </div>
</template>

<script>
export default {
  name: 'Number',
  data() {
    return {
      number: 0
    }
  },
  computed: {
    numberSquared() {
      return this.number * this.number
    }
  }
}
</script>

<style scoped>
label {
  font-weight: bold;
  margin-right: 10px;
}
input {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width 100px;
  margin-right: 10px;
}
p {
  margin-top: 10px;
}
</style>

Ici, nous avons créé un composant appelé "Number" et défini une zone de saisie pour saisir les nombres. Nous définissons également une propriété calculée "numberSquared" qui est utilisée pour calculer le carré d'un nombre. Lorsque le nombre change, la propriété calculée met automatiquement à jour le carré du nombre et l'affiche sur la page.

Enfin, ajoutez le contenu suivant dans le fichier "src/App.vue" :

<template>
  <div id="app">
    <Number />
  </div>
</template>

<script>
import Number from '@/components/Number.vue'

export default {
  components: {
    Number
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Ici, on référence le composant "Number" dans l'application et on affiche un numéro zone de saisie et le carré de ce nombre.

Summary

Dans cet article, nous avons présenté comment développer une application frontale à l'aide de VUE3 et démontré comment créer des composants, utiliser des gestionnaires d'événements, des propriétés calculées et d'autres fonctions de base. . Grâce à ces exemples, je pense que vous possédez déjà des connaissances et des compétences de base. Bien entendu, VUE3 possède encore de nombreuses fonctions et fonctionnalités puissantes qui attendent que les développeurs les explorent. J'espère que vous pourrez continuer à apprendre et à utiliser VUE3, et continuer à progresser et à innover dans la pratique.

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!