Vue 문자열 템플릿 소개

이 기사에서는 특정 참조 가치가 있는 Vue 문자열 템플릿에 대한 소개를 주로 소개합니다. 이제 필요한 친구들은

Vue의 문자열 템플릿을 참조할 수 있습니다.

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

HTML 템플릿(dom 템플릿): HTML 페이지에 직접 마운트된 템플릿은 원래 페이지에 작성된 템플릿이며 다음과 같이 인식할 수 있습니다. 브라우저는 로드되자마자 브라우저에 의해 렌더링되며, 그런 다음 js는 dom 노드의 콘텐츠를 가져와 dom 템플릿을 형성합니다. (즉, 문자열이 아닌 템플릿)

String 템플릿: 원래 서버, 스크립트 태그 또는 js 문자열에 배치되었을 수 있으며 원래 페이지 렌더링에는 포함되지 않은 문자열입니다.

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

（ 1) HTML 템플릿:

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

（1）、HTML模板：

<!-- 在 HTML 中使用kebab-case -->
<child></child>

（2）、字符串模板：

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

3、组件名大小写：

注意：当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

(1)、使用 kebab-case:

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

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。

(2)、使用 PascalCase:

rrreee

当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板，如：在单个组件的<template></template>中 或者 index.html中直接CDN引入vue.js的<p id="app"></p>中) 使用时只有 kebab-case 是有效的，使用驼峰式，是不会渲染的。 (2), 문자열 템플릿:

rrreee

3, 구성 요소 이름 대소문자: #🎜 🎜#참고: 문자열 템플릿이나 단일 파일 구성 요소가 아닌 DOM에서 직접 구성 요소를 사용하는 경우 사용자 정의 구성 요소 이름에 대한 W3C 사양을 따르는 것이 좋습니다(문자는 모두 소문자이며 다음을 포함해야 함). 하이픈). 이는 현재 및 미래의 HTML 요소와의 충돌을 피하는 데 도움이 됩니다.

(1), kebab-case 사용:

rrreee

kebab-case(대시로 구분된 이름) 정의를 사용하는 경우 A 구성 요소 , 과 같은 맞춤 요소를 참조할 때 kebab-case도 사용해야 합니다.

(2), PascalCase 사용:rrreeePascalCase(카멜 케이스 이름 지정)를 사용하여 구성 요소를 정의하는 경우 이 사용자 정의를 참조합니다. 둘 다 요소에 명명법을 사용할 수 있습니다. 이는 및 이 모두 허용됨을 의미합니다. 그럼에도 불구하고 DOM에서 직접(즉, 단일 구성 요소의 <template></template> 또는 index.html에서 직접 CDN import vue.js&lt와 같은 문자열이 아닌 템플릿에 있음에 유의하세요. ;p id="app">

) 사용시에는 kebab-case만 유효합니다. Camel Case 사용시에는 렌더링되지 않습니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 주목하세요!

관련 추천: #🎜🎜##🎜🎜##🎜🎜# WeChat JS-SDK에 액세스하는 Nodejs의 전체 프로세스 공유#🎜🎜##🎜🎜##🎜🎜##🎜🎜# #🎜🎜#Vue+Mock.js 프론트엔드 독립 개발 환경 구축 방법#🎜🎜##🎜🎜##🎜🎜#

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