Heim  >  Artikel  >  Web-Frontend  >  Wie kann vue.js weniger verbrauchen?

Wie kann vue.js weniger verbrauchen?

coldplay.xixi
coldplay.xixiOriginal
2020-11-10 14:58:051860Durchsuche

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 .

Wie kann vue.js weniger verbrauchen?

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.

Wie kann vue.js weniger verbrauchen?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 &#39;less&#39;
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?

Wie kann vue.js weniger verbrauchen?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: Wie kann vue.js weniger verbrauchen?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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn