vue.js는 어떻게 덜 사용할 수 있나요?

vue.js는 더 적은 메소드를 사용할 수 있습니다: 1. Less에서는 정의 메소드 [@k:v;] 및 사용 메소드 [@k]를 변수 형태로 정의할 수 있습니다. 2. 문자열 접합 변수; .

이 튜토리얼의 운영 환경: windows10 시스템, vue2.5.2, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 기사: vue.js】

vue.js는 더 적은 방법을 사용할 수 있습니다:

Dependency download

1 먼저 npm을 사용하여 종속성을 다운로드합니다.

npm install --save less less-loader

2. 그런 다음 설치가 성공했는지 확인합니다.

lessc -v

3. 설치가 성공하면 설치 후 버전이 표시됩니다.

1. 그런 다음 vue 파일을 가지고 놀기 시작했습니다.

참고: 독립된 vue 파일을 사용하려면 less

을 도입해야 합니다. , 정의 형식으로 변수를 사용할 수 있으며, 정의 방법: @k:v; 사용 방법: @k;

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

이때 너비 100px, 높이 100px의 정사각형과 빨간색 배경이 페이지에 표시됩니다.

<style></style>

2. 문자열 접합 변수 사용 방법

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

참고: 경로는 ""로 묶어야 하며, @{img}는 변수가 도입된 경우에만 적용됩니다. ;

3. 다층 중첩 + 변수 계산

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

예, 중첩에 less를 사용할 수 있으므로 중첩 외에도 CSS 구조를 한 번에 명확하게 볼 수 있습니다. 그 계산이 정말 강력하다는 걸 알았나요?

4. Mixing = function

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

관련 무료 학습 권장 사항:

JavaScript

(동영상)

위 내용은 vue.js는 어떻게 덜 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!