怎麼使用Vue中字串模板

這次帶給大家怎麼使用Vue中字串模板，使用Vue中字串模板的注意事項有哪些，下面就是實戰案例，一起來看一下。

1、HTML範本與字串範本

HTML範本：直接在HTML頁面掛載的範本。 （即非字串模板）

非字串模板：在單一檔案裡用 指定的模板，換句話說，寫在html 中的就是非字串模板。

字串範本：在js字串中定義的範本。

2、Props屬性：HTML 特性是不區分大小寫的。所以，當使用的不是字串模板時，camelCase (駝峰式命名) 的props屬性需要轉換為相對應的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、元件名稱大小寫：

#注意：當直接在DOM 中使用一個元件(而不是在字串模板或單一檔案元件) 的時候，我們強烈建議遵循W3C 規範中的自定義元件名(字母全小寫且必須包含一個連字號)。這會幫助你避免和目前以及未來的 HTML 元素相衝突。

(1)、使用kebab-case:

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

當使用kebab-case (短橫線分隔命名) 定義一個元件時，你也必須在引用#這個自訂元素時使用kebab-case，例如。

(2)、使用 PascalCase:

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

當使用 PascalCase (駝峰式命名) 定義一個元件時，你在引用這個自訂元素時兩種命名法都可以使用。也就是說 和 都是可以接受的。注意，儘管如此，直接在DOM (即非字串的模板，如：在單一組件的中或index.html中直接CDN引入vue.js的

中) 使用時只有kebab-case 是有效的，使用駝峰式，是不會渲染的。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

怎麼使用ES6模版字串

#怎麼實作微信小程式使用form表單取得輸入框數據

以上是怎麼使用Vue中字串模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！