ホームページ > 記事 > ウェブフロントエンド > 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-loader2. インストールが完了したら、インストールが成功したかどうかを確認します;
lessc -v3. インストールが成功すると、インストール成功後のバージョンが表示されます;
参照方法
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:'./img/'; @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 サイトの他の関連記事を参照してください。