Vue中的字符串模板的使用
1、HTML模板和字符串模板
HTML模板：直接在HTML頁(yè)面掛載的模板。（即非字符串模板）
非字符串模板：在單文件里用 <template></template> 指定的模板，換句話說(shuō)，寫(xiě)在 html 中的就是非字符串模板。
字符串模板：在js字符串中定義的模板。
2、Props屬性：HTML 特性是不區(qū)分大小寫(xiě)的。所以，當(dāng)使用的不是字符串模板時(shí)，camelCase (駝峰式命名) 的 props屬性需要轉(zhuǎn)換為相對(duì)應(yīng)的 kebab-case (短橫線分隔式命名)：
（1）、HTML模板：
Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
（2）、字符串模板：
<!-- 在 HTML 中使用kebab-case --> <child my-message="hello!"></child>
3、組件名大小寫(xiě)：
注意：當(dāng)直接在 DOM 中使用一個(gè)組件 (而不是在字符串模板或單文件組件) 的時(shí)候，我們強(qiáng)烈推薦遵循 W3C 規(guī)范中的自定義組件名 (字母全小寫(xiě)且必須包含一個(gè)連字符)。這會(huì)幫助你避免和當(dāng)前以及未來(lái)的 HTML 元素相沖突。
(1)、使用 kebab-case:
Vue.component('my-component-name', { /* ... */ });
當(dāng)使用 kebab-case (短橫線分隔命名) 定義一個(gè)組件時(shí)，你也必須在引用這個(gè)自定義元素時(shí)使用 kebab-case，例如 <my-component-name>。
(2)、使用 PascalCase:
Vue.component('MyComponentName', { /* ... */ })
當(dāng)使用 PascalCase (駝峰式命名) 定義一個(gè)組件時(shí)，你在引用這個(gè)自定義元素時(shí)兩種命名法都可以使用。也就是說(shuō) <my-component-name> 和 <MyComponentName> 都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板，如：在單個(gè)組件的<template></template>中 或者 index.html中直接CDN引入vue.js的<div id="app"></div>中) 使用時(shí)只有 kebab-case 是有效的，使用駝峰式，是不會(huì)渲染的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue自定義指令的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue解決一個(gè)方法同時(shí)發(fā)送多個(gè)請(qǐng)求的問(wèn)題
今天小編就為大家分享一篇vue解決一個(gè)方法同時(shí)發(fā)送多個(gè)請(qǐng)求的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue Mint UI mt-swipe的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue3 組合式API defineEmits() 與 emits 組
在Vue中,defineEmits()是Vue3組合式API中用于聲明自定義事件的,而emits選項(xiàng)則用于Vue2和Vue3的選項(xiàng)式API中,defineEmits()允許使用字符串?dāng)?shù)組或?qū)ο笮问铰暶魇录?emits選項(xiàng)也支持這兩種形式,且驗(yàn)證函數(shù)可以驗(yàn)證事件參數(shù),這兩種方法都是為了更規(guī)范地在組件間通信2024-09-09
vue2 拖動(dòng)排序 vuedraggable組件的實(shí)現(xiàn)
這篇文章主要介紹了vue2 拖動(dòng)排序 vuedraggable組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了uniapp?vue與nvue輪播圖輪播圖組件的實(shí)例代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
Axios?是一個(gè)簡(jiǎn)單的基于?promise?的?HTTP?客戶端，適用于瀏覽器和?node.js。Axios?在具有非?？蓴U(kuò)展的接口的小包中提供了一個(gè)簡(jiǎn)單易用的庫(kù)，這篇文章主要介紹了vue3-HTTP請(qǐng)求之a(chǎn)xios,需要的朋友可以參考下2022-12-12
vue-cli構(gòu)建項(xiàng)目使用 less的方法
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目使用 less，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了Vue.js表單控件實(shí)踐,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子
今天小編就為大家分享一篇Vue axios 將傳遞的json數(shù)據(jù)轉(zhuǎn)為form data的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10