Introduction aux modèles de chaînes Vue

Cet article présente principalement l'introduction du modèle de chaîne Vue, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Modèle de chaîne dans Vue

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

Modèle HTML (modèle dom) : Le modèle monté directement sur la page HTML est la structure HTML initialement écrite sur la page et reconnue par le navigateur. Elle sera restituée par le navigateur. dès qu'il est chargé, puis js obtient le contenu du nœud dom pour former un modèle dom. (c'est-à-dire un modèle sans chaîne)
Modèle de chaîne : une chaîne de caractères qui peut avoir été initialement placée sur le serveur, dans une balise de script ou une chaîne js, et qui n'a pas été initialement impliquée dans le rendu de la page.

2. Attributs des accessoires : les propriétés HTML ne sont pas sensibles à la casse. Par conséquent, lorsque vous utilisez un modèle autre qu'un modèle de 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）、HTML模板：

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

（2）、字符串模板：

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

3. Casse du nom du composant :

Remarque : lors de l'utilisation d'un composant directement dans le DOM (pas dans un modèle de chaîne ou composant à fichier unique), nous vous recommandons fortement de suivre la spécification W3C pour les noms de composants personnalisés (les lettres doivent être toutes en minuscules et doivent inclure un trait d'union). Cela vous aidera à éviter les conflits avec les éléments HTML actuels et futurs.

(1)、使用 kebab-case:

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

Lors de la définition d'un composant à l'aide de kebab-case (noms séparés par des tirets), vous devez également utiliser kebab lorsque vous faites référence à l'élément personnalisé -case, tel que .

(2)、使用 PascalCase:

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

Lors de la définition d'un composant à l'aide de PascalCase (nom camelCase), vous pouvez utiliser l'une ou l'autre nomenclature lors du référencement de l'élément personnalisé. Cela signifie que et sont tous deux acceptables. 注意，尽管如此，直接在 DOM (即非字符串的模板，如：在单个组件的<template></template>中 或者 index.html中直接CDN引入vue.js的<p id="app"></p>中) 使用时只有 kebab-case 是有效的，使用驼峰式，是不会渲染的。

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au chinois PHP. site web!

Recommandations associées :

Partagez l'ensemble du processus de connexion de Nodejs à WeChat JS-SDK

Que diriez-vous de Vue+Mock .js Créer un environnement de développement indépendant front-end

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!