[Front-End-Wörterbuch] 5 häufige Probleme bei der Verwendung von Vue

Vorwort

Heute werde ich 5 Probleme, die möglicherweise auch im Entwicklungsprozess auftreten, mit Vue teilen.

5 häufige Probleme bei der Verwendung von Vue

Benutzerdefinierter Pfadalias

Einige Leute haben möglicherweise bemerkt, dass diese Syntax beim Importieren von Komponenten in die von vue-cli generierte Vorlage verwendet wird:

import Index from '@/components/Index'

Was ist das? Als ich später die Konfigurationsdatei änderte, stellte ich fest, dass dies eine der Konfigurationsoptionen von webpack: path alias war.

Wir können der Basiskonfigurationsdatei auch eigene Pfad-Aliase hinzufügen. Legen Sie beispielsweise ~ als Alias ​​für den Pfad src / components fest:

// build/webpack.base.js

{

  resolve: {

    extensions: ['.js', '.vue', '.json'],

    alias: {

      'vue$': 'vue/dist/vue.esm.js',

      '@': resolve('src'),

      '~': resolve('src/components')

    }

  }

}

Dann können wir beim Importieren von Komponenten folgendermaßen schreiben:

// import YourComponent from '/src/components/YourComponent'

import YourComponent from '~/YourComponent'

Es löst nicht nur die Probleme eines zu langen Pfades, sondern auch die Probleme eines relativen Pfades, was viel bequemer ist!

CSS-Bereich und Module

In-Component-Stil

Im Allgemeinen ist der Stil im <style> </ style> -Tag in der Komponente global. Wenn Sie eine UI-Bibliothek eines Drittanbieters (z. B. Element) verwenden, wirkt sich der globale Stil wahrscheinlich auf den Stil der UI-Bibliothek aus.

Wir können den Stil im Stil nur auf die aktuelle Komponente anwenden, indem wir ein Attribut mit Gültigkeitsbereich hinzufügen:

<style lang="less" scoped>

  @import 'other.less';

  .title {

    font-size: 1.2rem;

  }

</style>

Das Importieren anderer Stile in das Stil-Tag mit dem Gültigkeitsbereichsattribut ist ebenfalls auf den Bereich beschränkt und wird zum Stil in der Komponente. Es wird nicht empfohlen, Stile mit einem hohen Grad an Wiederverwendung zu verwenden.

Stil importieren

　Verglichen mit dem Stil innerhalb der Komponente, wenn das Gültigkeitsbereichsattribut im Stil verwendet wird, müssen wir manchmal auch einige globale Stile hinzufügen. Natürlich können wir Stil ohne Gültigkeitsbereichsattribut verwenden, um einen globalen Stil zu schreiben.

Im Vergleich wird jedoch Folgendes empfohlen:

/* 单独的全局样式文件 */

/* style-global.less */

body {

  font-size: 10px;

}

.title {

  font-size: 1.4rem;

  font-weight: bolder;

}

Importieren Sie dann den globalen Stil in die Eingabedatei:

// src/main.js

import 'style-global.less'

Tipps zur Verwendung von v-for

Der v-for-Befehl ist sehr leistungsfähig und kann nicht nur zum Durchlaufen von Arrays, Objekten, sondern auch von Zahlen oder Zeichenfolgen verwendet werden.

Die grundlegende Grammatik wird nicht erklärt, hier ein kleiner Tipp:

Indexwert

Wenn Sie v-for verwenden, um DOM basierend auf Objekten oder Arrays zu generieren, müssen Sie manchmal den aktuellen Index kennen. Wir können das schaffen:

<ul>

  <li v-for='(item, key) in items' :key='key'> {{ key }} - {{ item }}

</ul>

Sie müssen jedoch beim Durchlaufen von Zahlen aufpassen. Der Wert der Zahl beginnt bei 1 und der Schlüssel beginnt bei 0:

<ul>

  <li v-for='(v, k) in 3' :key='k'> {{ k }}-{{ v }}

</ul>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

Dies weist auf das Problem in vue hin

Methode kann keine Pfeilfunktionen verwenden

Da die Pfeilfunktion an den Kontext des übergeordneten Bereichs gebunden ist, verweist dies nicht wie erwartet auf die Vue-Instanz.

const App = new Vue({

    el: 'body',

    methods: {

        foo: () => {

            console.log(this) // undefined

        }

    }

})

const App = new Vue({

    el: 'body',

    methods: {

        foo () {

            console.log(this) // Vue instance

        }

    }

})

Die Methode in der Methode verwendet den Timer, um die Pfeilfunktion zu verwenden

Diese Richtung in der Pfeilfunktion ist fest, dh die Richtung, in der die Funktion definiert ist,
und diese Richtung in der normalen Funktion ändert sich, dh die Richtung, in der die Funktion verwendet wird

Pfeil Funktionscode:

methods: {

  goPage: function (index) {

    this.newPage = index

  },

  inv: function () {

    this.invt = setInterval(() => {

      this.goPage(this.nextPage)

      console.log(this)

      //此时的this指向是该vue组件，不管在哪使用，指向都是该vue组件

    }, 1000)

  }

}

Der Code der gewöhnlichen Funktion:

methods: {

  goPage: function (index) {

    this.newPage = index

  },

  inv: function () {

    this.invt = setInterval(function () {

      this.goPage(this.nextPage)

      console.log(this)

      //此时的this并不是该vue组件，而是指向window。

    }, 1000)

  }

}

setInterval () und setTimeout () sind Funktionen des Fensterobjekts, sodass dies auf das Fenster verweist

Eine Vorlagenvorlage kann nur ein renderbares untergeordnetes Element enthalten

Es kann nur ein renderbares untergeordnetes Element unter einer <Vorlage> geben, andernfalls wird ein Fehler
wie folgt gemeldet:

welches ist:

    <template>

      <h1>Title</h1>

      <p>Balabala...</p>

      <p>Balabala...</p>

    </template>

    // 应该为

    <template>

      <div>

        <h1>Title</h1>

        <p>Balabala...</p>

        <p>Balabala...</p>

      </div>

    </template>

Zu guter Letzt

Dieser Artikel stammt aus meinen Notizen, ein Teil des Inhalts hat die Quelle vergessen.

Wenn Sie der [großen Front-End-Austauschgruppe] beitreten möchten, folgen Sie dem offiziellen Konto und klicken Sie auf "Kommunikation und Gruppe hinzufügen", um einen Roboter hinzuzufügen, der Sie automatisch in die Gruppe zieht. Folgen Sie mir, um so schnell wie möglich die neuesten Trockenwaren zu erhalten.