Hallo zusammen, die letzten beiden Artikel „Teilen Sie 5 kleine Kenntnisse über Vue, ich hoffe, es wird Ihnen hilfreich sein (1)“ und „Teilen Sie 5 kleine Kenntnisse über Vue, ich hoffe, es wird Ihnen hilfreich sein (2)“ , heute Wir teilen weiterhin fünf kleine Erkenntnisse über Vue und hoffen, Ihnen helfen zu können.
1. Verwenden Sie Vue.js, um zu einem Element zu scrollen
Wir können mit Vue.js zu einem Element scrollen, indem wir dem Element, zu dem wir scrollen möchten, eine Referenz zuweisen. Anschließend können wir die scrollIntoView-Methode für das der Referenz zugewiesene Element aufrufen, um zu diesem Element zu scrollen. Wir können zum Beispiel schreiben:
<template>
<div id="app">
<button @click="scrollToElement">scroll to last</button>
<p v-for="n of 100" :key="n" :ref="n === 100 ? 'last' : undefined">
{
{ n }}
</p>
</div>
</template>
<script>
export default {
name: "App",
methods: {
scrollToElement() {
const [el] = this.$refs.last;
if (el) {
el.scrollIntoView({ behavior: "smooth" });
}
},
},
};
</script>Wir haben eine Schaltfläche namens scrollToElement, die diese Methode aufruft. Dann haben wir einige p-Elemente, bei denen die letzte Referenz dem letzten p-Element zugewiesen ist. In der scrollToElement-Methode verwenden wir this.$refs.last, um durch Destrukturierung das Element zu erhalten, das der letzten Referenz zugewiesen ist. Dann rufen wir el.scrollIntoView auf und verwenden ein Objekt mit einer Verhaltenseigenschaft, um das Scrollverhalten zu ändern.
2. Wie überwache ich Fenster-Scroll-Ereignisse in Vue.js-Komponenten?
Wir können die Methode window.addEventListener aufrufen, um das Scroll-Ereignis im Browserfenster abzuhören, um so das Fenster-Scroll-Ereignis in der Vue.js-Komponente abzuhören.
Wir könnten zum Beispiel Folgendes schreiben:
<template>
<div id="app">
<p v-for="n of 100" :key="n">{
{ n }}</p>
</div>
</template>
<script>
export default {
name: "App",
created() {
window.addEventListener("scroll", this.handleScroll);
},
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
handleScroll(event) {
console.log(window.scrollY);
},
},
};
</script>Wir rufen die Methode window.addEventListener im erstellten Hook auf und übergeben den Parameter „scroll“, um den Scroll-Ereignis-Listener handleScroll hinzuzufügen, der das Scroll-Ereignis abhört, wenn die Komponente gemountet wird.
Im zerstörten Hook rufen wir die Methode window.removeEventListener auf, um den Scroll-Ereignis-Listener handleScroll zu entfernen.
In der handleScroll-Methode verwenden wir die Eigenschaft window.scrollY, um die vertikale Bildlaufposition zu ermitteln.
In der Vorlage haben wir einige scrollbare Inhalte. Wenn wir durchblättern, sollten wir den aufgezeichneten Wert von scrollY sehen.
3. Wie rufe ich die Vue.js-Methode auf, wenn die Seite geladen wird?
Wir können es aufrufen, wenn die Seite geladen wird, indem wir die Vue.js-Methode im beforeMount-Komponenten-Hook aufrufen.
Wir können zum Beispiel schreiben:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
methods: {
getUnits() {
//...
},
},
beforeMount() {
this.getUnits();
},
};
</script>Fügen Sie die Methode getUnits zum Methodenattribut hinzu.
Wir rufen this.getUnits im beforeMount-Hook auf.
this.getUnits ist die getUnits-Methode in der Objekteigenschaft „methods“.
Wir können es auch beim Laden der Seite ausführen, indem wir die Methode im erstellten Hook aufrufen:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
methods: {
getUnits() {
//...
},
},
created() {
this.getUnits();
},
};
</script>Dasselbe können wir auch im montierten Haken machen:
<template>
<div id="app"></div>
</template><script>
export default {
name: "App",
methods: {
getUnits() {
//...
},
},
mounted() {
this.getUnits();
},
};
</script>Wenn Sie Vue.js zum Erstellen einer Anwendung verwenden, initialisiert Vue.js Komponenten gemäß einer bestimmten Lebenszyklusreihenfolge. Bei diesem Initialisierungsprozess durchläuft jede Komponenteninstanz nacheinander einige spezifische Initialisierungs- und Zerstörungsprozesse, und diese Prozesse bilden den Lebenszyklus der Komponente.
Vue.js bietet einige Hook-Funktionen (auch als Lebenszyklusfunktionen bezeichnet), die in verschiedenen Phasen des Komponentenlebenszyklus nacheinander ausgeführt werden.
VorMount, erstellt und gemountet sind alles Hook-Funktionen des Vue.js-Komponentenlebenszyklus. Ihre Hauptunterschiede und Verwendung sind wie folgt:
1. Hook-Funktion erstellt
Die erstellte Hook-Funktion wird unmittelbar nach der Erstellung der Komponenteninstanz aufgerufen. Zu diesem Zeitpunkt wurden die Datenbeobachtung und der Ereignismechanismus der Komponente initialisiert.
In dieser Phase können wir einige Initialisierungsvorgänge durchführen, z. B. das Initialisieren der Daten der Komponente, das Festlegen der Eigenschaften der Komponente, das Initialisieren des Status der Komponente usw.
2. beforeMount-Hook-Funktion
Die Hook-Funktion beforeMount wird aufgerufen, nachdem die Vorlage kompiliert wurde, aber bevor sie gemountet wird. Zu diesem Zeitpunkt hat Vue.js die Vorlage der Komponente in eine Rendering-Funktion kompiliert und die Rendering-Funktion der Komponenteninstanz zugeordnet.
In dieser Phase können wir einige DOM-Vorgänge ausführen, z. B. den Stil, die Attribute, die untergeordneten Elemente usw. von DOM-Elementen ändern. Es ist jedoch zu beachten, dass die Komponente zu diesem Zeitpunkt noch nicht im DOM gemountet wurde. Daher sollten einige Vorgänge, die Informationen wie Größe und Position von DOM-Elementen abrufen müssen, in der Mount-Hook-Funktion ausgeführt werden.
3. montierte Hakenfunktion
Die Mount-Hook-Funktion wird aufgerufen, nachdem die Komponente im DOM gemountet wurde. Zu diesem Zeitpunkt hat Vue.js die Komponenteninstanz an das angegebene DOM-Element gemountet und ein Rendering durchgeführt.
In dieser Phase können wir auf die DOM-Elemente der Komponente zugreifen und einige Vorgänge ausführen, die für den Zugriff auf die DOM-Elemente erforderlich sind, z. B. das Abrufen der Größe und Position der DOM-Elemente usw. Darüber hinaus ist die gemountete Hook-Funktion auch ein guter Zeitpunkt für die Interaktion mit Bibliotheken von Drittanbietern, da die DOM-Elemente zu diesem Zeitpunkt gerendert wurden.
Kurz gesagt, diese drei Hook-Funktionen sind Hook-Funktionen des Vue.js-Komponentenlebenszyklus. Sie werden nach dem Erstellen der Komponenteninstanz, nach dem Kompilieren der Vorlage, vor dem Mounten und nach dem Mounten aufgerufen, um verschiedene logische Funktionen auszuführen Operationen.
4. Führen Sie bestimmte Vorgänge aus, wenn in Vue.js die Eingabetaste gedrückt wird
Wir können etwas tun, wenn die Eingabetaste gedrückt wird, indem wir dem Element, das dies ausführt, eine v-on:keyup-Direktive hinzufügen.
Wir können zum Beispiel den folgenden Code schreiben:
<template>
<div id="app">
<input v-on:keyup.enter="onEnter" />
</div>
</template>
<script>
export default {
name: "App",
methods: {
onEnter() {
console.log("pressed enter");
},
},
};
</script>Wir verwenden den Eingabemodifikator, um die Direktive v-on:keyup hinzuzufügen, um auf das Drücken der Eingabetaste zu warten.
Wir legen ihren Wert auf die Methode onEnter fest, sodass sie ausgeführt wird, wenn das Eingabefeld fokussiert ist und die Eingabetaste gedrückt wird.
Außerdem können wir @ anstelle von v-on: verwenden, um den Code etwas zu vereinfachen.
Konkret können wir den folgenden Code schreiben:
<template>
<div id="app">
<input @keyup.enter="onEnter" />
</div>
</template>
<script>
export default {
name: "App",
methods: {
onEnter() {
console.log("pressed enter");
},
},
};
</script>Unabhängig davon, welches Beispiel wir verwenden, wenn wir uns auf das Eingabefeld konzentrieren und die Eingabetaste drücken, sollte im Protokoll „Eingabe gedrückt“ angezeigt werden.
5. Wie werden in der Anwendung unterschiedliche Inhalte für mobile Browser angezeigt?
Manchmal möchten wir in Vue.js-Anwendungen unterschiedliche Inhalte für mobile Browser anzeigen.
Wir können feststellen, ob es sich bei einem Browser um einen mobilen Browser handelt, indem wir den Benutzeragenten des Browsers überprüfen und den Inhalt entsprechend anzeigen, indem wir in einer Vue.js-Anwendung unterschiedliche Inhalte für mobile Browser anzeigen.
Wir können zum Beispiel schreiben:
<template>
<div id="app">
<div v-if="!isMobile()">desktop</div>
<div v-else>mobile</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
);
},
},
};
</script>Wir haben eine Methode hinzugefügt, die die Zeichenfolgeneigenschaft isMobile überprüft, um festzustellen, ob sie Schlüsselwörter für mobile Browser enthält.
Dann rufen wir in der Vorlage die Methode isMobile in der v-if-Direktive auf, um festzustellen, ob es sich bei dem Browser um ein nicht mobiles Gerät handelt.
Wenn nicht, zeigen Sie „Desktop“ an, andernfalls verwenden Sie die v-else-Direktive, um „mobile“ anzuzeigen.
Außerdem können wir die Breite des Bildschirms überprüfen und den Inhalt entsprechend anzeigen. Wir können zum Beispiel schreiben:
<template>
<div id="app">
<div v-if="!isMobile">desktop</div>
<div v-else>mobile</div>
</div>
</template><script>
export default {
name: "App",
data() {
return {
isMobile: true,
};
},
mounted() {
this.onResize();
window.addEventListener("resize", this.onResize, { passive: true });
},
methods: {
onResize() {
this.isMobile = window.innerWidth < 600;
},
},
beforeDestroy() {
if (typeof window !== "undefined") {
window.removeEventListener("resize", this.onResize, { passive: true });
}
},
};
</script>Wir verwenden addEventListener, um das Größenänderungsereignis „resize“ abzuhören.
Wenn es ausgelöst wird, führen wir die Methode onResize aus und legen die responsive Eigenschaft isMobile entsprechend der Bildschirmgröße fest.
Wenn window.innerWidth kleiner als 600 ist, setzen Sie es auf true .
Andernfalls setzen wir es auf false .
Im beforeDestroy-Hook rufen wir
window.removeEventListener auf, um den Resize-Ereignis-Listener zu entfernen.
Beenden
Aufgrund des begrenzten Platzes des Artikels werden die heutigen Inhalte hier geteilt. Am Ende des Artikels möchte ich Sie daran erinnern, dass das Erstellen von Artikeln nicht einfach ist. Wenn Ihnen mein Teilen gefällt, vergessen Sie es bitte nicht Liken und leiten Sie es weiter, damit mehr Menschen in Not es sehen. Wenn Sie gleichzeitig mehr Wissen über Front-End-Technologie erwerben möchten, können Sie mir gerne folgen. Ihre Unterstützung wird für mich die größte Motivation sein, sie zu teilen. Ich werde weiterhin mehr Inhalte veröffentlichen, also bleiben Sie dran.
Vorteile für Fans
Teilen Sie den Quellcode von 9 häufig verwendeten TailwindCSS-Kartenvorlagen. Wenn er Ihnen gefällt, laden Sie ihn herunter und sammeln Sie ihn