Vue에서 간소화된 스타일을 구현하는 방법(자세한 튜토리얼)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Vue에서 간소화된 스타일을 구현하는 방법(자세한 튜토리얼)

亚连

Jun 08, 2018 pm 06:04 PM

vue

이 글에서는 Vue 유선형 스타일과 관련된 지식 포인트를 설명하고 관심 있는 친구들이 참고할 수 있도록 예시 코드를 공유합니다.

앞서 언급했듯이

Vue 공식 홈페이지의 스타일 가이드는 우선순위에 따라(필요, 적극 권장, 권장, 주의 사용 순) 분류되어 있으며, 코드 간격이 커서 쿼리하기 어렵습니다. 이 글은 유형별로 분류되었으며, 일부 예제나 설명은 Vue 스타일 가이드의 축약 버전입니다. , 루트 구성 요소 앱은 제외됩니다. 이렇게 하면 모든 HTML 요소 이름이 단일 단어이기 때문에 기존 및 향후 HTML 요소와의 충돌을 피할 수 있습니다

//bad
Vue.component(&#39;todo&#39;, {})
//good
Vue.component(&#39;todo-item&#39;, {})

로그인 후 복사

[단일 파일 구성 요소 파일 이름은 항상 대문자(PascalCase)로 시작하거나 항상 줄 연결(kebab-)이어야 합니다. case)] (강력히 권장)

//bad
mycomponent.vue
//good
MyComponent.vue
//good
my-component.vue

로그인 후 복사

[기본 구성 요소 이름은 특정 접두사로 시작해야 합니다] (강력히 권장)

특정 스타일과 규칙을 적용하는 기본 구성 요소(즉, 논리 또는 상태 비저장 구성 요소가 없는 디스플레이 클래스)는 모두 Base, App 또는 V

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

로그인 후 복사

와 같은 특정 접두사로 시작합니다. 단일 활성 인스턴스만 있어야 하는 구성 요소는 고유함을 표시하기 위해 접두사 The를 붙여 이름을 지정해야 합니다. [강력 권장]

이것은 구성 요소가 단일 페이지에서만 사용될 수 있다는 의미는 아니지만 페이지당 한 번만 사용할 수 있다는 의미입니다. 이러한 구성 요소는 어떤 prop도 허용하지 않습니다.

//bad
components/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue

로그인 후 복사

[및 상위 구성 요소 밀접하게 결합된 하위 구성 요소는 다음과 같이 이름을 지정해야 합니다. 접두사로 상위 구성 요소 이름] (강력 권장)

//bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//good
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

로그인 후 복사

[구성 요소 이름은 상위 수준(일반적으로 일반적인 설명) 단어로 시작하고 설명 수정자로 끝나야 합니다.](강력 권장) 권장)The 前缀命名，以示其唯一性】（强烈推荐）

这不意味着组件只可用于一个单页面，而是每个页面只使用一次，这些组件永远不接受任何 prop

//bad
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
//good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

로그인 후 복사

【和父组件紧密耦合的子组件应该以父组件名作为前缀命名】（强烈推荐）

//bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
//good
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

로그인 후 복사

【组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾】（强烈推荐）

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

로그인 후 복사

【单文件组件和字符串模板中组件名应总是PascalCase——但在DOM模板中总是kebab-case】（强烈推荐）

//bad
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
//good
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

로그인 후 복사

【组件名应该倾向于完整单词而不是缩写】（强烈推荐）

//bad
<template><button class="btn btn-close">X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button class="btn btn-close">X</button></template>
<style scoped>
.btn-close {background-color: red;}
</style>
//good
<template><button :class="[$style.button, $style.buttonClose]">X</button></template>
<style module>
.btn-close {background-color: red;}
</style>

로그인 후 복사

组件相关

【单文件组件、字符串模板和JSX中没有内容的组件应该自闭合——但在DOM模板里不要这样做】（强烈推荐）

自闭合组件表示它们不仅没有内容，而且刻意没有内容

//good
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

로그인 후 복사

【为组件样式设置作用域】（必要）

这条规则只和单文件组件有关。不一定要使用 scoped

//bad
Vue.component(&#39;TodoList&#39;, {})
Vue.component(&#39;TodoItem&#39;, {})
//good
components/
|- TodoList.vue
|- TodoItem.vue

로그인 후 복사

[구성 요소 이름 단일 파일 구성 요소 및 문자열 템플릿에서는 항상 PascalCase여야 하지만 DOM 템플릿에서는 항상 kebab-case여야 합니다.](적극 권장)

el

로그인 후 복사

[구성 요소 이름은 약어 대신 전체 단어로 표시되는 경향이 있습니다.](적극 권장)

name
parent

로그인 후 복사

Component 관련

[JSX에서 단일 파일 구성 요소, 문자열 템플릿 및 내용이 없는 구성 요소는 자체적으로 닫혀야 합니다. 하지만 DOM 템플릿에서는 이 작업을 수행하지 마세요.] (강력히 권장됨)

자체 닫는 구성 요소는 내용이 없을 뿐만 아니라 , 그러나 의도적으로 내용이 없습니다

functional

로그인 후 복사

[구성요소 스타일 범위 설정](필수)

이 규칙은 단일 파일 구성요소에만 관련됩니다. scoped 속성을 사용하는 것은 필요하지 않습니다. 범위 설정은 CSS 모듈을 사용하거나 다른 라이브러리 또는 규칙을 사용하여 수행할 수도 있습니다.

delimiters
comments

로그인 후 복사

[단일 파일 구성 요소는 항상

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1677

Cakephp 튜토리얼

1430

라라벨 튜토리얼

1333

PHP 튜토리얼

1278

C# 튜토리얼

1257

Related knowledge

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

Vue 용 버튼에 기능을 추가하는 방법 Apr 08, 2025 am 08:51 AM

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

Vue에서 시계를 사용하는 방법 Apr 07, 2025 pm 11:36 PM

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

Vue가 이전 페이지로 돌아 오는 방법 Apr 07, 2025 pm 11:30 PM

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

Vue 다중 페이지 개발은 무엇을 의미합니까? Apr 07, 2025 pm 11:57 PM

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

React vs. Vue : Netflix는 어떤 프레임 워크를 사용합니까? Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkCalled "Gibbon"BuiltonReact, NotreactorVuedirectly.1) TeamExperience : 2) ProjectComplexity : vueforsimplerProjects, 3) CustomizationNeeds : reactoffersmoreflex.4)