Detaillierte Einführung einer einzelnen Datei in Vue (Codebeispiel)

Dieser Artikel bietet Ihnen eine detaillierte Einführung (Codebeispiel) über einzelne Dateien in Vue. Ich hoffe, dass er für Freunde hilfreich ist.

Front-End-Entwickler, die Vue als Entwicklungstechnologie-Stack verwenden, arbeiten häufig mit Front-End-Konstruktionstools zusammen, um das technische Management des Projekts durchzuführen. Beispielsweise wird die häufig verwendete Lösung Vue Family Bucket + Webpack für die Entwicklung einiger mittlerer und großer Front-End-Projekte verwendet. Mit Webpack sind die Vorteile der Komponentisierung von Vue offensichtlicher. Wir können Front-End-Seiten in der Arbeitspraxis durch die Entwicklung einzelner Dateien erstellen und so die Entwicklungseffizienz verbessern. Es gibt eine solche Frage: „Wenn wir eine einzelne Vue-Datei schreiben, was schreiben wir?“ Viele Leute antworten möglicherweise so: Vorlage ist für Vorlagen verantwortlich, Javascript ist für die Logik verantwortlich und Stil ist verantwortlich für Stil. Wenn die Antwort diesen Punkt erreicht, ist die Weltanschauung eines Vue-Entwicklers im Grunde sehr klar. Wir müssen lediglich Vorlage, Javascript und Stil in eine einzige Dateikomponente schreiben. Wenn wir uns nur darauf beschränken, ist es offensichtlich, dass wir unseren gesamten Entwicklungsprozess nicht durch eine bessere Nutzung einzelner Dateikomponenten bedienen können. Als nächstes werde ich mit Ihnen einige methodische Probleme bei der Vue-Einzeldateientwicklung besprechen.

Das Wesen der Vue-Einzeldatei

Vue-Einzeldatei ist eine Datei mit dem Namen einer bestimmten Dateierweiterung .vue. Der unten gezeigte Code:

ListDemo.vue

<template>
    <div class="list-demo">
        <ul>
            <li v-for="item in list" :key="item.key">{{item.value}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'ListNav',
    data() {
        return {
            list: [
                { key: 'home', value: '首页' },
                { key: 'category', value: '文章分类' },
                { key: 'tags', value: '标签' },
                { key: 'about', value: '关于我' },
                { key: 'links', value: '友情链接'},
            ],
        };
    },
};
</script>

<style>
.list-demo {
    font-size: 14px;
}
</style>

Der Code enthält Vorlage, Skript und Stil. Die Funktionen der drei werden hier nicht im Detail beschrieben. Die obige Struktur zeigt die grundlegende Dateistruktur einer einzelnen Vue-Datei. Die Idee dahinter ist, dass eine einzelne Dateikomponente einer Funktionskomponente entspricht und die Vorlage, der Stil und die Geschäftslogik der Komponente alle in der Nähe verwaltet werden. Unter dem Gesichtspunkt der Wiederverwendbarkeit und späteren Wartbarkeit von Komponenten hat dieses Konzept die Effizienz der Komponentenentwicklung erheblich verbessert. Die einzelne Datei von vue ist weder eine JS-, noch eine HTML- oder eine CSS-Datei. Die Frage wird weiter unten erläutert. Wie wird die einzelne Datei von vue in die Seite verarbeitet?

Der Prozess der Verarbeitung einer einzelnen Vue-Datei

Eine einzelne Vue-Datei wird mit dem Webpack-Build-Tool verwendet und vom Vue-Loader im Webpack verarbeitet. Wie unten gezeigt:

{
    test: /\.vue$/,
    loader: 'vue-loader',
}

Die durch Import oder Require in das Projekt eingeführten Vue-Einzeldateien werden vom Vue-Loader verarbeitet. In diesem Prozess analysiert und verarbeitet der Vue-Loader die Vorlage gemäß Vorlage, Skript und Die Ergebnisse werden zurückgegeben und drei verschiedene Dateitypen zur Verarbeitung an den nächsten Loader übergeben. Wenn die Einzeldateikomponente in „components“ in der übergeordneten Komponente deklariert ist, wird das entsprechende Element in „components“ in den analysierten Skriptcode eingefügt. Dieser Prozess beginnt mit der Eintragsdatei main.js und alle beteiligten Einzeldateikomponenten, die davon abhängig sind, durchlaufen diesen Prozess nacheinander. Danach werden alle Komponenten entsprechend den Abhängigkeiten in der Geschäftslogik instanziiert. Dieser Prozess ist auch eine Methode, die wir häufig in der Entwicklung verwenden. (Sie können hier einen separaten Artikel aufrufen, um den Verarbeitungsprozess von Vue-Loader im Detail zu beschreiben)

Gemeinsame Haltungen für einzelne Dateien

Komponentenverweise in Vorlagen

1. Verwendung

Aufteilen und Verschachteln von Komponenten:

• Spezifisches Unternehmen in kleinere Komponenten aufteilen, entsprechend den Funktionen und späteren Wiederverwendbarkeitsaspekten

• Integrieren Sie kleine Funktionskomponenten (Unterkomponenten) über eine Containerkomponente (übergeordnete Komponente)

Vorgehensweise: Unterkomponenten in übergeordnete Komponenten einführen, Komponenten in Komponenten Registrieren Sie die entsprechende Komponente und fügen Sie sie hinzu Referenzvorlage

in der Vorlage. Diese Methode ist auch eine gängige Methode, die wir in der Einzeldateientwicklung verwenden. Die Instanziierung aller Komponenten ist implizit in der verschachtelten Beziehung der Komponenten und der Geschäftslogik enthalten. Entwickler müssen sich nur um die Einführung der Komponente kümmern, die Komponente in der übergeordneten Komponentenlogik registrieren und die Komponente als Tag in die Vorlage der übergeordneten Komponente einführen. Der Zeitpunkt der Instanziierung der in diesem Prozess einzuführenden Komponenten kann auch in der Geschäftslogik über die v-if-Direktive gesteuert werden.

2. Anwendbare Szenarien

In den meisten Szenarien können wir die Komponentenentwicklung auf diese Weise durchführen. Dieses Modell weist eine Besonderheit auf: Die Einführung von Komponenten wird durch die Komponentenregistrierung und das Schreiben der entsprechenden Komponenten-Tags in die Vorlage abgeschlossen. Das Einführen von Komponenten über Tags in die Vorlage ist unerlässlich. Diese Funktion kann für Entwickler in einigen Geschäftsszenarien mit einem gewissen Maß an wiederkehrender Arbeit verbunden sein.

Aufrufe im API-Stil

Aufrufe im API-Stil beziehen sich auf das manuelle Erstellen von Instanzen von Unterkomponenten. Es ist nicht erforderlich, Komponenten und Platzhalter für Vorlagen-Tags in die Geschäftslogik einzuführen API. Instanziierung und Anzeige.

1. Verwendung

• Das Funktionsmodul stellt ein Eingangs-JS zur Verfügung, um die gesamte Funktionslogik der Auftragsdateiinstanz des Funktionsmoduls zu steuern

• Wenn Sie dieses Funktionsmodul in anderen Komponenten verwenden, rufen Sie die js unter dem Funktionsmodul auf und übergeben Sie einige Parameter

Operationsmethode:

Confirm.vue

<template>
    <el-dialg
        title="test"
        :visible.sync="visible">
        {{content}}
        <el-button @click="handleCancelClick">cancel</el-button>
        <el-button @click="handleOkClick">ok</el-button>
    </el-dialg>
</template>

<script>
export default {
    name: 'Confirm',
    data() {
        return {
            visible: false,
            content: '这是一个confirm dialog',
            callback: null,
        };
    },
    methods: {
        handleCancelClick() {
            this.callback('cancel');
        },
        handleOkClick() {
            this.callback('confirm');
        },
    },
};
</script>

confirm.js

import Vue from 'vue';
import Confirm from './confirm';

const ConfirmConstructor = Vue.extend(Confirm);

const confirm = (content) => {
    let confirmInstance = new ConfirmConstructor({
        data: {
            content,
        },
    });
    confirmInstance.vm = confirmInstance.$mount();
    confirmInstance.vm.visible = true;
    // 手动插入目的 dom
    document.body.appendChild(confirmInstance.vm.$el);
    confirmInstance.vm.callback = action => {
        return new Promise((resolve, reject) => {
          resolve(action);
        });
    };
    return confirmInstance.vm;
};

如上所示，给出的是一个确认弹框的场景实现。确认弹框在很多用户交互中是一个必须的交互形式。很多组件库也采用上面这种 API 式的组件调用。调用方仅仅通过 api 的调用，就能实现该功能模块的引用。这样就避免了在 template 中通过标签占位的方式引用。实现原理就是手动接管单文件组件的实例化，通过 Vue.extend 获得该组件对应的 Vue 的子类，在暴露给调用的 api 中去实例化这个组件。这个过程中我们可能还要完成一些组件数据的注入，逻辑相关以及手动将该组件插入到目的 dom 中。手动的注入 dom 是该种方式的一个很大特点，通过在 api 中动态的注入目的 dom，避免我们在各个业务组件中调用该功能模块时重复性的在业务组件 template 中手写组件标签。

二、适用场景

• 功能聚合度高，组件内逻辑简单，输入输出较为单一，比如一些功能较为独立的弹框

• 一些特殊的自定义指令开发，比如在一些特殊场景的指令，可以复用一些单文件组件，通过在指令的钩子中实例化组件对应的 vue 子类，按照特定的逻辑插入到目的 dom 中（例如：element-ui的v-loading）

区别和共性

共性：通过实例化对应组件完成组件的功能逻辑

区别：实例化的时机和方式不同。模板式的引入通过组件注册和标签引入的方式来使用单文件组件。标签引入解决了子组件插入的 dom 位置问题，开发者无需关心。API 式的单文件组件使用，在 API 调用时手动实例化组件，需要手动控制插入到目的 dom。

总结

vue 的单文件组件提供了 vue 的组件化开发思路，其本质在导出 vue 的一些关键属性，比如生命周期函数，methods，computed， watch，props等。我们可以通过上述两种方式来使用单文件组件，目的在于工程内部尽量减少重复的模板代码，组件解耦。

相关推荐：

webpack入坑之旅（五）加载vue单文件组件_html/css_WEB-ITnose

jquery加载单文件vue组件方法分享

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung einer einzelnen Datei in Vue (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!