Vue에서 문자열 템플릿을 사용하는 방법

이번에는 Vue에서 string템플릿을 사용하는 방법과 Vue에서 문자열 템플릿을 사용할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

1. HTML 템플릿 및 문자열 템플릿

HTML 템플릿: HTML 페이지에 직접 탑재되는 템플릿입니다. (즉, 문자열이 아닌 템플릿)

비문자열 템플릿: 단일 파일에서 으로 지정된 템플릿입니다. 즉, html로 작성된 템플릿은 문자열이 아닌 템플릿입니다.

문자열 템플릿: js 문자열에 정의된 템플릿입니다.

2. PropsAttributes: HTML 속성은 대소문자를 구분하지 않습니다. 따라서 문자열 템플릿이 아닌 템플릿을 사용하는 경우 camelCase(카멜 케이스 이름 지정)의 props 속성을 해당 kebab-case(대시 구분 이름 지정)로 변환해야 합니다:

(1), HTML 템플릿:

Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

(2), 문자열 템플릿:

<!-- 在 HTML 中使用kebab-case -->
<child my-message="hello!"></child>

3. 구성 요소 이름 대소문자:

참고: DOM에서 직접 구성 요소를 사용하는 경우(문자열 템플릿이나 단일 파일 구성 요소가 아닌) W3C 자체- 사양에 정의된 구성 요소 이름(모든 소문자에는 하이픈이 포함되어야 함) 이는 현재 및 미래의 HTML 요소와의 충돌을 피하는 데 도움이 됩니다.

(1), kebab-case 사용:

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

kebab-case(대시로 구분된 이름)를 사용하여 구성 요소를 정의하는 경우 < ;my-와 같은 이 맞춤 요소를

참조할 때도 kebab-case를 사용해야 합니다. 구성 요소 이름>.

(2), PascalCase 사용:

Vue.component('MyComponentName', { /* ... */ })

PascalCase(카멜 케이스 이름 지정)를 사용하여 구성 요소를 정의할 때 이 사용자 정의 요소를 참조할 때 두 가지 이름 지정 방법을 모두 사용할 수 있습니다. 이는 및 이 모두 허용됨을 의미합니다. 그러나 vue.js의

)을 사용하는 경우 kebab-case만 유효합니다. Camel Case를 사용하면 렌더링되지 않습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

ES6 템플릿 문자열을 사용하는 방법

입력 상자 데이터를 얻기 위해 양식을 사용하여 WeChat 애플릿을 구현하는 방법

위 내용은 Vue에서 문자열 템플릿을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!