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 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.
(1)、HTML模板:
Vue.component('child', { // 在 JavaScript 中使用 camelCase props: ['myMessage'], template: '<span>{{ myMessage }}</span>' })
(2)、字符串模板:
<!-- 在 HTML 中使用kebab-case --> <child></child>
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 注意,尽管如此,直接在 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 :
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!