Grundlegende Entwicklungsfähigkeiten und Beispiele für VUE3-Anfänger-View.js-php.cn

Grundlegende Entwicklungsfähigkeiten und Beispiele für VUE3-Anfänger

王林

Freigeben： 2023-06-16 09:00:10

Original

965 Leute haben es durchsucht

VUE3 ist eines der am häufigsten verwendeten Frameworks unter den Front-End-Frameworks, und immer mehr Entwickler versuchen, es zu erlernen und zu verwenden. Vor allem in China deckt die Anwendung von VUE3 viele Bereiche ab, sowohl auf Mobilgeräten als auch auf PCs. Daher bietet dieser Artikel Anfängern einige wichtige Tipps und Beispiele für die VUE3-Entwicklung, damit sie schneller und effizienter entwickeln können.

Verwenden Sie das VUE3-Gerüst, um schnell Projekte zu erstellen

Beim Erlernen von VUE3 bauen viele Menschen das Projekt möglicherweise Schritt für Schritt auf, was viel Zeit in Anspruch nimmt und fehleranfällig ist. Daher können wir das mit VUE3 gelieferte Gerüsttool verwenden, um schnell ein Vue-Projekt zu erstellen. Der Befehl lautet wie folgt:

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

Nach dem Login kopieren

Mit diesem Befehl können wir schnell ein Projekt basierend auf VUE3 erstellen.

Verwenden Sie die Composition API in VUE3

VUE3 hat eine neue Composition API hinzugefügt, die es uns ermöglicht, die Logik von Komponenten bequemer zu verwalten. Mithilfe der Composition API kann dieselbe Logik in eine Funktion extrahiert und in Komponenten wiederverwendet werden, wodurch die Wartbarkeit und Lesbarkeit des Codes verbessert wird. Der Beispielcode lautet wie folgt:

import { defineComponent, ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
})

Nach dem Login kopieren

Im obigen Code verwenden wir die Funktion defineComponent, um eine Komponente zu definieren, und verwenden die Funktion setup, um die definierten reaktiven Variablen zu initialisieren und Funktionen; wobei ref zum Definieren reaktiver Variablen verwendet wird, Pfeilfunktionen zum Definieren reaktiver Funktionen increment verwendet werden und diese beiden Variablen und Funktionen im Bereich zurückgegeben werden. Dadurch werden unsere Komponenten einfacher und wiederverwendbar. defineComponent函数来定义一个组件，并使用setup函数来初始化定义的响应式变量和函数；其中用到了ref来定义响应式变量，使用箭头函数来定义响应式函数increment，并在范围内返回这两个变量和函数。这样可以使我们的组件更加简化和可复用。

使用VUE3中的Teleport组件

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

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

Nach dem Login kopieren

在上述代码中，我们在<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>

Nach dem Login kopieren

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

使用VUE3中的全局组件

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

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

const app = createApp({})

app.component('myComponent', MyComponent)

app.mount('#app')

Nach dem Login kopieren

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

Teleport

<body>

<teleport>

<Modal>

to hinzugefügt Das Attribut

"body"

<Modal>

<body>

Fragment

app.component

myComponent

MyComponent.vue

app.mount

Das obige ist der detaillierte Inhalt vonGrundlegende Entwicklungsfähigkeiten und Beispiele für VUE3-Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!