Vue中的字符串模板的使⽤
1、HTML模板和字符串模板
HTML模板：直接在HTML页⾯挂载的模板。（即⾮字符串模板）
⾮字符串模板：在单⽂件⾥⽤ <template></template> 指定的模板，换句话说，写在 html 中的就是⾮字符串模板。
字符串模板：在js字符串中定义的模板。
2、Props属性：HTML 特性是不区分⼤⼩写的。所以，当使⽤的不是字符串模板时，camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名)：
（1）、HTML模板：
Vueponent('child', {
// 在 JavaScript 中使⽤ camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
（2）、字符串模板：
<!-- 在 HTML 中使⽤kebab-case -->
<child my-message="hello!"></child>
3、组件名⼤⼩写：
注意：当直接在 DOM 中使⽤⼀个组件 (⽽不是在字符串模板或单⽂件组件) 的时候，我们强烈推荐遵循 W3C 规范中的⾃定义组件名 (字母全⼩写且必须包含⼀个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
(1)、使⽤ kebab-case:
Vueponent('my-component-name', { /* ... */ });
当使⽤ kebab-case (短横线分隔命名) 定义⼀个组件时，你也必须在引⽤这个⾃定义元素时使⽤ kebab-
case，例如 <my-component-name>。
(2)、使⽤ PascalCase:
js在字符串中添加字符Vueponent('MyComponentName', { /* ... */ })
当使⽤ PascalCase (驼峰式命名) 定义⼀个组件时，你在引⽤这个⾃定义元素时两种命名法都可以使⽤。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即⾮字符串的模板，如：在单个组件的<template></template>中或者 index.html中直接CDN引⼊vue.js的<div id="app"></div>中) 使⽤时只有 kebab-case 是有效的，使⽤驼峰式，是不会渲染的。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。