Maison > Article > interface Web > 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éeMéthode de référence
1. main.js
lessc -v2. 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:'./img/'; @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!