Wie kann ich mit vue.js weniger verbrauchen?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9. Diese Methode ist für alle Computermarken geeignet.

vue verwendet weniger

Abhängigkeits-Download

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

npm install --save less less-loader

3. Wenn die Installation erfolgreich ist, wird die Version nach erfolgreicher Installation angezeigt

Hinweis: Unabhängige Vue-Dateien müssen mit weniger eingeführt werden. k:v; Verwendungsmethode: @k;

lessc -v

this Dann wird auf der Seite ein Quadrat mit einer Breite von 100 Pixeln und einem roten Hintergrund angezeigt Spleißvariablen;

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

Hinweis: Der Pfad muss mit „“ umschlossen werden, @{img }Diese Art von Methode kann nur wirksam werden, wenn Variablen eingeführt werden

3.

<style lang="less"></style>

Sie können sehen, dass weniger verschachtelt werden kann, sodass wir die CSS-Struktur sofort klar erkennen können. Haben Sie herausgefunden, dass die Berechnung mithilfe der Verschachtelung wirklich leistungsfähig ist?

4. Mischen = Funktion

<p class="box"></p>

<style lang="less">
@color:red;
@k:100px;
.box{
width:@k;
height:@k;
background: @color;
}
</style>

5. Matching-Modus

<p class="box1"></p>

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

Die Box passt zu t (oben), also oben.

Die Box passt zu b (unten), also unten;

Um es zusammenzufassen: Was auch immer eingegeben wird, es spielt keine Rolle, wie es sich anfühlt. rrree

　　

8. Operator

Höhe, Breite und Winkel können berechnet werden

<p class="box1">
    <p class="box2">
        <p class="box3"></p>
    </p>
</p>

<style lang="less">
@k:100px;
 .box1{
     width: @k;
     height:@k;
     background: red;
     .box2{
         width: @k/2;
         height:@k/2;
         background: green;
         .box3{
             width: @k/3;
             height:@k/3;
             background: blue;
         }
     }
 }
</style>

　

Weitere Programmierkenntnisse finden Sie unter:

Programmierkurs! !

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