이번에는 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를 사용해야 합니다. 구성 요소 이름>.
(2), PascalCase 사용:Vue.component('MyComponentName', { /* ... */ })
입력 상자 데이터를 얻기 위해 양식을 사용하여 WeChat 애플릿을 구현하는 방법
위 내용은 Vue에서 문자열 템플릿을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!