Compétences de développement essentielles et exemples pour les débutants de VUE3-Voir.js-php.cn

Compétences de développement essentielles et exemples pour les débutants de VUE3

王林

Libérer： 2023-06-16 09:00:10

original

880 Les gens l'ont consulté

VUE3 est l'un des frameworks les plus utilisés parmi les frameworks front-end, et de plus en plus de développeurs commencent à essayer de l'apprendre et de l'utiliser. En Chine notamment, l’application de VUE3 a couvert de nombreux domaines, aussi bien sur mobile que sur PC. Par conséquent, cet article fournira aux débutants quelques conseils et exemples essentiels pour le développement de VUE3 afin de les aider à se développer plus rapidement et plus efficacement.

Utilisez l'échafaudage VUE3 pour créer rapidement des projets

Dans le processus d'apprentissage de VUE3, de nombreuses personnes peuvent construire le projet étape par étape, ce qui prend beaucoup de temps et est sujet aux erreurs. Par conséquent, nous pouvons utiliser l'outil d'échafaudage fourni avec VUE3 pour créer rapidement un projet Vue. La commande est la suivante :

npm install -g @vue/cli
vue create my-project

Copier après la connexion

Avec cette commande, nous pouvons créer rapidement un projet basé sur VUE3.

Utilisez l'API Composition dans VUE3

VUE3 a ajouté une nouvelle API Composition, qui nous permet de gérer plus facilement la logique des composants. Grâce à l'API Composition, la même logique peut être extraite dans une fonction et réutilisée dans des composants, améliorant ainsi la maintenabilité et la lisibilité du code. L'exemple de code est le suivant :

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup(){
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
})

Copier après la connexion

Dans le code ci-dessus, nous utilisons la fonction defineComponent pour définir un composant, et utilisons la fonction setup pour initialiser les variables réactives définies. et fonctions ; où Utilisez ref pour définir des variables réactives, utilisez des fonctions fléchées pour définir des fonctions réactives increment et renvoyez ces deux variables et fonctions dans la portée. Cela rend nos composants plus simplifiés et réutilisables. defineComponent函数来定义一个组件，并使用setup函数来初始化定义的响应式变量和函数；其中用到了ref来定义响应式变量，使用箭头函数来定义响应式函数increment，并在范围内返回这两个变量和函数。这样可以使我们的组件更加简化和可复用。

使用VUE3中的Teleport组件

VUE3新增了Teleport组件，它可以让我们将某个组件在页面中的特定位置渲染，这种功能在实际项目中非常实用。比如我们可以使用Teleport在<body>中插入一个模态框组件，这样不仅可以保证模态框组件的样式覆盖范围更大，而且使得代码更加简洁易读。示例代码如下：

<template>
  <teleport to="body">
    <Modal :visible="visible" @update:visible="onClose"/>
  </teleport>
</template>

Copier après la connexion

在上述代码中，我们在<Modal>组件外部添加了一个<teleport>标签，然后将其to属性设置为"body"，这将会将<Modal>组件渲染到页面的<body>标签中。

使用VUE3中的Fragment组件

VUE3中新增的Fragment组件，可以让我们在不添加额外节点的情况下，返回多个子节点。这在实际开发中也非常方便，可以使得代码更加简洁清晰。示例代码如下：

<template>
  <div>
    <h1>Hello World!</h1>
    <Fragment>
      <p>Welcome to </p>
      <p>VUE3 World</p>
    </Fragment>
  </div>
</template>

Copier après la connexion

在上述代码中，我们使用Fragment组件，将两个标签进行了合并，并将它们作为一个整体的子节点，这样可以使得语义更加清晰。

使用VUE3中的全局组件

在VUE3中，可以通过app.component来定义全局组件，全局组件可以在任何地方使用，使得代码复用更加方便。示例代码如下：

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})

app.component('myComponent', MyComponent)

app.mount('#app')

Copier après la connexion

在上述代码中，我们定义了一个命名为myComponent的全局组件，它的模板是由MyComponent.vue文件定义的。然后我们使用app.mount

Teleport

<body>

<teleport>

<Modal>

à L'attribut

"body"

<Modal>

<body>

Fragment