怎么在Vue项目中使用字符串模板

　　介绍

这篇文章给大家介绍怎么在Vue项目中使用字符串模板,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

1, HTML模板和字符串模板

HTML模板:直接在HTML页面挂载的模板。(即非字符串模板)

非字符串模板:在单文件里用& lt; template> & lt;/template>指定的模板,换句话说,写在html中的就是非字符串模板。

字符串模板:在js字符串中定义的模板。

2,道具属性:html特性是不区分大小写的,所以,当使用的不是字符串模板时,camelCase(驼峰式命名)的道具属性需要转换为相对应的kebab-case(短横线分隔式命名):

(1)、html模板:

Vue.component(& # 39;孩子# 39;,,{//时间在大敌;;JavaScript 中使用,camelCase 　　道具:[& # 39;myMessage& # 39;], 　　模板:& # 39;& lt; span> {{, myMessage }} & lt;/span> & # 39; 　　})

(2),字符串模板:

& lt; !——,在,HTML 中使用kebab-case ——比; 　　& lt; child 我的信息=澳愫?“祝辞& lt;/child>

3组件名大小写:

注意:当直接在DOM中使用一个组件(而不是在字符串模板或单文件组件)的时候,我们强烈推荐遵循W3C规范中的自定义组件名(字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的HTML元素相冲突。

(1),使用kebab-case:

Vue.component (& # 39; my-component-name& # 39;,, {,/*…, */,});

当使用kebab-case(短横线分隔命名)定义一个组件时,你也必须在引用这个自定义元素时使用kebab-case,例如& lt; my-component-name>。

(2),使用PascalCase:

Vue.component (& # 39; MyComponentName& # 39;,, {,/*…, */,})

当使用PascalCase(驼峰式命名)定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说& lt; my-component-name>和& lt; MyComponentName>都是可接受的。注意,尽管如此,直接在DOM(即非字符串的模板,如:在单个组件的& lt; template> & lt;/template>中或者index . html中直接CDN引入vue.js的& lt; div id=癮pp"祝辞& lt;/div>中)使用时只有kebab-case是有效的,使用驼峰式,是不会渲染的。

关于怎么在Vue项目中使用字符串模板就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

怎么在Vue项目中使用字符串模板