Comment utiliser des modèles de chaînes dans Vue

Cette fois, je vais vous montrer comment utiliser le modèle string dans Vue. Quelles sont les précautions lors de l'utilisation du modèle de chaîne dans Vue. Voici des cas pratiques. regarder. .

1. Modèle HTML et modèle de chaîne

Modèle HTML : un modèle monté directement sur la page HTML. (c'est-à-dire un modèle sans chaîne)

Modèle sans chaîne : Le modèle spécifié par modèle. .

Modèle de chaîne : modèle défini dans la chaîne js.

2. PropsAttributs : les attributs HTML ne sont pas sensibles à la casse. Par conséquent, lors de l'utilisation d'un modèle sans chaîne, l'attribut props de camelCase (dénomination de cas de chameau) doit être converti en cas de kebab correspondant (dénomination séparée par des tirets) :

(1), modèle HTML :

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

(2), Modèle de chaîne :

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

3. Casse du nom du composant :

Remarque : lors de l'utilisation d'un composant directement dans le DOM (plutôt que dans modèles de chaînes ou composants à fichier unique), nous vous recommandons fortement de suivre la spécification du W3C pour les noms de composants personnalisés (toutes les lettres minuscules doivent inclure un trait d'union). Cela vous aidera à éviter les conflits avec les éléments HTML actuels et futurs. (1), utilisez kebab-case :

Lorsque vous utilisez kebab-case (noms séparés par des tirets) pour définir un composant, vous devez également référencer Vue.component('my-component-name', { /* ... */ }); 🎜 >Utilisez kebab-case pour cet élément personnalisé, tel que .

(2), utilisez PascalCase :

Lorsque vous utilisez PascalCase (nommage en cas de chameau) pour définir un composant, vous pouvez utiliser les deux méthodes de dénomination lors du référencement de cet élément personnalisé. Cela signifie que et sont tous deux acceptables. Notez cependant que le

), seul le cas kebab est valide. Si vous utilisez le cas camel, il ne sera pas rendu.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les chaînes de modèles ES6

Comment implémenter l'applet WeChat à l'aide d'un formulaire pour obtenir une zone de saisie Données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!