Wie kann vue.js weniger verbrauchen?

vue.js kann weniger Methoden verwenden: 1. In weniger können wir die Definitionsmethode [@k:v;] und die Verwendungsmethode [@k] in Form von Variablen definieren .

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.5.2, dieser Artikel gilt für alle Computermarken.

Empfohlene verwandte Artikel: vue.js

vue.js kann weniger Methode verwenden:

Abhängigkeits-Download

1. Verwenden Sie zuerst npm, um Abhängigkeiten herunterzuladen;

npm install --save less less-loader

2 abgeschlossen Überprüfen Sie dann, ob die Installation erfolgreich war.

Referenzmethode

1. Dann erstellen Sie eine. Wir haben angefangen, mit der Vue-Datei zu spielen.

Hinweis: Die unabhängige Vue-Datei muss weniger einführen, um sie verwenden zu können , wir dürfen Variablen in der Form Definition verwenden, Definitionsmethode: @k:v; Verwendungsmethode: @k;

lessc -v

Zu diesem Zeitpunkt ein Quadrat mit einer Breite von 100 Pixel, einer Höhe von 100 Pixel und einem roten Der Hintergrund wird auf der Seite angezeigt.

2. String So verwenden Sie Spleißvariablen; <style></style>

import less from 'less'
Vue.use(less)

Hinweis: Der Pfad muss mit „“ umschlossen werden, @{img} wird nur wirksam, wenn die Variable eingeführt wird

3. Mehrschichtige Verschachtelung + Variablenberechnung;

<div></div>
 
<style>
@color:red;
@k:100px;
.box{
width:@k;
height:@k;
background: @color;
}
</style>

Sie haben festgestellt, dass die Berechnung wirklich leistungsstark ist?

4. Mischen = Funktion

<div></div>
 
<style scoped>
@img:&#39;./img/&#39;;
@k:100px;
.box1{
    width:@k;
    height:@k;
    background:url("@{img}1.png")
}
</style>

Verwandte kostenlose Lernempfehlungen: JavaScript

(Video)

Das obige ist der detaillierte Inhalt vonWie kann vue.js weniger verbrauchen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!