[VUE] 스타일 가이드

 

VUE로 프로젝트를 진행할 때

내가 꼭! 숙지하고 있어야 할 스타일 가이드를 정리해 보기로 했다.

---

### 필수 ###

 

# 컴포넌트 이름은 합성어를 사용한다

 

root 컴포넌트인 App과 <transition>, <component>등 Vue에서 제공되는 빌트인 컴포넌트를 제외하고

컴포넌트의 이름은 항상 합성어를 사용한다.

Vue.component('todo-item', {
    // ...
})


export default {
    name: 'TodoItem',
    // ...
}

 

 

# 컴포넌트 데이터

 

컴포넌트의 data는 반드시 함수여야 한다.

컴포넌트(i.e. new Vue를 제외한 모든곳)의 data 프로퍼티 값은 반드시 객체(object)를 반환하는 함수여야 한다.

Vue.component('some-comp', {
    data: function(){
        return {
            foo: 'bar'
        }
    }
})


//In a .vue file
export default {
    data() {
        return {
           foo: 'bar'
        }
    }
}

 

 

#Props 정의

Propn은 가능한 상세하게 정의되어야 한다.

props: {
   status: String
}


//Even better!
props: {
   status: {
      type: String,
      required: true,
      validator: function(value) {
         return [
            'syncing',
            'synced',
            version-conflict',
            'error'
         ].indexOf(value) !-- -1
      }
   }
}

 

 

# v-for에 key 지정

v-for는 key와 항상 함께 사용한다.

<ul>
   <li
      v-for="todo in todos"
      :key="todo.id"
   >
      {{ todo.text }}
   </li>
</ul>

 

 

 

# v-if와 v-for를 동시에 사용하지 마라

BUT 사용 가능한 두 가지 일반적인 경우가 있다.

 

- 리스트 목록 필터링

(e.g. v-for="user in users" v-if="user.isActive"). 이 경우 users를 새로운 computed 속성으로 칠터링된 목록으로 대체한다.(e.g. activeUsers)

 

- 숨기기 위해 리스트릐 랜더링을 피할 때

(e.g. v-for="user in users" v-if="shouldShowUsers). 이 경우 v-if를 커테이너 엘리먼트로 옮겨라(e.g. ul, ol).

 

<ul>
   <li
      v-for="user in activeUsers"
      :key="user.id"
   >
      {{ user.name }}
   </li>
</ul>


<ul v-if="shouldShowUsers">
   <li
      v-for="user in users"
      :key="user.id"
   >
      {{  user.name }}   
   </li>
</ul>

 

 

#Private 속성 이름

플러그인, mixin 등에서 커스텀 사용자 private 프로퍼티에는 항상 접두사 $_를 사용하라.

그 다음 다른 사람의 코드와 충돌을 피하려면 named scope를 포함하라.(e.g. $_yourPluginName_)

var myGreatMixin = {
   // ...
   
   methods: {
      $_myGreatMixin_update: function(){
         // ...
      }
   }
}



// EVEN BETTER!
var myGreatMixin = {
   // ...
   methods: {
      publicMethod(){
         //...
         myPrivateFunction()
      }
   }
}

function myPrivateFunction(){
   //...
}

export default myGreatmixin

 

---

 

### 매우 추천 ###

 

# 컴포넌트 파일

컴포넌트 파일은 아래와 같이 components 폴더 안에 생성한다.

 

components/

|- TodoList.vue

|- TodoItem.vue

 

 

#싱글 파일 컴토넌트 이름 규칙 지정(casing)

 

components/

|- MyComponent.vue

 

혹은

|- my-component.vue

 

 

# 베이스 컴포넌트 이름

 

components/

|- BaseButton.vue

|- BaseTable.vue

|- BaseIcon.vue

 

|- AppButton.vue

|- AppTable.vue

|- AppIcon.vue

 

|- VButton.vue

|- VTable.vue

|- VIcon.vue

 

 

# 싱글 인스턴스 컴포넌트 이름

 

components/

|- TheHeading.vue

|- TheSidebar.vue

 

 

# 강한 연관성을 가진 컴포넌트 이름

 

components/

|- TodoList.vue

|- TodoListItem.vue

|- TodoListItemButton.vue

 

|- SearchSidebar.vue

|- SearchSidebarNavigation.vue

 

 

# 컴포넌트 이름의 단어 순서 정렬

 

components/

|- SearchButtonClear.vue

|- SearchButtonRun.vue

|- SearchInputQuery.vue

 

|- SettingCheckboxTerms.vue

|- SettingCheckboxLaunchStartup.vue

 

 

# 셀프 클로징 컴포넌트

<!-- In single-file components, string templates, and JSX -->
<MyComponent/>

<!-- In DOM templates -->
<my-component></my-component>

 

 

# 템플릿에서 컴포넌트 이름 규칙 지정

<!-- In single-file components and string templates -->
<MyComponent/>

<!-- In DOM templates -->
<my-component></my-component>


//OR

<!-- Everywhere -->
<my-component></my-component>

 

 

# JS/JSX에서 컴포넌트 이름 규칙 지정(casing)

Vue.component('MyComponent', {
  // ...
})

Vue.component('my-component', {
  // ...
})


import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent',
  // ...
}

 

 

# 전체 이름 컴포넌트 이름

줄임말 쓰지 말고 전체 풀어서 직관적으로 이름 짓기

 

components/

|- StudentDashboardSettings.vue

|- UserProfileOptions.vue

 

 

# Prop 이름 규칙 지정(casing)

props: {
   greetingText: String
}

<WelcomeMessage greeting-text="hi" />

 

 

# 다중 속성 엘리먼트

속성별로 줄바꿈

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>


<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

 

 

# 템플릿에서 단순한 표현식

<!-- In a template -->
{{ normalizedFullName }}


// The complex expression has been moved to a computed property
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

 

 

# 단순한 계산된 속성

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

 

 

# 축약형 디렉티브

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>
<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>

//

<input
  @input="onInput"
  @focus="onFocus"
>
<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>

//

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>
<template v-slot:footer>
  <p>Here's some contact info</p>
</template>

<template #header>
  <h1>Here might be a page title</h1>
</template>
<template #footer>
  <p>Here's some contact info</p>
</template>

 

 

---

 

### 추천 ###

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

출처 : kr.vuejs.org/v2/style-guide/index.html