Vue가 로컬 범위 및 모듈화를 구현하는 방법

이번에는 Vue가 로컬 범위 및 모듈화를 구현하는 방법과 로컬 범위 및 모듈화를 구현하는 Vue의 주의 사항에 대해 설명하겠습니다. 실제 사례를 살펴보겠습니다.

CSS 모듈은 각 로컬 클래스에 전역적으로 고유한 클래스 이름을 부여하므로 구성 요소 스타일이 서로 영향을 미치지 않습니다. 예:

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

다음과 같이 변환됩니다.

/* button.css */
.button__button--d8fj3 {
 font-size: 16px;
}
.button__mini--f90jc {
 font-size: 12px;
}

CSS 모듈 파일을 가져올 때 로컬 클래스 이름을 전역 클래스 이름으로 매핑하는 개체를 제공합니다.

import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules: 단순화된 클래스 이름 매핑

여기 CSS 모듈을 사용하는 버튼 구성 요소가 있습니다.

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: true,
 [styles.button]: true,
 [styles.mini]: mini
 }">点我</button>
</template>
<script>
 import styles from './button.css'
 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

실제로 CSS 모듈은 Vue 구성 요소에 좋은 선택입니다. 하지만 다음과 같은 단점도 있습니다.

• 데이터에 스타일을 전달해야 합니다

• 글로벌 클래스 이름을 가져오려면 styles.localClassName을 사용해야 합니다.

• 다른 글로벌 클래스 이름이 있으면 반드시 넣어야 합니다. 함께

• 컴포넌트의 속성값에 바인딩하려면 로컬 클래스명과 속성명이 동일하더라도

• 
  

위의 버튼 컴포넌트에 대해 명시적으로 지정해야 합니다. vue-css-modules 사용 이후:

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

현재:

• 데이터에 스타일을 전달할 필요는 없지만 mixins:full_moon_with_face:

• 스타일에 작별 인사를 할 수 있습니다. localClassName

• Change local 클래스 이름은 styleName 속성에 배치되고, 전역 클래스 이름은 클래스 속성에 배치됩니다.

• 로컬 클래스 이름은 구성 요소의 속성을 바인딩합니다. 같은 이름 앞에 modifier

modifier

를 추가하면 됩니다. @button

<button styleName="@button">按钮</button>

이것은

<button styleName="button" data-component-button="true">按钮</button>

와 동일합니다.

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName="$type">按钮</button>

이것은 다음과 동일합니다:

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

이것은 다음과 동일합니다:

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

이것은 다음과 동일합니다:

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

Usage

Vue 템플릿에서 사용

Introd 우스 CSS 템플릿 외부의 모듈

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

템플릿 내부의 CSS 모듈 사용

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 export default {
 mixins: [CSSModules()],
 props: { mini: Boolean }
 }
</script>
<style module>
 .button {
 font-size: 16px;
 }
 .mini {
 font-size: 12px;
 }
</style>

Vue JSX에서 사용

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render() {
 return (
  <button styleName="@button :mini">点我</button>
 )
 }
}

Vue 렌더링 기능에서

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render(h) {
 return h('button', {
  styleName: '@button :mini'
 }, '点我')
 }
}

을 사용하세요. 흥미로운 정보가 있으니 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!

추천 자료:

JS를 사용하여 흑백만 남기고 사진 조작

Vue2 라우팅 탐색 후크를 캡슐화하고 실제 전투에서 사용하세요

위 내용은 Vue가 로컬 범위 및 모듈화를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!