vue.js の使用量を減らすにはどうすればよいですか

vue.js では、less メソッドを使用できます: 1.less では、変数の形式で定義することができます。定義メソッド [@k:v;] と使用メソッド [@k]; 2 . String スプライス変数。

このチュートリアルの動作環境: Windows10 システム、vue2.5.2、この記事はすべてのブランドのコンピューターに適用されます。

[関連記事の推奨事項: vue.js]

vue.js では使用できるメソッドが少なくなります:

#依存関係のダウンロード

1. まず npm を使用して依存関係をダウンロードします;

npm install --save less less-loader

2. インストールが完了したら、インストールが成功したかどうかを確認します;

lessc -v

3. インストールが成功すると、インストール成功後のバージョンが表示されます;

参照方法

1. main.js

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

2 で、.vue ファイルを作成して、再生を開始しましょう;

注: 独立した vue ファイルには、less

を導入する必要があります。 #

はじめに

1.less での変数の使用;

less で、変数の形式で定義することができます、 定義方法：@k:v; 使用方法：@k;

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

このとき、幅100px、高さ100pxの正方形と、ページに赤い背景が表示されます;

2. 文字列スプライシング変数の使用方法;

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

注: パスは次のようにラップする必要があります。 ""、@{img} は変数が導入された場合にのみ有効になります;

3. 多層ネストされた変数の計算;

<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>

As you見ることができ、ネストすることが少なくなり、CSS 構造を一度に明確に確認できるようになり、ネストに加えて使用した後、彼の計算が非常に強力であることがわかりましたか?

4. Mixing = Function

<div>我是box1</div>
<div>我是box2</div>
 
<style>
//定义一个函数；
.test(@color:red,@size:14px){
    background: @color;
    font-size:@size;
}
.box1{
//  不传参，使用默认的；
    .test()
}
.box2{
//  给函数传参；
    .test(@color:green,@size:30px)
}
</style>

##関連する無料学習の推奨事項:

JavaScript

（ビデオ）＃＃＃＃＃＃

以上がvue.js の使用量を減らすにはどうすればよいですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。