Vue3 - Prise en main

Vue.js est un framework JavaScript progressif principalement utilisé pour construire des interfaces utilisateur.

Lorsque vous commencez tout juste à apprendre Vue, nous ne recommandons pas d'utiliser l'outil en ligne de commande vue-cli pour créer des projets. Une façon plus simple consiste à inclure directement le fichier vue.global.js dans la page pour tester et apprendre.

Une application dans Vue3 est créée en utilisant la fonction createApp, avec le format de syntaxe suivant :

const app = Vue.createApp({ /* 根组件选项 */ })

Les options passées à createApp servent à configurer le composant racine.

L'instance d'application ne doit être rendue qu'après l'appel de la méthode.mount()..mount()La méthode accepte un paramètre "container", qui peut être un élément DOM réel ou une chaîne de sélecteur CSS :

<div id="app"></div>
app.mount('#app')

Un exemple simple :

Vue.createApp(HelloVueApp).mount('#hello-vue')

Le paramètre de createApp est le composant racine (HelloVueApp). Lors du montage de l'application, ce composant est le point de départ du rendu.

Une application doit être montée sur un élément DOM. Le code ci-dessus utilisemount('#hello-vue')pour monter l'application Vue HelloVueApp dans

l'élément.

Ensuite, nous commencerons l'apprentissage à partir duHello Vue!!code.

Exemple Vue 3.0

<div id="hello-vue" class="démo"> {{ message }} </div> ​ <script> const HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } ​ Vue.createApp(HelloVueApp).mount('#hello-vue') </script>

Essayez-le »

Cliquez sur le bouton "Try it" pour voir l'exemple en ligne.

Dans l'exemple ci-dessus, nous introduisons d'abord le fichier JS de Vue dans la page HTML :

<script src="https://cdn.staticfile.net/vue/3.2.36/vue.global.min.js"></script>

Il y a un élément div dans la page HTML :

<div id="hello-vue" class="demo">
  {{ message }}
</div>

mount('#hello-vue')Montez l'application Vue HelloVueApp dans

l'élément.

{{ }}Sert à afficher les propriétés d'un objet et les valeurs de retour des fonctions.

{{ message }}Correspond à la valeurmessagedans l'application.

Template du composant racine

Le template du composant racine est généralement intégré dans la définition du composant, mais il peut aussi être spécifié séparément en définissant directement le template à l'intérieur du conteneur au point de montage.

Exemple

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<script>
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    };
    return { count, increment };
  }
});

app.mount('#app')
</script>

Essayez-le »

Lorsque le composant racine n'a pas d'option template définie, Vue utilisera automatiquement l'innerHTML du conteneur comme template.

Explication du code :

  • Utilisationsetupfonction: Dans Vue 3, la logique du composant est généralementsetupdéfinie dans la fonction. Ici, nous utilisons lasetupfonction pour définir des données réactivescountet méthodes.increment。

  • Utilisationref: Dans l'setupfonction, nous utilisonsrefpour créer des données réactives.count。

  • Définirincrementméthode: Définir uneincrementméthode pour augmentercountla valeur.

  • Retourner des données réactives et des méthodes: Dans lasetupfonction, retournercountetincrement, afin qu'elles puissent être consultées et utilisées dans le template.

Option data

L'option dataest une fonction. Vue appelle cette fonction pendant le processus de création d'une nouvelle instance de composant. Elle doit renvoyer un objet, puis Vue l'enveloppe avec le système de réactivité et le stocke dans l'instance de composant en tant que $data.

Exemple

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

document.write(vm.$data.count) // => 4
document.write("<br>")
document.write(vm.count)       // => 4
document.write("<br>")
// La modification de la valeur de vm.count mettra également à jour $data.count
vm.count = 5
document.write(vm.$data.count) // => 5
document.write("<br>")
// et inversement
vm.$data.count = 6
document.write(vm.count) // => 6

Essayez-le »

Les propriétés d'instance ci-dessus ne sont ajoutées que lors de la première création de l'instance, vous devez donc vous assurer qu'elles se trouvent toutes dans l'objet renvoyé par la fonction data.

Méthodes

Nous pouvons ajouter des méthodes au composant en utilisant l'optionmethods, qui contient un objet des méthodes requises.

Dans l'exemple suivant, nous avons ajouté l'option methods, qui contient la méthodeincrement():

Exemple

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` pointe vers l'instance du composant
      this.count++
    }
  }
})

const vm = app.mount('#app')

document.write(vm.count) // => 4
document.write("<br>")
vm.increment()

document.write(vm.count) // => 5

Essayez-le »
Autres extensions