How to use string templates in Vue

This time I will show you how to use the string template in Vue. What are the precautions when using the string template in Vue. The following is a practical case. Let’s take a look. .

1. HTML template and string template

HTML template: a template mounted directly on the HTML page. (i.e. non-string template)

Non-string template: Use the template specified by in a single file. In other words, what is written in html is the non-string template. .

String template: Template defined in js string.

2. PropsAttributes: 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 my-message="hello!"></child>

3, Component name case:

Note: When using a component directly in the DOM (not in String template or single-file component), we strongly recommend following the W3C specification for self-defining component names (letters are all lowercase and must include 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 must also quote

in

Use kebab-case for this custom element, such as . (2), use PascalCase:

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

When using PascalCase (camel case naming) to define a component, you can use both naming methods when referencing this custom element. That means and are both acceptable. Note, however, that the

), only kebab-case is valid. If you use camel case, it will not be rendered.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use ES6 template string

How to implement WeChat applet using form to obtain input box data

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