Home > Web Front-end > JS Tutorial > body text

How to use string templates in Vue

php中世界最好的语言
Release: 2018-05-29 10:19:44
Original
2653 people have browsed it

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>'
})
Copy after login

(2), String template:

<!-- 在 HTML 中使用kebab-case -->
<child my-message="hello!"></child>
Copy after login

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', { /* ... */ });
Copy after login

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', { /* ... */ })
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!