Introduction to Vue string templates

This article mainly introduces the introduction of Vue string template, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

String template in Vue

1. HTML template and string template

HTML template (dom template): The template mounted directly on the HTML page is the HTML structure originally written on the page and can be recognized by the browser. It will be rendered by the browser as soon as it is loaded, and then js obtains the content of the dom node to form a dom template. (That is, non-string template)
String template: A string of characters that may have been originally placed on the server, in a script tag or js string, and was not originally involved in page rendering.

2. Props attribute: HTML attributes are not case-sensitive. Therefore, when using a template other than a string template, the props attribute of camelCase (camel case naming) needs to be converted to the corresponding kebab-case (dash separated naming):

(1) , HTML template:

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

(2), String template:

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

3, Component name case:

Note: When using a component directly in the DOM (rather than in a string template or single-file component), we strongly recommend following the W3C specification for custom component names (letters must be all lowercase and must contain a hyphen). This will help you avoid conflicts with current and future HTML elements.

(1), use kebab-case:

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

When using kebab-case (dash separated names) to define a component, you also You must use kebab-case when referencing this custom element, such as .

(2), use PascalCase:

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

When using PascalCase (camel case naming) to define a component, you have two names when referencing this custom element All methods can be used. That means and are both acceptable. Note, however, that directly in the DOM (i.e. non-string templates, such as: in the <template></template> of a single component or in index.html directly CDN introduces the <p of vue.js id="app"></p>) When used, only kebab-case is valid. When using camel case, it will not be rendered.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Share the whole process of connecting Nodejs to WeChat JS-SDK

How to build Vue Mock.js Front-end independent development environment

The above is the detailed content of Introduction to Vue string templates. For more information, please follow other related articles on the PHP Chinese website!