Comment vue.js peut-il utiliser moins

vue.js peut utiliser less méthodes : 1. En less, on est autorisé à définir sous forme de variables la méthode de définition [@k:v;] et la méthode d'utilisation [@k]; . Variables d'épissure de chaîne.

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.5.2, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

vue.js peut utiliser moins de méthode :

Téléchargement de la dépendance

1. Utilisez d'abord npm pour télécharger la dépendance

npm install --save less less-loader

2. Une fois l'installation terminée, vérifiez si l'installation est réussie ;

3. Si après une installation réussie, la version installée avec succès sera affichée

Méthode de référence

1. main.js

lessc -v

2. Créez ensuite un fichier .vue et commençons à jouer

Remarque : les fichiers de vue indépendants doivent être importés moins

<style></style>

Commencez à utiliser

1. Utilisation de variables en moins

En moins, on est autorisé à définir sous forme de variables, méthode de définition : @k :v; méthode d'utilisation : @ k;

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

À ce moment, il y aura un carré d'une largeur de 100px, une hauteur de 100px et un fond rouge affiché sur la page;

2. String Comment utiliser les variables d'épissage ;

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

Remarque : le chemin doit être enveloppé par "", @{img} ne prendra effet que si des variables sont introduites. ;

3. Imbrication multicouche + calcul de variables

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

Vous pouvez voir que moins peut être utilisé dans l'imbrication, nous permettant de voir le CSS ; structure clairement à la fois ; en plus de l'imbrication, avez-vous constaté que son calcul est Où est la vraie force ?

4. Mixte = fonction

<div>
    <div>
        <div></div>
    </div>
</div>
 
<style>
@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>

Recommandations d'apprentissage gratuites associées :

JavaScript(Vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!