Vue verfügt als eines der derzeit beliebtesten Frontend-Frameworks über eine Fülle an benutzerdefinierten Funktionen und Anweisungen. Unter diesen sind benutzerdefinierte Funktionen ein sehr wichtiger Bestandteil von Vue. Mit benutzerdefinierten Funktionen können Entwickler ihre eigenen JavaScript-Funktionen in Vue-Anwendungen verwenden, um Ereignisse, berechnete Eigenschaften, Filter und mehr zu verarbeiten.
In diesem Artikel stellen wir einige benutzerdefinierte Vue-Funktionen vor und untersuchen ihre Anwendung in Vue-Anwendungen. Zu diesen benutzerdefinierten Funktionen gehören:
1 Benutzerdefinierte Direktive
Die benutzerdefinierte Direktive ist eine der grundlegendsten benutzerdefinierten Funktionen in Vue. Sie können verwendet werden, um DOM-Elementen Verhalten hinzuzufügen. Benutzerdefinierte Direktiven sind eine Möglichkeit, DOM-Elemente direkt zu bearbeiten und können in der Vorlage einer Komponente referenziert werden. Wenn der Benutzer beispielsweise Daten eingibt, können Sie eine benutzerdefinierte Anweisung verwenden, um die Eingabe nur auf Zahlen zu beschränken:
Vue.directive('numeric', {
bind: function (el, Bindung, vnode) {
el.addEventListener('input', function () {
var s = el.value;
if (s.length === 0 || isNaN(s)) {
el.value = '';
return;
}
s = parseFloat(s);
el.value = isNaN(s) ? '' : s.toString();
});}
});
2. Benutzerdefinierte Komponenten
Benutzerdefinierte Komponenten sind in Vue A sehr häufig benutzerdefinierte Funktion. Durch benutzerdefinierte Komponenten können Entwickler einige allgemeine Funktionen kapseln, um sie an mehreren Stellen einfach verwenden zu können. Die benutzerdefinierte Komponente von Vue ist eine .vue-Datei, die Vorlagen-, Skript- und Stilsammlungen enthält. Die folgende Komponente ist beispielsweise ein Zähler mit einer Schaltfläche, die den Zählerwert bei jedem Klick erhöht: Filter definieren (Filter) sind Funktionen zum Ändern des Formats und Stils von Text und können für die Textausgabe aus beliebigen Quellen verwendet werden Anwendung. Ein Datumsformatierungsfilter kann beispielsweise wie folgt implementiert werden:
Vue.filter('formatDate', function (value) {
var date = new Date(value);#🎜🎜 #var Jahr = date.getFullYear();
var Monat = date.getMonth() + 1; var Tag = date.getDate();
<template>
<button @click="increment">{{ count }}</button>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}
</script>
<style scoped>
button {
background-color: blue;
color: white;
}
</style><br>}<br> if (Tag < 10) {<pre class="brush:php;toolbar:false">month = '0' + month;}
return year + '-' + Monat + '-' + Tag;
});
4. Benutzerdefinierte Mixins
Vue Mixins (Mischen) ist ein Weg zu A Technologie, die gemeinsamen Logikcode zwischen mehreren Komponenten kapselt. Diese logischen Codes können gemeinsame Codeblöcke in Komponenten wie Lebenszyklusfunktionen und Daten sein. Der folgende Code zeigt beispielsweise ein Mixin-Objekt, das der Komponente ein globales Ereignis hinzufügt:
Mounted() {
day = '0' + day;
},
destroy() {window.addEventListener('scroll', this.handleScroll)window.removeEventListener('scroll', this.handleScroll)#🎜 🎜# Vue.mixin(globalMixin);
Das obige ist der detaillierte Inhalt vonWas sind die benutzerdefinierten Funktionen von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
