대문자화된 Vue.js 컴포넌트

대문자화된 Vue.js 컴포넌트

Vue.js 컴포넌트가 대문자로 표시되는 특별한 이유가 있습니까?

많이 보는데 왜 이렇게 적혀있는지 이유를 잘 모르겠어요.CLI 저장소에도 컴포넌트에 대한 정보가 있습니다.

이는 구성 요소 생성자/정의(대문자로 구분)와 구성 요소 인스턴스를 구별하는 규칙일 뿐입니다.

클래스는 대문자로 표시되지만 클래스의 인스턴스는 대문자로 표시되지 않는 것이 일반적인 관례입니다.

const user = new User()

제가 보고 사용한 바로는 vuejs는 컴포넌트 파일이나 컴포넌트 이름의 대소문자를 신경 쓰지 않습니다.

예:

// HelloWorld.vue   
export default {
  data () {
    return {
      msg: 'Hello'
    }
  }
}

App.vue에서 사용되는 경우:

//App.vue
<template>
  <HelloWorld></HelloWorld>
  <hello-world><hello-world>
</template>
 
import HelloWorld from 'path/to/HelloWorld' //adding .vue is optional

export default {
  components: {
    HelloWorld
  }
}

부정적인 영향은 전혀 없습니다.vuejs는 W3C 표준을 적용하지 않습니다.

Vue는 사용자 지정 태그 이름에 대해 W3C 규칙을 적용하지 않지만(모두 소문자이며 하이픈을 포함해야 함) 이 규칙을 따르는 것이 모범 사례로 간주됩니다.

원천

따라서 가져온 컴포넌트를 kebab-case 또는 camelCase vuejs에서 내부적으로 확인하고 컴포넌트를 동일하게 렌더링할 수 있습니다.

React/React-Native Developers는 클래스 기반의 컴포넌트 아키텍처 때문에 컴포넌트의 대문자화에 익숙합니다.그래서 그들은 그것을 Vue에게 넘기는 경향이 있다.

Vue 엔진 자체는 상관없습니다. 둘 다 잘 해석됩니다.규약을 찾아서 고수하세요.어느 쪽이든 괜찮아요, 그냥 꾸준히 하세요.

제 개인적인 관습은 제가 직접 만든 컴포넌트(컴포넌트 폴더)를 자본화하는 것입니다.이렇게 하면 자신의 컴포넌트와 Vuetify 컴포넌트를 더 잘 구분할 수 있습니다.

<v-row class="mt-10">    // Vuetify component
   <v-col cols="12">
      <CustomTeapot />   // My component
   </v-col>
</v-row>

언급URL : https://stackoverflow.com/questions/42557946/vue-js-components-capitalized