1. HTML templates and string templates
HTML template: a template mounted directly on the HTML page. (i.e. non-string template)
Non-string template: A template specified in a single file using <template></template>. In other words, the non-string template written in html is a non-string template.
String template: a template defined in a js string.
2. Props attribute: HTML attribute is case-insensitive. Therefore, when the string template is not used, the props attribute of camelCase (camel-style naming) needs to be converted to the corresponding kebab-case (short horizontal line-separated naming):
(1) HTML template:
('child', {
// Use camelCase in JavaScriptprops: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
(2) String template:
<!-- exist HTML Used inkebab-case --> <child my-message="hello!"></child>
3. Component name uppercase and uppercase:
Note: When using a component directly in the DOM (rather than a string template or single file component), we strongly recommend following the custom component name (letters are all lowercase and must contain a hyphen) in the W3C specification. This will help you avoid conflicts with current and future HTML elements.
(1) Use kebab-case:
('my-component-name', { /* ... */ });
When defining a component using kebab-case (short horizontally separated naming), you must also use kebab-case when referencing this custom element, such as <my-component-name>.
(2) Use PascalCase:
('MyComponentName', { /* ... */ })
When defining a component using PascalCase (camel naming), both nomenclatures can be used when you reference this custom element. That is to say, both <my-component-name> and <MyComponentName> are acceptable. Note that, despite this, only kebab-case is valid when used directly in DOM (i.e., non-string templates, such as in <template></template> of a single component or in <div></div> introduced directly in CDN) and will not render when used.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.